feat(ui,dashboard): Add DataTable block (#10024)

**What**
- Adds opinionated DataTable block to `@medusajs/ui` 
- Adds new DataTable to `@medusajs/dashboard` that uses the above mentioned block as the primitive.

The PR also replaces the table on /customer-groups and the variants table on /products/:id with the new DataTable, to provide an example of it's usage. The previous DataTable component has been renamed to `_DataTable` and has been deprecated.

**Note**
This PR has a lot of LOC. 5,346 of these changes are the fr.json file, which wasn't formatted correctly before. When adding the new translations needed for this PR the file was formatted which caused each line to change to have the proper indentation.

Resolves CMRC-333

packages/design-system/ui/src/components/checkbox/checkbox.tsx

@@ -5,13 +5,16 @@ import * as Primitives from "@radix-ui/react-checkbox"
 import * as React from "react"
 
 import { clx } from "@/utils/clx"
+import { CheckboxCheckedState } from "./types"
 
 /**
  * This component is based on the [Radix UI Checkbox](https://www.radix-ui.com/primitives/docs/components/checkbox) primitive.
  */
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof Primitives.Root>,
-  React.ComponentPropsWithoutRef<typeof Primitives.Root>
+  React.ComponentPropsWithoutRef<typeof Primitives.Root> & {
+    checked?: CheckboxCheckedState | undefined
+  }
 >(({ className, checked, ...props }, ref) => {
   return (
     <Primitives.Root
@@ -19,13 +22,13 @@ const Checkbox = React.forwardRef<
       ref={ref}
       checked={checked}
       className={clx(
-        "group relative inline-flex h-5 w-5 items-center justify-center outline-none ",
+        "group inline-flex h-5 w-5 items-center justify-center outline-none ",
         className
       )}
     >
       <div
         className={clx(
-          "text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base [&_path]:shadow-details-contrast-on-bg-interactive transition-fg h-[14px] w-[14px] rounded-[3px]",
+          "text-ui-fg-on-inverted bg-ui-bg-base shadow-borders-base [&_path]:shadow-details-contrast-on-bg-interactive transition-fg h-[15px] w-[15px] rounded-[3px]",
           "group-disabled:cursor-not-allowed group-disabled:opacity-50",
           "group-focus-visible:!shadow-borders-interactive-with-focus",
           "group-hover:group-enabled:group-data-[state=unchecked]:bg-ui-bg-base-hover",

packages/design-system/ui/src/components/checkbox/index.ts

@@ -1 +1,2 @@
 export * from "./checkbox"
+export * from "./types"

packages/design-system/ui/src/components/checkbox/types.ts

@@ -0,0 +1,3 @@
+import { CheckedState } from "@radix-ui/react-checkbox"
+
+export type CheckboxCheckedState = CheckedState