@medusajs/dashboard 3.0.0-snapshot-20251216145629 → 3.0.0-snapshot-20260102134455

package/dist/{product-create-7YTRHZQQ.mjs → product-create-UEVW5JO4.mjs}

@@ -1,12 +1,13 @@
 import {
   ChipGroup
 } from "./chunk-X5VECN6S.mjs";
+import {
+  ChipInput,
+  SortableList
+} from "./chunk-XD72PXRS.mjs";
 import {
   HandleInput
 } from "./chunk-7OYLCEKK.mjs";
-import {
-  ChipInput
-} from "./chunk-XDJ7OMBR.mjs";
 import {
   useSalesChannelTableColumns,
   useSalesChannelTableEmptyState,
@@ -16,32 +17,32 @@ import {
 import "./chunk-BTYBTKWK.mjs";
 import {
   CategoryCombobox
-} from "./chunk-Y2YVTIJI.mjs";
+} from "./chunk-CW5PQUJ6.mjs";
 import {
   useComboboxData
 } from "./chunk-3TZOFKX2.mjs";
 import {
   Combobox
-} from "./chunk-OFN7DIZA.mjs";
+} from "./chunk-OYHFHBNL.mjs";
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
   UploadMediaFormItem,
   decorateVariantsWithDefaultValues,
   normalizeProductFormValues
-} from "./chunk-DODQ3KJT.mjs";
+} from "./chunk-3RRA56WC.mjs";
 import "./chunk-ZQRKUG6J.mjs";
 import {
   DataGrid,
   createDataGridHelper,
   createDataGridPriceColumns
-} from "./chunk-CCQD65EY.mjs";
+} from "./chunk-FKNW5MLZ.mjs";
 import "./chunk-DK4WIVY6.mjs";
 import "./chunk-BYOPZAGX.mjs";
-import "./chunk-R4ZOO4ON.mjs";
 import {
   DataTable
 } from "./chunk-KCWP7RF5.mjs";
+import "./chunk-R4ZOO4ON.mjs";
 import "./chunk-C76H5USB.mjs";
 import "./chunk-DFFLVEZ5.mjs";
 import {
@@ -63,7 +64,7 @@ import {
 import {
   FormExtensionZone,
   useExtendableForm
-} from "./chunk-UULAOAFM.mjs";
+} from "./chunk-772OR7OQ.mjs";
 import "./chunk-2SSUH2HJ.mjs";
 import "./chunk-ONB3JEHR.mjs";
 import "./chunk-YCDDT44O.mjs";
@@ -90,32 +91,32 @@ import "./chunk-535OVBXR.mjs";
 import {
   Form
 } from "./chunk-OBQI23QM.mjs";
-import "./chunk-GRZSG4EP.mjs";
+import "./chunk-74WPAWMW.mjs";
 import "./chunk-I4OBEAOJ.mjs";
 import "./chunk-HI6URQ7H.mjs";
 import "./chunk-6CLQKVAU.mjs";
+import "./chunk-ML7BA2NY.mjs";
 import "./chunk-KI7TOXBR.mjs";
-import "./chunk-UJ2TMPV4.mjs";
-import "./chunk-23GTCEOV.mjs";
+import "./chunk-QBIQEVTU.mjs";
 import "./chunk-WAXMT4IY.mjs";
 import "./chunk-DYDGGABK.mjs";
-import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-CN7JXSGW.mjs";
+import "./chunk-LGNTHZ5Y.mjs";
 import "./chunk-5BQQRHQS.mjs";
-import "./chunk-HTCYX4VD.mjs";
+import "./chunk-G35UUG2P.mjs";
 import "./chunk-5AFMB7XQ.mjs";
-import "./chunk-UWY5ZV66.mjs";
+import "./chunk-VQ73B7ZZ.mjs";
 import "./chunk-A63RZVX6.mjs";
 import "./chunk-HBXV7ENS.mjs";
 import "./chunk-CDORR33H.mjs";
-import "./chunk-4JQR6QNW.mjs";
-import "./chunk-FYWHE3W5.mjs";
-import "./chunk-OSHH5GAS.mjs";
+import "./chunk-333HK6Y6.mjs";
+import "./chunk-GJN5SXGZ.mjs";
+import "./chunk-Q34TRFIW.mjs";
+import "./chunk-3BF5SC66.mjs";
 import {
   useSalesChannel,
   useSalesChannels
-} from "./chunk-2XTBDCGE.mjs";
-import "./chunk-3BF5SC66.mjs";
+} from "./chunk-DWH2OQFK.mjs";
 import {
   useStore
 } from "./chunk-VCSSQVPD.mjs";
@@ -126,9 +127,10 @@ import {
   usePricePreferences
 } from "./chunk-SQDIZZDW.mjs";
 import {
-  useCreateProduct
-} from "./chunk-Z6BFNHEO.mjs";
-import "./chunk-HGRIOEAR.mjs";
+  useCreateProduct,
+  useProductOptions
+} from "./chunk-UCYUWNJL.mjs";
+import "./chunk-7AXHHXCX.mjs";
 import "./chunk-FXYH54JP.mjs";
 import "./chunk-774WSTCC.mjs";
 import {
@@ -140,8 +142,8 @@ import "./chunk-QZ7TP4HQ.mjs";
 import { useTranslation as useTranslation10 } from "react-i18next";
 
 // src/routes/products/product-create/components/product-create-form/product-create-form.tsx
-import { Button as Button5, ProgressTabs, toast } from "@medusajs/ui";
-import { useEffect as useEffect2, useMemo as useMemo4, useState as useState4 } from "react";
+import { Button as Button4, ProgressTabs, toast } from "@medusajs/ui";
+import { useEffect as useEffect2, useMemo as useMemo4, useState as useState3 } from "react";
 import { useWatch as useWatch4 } from "react-hook-form";
 import { useTranslation as useTranslation9 } from "react-i18next";
 
@@ -167,7 +169,13 @@ var ProductCreateGeneralSection = ({
           render: ({ field }) => {
             return /* @__PURE__ */ jsxs(Form.Item, { children: [
               /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.title.label") }),
-              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, placeholder: t("products.fields.title.placeholder") }) })
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...field,
+                  placeholder: t("products.fields.title.placeholder")
+                }
+              ) })
             ] });
           }
         }
@@ -180,7 +188,13 @@ var ProductCreateGeneralSection = ({
           render: ({ field }) => {
             return /* @__PURE__ */ jsxs(Form.Item, { children: [
               /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("products.fields.subtitle.label") }),
-              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, placeholder: t("products.fields.subtitle.placeholder") }) })
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...field,
+                  placeholder: t("products.fields.subtitle.placeholder")
+                }
+              ) })
             ] });
           }
         }
@@ -200,7 +214,13 @@ var ProductCreateGeneralSection = ({
                   children: t("fields.handle")
                 }
               ),
-              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(HandleInput, { ...field, placeholder: t("products.fields.handle.placeholder") }) })
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                HandleInput,
+                {
+                  ...field,
+                  placeholder: t("products.fields.handle.placeholder")
+                }
+              ) })
             ] });
           }
         }
