feat(dashboard, medusa, medusa-js, medusa-react, icons): DataGrid, partial Product domain, and ProductVariant hook (#6428)

The PR for the Products section is growing quite large, so I would like to merge this PR that contains a lot of the ground work before moving onto finalizing the rest of the domain.

**Note**
Since the PR contains changes to the core, that the dashboard depends on, the staging env will not work. To preview this PR, you will need to run it locally. 

## `@medusajs/medusa`

**What**
- Adds missing query params to `GET /admin/products/:id/variants`
- `options.values` has been added to the default relations of admin product endpoints.

## `medusa-react`

**What**
- Adds missing hook for `GET /admin/products/:id/variants`

## `@medusajs/dashboard`
- Adds base implementation for `DataGrid` component (formerly `BulkEditor`) (WIP)
- Adds `/products` overview page
- Adds partial `/products/create` page for creating new products (WIP - need to go over design w/ Ludvig before continuing)
- Adds `/products/:id` details page
- Adds `/products/:id/gallery` page for inspecting a products images in fullscreen.
- Adds `/products/:id/edit` page for editing the general information of a product
- Adds `/products/:id/attributes` page for editing the attributes information of a product
- Adds `/products/:id/sales-channels` page for editing which sales channels a product is available in
- Fixes a bug in `DataTable` where a table with two fixed columns would not display correctly

For the review its not important to test the DataGrid, as it is still WIP, and I need to go through some minor changes to the behaviour with Ludvig, as virtualizing it adds some constraints.

## `@medusajs/icons`

**What**
- Pulls latest icons from Figma

## TODO in next PR
- [ ] Fix the typing of POST /admin/products/:id as it is currently not possible to delete any of the nullable fields once they have been added. Be aware of this when reviewing this PR.
- [ ] Wrap up `/products/create` page
- [ ] Add `/products/:id/media` page for managing media associated with the product.
- [ ] Add `/products/id/options` for managing product options (need Ludvig to rethink this as the current API is very limited and we can implement the current design as is.)
- [ ] Add `/products/:id/variants/:id` page for editing a variant. (Possibly concat all of these into one BulkEditor page?)

packages/admin-next/dashboard/src/components/common/country-select/country-select.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react"
+import { ComponentPropsWithoutRef, forwardRef } from "react"
 
 import { TrianglesMini } from "@medusajs/icons"
 import { clx } from "@medusajs/ui"
@@ -7,7 +7,7 @@ import { countries } from "../../../lib/countries"
 
 export const CountrySelect = forwardRef<
   HTMLSelectElement,
-  React.ComponentPropsWithoutRef<"select"> & { placeholder?: string }
+  ComponentPropsWithoutRef<"select"> & { placeholder?: string }
 >(({ className, disabled, placeholder, ...props }, ref) => {
   const { t } = useTranslation()
 
@@ -15,7 +15,7 @@ export const CountrySelect = forwardRef<
     <div className="relative">
       <TrianglesMini
         className={clx(
-          "absolute right-2 top-1/2 -translate-y-1/2 text-ui-fg-muted transition-fg pointer-events-none",
+          "text-ui-fg-muted transition-fg pointer-events-none absolute right-2 top-1/2 -translate-y-1/2",
           {
             "text-ui-fg-disabled": disabled,
           }
@@ -24,7 +24,7 @@ export const CountrySelect = forwardRef<
       <select
         disabled={disabled}
         className={clx(
-          "appearance-none bg-ui-bg-field shadow-buttons-neutral transition-fg flex w-full select-none items-center justify-between rounded-md outline-none px-2 py-1 txt-compact-small",
+          "bg-ui-bg-field shadow-buttons-neutral transition-fg txt-compact-small flex w-full select-none appearance-none items-center justify-between rounded-md px-2 py-1.5 outline-none",
           "placeholder:text-ui-fg-muted text-ui-fg-base",
           "hover:bg-ui-bg-field-hover",
           "focus-visible:shadow-borders-interactive-with-active data-[state=open]:!shadow-borders-interactive-with-active",

packages/admin-next/dashboard/src/components/common/handle-input/handle-input.tsx

@@ -0,0 +1,24 @@
+import { Input, Text } from "@medusajs/ui"
+import { ComponentProps, ElementRef, forwardRef } from "react"
+
+export const HandleInput = forwardRef<
+  ElementRef<typeof Input>,
+  ComponentProps<typeof Input>
+>((props, ref) => {
+  return (
+    <div className="relative">
+      <div className="absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r">
+        <Text
+          className="text-ui-fg-muted"
+          size="small"
+          leading="compact"
+          weight="plus"
+        >
+          /
+        </Text>
+      </div>
+      <Input ref={ref} {...props} className="pl-10" />
+    </div>
+  )
+})
+HandleInput.displayName = "HandleInput"

packages/admin-next/dashboard/src/components/common/handle-input/index.ts

@@ -0,0 +1 @@
+export * from "./handle-input"