feat(dashboard): Product create from - details (#7121)

**What**
- First part of the product creation form.
- New components:
  - ChipInput - Allows users to input chips into a input field. Chips are created by hitting the `,` or `Enter / Return` keys. Deleting a chip is done by hitting `Backspace` when the cursor is next to chip, or clicking the `X` button in the chip. Used for inputting option values.
  - SortableList - A sortable drag-n-drop list that allows the user to re-arrange the order of items. Used for re-arranging the ranking of variants.
  - ChipGroup - New re-usable component that is used to render a group of values as Chips. This should be used for SplitView form items.
  - CategoryCombobox - (WIP) Nested Combobox component for selecting multiple categories a product should be associated with.
- New hooks:
  - useComboboxData - Hook for easily managing the state of comboboxes.
  - useDebouncedSearch - Hook for managing debounced search queries.

packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx

@@ -183,6 +183,8 @@ export const DataTableRoot = <TData,>({
                 const to = navigateTo ? navigateTo(row) : undefined
                 const isRowDisabled = hasSelect && !row.getCanSelect()
 
+                const isOdd = row.depth % 2 !== 0
+
                 return (
                   <Table.Row
                     key={row.id}
@@ -190,6 +192,7 @@ export const DataTableRoot = <TData,>({
                     className={clx(
                       "transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
                       {
+                        "bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
                         "cursor-pointer": !!to,
                         "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover":
                           row.getIsSelected(),
@@ -228,6 +231,8 @@ export const DataTableRoot = <TData,>({
                           className={clx({
                             "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
+                            "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
+                              isOdd && isStickyCell,
                             "left-[68px]":
                               isStickyCell && hasSelect && !isSelectCell,
                             "after:bg-ui-border-base":