@@ -214,7 +234,13 @@ var ProductCreateGeneralSection = ({
         render: ({ field }) => {
           return /* @__PURE__ */ jsxs(Form.Item, { children: [
             /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("products.fields.description.label") }),
-            /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Textarea, { ...field, placeholder: t("products.fields.description.placeholder") }) })
+            /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...field,
+                placeholder: t("products.fields.description.placeholder")
+              }
+            ) })
           ] });
         }
       }
@@ -515,197 +541,23 @@ function formatFileSize(bytes, decimalPlaces = 2) {
 }
 
 // src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
-import { XMarkMini } from "@medusajs/icons";
 import {
   Alert,
-  Button,
   Checkbox,
-  clx as clx2,
+  clx,
   Heading,
   Hint,
-  IconButton as IconButton3,
   InlineTip,
-  Input as Input2,
   Label,
   Text as Text2
 } from "@medusajs/ui";
 import {
-  Controller,
   useFieldArray as useFieldArray2,
   useWatch
 } from "react-hook-form";
 import { useTranslation as useTranslation3 } from "react-i18next";
-
-// src/components/common/sortable-list/sortable-list.tsx
-import {
-  DndContext as DndContext2,
-  DragOverlay as DragOverlay2,
-  KeyboardSensor as KeyboardSensor2,
-  PointerSensor as PointerSensor2,
-  defaultDropAnimationSideEffects as defaultDropAnimationSideEffects2,
-  useSensor as useSensor2,
-  useSensors as useSensors2
-} from "@dnd-kit/core";
-import {
-  SortableContext as SortableContext2,
-  arrayMove as arrayMove2,
-  sortableKeyboardCoordinates as sortableKeyboardCoordinates2,
-  useSortable as useSortable2
-} from "@dnd-kit/sortable";
-import { CSS as CSS2 } from "@dnd-kit/utilities";
-import { DotsSix as DotsSix2 } from "@medusajs/icons";
-import { IconButton as IconButton2, clx } from "@medusajs/ui";
-import {
-  Fragment,
-  createContext,
-  useContext,
-  useMemo,
-  useState as useState2
-} from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var List = ({
-  items,
-  onChange,
-  renderItem
-}) => {
-  const [active, setActive] = useState2(null);
-  const [activeItem, activeIndex] = useMemo(() => {
-    if (active === null) {
-      return [null, null];
-    }
-    const index = items.findIndex(({ id }) => id === active.id);
-    return [items[index], index];
-  }, [active, items]);
-  const sensors = useSensors2(
-    useSensor2(PointerSensor2),
-    useSensor2(KeyboardSensor2, {
-      coordinateGetter: sortableKeyboardCoordinates2
-    })
-  );
-  const handleDragStart = ({ active: active2 }) => {
-    setActive(active2);
-  };
-  const handleDragEnd = ({ active: active2, over }) => {
-    if (over && active2.id !== over.id) {
-      const activeIndex2 = items.findIndex(({ id }) => id === active2.id);
-      const overIndex = items.findIndex(({ id }) => id === over.id);
-      onChange(arrayMove2(items, activeIndex2, overIndex));
-    }
-    setActive(null);
-  };
-  const handleDragCancel = () => {
-    setActive(null);
-  };
-  return /* @__PURE__ */ jsxs3(
-    DndContext2,
-    {
-      sensors,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel,
-      children: [
-        /* @__PURE__ */ jsx3(Overlay, { children: activeItem && activeIndex !== null ? renderItem(activeItem, activeIndex) : null }),
-        /* @__PURE__ */ jsx3(SortableContext2, { items, children: /* @__PURE__ */ jsx3(
-          "ul",
-          {
-            role: "application",
-            className: "flex list-inside list-none list-image-none flex-col p-0",
-            children: items.map((item, index) => /* @__PURE__ */ jsx3(Fragment, { children: renderItem(item, index) }, item.id))
-          }
-        ) })
-      ]
-    }
-  );
-};
-var dropAnimationConfig2 = {
-  sideEffects: defaultDropAnimationSideEffects2({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-var Overlay = ({ children }) => {
-  return /* @__PURE__ */ jsx3(
-    DragOverlay2,
-    {
-      className: "shadow-elevation-card-hover overflow-hidden rounded-md [&>li]:border-b-0",
-      dropAnimation: dropAnimationConfig2,
-      children
-    }
-  );
-};
-var SortableItemContext = createContext(null);
-var useSortableItemContext = () => {
-  const context = useContext(SortableItemContext);
-  if (!context) {
-    throw new Error(
-      "useSortableItemContext must be used within a SortableItemContext"
-    );
-  }
-  return context;
-};
-var Item = ({
-  id,
-  className,
-  children
-}) => {
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef,
-    setActivatorNodeRef,
-    transform,
-    transition
-  } = useSortable2({ id });
-  const context = useMemo(
-    () => ({
-      attributes,
-      listeners,
-      ref: setActivatorNodeRef,
-      isDragging
-    }),
-    [attributes, listeners, setActivatorNodeRef, isDragging]
-  );
-  const style = {
-    opacity: isDragging ? 0.4 : void 0,
-    transform: CSS2.Translate.toString(transform),
-    transition
-  };
-  return /* @__PURE__ */ jsx3(SortableItemContext.Provider, { value: context, children: /* @__PURE__ */ jsx3(
-    "li",
-    {
-      className: clx("transition-fg flex flex-1 list-none", className),
-      ref: setNodeRef,
-      style,
-      children
-    }
-  ) });
-};
-var DragHandle = () => {
-  const { attributes, listeners, ref } = useSortableItemContext();
-  return /* @__PURE__ */ jsx3(
-    IconButton2,
-    {
-      variant: "transparent",
-      size: "small",
-      ...attributes,
-      ...listeners,
-      ref,
-      className: "cursor-grab touch-none active:cursor-grabbing",
-      children: /* @__PURE__ */ jsx3(DotsSix2, { className: "text-ui-fg-muted" })
-    }
-  );
-};
-var SortableList = Object.assign(List, {
-  Item,
-  DragHandle
-});
-
-// src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var getPermutations = (data) => {
   if (data.length === 0) {
     return [];
@@ -731,10 +583,6 @@ var ProductCreateVariantsSection = ({
   form
 }) => {
   const { t } = useTranslation3();
-  const options = useFieldArray2({
-    control: form.control,
-    name: "options"
-  });
   const variants = useFieldArray2({
     control: form.control,
     name: "variants"
@@ -756,72 +604,147 @@ var ProductCreateVariantsSection = ({
   });
   const showInvalidOptionsMessage = !!form.formState.errors.options?.length;
   const showInvalidVariantsMessage = form.formState.errors.variants?.root?.message === "invalid_length";
-  const handleOptionValueUpdate = (index, value) => {
-    const { isTouched: hasUserSelectedVariants } = form.getFieldState("variants");
-    const newOptions = [...watchedOptions];
-    newOptions[index].values = value;
-    const permutations = getPermutations(
-      newOptions.filter(({ values }) => values.length)
+  const { product_options = [], isLoading } = useProductOptions({
+    is_exclusive: false
+  });
+  const productOptionChoices = useMemo(() => {
+    const existingChoices = product_options.map((option) => ({
+      value: option.id,
+      label: option.title
+    }));
+    const newChoices = watchedOptions.filter((opt) => !opt.id && opt.title).map((opt) => ({
+      value: opt.title,
+      label: opt.title
+    }));
+    return [...existingChoices, ...newChoices];
+  }, [product_options, watchedOptions]);
+  const selectedOptionValues = useMemo(() => {
+    return watchedOptions.map((opt) => opt.id || opt.title);
+  }, [watchedOptions]);
+  const handleProductOptionSelect = (optionValues) => {
+    const existingOptionIds = optionValues.filter(
+      (val) => product_options.some((opt) => opt.id === val)
     );
-    const oldVariants = [...watchedVariants];
-    const findMatchingPermutation = (options2) => {
-      return permutations.find(
-        (permutation) => Object.keys(options2).every((key) => options2[key] === permutation[key])
-      );
-    };
-    const newVariants = oldVariants.reduce((variants2, variant) => {
-      const match = findMatchingPermutation(variant.options);
-      if (match) {
-        variants2.push({
-          ...variant,
-          title: getVariantName(match),
-          options: match
-        });
-      }
-      return variants2;
-    }, []);
-    const usedPermutations = new Set(
-      newVariants.map((variant) => variant.options)
+    const newOptionTitles = optionValues.filter(
+      (val) => !product_options.some((opt) => opt.id === val)
     );
-    const unusedPermutations = permutations.filter(
-      (permutation) => !usedPermutations.has(permutation)
+    const allSelectedOptions = [];
+    const selectedProductOptions = product_options.filter(
+      (option) => existingOptionIds.includes(option.id)
     );
-    unusedPermutations.forEach((permutation) => {
-      newVariants.push({
-        title: getVariantName(permutation),
-        options: permutation,
-        should_create: hasUserSelectedVariants ? false : true,
-        variant_rank: newVariants.length,
-        // NOTE - prepare inventory array here for now so we prevent rendering issue if we append the items later
-        inventory: [{ inventory_item_id: "", required_quantity: "" }]
-      });
+    allSelectedOptions.push(...selectedProductOptions);
+    const watchedOptions2 = form.getValues("options");
+    watchedOptions2.forEach((opt) => {
+      if (!opt.id && opt.title && newOptionTitles.includes(opt.title)) {
+        allSelectedOptions.push({
+          title: opt.title,
+          values: opt.values || []
+        });
+      }
+    });
+    const newSelectedValues = {};
+    allSelectedOptions.forEach((option) => {
+      if ("id" in option && option.id) {
+        const currentOption = watchedOptions2.find((opt) => opt.id === option.id);
+        if (currentOption?.value_ids) {
+          newSelectedValues[option.id] = currentOption.value_ids;
+        } else {
+          newSelectedValues[option.id] = option.values?.map((v) => v.id) || [];
+        }
+      }
     });
+    updateFormWithSelectedValues(allSelectedOptions, newSelectedValues);
+  };
+  const generateAndSetVariants = (options) => {
+    const permutations = getPermutations(
+      options.filter(({ values }) => values && values.length > 0)
+    );
+    const newVariants = permutations.map((permutation, index) => ({
+      title: getVariantName(permutation),
+      options: permutation,
+      should_create: true,
+      variant_rank: index,
+      inventory: [{ inventory_item_id: "", required_quantity: "" }]
+    }));
     form.setValue("variants", newVariants);
   };
-  const handleRemoveOption = (index) => {
-    if (index === 0) {
+  const handleValueChange = (optionId, valueIds) => {
+    if (valueIds.length === 0) {
       return;
     }
-    options.remove(index);
-    const newOptions = [...watchedOptions];
-    newOptions.splice(index, 1);
-    const validOptionTitles = new Set(newOptions.map((option) => option.title));
-    const permutations = getPermutations(newOptions);
-    const oldVariants = [...watchedVariants];
-    const newVariants = permutations.reduce((variants2, permutation) => {
-      const variant = oldVariants.find(
-        ({ options: options2 }) => Object.keys(options2).filter((option) => validOptionTitles.has(option)).every((key) => options2[key] === permutation[key])
-      );
-      if (variant) {
-        variants2.push({
-          ...variant,
-          title: variant.title,
-          options: permutation
-        });
+    const currentOption = watchedOptions.find((opt) => opt.id === optionId);
+    if (!currentOption) {
+      return;
+    }
+    const productOption = product_options.find((opt) => opt.id === optionId);
+    const existingValueIds = new Set(
+      productOption?.values?.map((v) => v.id) || []
+    );
+    const validValueIds = [];
+    const newValueNames = [];
+    valueIds.forEach((id) => {
+      if (existingValueIds.has(id)) {
+        validValueIds.push(id);
+      } else {
+        newValueNames.push(id);
       }
-      return variants2;
-    }, []);
-    form.setValue("variants", newVariants);
+    });
+    const updatedOptions = watchedOptions.map((opt) => {
+      if (opt.id === optionId) {
+        const selectedExistingValues = productOption?.values?.filter((v) => validValueIds.includes(v.id)).map((v) => v.value) || [];
+        return {
+          ...opt,
+          value_ids: valueIds,
+          values: [...selectedExistingValues, ...newValueNames]
+        };
+      }
+      return opt;
+    });
+    form.setValue("options", updatedOptions);
+    generateAndSetVariants(updatedOptions);
+  };
+  const handleNewOptionValueChange = (optionTitle, valueNames) => {
+    const updatedOptions = watchedOptions.map((opt) => {
+      if (!opt.id && opt.title === optionTitle) {
+        return {
+          ...opt,
+          values: valueNames
+        };
+      }
+      return opt;
+    });
+    form.setValue("options", updatedOptions);
+    generateAndSetVariants(updatedOptions);
+  };
+  const updateFormWithSelectedValues = (selectedProductOptions, valueSelections) => {
+    const newOptions = selectedProductOptions.map(
+      (option) => {
+        if ("id" in option && option.id !== void 0) {
+          const existingOption = option;
+          const selectedValueIds = valueSelections[existingOption.id] || [];
+          const allValues = option.values || [];
+          const selectedValues = allValues.filter((v) => selectedValueIds.includes(v.id)).sort((a, b) => {
+            const rankA = a.rank ?? Number.MAX_VALUE;
+            const rankB = b.rank ?? Number.MAX_VALUE;
+            return rankA - rankB;
+          }).map((v) => v.value);
+          return {
+            id: existingOption.id,
+            title: existingOption.title,
+            values: selectedValues,
+            value_ids: selectedValueIds.length > 0 ? selectedValueIds : void 0
+          };
+        } else {
+          const newOption = option;
+          return {
+            title: newOption.title,
+            values: newOption.values
+          };
+        }
+      }
+    );
+    form.setValue("options", newOptions);
+    generateAndSetVariants(newOptions);
   };
   const handleRankChange = (items) => {
     const update = items.map((item, index) => {
@@ -892,10 +815,10 @@ var ProductCreateVariantsSection = ({
       ])
     );
   };
-  return /* @__PURE__ */ jsxs4("div", { id: "variants", className: "flex flex-col gap-y-8", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-6", children: [
-      /* @__PURE__ */ jsx4(Heading, { level: "h2", children: t("products.create.variants.header") }),
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { id: "variants", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h2", children: t("products.create.variants.header") }),
+      /* @__PURE__ */ jsx3(
         SwitchBox,
         {
           control: form.control,
@@ -918,137 +841,141 @@ var ProductCreateVariantsSection = ({
         }
       )
     ] }),
-    watchedAreVariantsEnabled && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-y-6", children: /* @__PURE__ */ jsx4(
-        Form.Field,
-        {
-          control: form.control,
-          name: "options",
-          render: () => {
-            return /* @__PURE__ */ jsx4(Form.Item, { children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-6", children: [
-              /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-x-4", children: [
-                /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsx4(Form.Label, { children: t("products.create.variants.productOptions.label") }),
-                  /* @__PURE__ */ jsx4(Form.Hint, { children: t("products.create.variants.productOptions.hint") })
-                ] }),
-                /* @__PURE__ */ jsx4(
-                  Button,
-                  {
-                    size: "small",
-                    variant: "secondary",
-                    type: "button",
-                    onClick: () => {
-                      options.append({
-                        title: "",
-                        values: []
-                      });
-                    },
-                    children: t("actions.add")
+    watchedAreVariantsEnabled && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("products.create.variants.productOptions.label") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.productOptions.hint") })
+        ] }),
+        showInvalidOptionsMessage && /* @__PURE__ */ jsx3(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.options") }),
+        /* @__PURE__ */ jsx3(
+          Combobox,
+          {
+            value: selectedOptionValues,
+            onChange: (value) => handleProductOptionSelect(value),
+            options: productOptionChoices,
+            onCreateOption: async (options) => {
+              const optionTitle = options[options.length - 1]?.trim();
+              if (!optionTitle) {
+                return;
+              }
+              const allSelectedOptions = [];
+              const valueSelections = {};
+              watchedOptions.forEach((opt) => {
+                if (opt.id) {
+                  const productOption = product_options.find(
+                    (p) => p.id === opt.id
+                  );
+                  if (productOption) {
+                    allSelectedOptions.push(productOption);
+                    if (opt.value_ids) {
+                      valueSelections[opt.id] = opt.value_ids;
+                    }
                   }
-                )
-              ] }),
-              showInvalidOptionsMessage && /* @__PURE__ */ jsx4(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.options") }),
-              /* @__PURE__ */ jsx4("ul", { className: "flex flex-col gap-y-4", children: options.fields.map((option, index) => {
-                const hasError = !!form.formState.errors.options?.[index];
-                return /* @__PURE__ */ jsxs4(
-                  "li",
-                  {
-                    className: clx2(
-                      "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5",
-                      {
-                        "border-ui-border-error shadow-borders-error": hasError
-                      }
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx4("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx4(
-                          Label,
-                          {
-                            size: "xsmall",
-                            weight: "plus",
-                            className: "text-ui-fg-subtle",
-                            htmlFor: `options.${index}.title`,
-                            children: t("fields.title")
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx4(
-                          Input2,
-                          {
-                            className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
-                            ...form.register(
-                              `options.${index}.title`
-                            ),
-                            placeholder: t(
-                              "products.fields.options.optionTitlePlaceholder"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsx4("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx4(
-                          Label,
-                          {
-                            size: "xsmall",
-                            weight: "plus",
-                            className: "text-ui-fg-subtle",
-                            htmlFor: `options.${index}.values`,
-                            children: t("fields.values")
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx4(
-                          Controller,
-                          {
-                            control: form.control,
-                            name: `options.${index}.values`,
-                            render: ({
-                              field: { onChange, ...field }
-                            }) => {
-                              const handleValueChange = (value) => {
-                                handleOptionValueUpdate(index, value);
-                                onChange(value);
-                              };
-                              return /* @__PURE__ */ jsx4(
-                                ChipInput,
-                                {
-                                  ...field,
-                                  variant: "contrast",
-                                  onChange: handleValueChange,
-                                  placeholder: t(
-                                    "products.fields.options.variantionsPlaceholder"
-                                  )
-                                }
-                              );
-                            }
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsx4(
-                        IconButton3,
-                        {
-                          type: "button",
-                          size: "small",
-                          variant: "transparent",
-                          className: "text-ui-fg-muted",
-                          disabled: index === 0,
-                          onClick: () => handleRemoveOption(index),
-                          children: /* @__PURE__ */ jsx4(XMarkMini, {})
-                        }
-                      )
-                    ]
+                } else {
+                  allSelectedOptions.push({
+                    title: opt.title,
+                    values: opt.values || []
+                  });
+                }
+              });
+              const newOption = {
+                title: optionTitle,
+                is_exclusive: true,
+                values: []
+              };
+              allSelectedOptions.push(newOption);
+              updateFormWithSelectedValues(
+                allSelectedOptions,
+                valueSelections
+              );
+            },
+            placeholder: t("products.fields.options.optionTitlePlaceholder"),
+            disabled: isLoading,
+            displayMode: "chips"
+          }
+        )
+      ] }),
+      watchedOptions.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("fields.values") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.selectValuesHint") })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-y-3", children: watchedOptions.map((opt, index) => {
+          if (opt.id) {
+            const productOption = product_options.find(
+              (p) => p.id === opt.id
+            );
+            const existingValues = productOption?.values || [];
+            const customValueNames = opt.values?.filter(
+              (v) => !existingValues.some((ev) => ev.value === v)
+            ) || [];
+            const existingValueOptions = existingValues.sort((a, b) => {
+              const rankA = a.rank ?? Number.MAX_VALUE;
+              const rankB = b.rank ?? Number.MAX_VALUE;
+              return rankA - rankB;
+            }).map((v) => ({
+              value: v.id,
+              label: v.value
+            }));
+            const customValueOptions = customValueNames.map((v) => ({
+              value: v,
+              label: v
+            }));
+            const valueOptions = [
+              ...existingValueOptions,
+              ...customValueOptions
+            ];
+            return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx3(Label, { size: "small", weight: "plus", children: opt.title }),
+              /* @__PURE__ */ jsx3(
+                Combobox,
+                {
+                  value: opt.value_ids ?? [],
+                  onChange: (value) => handleValueChange(opt.id, value),
+                  onCreateOption: async (values) => {
+                    const newValueName = values[values.length - 1]?.trim();
+                    if (newValueName && opt.id) {
+                      const currentValueIds = opt.value_ids || [];
+                      handleValueChange(opt.id, [
+                        ...currentValueIds,
+                        newValueName
+                      ]);
+                    }
                   },
-                  option.id
-                );
-              }) })
-            ] }) });
+                  options: valueOptions,
+                  placeholder: t(
+                    "products.fields.options.variantionsPlaceholder"
+                  ),
+                  displayMode: "chips"
+                }
+              )
+            ] }, opt.id);
+          } else {
+            return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx3(Label, { size: "small", weight: "plus", children: opt.title }),
+              /* @__PURE__ */ jsx3(
+                ChipInput,
+                {
+                  value: opt.values ?? [],
+                  onChange: (value) => handleNewOptionValueChange(opt.title, value),
+                  placeholder: t(
+                    "products.fields.options.variantionsPlaceholder"
+                  )
+                }
+              )
+            ] }, index);
           }
-        }
-      ) }),
-      /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-1 gap-x-4 gap-y-8", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-6", children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx4(Label, { weight: "plus", children: t("products.create.variants.productVariants.label") }),
-          /* @__PURE__ */ jsx4(Hint, { children: t("products.create.variants.productVariants.hint") })
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-x-4 gap-y-8", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("products.create.variants.productVariants.label") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.productVariants.hint") })
         ] }),
-        !showInvalidOptionsMessage && showInvalidVariantsMessage && /* @__PURE__ */ jsx4(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.variants") }),
-        variants.fields.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: "overflow-hidden rounded-xl border", children: [
-          /* @__PURE__ */ jsxs4(
+        !showInvalidOptionsMessage && showInvalidVariantsMessage && /* @__PURE__ */ jsx3(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.variants") }),
+        variants.fields.length > 0 ? /* @__PURE__ */ jsxs3("div", { className: "overflow-hidden rounded-xl border", children: [
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               className: "bg-ui-bg-component text-ui-fg-subtle grid items-center gap-3 border-b px-6 py-2.5",
@@ -1056,7 +983,7 @@ var ProductCreateVariantsSection = ({
                 gridTemplateColumns: `20px 28px repeat(${watchedOptions.length}, 1fr)`
               },
               children: [
-                /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
                   Checkbox,
                   {
                     className: "relative",
@@ -1064,25 +991,25 @@ var ProductCreateVariantsSection = ({
                     onCheckedChange: onCheckboxChange
                   }
                 ) }),
-                /* @__PURE__ */ jsx4("div", {}),
-                watchedOptions.map((option, index) => /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", weight: "plus", children: option.title }) }, index))
+                /* @__PURE__ */ jsx3("div", {}),
+                watchedOptions.map((option, index) => /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: option.title }) }, index))
               ]
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx3(
             SortableList,
             {
               items: variants.fields,
               onChange: handleRankChange,
               renderItem: (item, index) => {
-                return /* @__PURE__ */ jsx4(
+                return /* @__PURE__ */ jsx3(
                   SortableList.Item,
                   {
                     id: item.id,
-                    className: clx2("bg-ui-bg-base border-b", {
+                    className: clx("bg-ui-bg-base border-b", {
                       "border-b-0": index === variants.fields.length - 1
                     }),
-                    children: /* @__PURE__ */ jsxs4(
+                    children: /* @__PURE__ */ jsxs3(
                       "div",
                       {
                         className: "text-ui-fg-subtle grid w-full items-center gap-3 px-6 py-2.5",
@@ -1090,7 +1017,7 @@ var ProductCreateVariantsSection = ({
                           gridTemplateColumns: `20px 28px repeat(${watchedOptions.length}, 1fr)`
                         },
                         children: [
-                          /* @__PURE__ */ jsx4(
+                          /* @__PURE__ */ jsx3(
                             Form.Field,
                             {
                               control: form.control,
@@ -1098,7 +1025,7 @@ var ProductCreateVariantsSection = ({
                               render: ({
                                 field: { value, onChange, ...field }
                               }) => {
-                                return /* @__PURE__ */ jsx4(Form.Item, { children: /* @__PURE__ */ jsx4(Form.Control, { children: /* @__PURE__ */ jsx4(
+                                return /* @__PURE__ */ jsx3(Form.Item, { children: /* @__PURE__ */ jsx3(Form.Control, { children: /* @__PURE__ */ jsx3(
                                   Checkbox,
                                   {
                                     className: "relative",
@@ -1110,8 +1037,8 @@ var ProductCreateVariantsSection = ({
                               }
                             }
                           ),
-                          /* @__PURE__ */ jsx4(SortableList.DragHandle, {}),
-                          Object.values(item.options).map((value, index2) => /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: value }, index2))
+                          /* @__PURE__ */ jsx3(SortableList.DragHandle, {}),
+                          Object.values(item.options).map((value, index2) => /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: value }, index2))
                         ]
                       }
                     )
@@ -1120,40 +1047,40 @@ var ProductCreateVariantsSection = ({
               }
             }
           )
-        ] }) : /* @__PURE__ */ jsx4(Alert, { children: t("products.create.variants.productVariants.alert") }),
-        variants.fields.length > 0 && /* @__PURE__ */ jsx4(InlineTip, { label: t("general.tip"), children: t("products.create.variants.productVariants.tip") })
+        ] }) : /* @__PURE__ */ jsx3(Alert, { children: t("products.create.variants.productVariants.alert") }),
+        variants.fields.length > 0 && /* @__PURE__ */ jsx3(InlineTip, { label: t("general.tip"), children: t("products.create.variants.productVariants.tip") })
       ] }) })
     ] })
   ] });
 };
 
 // src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var ProductCreateDetailsForm = ({ form }) => {
   const { getFormFields } = useExtension();
   const fields = getFormFields("product", "create", "general");
-  return /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs5("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
-    /* @__PURE__ */ jsx5(Header, {}),
-    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-y-6", children: [
-      /* @__PURE__ */ jsx5(ProductCreateGeneralSection, { form }),
-      /* @__PURE__ */ jsx5(FormExtensionZone, { fields, form }),
-      /* @__PURE__ */ jsx5(ProductCreateMediaSection, { form })
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx4(Header, {}),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsx4(ProductCreateGeneralSection, { form }),
+      /* @__PURE__ */ jsx4(FormExtensionZone, { fields, form }),
+      /* @__PURE__ */ jsx4(ProductCreateMediaSection, { form })
     ] }),
-    /* @__PURE__ */ jsx5(Divider, {}),
-    /* @__PURE__ */ jsx5(ProductCreateVariantsSection, { form })
+    /* @__PURE__ */ jsx4(Divider, {}),
+    /* @__PURE__ */ jsx4(ProductCreateVariantsSection, { form })
   ] }) });
 };
 var Header = () => {
   const { t } = useTranslation4();
-  return /* @__PURE__ */ jsx5("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx5(Heading2, { children: t("products.create.header") }) });
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx4(Heading2, { children: t("products.create.header") }) });
 };
 
 // src/routes/products/product-create/components/product-create-inventory-kit-form/components/product-create-inventory-kit-section/product-create-inventory-kit-section.tsx
-import { Button as Button2, Heading as Heading3, IconButton as IconButton4, Input as Input3, Label as Label2 } from "@medusajs/ui";
+import { Button, Heading as Heading3, IconButton as IconButton2, Input as Input2, Label as Label2 } from "@medusajs/ui";
 import { useFieldArray as useFieldArray3, useWatch as useWatch2 } from "react-hook-form";
-import { XMarkMini as XMarkMini2 } from "@medusajs/icons";
+import { XMarkMini } from "@medusajs/icons";
 import { useTranslation as useTranslation5 } from "react-i18next";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function InventoryItemRow({
   form,
   variantIndex,
@@ -1177,13 +1104,13 @@ function InventoryItemRow({
       value: item.id
     }))
   });
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     "li",
     {
       className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5",
       children: [
-        /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx6("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx5(
             Label2,
             {
               size: "xsmall",
@@ -1193,13 +1120,13 @@ function InventoryItemRow({
               children: t("fields.item")
             }
           ) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             Form.Field,
             {
               control: form.control,
               name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
               render: ({ field }) => {
-                return /* @__PURE__ */ jsx6(Form.Item, { children: /* @__PURE__ */ jsx6(Form.Control, { children: /* @__PURE__ */ jsx6(
+                return /* @__PURE__ */ jsx5(Form.Item, { children: /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
                   Combobox,
                   {
                     ...field,
@@ -1218,7 +1145,7 @@ function InventoryItemRow({
               }
             }
           ),
-          /* @__PURE__ */ jsx6("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx5(
             Label2,
             {
               size: "xsmall",
@@ -1228,15 +1155,15 @@ function InventoryItemRow({
               children: t("fields.quantity")
             }
           ) }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             Form.Field,
             {
               control: form.control,
               name: `variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`,
               render: ({ field: { onChange, value, ...field } }) => {
-                return /* @__PURE__ */ jsxs6(Form.Item, { children: [
-                  /* @__PURE__ */ jsx6(Form.Control, { children: /* @__PURE__ */ jsx6(
-                    Input3,
+                return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+                  /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
+                    Input2,
                     {
                       type: "number",
                       className: "bg-ui-bg-field-component",
@@ -1256,21 +1183,21 @@ function InventoryItemRow({
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
+                  /* @__PURE__ */ jsx5(Form.ErrorMessage, {})
                 ] });
               }
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6(
-          IconButton4,
+        /* @__PURE__ */ jsx5(
+          IconButton2,
           {
             type: "button",
             size: "small",
             variant: "transparent",
             className: "text-ui-fg-muted",
             onClick: onRemove,
-            children: /* @__PURE__ */ jsx6(XMarkMini2, {})
+            children: /* @__PURE__ */ jsx5(XMarkMini, {})
           }
         )
       ]
@@ -1293,14 +1220,14 @@ function VariantSection({ form, variant, index }) {
       (i, index2) => index2 != inventoryIndex && i.inventory_item_id === option.value
     );
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "grid gap-y-4", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between gap-x-4", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsx6(Form.Label, { children: variant.title }),
-        /* @__PURE__ */ jsx6(Form.Hint, { children: t("products.create.inventory.label") })
+  return /* @__PURE__ */ jsxs5("div", { className: "grid gap-y-4", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx5(Form.Label, { children: variant.title }),
+        /* @__PURE__ */ jsx5(Form.Hint, { children: t("products.create.inventory.label") })
       ] }),
-      /* @__PURE__ */ jsx6(
-        Button2,
+      /* @__PURE__ */ jsx5(
+        Button,
         {
           size: "small",
           variant: "secondary",
@@ -1315,7 +1242,7 @@ function VariantSection({ form, variant, index }) {
         }
       )
     ] }),
-    inventory.fields.map((inventoryItem, inventoryIndex) => /* @__PURE__ */ jsx6(
+    inventory.fields.map((inventoryItem, inventoryIndex) => /* @__PURE__ */ jsx5(
       InventoryItemRow,
       {
         form,
@@ -1337,9 +1264,9 @@ var ProductCreateInventoryKitSection = ({
     control: form.control,
     name: "variants"
   });
-  return /* @__PURE__ */ jsxs6("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
-    /* @__PURE__ */ jsx6(Heading3, { children: t("products.create.inventory.heading") }),
-    variants.fields.filter((v) => v.inventory_kit).map((variant, variantIndex) => /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx5(Heading3, { children: t("products.create.inventory.heading") }),
+    variants.fields.filter((v) => v.inventory_kit).map((variant, variantIndex) => /* @__PURE__ */ jsx5(
       VariantSection,
       {
         form,
@@ -1352,18 +1279,18 @@ var ProductCreateInventoryKitSection = ({
 };
 
 // src/routes/products/product-create/components/product-create-inventory-kit-form/product-create-inventory-kit-form.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ProductCreateInventoryKitForm = ({
   form
 }) => {
-  return /* @__PURE__ */ jsx7("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx7("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: /* @__PURE__ */ jsx7(ProductCreateInventoryKitSection, { form }) }) });
+  return /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx6("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: /* @__PURE__ */ jsx6(ProductCreateInventoryKitSection, { form }) }) });
 };
 
 // src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
-import { Button as Button3, Heading as Heading4 } from "@medusajs/ui";
+import { Button as Button2, Heading as Heading4 } from "@medusajs/ui";
 import { useFieldArray as useFieldArray4 } from "react-hook-form";
 import { Trans, useTranslation as useTranslation6 } from "react-i18next";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductCreateOrganizationSection = ({
   form
 }) => {
@@ -1408,9 +1335,9 @@ var ProductCreateOrganizationSection = ({
   const handleClearAllSalesChannels = () => {
     replace([]);
   };
-  return /* @__PURE__ */ jsxs7("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
-    /* @__PURE__ */ jsx8(Heading4, { children: t("products.organization.header") }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx7(Heading4, { children: t("products.organization.header") }),
+    /* @__PURE__ */ jsx7(
       SwitchBox,
       {
         control: form.control,
@@ -1420,16 +1347,16 @@ var ProductCreateOrganizationSection = ({
         optional: true
       }
     ),
-    /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx7(
         Form.Field,
         {
           control: form.control,
           name: "type_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.type.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.type.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
                 Combobox,
                 {
                   ...field,
@@ -1439,20 +1366,20 @@ var ProductCreateOrganizationSection = ({
                   fetchNextPage: types.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
             ] });
           }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx7(
         Form.Field,
         {
           control: form.control,
           name: "collection_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.collection.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.collection.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
                 Combobox,
                 {
                   ...field,
@@ -1462,36 +1389,36 @@ var ProductCreateOrganizationSection = ({
                   fetchNextPage: collections.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
             ] });
           }
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx7(
         Form.Field,
         {
           control: form.control,
           name: "categories",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.categories.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(CategoryCombobox, { ...field }) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.categories.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(CategoryCombobox, { ...field }) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
             ] });
           }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx7(
         Form.Field,
         {
           control: form.control,
           name: "tags",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.tags.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.tags.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
                 Combobox,
                 {
                   ...field,
@@ -1501,25 +1428,25 @@ var ProductCreateOrganizationSection = ({
                   fetchNextPage: tags.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
             ] });
           }
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.shipping_profile.label") }),
-        /* @__PURE__ */ jsx8(Form.Hint, { children: /* @__PURE__ */ jsx8(Trans, { i18nKey: "products.fields.shipping_profile.hint" }) })
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.shipping_profile.label") }),
+        /* @__PURE__ */ jsx7(Form.Hint, { children: /* @__PURE__ */ jsx7(Trans, { i18nKey: "products.fields.shipping_profile.hint" }) })
       ] }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx7(
         Form.Field,
         {
           control: form.control,
           name: "shipping_profile_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-              /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
                 Combobox,
                 {
                   ...field,
@@ -1529,33 +1456,33 @@ var ProductCreateOrganizationSection = ({
                   fetchNextPage: shippingProfiles.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
             ] });
           }
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-1 gap-y-4", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-y-4", children: /* @__PURE__ */ jsx7(
       Form.Field,
       {
         control: form.control,
         name: "sales_channels",
         render: () => {
-          return /* @__PURE__ */ jsxs7(Form.Item, { children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-x-4", children: [
-              /* @__PURE__ */ jsxs7("div", { children: [
-                /* @__PURE__ */ jsx8(Form.Label, { optional: true, children: t("products.fields.sales_channels.label") }),
-                /* @__PURE__ */ jsx8(Form.Hint, { children: /* @__PURE__ */ jsx8(Trans, { i18nKey: "products.fields.sales_channels.hint" }) })
+          return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between gap-x-4", children: [
+              /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.sales_channels.label") }),
+                /* @__PURE__ */ jsx7(Form.Hint, { children: /* @__PURE__ */ jsx7(Trans, { i18nKey: "products.fields.sales_channels.hint" }) })
               ] }),
-              /* @__PURE__ */ jsx8(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx8(Button3, { size: "small", variant: "secondary", type: "button", children: t("actions.add") }) })
+              /* @__PURE__ */ jsx7(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(Button2, { size: "small", variant: "secondary", type: "button", children: t("actions.add") }) })
             ] }),
-            /* @__PURE__ */ jsx8(Form.Control, { className: "mt-0", children: fields.length > 0 && /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(Form.Control, { className: "mt-0", children: fields.length > 0 && /* @__PURE__ */ jsx7(
               ChipGroup,
               {
                 onClearAll: handleClearAllSalesChannels,
                 onRemove: remove,
                 className: "py-4",
-                children: fields.map((field, index) => /* @__PURE__ */ jsx8(ChipGroup.Chip, { index, children: field.name }, field.key))
+                children: fields.map((field, index) => /* @__PURE__ */ jsx7(ChipGroup.Chip, { index, children: field.name }, field.key))
               }
             ) })
           ] });
@@ -1567,10 +1494,10 @@ var ProductCreateOrganizationSection = ({
 
 // src/routes/products/product-create/components/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx
 import {
-  Button as Button4,
+  Button as Button3,
   createDataTableColumnHelper
 } from "@medusajs/ui";
-import { useEffect, useMemo as useMemo2, useState as useState3 } from "react";
+import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 import { useTranslation as useTranslation7 } from "react-i18next";
 import { keepPreviousData } from "@tanstack/react-query";
 
@@ -1578,7 +1505,7 @@ import { keepPreviousData } from "@tanstack/react-query";
 var SC_STACKED_MODAL_ID = "sc";
 
 // src/routes/products/product-create/components/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
 var ProductCreateSalesChannelStackedModal = ({
   form
@@ -1586,10 +1513,10 @@ var ProductCreateSalesChannelStackedModal = ({
   const { t } = useTranslation7();
   const { getValues, setValue } = form;
   const { setIsOpen, getIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = useState3(
+  const [rowSelection, setRowSelection] = useState2(
     {}
   );
-  const [state, setState] = useState3([]);
+  const [state, setState] = useState2([]);
   const searchParams = useSalesChannelTableQuery({
     pageSize: PAGE_SIZE,
     prefix: SC_STACKED_MODAL_ID
@@ -1652,9 +1579,9 @@ var ProductCreateSalesChannelStackedModal = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs8(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx9(StackedFocusModal.Header, {}),
-    /* @__PURE__ */ jsx9(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs7(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx8(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx8(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx8(
       DataTable,
       {
         data: sales_channels,
@@ -1673,9 +1600,9 @@ var ProductCreateSalesChannelStackedModal = ({
         prefix: SC_STACKED_MODAL_ID
       }
     ) }),
-    /* @__PURE__ */ jsx9(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-x-2", children: [
-      /* @__PURE__ */ jsx9(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx9(Button4, { size: "small", variant: "secondary", type: "button", children: t("actions.cancel") }) }),
-      /* @__PURE__ */ jsx9(Button4, { size: "small", onClick: handleAdd, type: "button", children: t("actions.save") })
+    /* @__PURE__ */ jsx8(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx8(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button3, { size: "small", variant: "secondary", type: "button", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx8(Button3, { size: "small", onClick: handleAdd, type: "button", children: t("actions.save") })
     ] }) })
   ] });
 };
@@ -1686,16 +1613,16 @@ var useColumns = () => {
 };
 
 // src/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var ProductCreateOrganizeForm = ({ form }) => {
   const { getFormFields } = useExtension();
   const fields = getFormFields("product", "create", "organize");
-  return /* @__PURE__ */ jsxs9(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
-    /* @__PURE__ */ jsx10("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs9("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
-      /* @__PURE__ */ jsx10(ProductCreateOrganizationSection, { form }),
-      /* @__PURE__ */ jsx10(FormExtensionZone, { fields, form })
+  return /* @__PURE__ */ jsxs8(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs8("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+      /* @__PURE__ */ jsx9(ProductCreateOrganizationSection, { form }),
+      /* @__PURE__ */ jsx9(FormExtensionZone, { fields, form })
     ] }) }),
-    /* @__PURE__ */ jsx10(ProductCreateSalesChannelStackedModal, { form })
+    /* @__PURE__ */ jsx9(ProductCreateSalesChannelStackedModal, { form })
   ] });
 };
 
@@ -1703,7 +1630,7 @@ var ProductCreateOrganizeForm = ({ form }) => {
 import { useMemo as useMemo3 } from "react";
 import { useWatch as useWatch3 } from "react-hook-form";
 import { useTranslation as useTranslation8 } from "react-i18next";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ProductCreateVariantsForm = ({
   form,
   regions,
@@ -1740,7 +1667,7 @@ var ProductCreateVariantsForm = ({
     });
     return ret;
   }, [variants]);
-  return /* @__PURE__ */ jsx11("div", { className: "flex size-full flex-col divide-y overflow-hidden", children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx10("div", { className: "flex size-full flex-col divide-y overflow-hidden", children: /* @__PURE__ */ jsx10(
     DataGrid,
     {
       columns,
@@ -1762,9 +1689,9 @@ var useColumns2 = ({
     () => [
       columnHelper2.column({
         id: "options",
-        header: () => /* @__PURE__ */ jsx11("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx11("span", { className: "truncate", children: options.map((o) => o.title).join(" / ") }) }),
+        header: () => /* @__PURE__ */ jsx10("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx10("span", { className: "truncate", children: options.map((o) => o.title).join(" / ") }) }),
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(DataGrid.ReadonlyCell, { context, children: options.map((o) => context.row.original.options[o.title]).join(" / ") });
+          return /* @__PURE__ */ jsx10(DataGrid.ReadonlyCell, { context, children: options.map((o) => context.row.original.options[o.title]).join(" / ") });
         },
         disableHiding: true
       }),
@@ -1775,7 +1702,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.title`,
         type: "text",
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(DataGrid.TextCell, { context });
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
         }
       }),
       columnHelper2.column({
@@ -1785,7 +1712,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.sku`,
         type: "text",
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(DataGrid.TextCell, { context });
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
         }
       }),
       columnHelper2.column({
@@ -1795,7 +1722,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.manage_inventory`,
         type: "boolean",
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(DataGrid.BooleanCell, { context });
+          return /* @__PURE__ */ jsx10(DataGrid.BooleanCell, { context });
         }
       }),
       columnHelper2.column({
@@ -1805,7 +1732,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.allow_backorder`,
         type: "boolean",
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(DataGrid.BooleanCell, { context });
+          return /* @__PURE__ */ jsx10(DataGrid.BooleanCell, { context });
         }
       }),
       columnHelper2.column({
@@ -1815,7 +1742,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.inventory_kit`,
         type: "boolean",
         cell: (context) => {
-          return /* @__PURE__ */ jsx11(
+          return /* @__PURE__ */ jsx10(
             DataGrid.BooleanCell,
             {
               context,
@@ -1842,7 +1769,7 @@ var useColumns2 = ({
 };
 
 // src/routes/products/product-create/components/product-create-form/product-create-form.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var SAVE_DRAFT_BUTTON = "save-draft-button";
 var ProductCreateForm = ({
   defaultChannel,
@@ -1850,8 +1777,8 @@ var ProductCreateForm = ({
   store,
   pricePreferences
 }) => {
-  const [tab, setTab] = useState4("details" /* DETAILS */);
-  const [tabState, setTabState] = useState4({
+  const [tab, setTab] = useState3("details" /* DETAILS */);
+  const [tabState, setTabState] = useState3({
     ["details" /* DETAILS */]: "in-progress",
     ["organize" /* ORGANIZE */]: "not-started",
     ["variants" /* VARIANTS */]: "not-started",
@@ -1875,13 +1802,10 @@ var ProductCreateForm = ({
     if (!regions?.length) {
       return {};
     }
-    return regions.reduce(
-      (acc, reg) => {
-        acc[reg.id] = reg.currency_code;
-        return acc;
-      },
-      {}
-    );
+    return regions.reduce((acc, reg) => {
+      acc[reg.id] = reg.currency_code;
+      return acc;
+    }, {});
   }, [regions]);
   const watchedVariants = useWatch4({
     control: form.control,
@@ -1983,7 +1907,7 @@ var ProductCreateForm = ({
     }
     setTabState({ ...currentState });
   }, [tab]);
-  return /* @__PURE__ */ jsx12(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx11(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs9(
     KeyboundForm,
     {
       onKeyDown: (e) => {
@@ -2006,7 +1930,7 @@ var ProductCreateForm = ({
       onSubmit: handleSubmit,
       className: "flex h-full flex-col",
       children: [
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs9(
           ProgressTabs,
           {
             dir: direction,
@@ -2020,8 +1944,8 @@ var ProductCreateForm = ({
             },
             className: "flex h-full flex-col overflow-hidden",
             children: [
-              /* @__PURE__ */ jsx12(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx12("div", { className: "-my-2 w-full border-l", children: /* @__PURE__ */ jsxs10(ProgressTabs.List, { className: "justify-start-start flex w-full items-center", children: [
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx11(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx11("div", { className: "-my-2 w-full border-l", children: /* @__PURE__ */ jsxs9(ProgressTabs.List, { className: "justify-start-start flex w-full items-center", children: [
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Trigger,
                   {
                     status: tabState["details" /* DETAILS */],
@@ -2030,7 +1954,7 @@ var ProductCreateForm = ({
                     children: t("products.create.tabs.details")
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Trigger,
                   {
                     status: tabState["organize" /* ORGANIZE */],
@@ -2039,7 +1963,7 @@ var ProductCreateForm = ({
                     children: t("products.create.tabs.organize")
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Trigger,
                   {
                     status: tabState["variants" /* VARIANTS */],
@@ -2048,7 +1972,7 @@ var ProductCreateForm = ({
                     children: t("products.create.tabs.variants")
                   }
                 ),
-                showInventoryTab && /* @__PURE__ */ jsx12(
+                showInventoryTab && /* @__PURE__ */ jsx11(
                   ProgressTabs.Trigger,
                   {
                     status: tabState["inventory" /* INVENTORY */],
@@ -2058,29 +1982,29 @@ var ProductCreateForm = ({
                   }
                 )
               ] }) }) }),
-              /* @__PURE__ */ jsxs10(RouteFocusModal.Body, { className: "size-full overflow-hidden", children: [
-                /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsxs9(RouteFocusModal.Body, { className: "size-full overflow-hidden", children: [
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Content,
                   {
                     className: "size-full overflow-y-auto",
                     value: "details" /* DETAILS */,
-                    children: /* @__PURE__ */ jsx12(ProductCreateDetailsForm, { form })
+                    children: /* @__PURE__ */ jsx11(ProductCreateDetailsForm, { form })
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Content,
                   {
                     className: "size-full overflow-y-auto",
                     value: "organize" /* ORGANIZE */,
-                    children: /* @__PURE__ */ jsx12(ProductCreateOrganizeForm, { form })
+                    children: /* @__PURE__ */ jsx11(ProductCreateOrganizeForm, { form })
                   }
                 ),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx11(
                   ProgressTabs.Content,
                   {
                     className: "size-full overflow-y-auto",
                     value: "variants" /* VARIANTS */,
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx11(
                       ProductCreateVariantsForm,
                       {
                         form,
@@ -2091,22 +2015,22 @@ var ProductCreateForm = ({
                     )
                   }
                 ),
-                showInventoryTab && /* @__PURE__ */ jsx12(
+                showInventoryTab && /* @__PURE__ */ jsx11(
                   ProgressTabs.Content,
                   {
                     className: "size-full overflow-y-auto",
                     value: "inventory" /* INVENTORY */,
-                    children: /* @__PURE__ */ jsx12(ProductCreateInventoryKitForm, { form })
+                    children: /* @__PURE__ */ jsx11(ProductCreateInventoryKitForm, { form })
                   }
                 )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx12(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-x-2", children: [
-          /* @__PURE__ */ jsx12(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx12(Button5, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
-          /* @__PURE__ */ jsx12(
-            Button5,
+        /* @__PURE__ */ jsx11(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx11(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx11(Button4, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx11(
+            Button4,
             {
               "data-name": SAVE_DRAFT_BUTTON,
               size: "small",
@@ -2116,7 +2040,7 @@ var ProductCreateForm = ({
               children: t("actions.saveAsDraft")
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             PrimaryButton,
             {
               tab,
@@ -2138,8 +2062,8 @@ var PrimaryButton = ({
 }) => {
   const { t } = useTranslation9();
   if (tab === "variants" /* VARIANTS */ && !showInventoryTab || tab === "inventory" /* INVENTORY */ && showInventoryTab) {
-    return /* @__PURE__ */ jsx12(
-      Button5,
+    return /* @__PURE__ */ jsx11(
+      Button4,
       {
         "data-name": "publish-button",
         type: "submit",
@@ -2151,8 +2075,8 @@ var PrimaryButton = ({
       "submit-button"
     );
   }
-  return /* @__PURE__ */ jsx12(
-    Button5,
+  return /* @__PURE__ */ jsx11(
+    Button4,
     {
       type: "button",
       variant: "primary",
@@ -2165,7 +2089,7 @@ var PrimaryButton = ({
 };
 
 // src/routes/products/product-create/product-create.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var ProductCreate = () => {
   const { t } = useTranslation10();
   const {
@@ -2211,10 +2135,10 @@ var ProductCreate = () => {
   if (isPricePreferencesError) {
     throw pricePreferencesError;
   }
-  return /* @__PURE__ */ jsxs11(RouteFocusModal, { children: [
-    /* @__PURE__ */ jsx13(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx13("span", { className: "sr-only", children: t("products.create.title") }) }),
-    /* @__PURE__ */ jsx13(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx13("span", { className: "sr-only", children: t("products.create.description") }) }),
-    ready && /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs10(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx12(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx12("span", { className: "sr-only", children: t("products.create.title") }) }),
+    /* @__PURE__ */ jsx12(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx12("span", { className: "sr-only", children: t("products.create.description") }) }),
+    ready && /* @__PURE__ */ jsx12(
       ProductCreateForm,
       {
         defaultChannel: sales_channel,