@mercurjs/vendor 2.2.0-canary.9 → 2.2.0-rc.1

package/dist/{chunk-BENED3NB.js → chunk-QMTSINXN.js}

@@ -1,46 +1,45 @@
+import {
+  defineTabMeta
+} from "./chunk-LEWA4BPH.js";
 import {
   DataGrid,
   createDataGridHelper
-} from "./chunk-4LVP635F.js";
+} from "./chunk-5FBQOAXU.js";
 import {
   HandleInput
 } from "./chunk-HJ56YXBU.js";
-import {
-  defineTabMeta
-} from "./chunk-LEWA4BPH.js";
 import {
   SwitchBox
 } from "./chunk-YVCBMOJG.js";
 import {
   SingleCategoryCombobox
-} from "./chunk-GAE6TKOR.js";
+} from "./chunk-IWF43LO2.js";
 import {
   useComboboxData
 } from "./chunk-OVPAOBZB.js";
 import {
   UploadMediaFormItem
-} from "./chunk-EIZP3XL5.js";
+} from "./chunk-CQRCUQC4.js";
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
-  decorateVariantsWithDefaultValues,
   generateVariantsFromAttributes,
   normalizeProductFormValues
-} from "./chunk-MZTDRBCR.js";
+} from "./chunk-2INANL6V.js";
 import {
   ChipInput
-} from "./chunk-YGRTRAWX.js";
+} from "./chunk-KDE4HKH2.js";
 import {
   useAttributeTableFilters,
   useAttributeTableQuery
-} from "./chunk-HDEOZN2Q.js";
+} from "./chunk-4OQLPIUZ.js";
 import {
   Combobox
 } from "./chunk-VBRTC2VU.js";
 import {
   TabbedForm,
   useTabbedForm
-} from "./chunk-LQD232FW.js";
+} from "./chunk-WJ5EU3KW.js";
 import {
   RouteFocusModal,
   StackedFocusModal,
@@ -51,44 +50,44 @@ import {
   Form
 } from "./chunk-3QSRE5LS.js";
 import {
-  DataTable
-} from "./chunk-5T6UWTRU.js";
+  _DataTable,
+  useDataTable
+} from "./chunk-7TQNE3E2.js";
 import {
   require_dist
-} from "./chunk-UCYSCKZV.js";
-import {
-  useFeatureFlags
-} from "./chunk-TBYCZRZ7.js";
+} from "./chunk-VYSB4CTB.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
+import {
+  useFeatureFlags
+} from "./chunk-BQHVM46E.js";
 import {
   useCreateProduct,
   useProductAttributes
-} from "./chunk-JAUZ73XE.js";
+} from "./chunk-744GLNZW.js";
 import {
-  sdk,
-  uploadFilesQuery
-} from "./chunk-RIN4CBRB.js";
+  sdk
+} from "./chunk-LXZXXOJ3.js";
 import {
   __toESM
 } from "./chunk-NBMM2TZK.js";
 
 // src/pages/products/create/product-create.tsx
 import { Children as Children2 } from "react";
-import { useTranslation as useTranslation10 } from "react-i18next";
+import { useTranslation as useTranslation9 } from "react-i18next";
 
 // src/pages/products/create/components/product-create-form/product-create-form.tsx
 var import_types6 = __toESM(require_dist(), 1);
 import { Button as Button3, toast } from "@medusajs/ui";
-import { useEffect as useEffect3, useMemo as useMemo5, Children } from "react";
-import { useForm, useWatch as useWatch3 } from "react-hook-form";
-import { useTranslation as useTranslation9 } from "react-i18next";
+import { useEffect as useEffect3, useMemo as useMemo3, Children } from "react";
+import { useForm, useWatch as useWatch2 } from "react-hook-form";
+import { useTranslation as useTranslation8 } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 // src/pages/products/create/components/product-create-attributes-form/product-create-attributes-form.tsx
 var import_types = __toESM(require_dist(), 1);
-import { CircleMiniFilledSolid, XMarkMini } from "@medusajs/icons";
+import { XMarkMini } from "@medusajs/icons";
 import {
   Button as Button2,
   Heading,
@@ -100,11 +99,9 @@ import {
   Select,
   Switch,
   Text,
-  Textarea,
-  clx
+  Textarea
 } from "@medusajs/ui";
-import { Select as RadixSelect } from "radix-ui";
-import { forwardRef, useEffect as useEffect2 } from "react";
+import { useEffect as useEffect2 } from "react";
 import {
   Controller,
   useFieldArray
@@ -112,16 +109,13 @@ import {
 import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/pages/products/create/components/product-create-attributes-form/product-create-add-attributes-modal.tsx
+import { Badge, Button, Checkbox } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
 import {
-  Badge,
-  Button,
-  Checkbox,
-  createDataTableColumnHelper,
-  Tooltip
-} from "@medusajs/ui";
+  createColumnHelper
+} from "@tanstack/react-table";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { keepPreviousData } from "@tanstack/react-query";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ADD_ATTRIBUTES_MODAL_ID = "add-attributes";
 var PAGE_SIZE = 20;
@@ -133,24 +127,23 @@ var ATTRIBUTE_TYPE_LABELS = {
   toggle: "attributes.type.toggle",
   text: "attributes.type.text_area"
 };
-var ROW_HIGHLIGHT_CLASSES = [
-  "[&_tr:has(button[role=checkbox][data-state=checked]:not([disabled]))>td]:!bg-ui-bg-highlight",
-  "[&_tr:has(button[role=checkbox][data-state=checked][disabled])>td]:!bg-ui-bg-subtle"
-].join(" ");
 var ProductCreateAddAttributesModal = () => {
   const form = useTabbedForm();
   const { t } = useTranslation();
   const { getValues, setValue } = form;
   const { setIsOpen, getIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = useState(
-    {}
-  );
-  const [state, setState] = useState([]);
-  const { searchParams } = useAttributeTableQuery({
+  const [rowSelection, setRowSelection] = useState({});
+  const [selected, setSelected] = useState([]);
+  const categoryId = form.watch("category_id");
+  const { searchParams, raw } = useAttributeTableQuery({
     pageSize: PAGE_SIZE,
     prefix: ADD_ATTRIBUTES_MODAL_ID
   });
-  const { product_attributes, count, isLoading, isError, error } = useProductAttributes(searchParams, {
+  const attributesQuery = useMemo(
+    () => ({ ...searchParams, category_id: categoryId || void 0 }),
+    [searchParams, categoryId]
+  );
+  const { product_attributes, count, isLoading, isError, error } = useProductAttributes(attributesQuery, {
     placeholderData: keepPreviousData
   });
   const open = getIsOpen(ADD_ATTRIBUTES_MODAL_ID);
@@ -161,20 +154,23 @@ var ProductCreateAddAttributesModal = () => {
     const attributes = getValues("attributes") ?? [];
     const existing = attributes.filter((a) => a.attribute_id);
     const selection = {};
-    const stateEntries = [];
+    const entries = [];
     for (const a of existing) {
       if (a.attribute_id) {
         selection[a.attribute_id] = true;
         const apiAttr = product_attributes?.find(
           (pa) => pa.id === a.attribute_id
         );
-        stateEntries.push({
+        entries.push({
           id: a.attribute_id,
           name: a.title,
           values: Array.isArray(a.values) ? a.values : a.values ? [a.values] : [],
           is_variant_axis: a.use_for_variants,
           type: a.type ?? apiAttr?.type ?? "",
-          available_values: a.available_values ?? apiAttr?.values?.map((v) => ({ id: v.id, name: v.name })) ?? []
+          available_values: a.available_values ?? apiAttr?.values?.map((v) => ({
+            id: v.id,
+            name: v.name
+          })) ?? []
         });
       }
     }
@@ -182,7 +178,7 @@ var ProductCreateAddAttributesModal = () => {
       for (const attr of product_attributes) {
         if (attr.is_required && !selection[attr.id]) {
           selection[attr.id] = true;
-          stateEntries.push({
+          entries.push({
             id: attr.id,
             name: attr.name,
             values: [],
@@ -194,9 +190,10 @@ var ProductCreateAddAttributesModal = () => {
       }
     }
     setRowSelection(selection);
-    setState(stateEntries);
+    setSelected(entries);
   }, [open, getValues, product_attributes]);
-  const onRowSelectionChange = (next) => {
+  const updater = (fn) => {
+    const next = typeof fn === "function" ? fn(rowSelection) : fn;
     if (product_attributes) {
       for (const attr of product_attributes) {
         if (attr.is_required) {
@@ -204,24 +201,20 @@ var ProductCreateAddAttributesModal = () => {
         }
       }
     }
-    const ids = Object.keys(next);
-    const addedIdsSet = new Set(
-      ids.filter((id) => next[id] && !rowSelection[id])
+    const addedIds = new Set(
+      Object.keys(next).filter((id) => next[id] && !rowSelection[id])
     );
-    let addedAttributes = [];
-    if (addedIdsSet.size > 0) {
-      addedAttributes = product_attributes?.filter((attr) => addedIdsSet.has(attr.id)).map((attr) => ({
-        id: attr.id,
-        name: attr.name,
-        values: [],
-        is_variant_axis: attr.is_variant_axis,
-        type: attr.type,
-        available_values: attr.values?.map((v) => ({ id: v.id, name: v.name })) ?? []
-      })) ?? [];
-    }
-    setState((prev) => {
-      const filteredPrev = prev.filter((a) => next[a.id]);
-      return Array.from(/* @__PURE__ */ new Set([...filteredPrev, ...addedAttributes]));
+    const addedAttributes = addedIds.size > 0 ? product_attributes?.filter((attr) => addedIds.has(attr.id)).map((attr) => ({
+      id: attr.id,
+      name: attr.name,
+      values: [],
+      is_variant_axis: attr.is_variant_axis,
+      type: attr.type,
+      available_values: attr.values?.map((v) => ({ id: v.id, name: v.name })) ?? []
+    })) ?? [] : [];
+    setSelected((prev) => {
+      const kept = prev.filter((a) => next[a.id]);
+      return Array.from(/* @__PURE__ */ new Set([...kept, ...addedAttributes]));
     });
     setRowSelection(next);
   };
@@ -231,7 +224,7 @@ var ProductCreateAddAttributesModal = () => {
     const requiredIds = new Set(
       product_attributes?.filter((a) => a.is_required).map((a) => a.id) ?? []
     );
-    const selectedAttributes = state.map((a) => ({
+    const selectedAttributes = selected.map((a) => ({
       attribute_id: a.id,
       title: a.name,
       values: a.values,
@@ -249,112 +242,90 @@ var ProductCreateAddAttributesModal = () => {
   };
   const filters = useAttributeTableFilters();
   const columns = useColumns();
+  const { table } = useDataTable({
+    data: product_attributes ?? [],
+    columns,
+    count,
+    getRowId: (row) => row.id,
+    pageSize: PAGE_SIZE,
+    enablePagination: true,
+    enableRowSelection: (row) => !row.original.is_required,
+    rowSelection: { state: rowSelection, updater },
+    prefix: ADD_ATTRIBUTES_MODAL_ID
+  });
   if (isError) {
     throw error;
   }
-  const emptyState = useMemo(
-    () => ({
-      empty: {
-        heading: t("products.create.attributes.noAttributesTitle"),
-        description: t("products.create.attributes.noAttributesDescription")
-      }
-    }),
-    [t]
-  );
   return /* @__PURE__ */ jsxs(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(
-      StackedFocusModal.Body,
+    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex size-full flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
+      _DataTable,
       {
-        className: `flex-1 overflow-hidden ${ROW_HIGHLIGHT_CLASSES}`,
-        "data-testid": "product-create-add-attributes-table",
-        children: /* @__PURE__ */ jsx(
-          DataTable,
-          {
-            data: product_attributes,
-            columns,
-            filters,
-            rowCount: count,
-            pageSize: PAGE_SIZE,
-            getRowId: (row) => row.id,
-            rowSelection: {
-              state: rowSelection,
-              onRowSelectionChange,
-              enableRowSelection: (row) => !row.original.is_required
-            },
-            isLoading,
-            layout: "fill",
-            prefix: ADD_ATTRIBUTES_MODAL_ID,
-            compact: true,
-            emptyState
-          }
-        )
+        table,
+        columns,
+        count,
+        pageSize: PAGE_SIZE,
+        isLoading,
+        filters,
+        orderBy: [
+          { key: "name", label: t("attributes.fields.name") },
+          { key: "created_at", label: t("fields.createdAt") },
+          { key: "updated_at", label: t("fields.updatedAt") }
+        ],
+        queryObject: raw,
+        prefix: ADD_ATTRIBUTES_MODAL_ID,
+        layout: "fill",
+        pagination: true,
+        search: true,
+        noRecords: {
+          title: t("products.create.attributes.noAttributesTitle"),
+          message: t("products.create.attributes.noAttributesDescription")
+        }
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
       /* @__PURE__ */ jsx(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", type: "button", children: t("actions.cancel") }) }),
       /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleAdd, type: "button", children: t("actions.save") })
     ] }) })
   ] });
 };
-var columnHelper = createDataTableColumnHelper();
+var columnHelper = createColumnHelper();
 var useColumns = () => {
   const { t } = useTranslation();
   return useMemo(
     () => [
-      columnHelper.select({
-        cell: (ctx) => {
-          const checked = ctx.row.getIsSelected();
-          const onChange = ctx.row.getToggleSelectedHandler();
-          const disabled = !ctx.row.getCanSelect();
-          const checkbox = /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              onClick: (e) => e.stopPropagation(),
-              checked,
-              onCheckedChange: onChange,
-              disabled
-            }
-          );
-          if (disabled) {
-            return /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                content: t("products.create.attributes.requiredTooltip"),
-                children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: checkbox })
-              }
-            );
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+            onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
           }
-          return checkbox;
-        }
+        ),
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            onCheckedChange: (value) => row.toggleSelected(!!value),
+            onClick: (e) => e.stopPropagation()
+          }
+        )
       }),
       columnHelper.accessor("name", {
-        header: t("attributes.fields.name"),
-        enableSorting: false
+        header: t("attributes.fields.productAttribute")
       }),
       columnHelper.accessor("handle", {
         header: t("attributes.fields.handle"),
         cell: (info) => {
           const handle = info.getValue();
           return handle ? `/${handle}` : "-";
-        },
-        enableSorting: false
+        }
       }),
       columnHelper.accessor("is_required", {
         header: t("attributes.fields.required"),
-        cell: (info) => {
-          if (info.getValue()) {
-            return /* @__PURE__ */ jsx(
-              Tooltip,
-              {
-                content: t("products.create.attributes.requiredTooltip"),
-                children: /* @__PURE__ */ jsx("span", { className: "cursor-help underline decoration-dotted underline-offset-2", children: t("filters.radio.yes") })
-              }
-            );
-          }
-          return t("filters.radio.no");
-        },
-        enableSorting: false
+        cell: (info) => info.getValue() ? t("filters.radio.yes") : t("filters.radio.no")
       }),
       columnHelper.accessor("type", {
         header: t("attributes.fields.type"),
@@ -362,19 +333,17 @@ var useColumns = () => {
           const type = info.getValue();
           const labelKey = ATTRIBUTE_TYPE_LABELS[type];
           return labelKey ? t(labelKey) : type;
-        },
-        enableSorting: false
+        }
       }),
       columnHelper.accessor("is_variant_axis", {
         header: t("attributes.fields.variantAxis"),
-        cell: (info) => info.getValue() ? t("filters.radio.yes") : t("filters.radio.no"),
-        enableSorting: false
+        cell: (info) => info.getValue() ? t("filters.radio.yes") : t("filters.radio.no")
       }),
       columnHelper.display({
         id: "values",
         header: t("attributes.fields.values"),
         cell: ({ row }) => {
-          const values = row.original.values ?? [];
+          const values = row.original.type === "toggle" ? [] : row.original.values ?? [];
           if (!values.length) {
             return /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "-" });
           }
@@ -443,6 +412,7 @@ var Root = () => {
                 variant: "secondary",
                 size: "small",
                 onClick: handleAddExisting,
+                "data-testid": "product-create-attributes-add-existing",
                 children: t("products.create.attributes.addExisting")
               }
             ),
@@ -453,124 +423,150 @@ var Root = () => {
                 variant: "secondary",
                 size: "small",
                 onClick: handleCreateNew,
+                "data-testid": "product-create-attributes-create-new",
                 children: t("products.create.attributes.createNew")
               }
             )
           ] }),
           fields.some((f) => !f.is_custom && !!f.attribute_id) && /* @__PURE__ */ jsx2(SelectedAttributes, { fields, remove }),
-          fields.some((f) => f.is_custom) && /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-y-4", children: fields.map((field, index) => {
-            if (!field.is_custom) return null;
-            const useForVariants = form.watch(
-              `attributes.${index}.use_for_variants`
-            );
-            return /* @__PURE__ */ jsxs2(
-              "li",
-              {
-                className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
-                children: [
-                  /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
-                    /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
-                      Label,
-                      {
-                        size: "xsmall",
-                        weight: "plus",
-                        className: "text-ui-fg-subtle",
-                        htmlFor: `attributes.${index}.title`,
-                        children: t("fields.title")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx2(
-                      Input,
-                      {
-                        className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
-                        ...form.register(`attributes.${index}.title`),
-                        placeholder: t(
-                          "products.create.attributes.titlePlaceholder"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
-                      Label,
-                      {
-                        size: "xsmall",
-                        weight: "plus",
-                        className: "text-ui-fg-subtle",
-                        htmlFor: `attributes.${index}.values`,
-                        children: t("fields.values")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsx2(
-                      Controller,
-                      {
-                        control: form.control,
-                        name: `attributes.${index}.values`,
-                        render: ({ field: { onChange, value, ...field2 } }) => useForVariants ? /* @__PURE__ */ jsx2(
-                          ChipInput,
+          fields.some((f) => f.is_custom) && /* @__PURE__ */ jsx2(
+            "ul",
+            {
+              className: "flex flex-col gap-y-4",
+              "data-testid": "product-create-attributes-list",
+              children: fields.map((field, index) => {
+                if (!field.is_custom) return null;
+                const useForVariants = form.watch(
+                  `attributes.${index}.use_for_variants`
+                );
+                return /* @__PURE__ */ jsxs2(
+                  "li",
+                  {
+                    className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+                    "data-testid": `product-create-attribute-row-${index}`,
+                    children: [
+                      /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                          Label,
                           {
-                            ...field2,
-                            variant: "contrast",
-                            value: Array.isArray(value) ? value : [],
-                            onChange,
-                            placeholder: t(
-                              "products.create.attributes.valuePlaceholder"
-                            )
+                            size: "xsmall",
+                            weight: "plus",
+                            className: "text-ui-fg-subtle",
+                            htmlFor: `attributes.${index}.title`,
+                            children: t("fields.title")
                           }
-                        ) : /* @__PURE__ */ jsx2(
-                          Textarea,
+                        ) }),
+                        /* @__PURE__ */ jsx2(
+                          Input,
                           {
-                            ...field2,
                             className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
-                            value: Array.isArray(value) ? value[0] ?? "" : value ?? "",
-                            onChange: (e) => onChange(e.target.value),
+                            ...form.register(
+                              `attributes.${index}.title`
+                            ),
                             placeholder: t(
-                              "products.create.attributes.valuePlaceholder"
+                              "products.create.attributes.titlePlaceholder"
+                            ),
+                            "data-testid": `product-create-attribute-title-${index}`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                          Label,
+                          {
+                            size: "xsmall",
+                            weight: "plus",
+                            className: "text-ui-fg-subtle",
+                            htmlFor: `attributes.${index}.values`,
+                            children: t("fields.values")
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx2(
+                          Controller,
+                          {
+                            control: form.control,
+                            name: `attributes.${index}.values`,
+                            render: ({ field: { onChange, value, ...field2 } }) => useForVariants ? /* @__PURE__ */ jsx2(
+                              ChipInput,
+                              {
+                                ...field2,
+                                variant: "contrast",
+                                value: Array.isArray(value) ? value : [],
+                                onChange,
+                                placeholder: t(
+                                  "products.create.attributes.valuePlaceholder"
+                                ),
+                                "data-testid": `product-create-attribute-values-${index}`
+                              }
+                            ) : /* @__PURE__ */ jsx2(
+                              Textarea,
+                              {
+                                ...field2,
+                                className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                                value: Array.isArray(value) ? value[0] ?? "" : value ?? "",
+                                onChange: (e) => onChange(e.target.value),
+                                placeholder: t(
+                                  "products.create.attributes.valuePlaceholder"
+                                ),
+                                "data-testid": `product-create-attribute-values-${index}`
+                              }
                             )
                           }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2("div", {}),
-                    /* @__PURE__ */ jsx2(
-                      Form.Field,
-                      {
-                        control: form.control,
-                        name: `attributes.${index}.use_for_variants`,
-                        render: ({ field: { value, onChange, ref } }) => /* @__PURE__ */ jsx2(Form.Item, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-x-3 py-1.5", children: [
-                          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
-                            Switch,
-                            {
-                              ref,
-                              className: "shrink-0 rtl:rotate-180",
-                              checked: value,
-                              onCheckedChange: onChange
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
-                            /* @__PURE__ */ jsx2(Label, { size: "xsmall", weight: "plus", children: t("products.create.attributes.useForVariants") }),
-                            /* @__PURE__ */ jsx2(Hint, { className: "!txt-small", children: t(
-                              "products.create.attributes.useForVariantsDescription"
+                        ),
+                        /* @__PURE__ */ jsx2("div", {}),
+                        /* @__PURE__ */ jsx2(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: `attributes.${index}.use_for_variants`,
+                            render: ({
+                              field: { value, onChange, ref }
+                            }) => /* @__PURE__ */ jsx2(Form.Item, { children: /* @__PURE__ */ jsxs2(
+                              "div",
+                              {
+                                className: "flex items-start gap-x-3 py-1.5",
+                                "data-testid": `product-create-attribute-use-for-variants-${index}`,
+                                children: [
+                                  /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+                                    Switch,
+                                    {
+                                      ref,
+                                      className: "shrink-0 rtl:rotate-180",
+                                      checked: value,
+                                      onCheckedChange: onChange
+                                    }
+                                  ) }),
+                                  /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+                                    /* @__PURE__ */ jsx2(Label, { size: "xsmall", weight: "plus", children: t(
+                                      "products.create.attributes.useForVariants"
+                                    ) }),
+                                    /* @__PURE__ */ jsx2(Hint, { className: "!txt-small", children: t(
+                                      "products.create.attributes.useForVariantsDescription"
+                                    ) })
+                                  ] })
+                                ]
+                              }
                             ) })
-                          ] })
-                        ] }) })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx2(
-                    IconButton,
-                    {
-                      type: "button",
-                      size: "small",
-                      variant: "transparent",
-                      className: "text-ui-fg-muted",
-                      onClick: () => remove(index),
-                      children: /* @__PURE__ */ jsx2(XMarkMini, {})
-                    }
-                  )
-                ]
-              },
-              field.id
-            );
-          }) }),
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx2(
+                        IconButton,
+                        {
+                          type: "button",
+                          size: "small",
+                          variant: "transparent",
+                          className: "text-ui-fg-muted",
+                          onClick: () => remove(index),
+                          "data-testid": `product-create-attribute-remove-${index}`,
+                          children: /* @__PURE__ */ jsx2(XMarkMini, {})
+                        }
+                      )
+                    ]
+                  },
+                  field.id
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsx2(RequiredAttributes, {})
         ] })
       ]
@@ -587,171 +583,183 @@ var SelectedAttributes = ({
     ({ field }) => !field.is_custom && !field.is_required && !!field.attribute_id
   );
   if (!entries.length) return null;
-  return /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-y-4", children: entries.map(({ field, index }) => {
-    const attrType = field.type;
-    const availableValues = field.available_values ?? [];
-    return /* @__PURE__ */ jsxs2(
-      "li",
-      {
-        className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
-              Label,
-              {
-                size: "xsmall",
-                weight: "plus",
-                className: "text-ui-fg-subtle",
-                children: t("fields.title")
-              }
-            ) }),
-            /* @__PURE__ */ jsx2(
-              Input,
-              {
-                value: field.title,
-                disabled: true,
-                className: "bg-ui-bg-field-component"
-              }
-            ),
-            /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
-              Label,
-              {
-                size: "xsmall",
-                weight: "plus",
-                className: "text-ui-fg-subtle",
-                children: t("fields.values")
-              }
-            ) }),
-            attrType === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
-              Controller,
-              {
-                control: form.control,
-                name: `attributes.${index}.values`,
-                render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsx2(
-                  Combobox,
+  return /* @__PURE__ */ jsx2(
+    "ul",
+    {
+      className: "flex flex-col gap-y-4",
+      "data-testid": "product-create-selected-attributes-list",
+      children: entries.map(({ field, index }) => {
+        const attrType = field.type;
+        const availableValues = field.available_values ?? [];
+        return /* @__PURE__ */ jsxs2(
+          "li",
+          {
+            className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+            "data-testid": `product-create-selected-attribute-row-${index}`,
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                  Label,
                   {
-                    ...rest,
-                    ref,
-                    value: Array.isArray(value) ? value : [],
-                    onChange: (val) => onChange(val ?? []),
-                    options: availableValues.map((v) => ({
-                      value: v.name,
-                      label: v.name
-                    })),
-                    placeholder: t("products.create.attributes.selectValues")
+                    size: "xsmall",
+                    weight: "plus",
+                    className: "text-ui-fg-subtle",
+                    children: t("fields.title")
                   }
-                )
-              }
-            ) : attrType === import_types.AttributeType.SINGLE_SELECT ? /* @__PURE__ */ jsx2(
-              Controller,
-              {
-                control: form.control,
-                name: `attributes.${index}.values`,
-                render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsxs2(
-                  Select,
+                ) }),
+                /* @__PURE__ */ jsx2(
+                  Input,
                   {
-                    ...rest,
-                    value: typeof value === "string" ? value : value?.[0] ?? "",
-                    onValueChange: onChange,
-                    children: [
-                      /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
-                        Select.Value,
-                        {
-                          placeholder: t(
-                            "products.create.attributes.selectValues"
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx2(Select.Content, { children: availableValues.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
-                    ]
+                    value: field.title,
+                    disabled: true,
+                    className: "bg-ui-bg-field-component",
+                    "data-testid": `product-create-selected-attribute-title-${index}`
                   }
-                )
-              }
-            ) : attrType === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
-              Controller,
-              {
-                control: form.control,
-                name: `attributes.${index}.values`,
-                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
-                  Textarea,
+                ),
+                /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                  Label,
                   {
-                    ...rest,
-                    className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
-                    value: typeof value === "string" ? value : value?.[0] ?? "",
-                    onChange: (e) => onChange(e.target.value),
-                    placeholder: t(
-                      "products.create.attributes.valuePlaceholder"
+                    size: "xsmall",
+                    weight: "plus",
+                    className: "text-ui-fg-subtle",
+                    children: t("fields.values")
+                  }
+                ) }),
+                attrType === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
+                  Controller,
+                  {
+                    control: form.control,
+                    name: `attributes.${index}.values`,
+                    render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsx2(
+                      Combobox,
+                      {
+                        ...rest,
+                        ref,
+                        value: Array.isArray(value) ? value : [],
+                        onChange: (val) => onChange(val ?? []),
+                        options: availableValues.map((v) => ({
+                          value: v.name,
+                          label: v.name
+                        })),
+                        placeholder: t(
+                          "products.create.attributes.selectValues"
+                        )
+                      }
                     )
                   }
-                )
-              }
-            ) : attrType === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
-              Controller,
-              {
-                control: form.control,
-                name: `attributes.${index}.values`,
-                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsxs2(
-                  Select,
+                ) : attrType === import_types.AttributeType.SINGLE_SELECT ? /* @__PURE__ */ jsx2(
+                  Controller,
                   {
-                    ...rest,
-                    value: typeof value === "string" ? value : value?.[0] ?? "",
-                    onValueChange: onChange,
-                    children: [
-                      /* @__PURE__ */ jsx2(Select.Trigger, { children: /* @__PURE__ */ jsx2(
-                        Select.Value,
-                        {
-                          placeholder: t(
-                            "products.create.attributes.selectValues"
-                          )
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs2(Select.Content, { children: [
-                        /* @__PURE__ */ jsx2(Select.Item, { value: "true", children: t("filters.radio.yes") }),
-                        /* @__PURE__ */ jsx2(Select.Item, { value: "false", children: t("filters.radio.no") })
-                      ] })
-                    ]
+                    control: form.control,
+                    name: `attributes.${index}.values`,
+                    render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsxs2(
+                      Select,
+                      {
+                        ...rest,
+                        value: typeof value === "string" ? value : value?.[0] ?? "",
+                        onValueChange: onChange,
+                        children: [
+                          /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
+                            Select.Value,
+                            {
+                              placeholder: t(
+                                "products.create.attributes.selectValuePlaceholder"
+                              )
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx2(Select.Content, { children: availableValues.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
+                        ]
+                      }
+                    )
                   }
-                )
-              }
-            ) : /* @__PURE__ */ jsx2(
-              Controller,
-              {
-                control: form.control,
-                name: `attributes.${index}.values`,
-                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
-                  Input,
+                ) : attrType === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
+                  Controller,
                   {
-                    ...rest,
-                    value: typeof value === "string" ? value : value?.[0] ?? "",
-                    onChange: (e) => onChange(e.target.value),
-                    placeholder: t(
-                      "products.create.attributes.valuePlaceholder"
+                    control: form.control,
+                    name: `attributes.${index}.values`,
+                    render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
+                      Textarea,
+                      {
+                        ...rest,
+                        className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                        value: typeof value === "string" ? value : value?.[0] ?? "",
+                        onChange: (e) => onChange(e.target.value),
+                        placeholder: t(
+                          "products.create.attributes.enterValuePlaceholder"
+                        )
+                      }
                     )
                   }
-                )
-              }
-            ),
-            field.use_for_variants && /* @__PURE__ */ jsxs2(Fragment, { children: [
-              /* @__PURE__ */ jsx2("div", {}),
-              /* @__PURE__ */ jsx2(VariantAxisTip, { className: "border-none" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx2(
-            IconButton,
-            {
-              type: "button",
-              size: "small",
-              variant: "transparent",
-              className: "text-ui-fg-muted",
-              onClick: () => remove(index),
-              children: /* @__PURE__ */ jsx2(XMarkMini, {})
-            }
-          )
-        ]
-      },
-      field.id
-    );
-  }) });
+                ) : attrType === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
+                  Controller,
+                  {
+                    control: form.control,
+                    name: `attributes.${index}.values`,
+                    render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsxs2(
+                      Select,
+                      {
+                        ...rest,
+                        value: typeof value === "string" ? value : value?.[0] ?? "",
+                        onValueChange: onChange,
+                        children: [
+                          /* @__PURE__ */ jsx2(Select.Trigger, { children: /* @__PURE__ */ jsx2(
+                            Select.Value,
+                            {
+                              placeholder: t(
+                                "products.create.attributes.selectValuePlaceholder"
+                              )
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs2(Select.Content, { children: [
+                            /* @__PURE__ */ jsx2(Select.Item, { value: "true", children: t("filters.radio.yes") }),
+                            /* @__PURE__ */ jsx2(Select.Item, { value: "false", children: t("filters.radio.no") })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsx2(
+                  Controller,
+                  {
+                    control: form.control,
+                    name: `attributes.${index}.values`,
+                    render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
+                      Input,
+                      {
+                        ...rest,
+                        value: typeof value === "string" ? value : value?.[0] ?? "",
+                        onChange: (e) => onChange(e.target.value),
+                        placeholder: t(
+                          "products.create.attributes.enterValuePlaceholder"
+                        )
+                      }
+                    )
+                  }
+                ),
+                field.use_for_variants && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  /* @__PURE__ */ jsx2("div", {}),
+                  /* @__PURE__ */ jsx2(VariantAxisTip, { className: "border-none" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                IconButton,
+                {
+                  type: "button",
+                  size: "small",
+                  variant: "transparent",
+                  className: "text-ui-fg-muted",
+                  onClick: () => remove(index),
+                  "data-testid": `product-create-selected-attribute-remove-${index}`,
+                  children: /* @__PURE__ */ jsx2(XMarkMini, {})
+                }
+              )
+            ]
+          },
+          field.id
+        );
+      })
+    }
+  );
 };
 var RequiredAttributes = () => {
   const { t } = useTranslation2();
@@ -768,73 +776,65 @@ var RequiredAttributes = () => {
   useEffect2(() => {
     if (!product_attributes) return;
     const currentAttributes = form.getValues("attributes") || [];
-    const requiredIds = new Set(product_attributes.map((a) => a.id));
+    const requiredIds = new Set(
+      product_attributes.map((a) => a.id)
+    );
     const otherAttributes = currentAttributes.filter(
       (a) => a.is_custom || !requiredIds.has(a.attribute_id ?? "")
     );
-    const requiredAttributes = product_attributes.map((attr) => {
-      const existing = currentAttributes.find(
-        (a) => a.attribute_id === attr.id
-      );
-      if (existing) return existing;
-      return {
-        attribute_id: attr.id,
-        title: attr.name,
-        values: attr.type === import_types.AttributeType.MULTI_SELECT ? [] : "",
-        is_custom: false,
-        is_required: true,
-        use_for_variants: attr.is_variant_axis,
-        type: attr.type
-      };
-    });
+    const requiredAttributes = product_attributes.map(
+      (attr) => {
+        const existing = currentAttributes.find(
+          (a) => a.attribute_id === attr.id
+        );
+        if (existing) return existing;
+        return {
+          attribute_id: attr.id,
+          title: attr.name,
+          values: attr.type === import_types.AttributeType.MULTI_SELECT ? [] : attr.type === import_types.AttributeType.TOGGLE ? "false" : "",
+          is_custom: false,
+          is_required: true,
+          use_for_variants: attr.is_variant_axis,
+          type: attr.type,
+          available_values: attr.values?.map((v) => ({ id: v.id, name: v.name })) ?? []
+        };
+      }
+    );
     form.setValue("attributes", [...otherAttributes, ...requiredAttributes]);
-  }, [product_attributes]);
+  }, [product_attributes, form]);
   if (!categoryId || !product_attributes?.length) return null;
   const requiredEntries = attributes.map((attr, index) => ({ attr, index })).filter(({ attr }) => !attr.is_custom);
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2("div", { className: "border-ui-border-base border-t border-dashed" }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-6", children: [
-      /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2(Text, { size: "small", weight: "plus", leading: "compact", children: t("products.create.attributes.requiredAttributes") }),
-        /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-ui-fg-subtle", children: t("products.create.attributes.requiredAttributesHint") })
-      ] }),
-      requiredEntries.map(({ attr, index }) => {
-        const apiAttr = product_attributes.find(
-          (a) => a.id === attr.attribute_id
-        );
-        if (!apiAttr) return null;
-        return /* @__PURE__ */ jsx2(
-          RequiredAttributeField,
-          {
-            attribute: apiAttr,
-            index
-          },
-          apiAttr.id
-        );
-      })
-    ] })
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "flex flex-col gap-y-6",
+        "data-testid": "product-create-attributes-required",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Text, { size: "small", weight: "plus", leading: "compact", children: t("products.create.attributes.requiredAttributes") }),
+            /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-ui-fg-subtle", children: t("products.create.attributes.requiredAttributesHint") })
+          ] }),
+          requiredEntries.map(({ attr, index }) => {
+            const apiAttr = product_attributes.find(
+              (a) => a.id === attr.attribute_id
+            );
+            if (!apiAttr) return null;
+            return /* @__PURE__ */ jsx2(
+              RequiredAttributeField,
+              {
+                attribute: apiAttr,
+                index
+              },
+              apiAttr.id
+            );
+          })
+        ]
+      }
+    )
   ] });
 };
-var RadioSelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
-  RadixSelect.Item,
-  {
-    ref,
-    className: clx(
-      "bg-ui-bg-component txt-compact-small grid cursor-pointer grid-cols-[15px_1fr] items-center gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors",
-      "focus-visible:bg-ui-bg-component-hover",
-      "active:bg-ui-bg-component-pressed",
-      "data-[state=checked]:txt-compact-small-plus",
-      "disabled:text-ui-fg-disabled",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx2("span", { className: "flex h-[15px] w-[15px] items-center justify-center", children: /* @__PURE__ */ jsx2(RadixSelect.ItemIndicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx2(CircleMiniFilledSolid, {}) }) }),
-      /* @__PURE__ */ jsx2(RadixSelect.ItemText, { className: "flex-1 truncate", children })
-    ]
-  }
-));
-RadioSelectItem.displayName = "RadioSelectItem";
 var RequiredAttributeField = ({
   attribute,
   index
@@ -863,7 +863,7 @@ var RequiredAttributeField = ({
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx2(Select.Content, { children: attribute.values?.map((v) => /* @__PURE__ */ jsx2(RadioSelectItem, { value: v.name, children: v.name }, v.id)) })
+              /* @__PURE__ */ jsx2(Select.Content, { children: attribute.values?.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
             ]
           }
         ) : attribute.type === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
@@ -877,10 +877,12 @@ var RequiredAttributeField = ({
               value: v.name,
               label: v.name
             })) ?? [],
-            placeholder: t("products.create.attributes.selectValues")
+            placeholder: t(
+              "products.create.attributes.selectValues"
+            )
           }
         ) : attribute.type === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
-          Textarea,
+          Input,
           {
             ...field,
             ref,
@@ -890,26 +892,13 @@ var RequiredAttributeField = ({
               "products.create.attributes.enterValuePlaceholder"
             )
           }
-        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsxs2(
-          Select,
+        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
+          Switch,
           {
             ...field,
-            value: typeof value === "string" ? value : value?.[0] ?? "",
-            onValueChange: onChange,
-            children: [
-              /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
-                Select.Value,
-                {
-                  placeholder: t(
-                    "products.create.attributes.selectValuePlaceholder"
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsxs2(Select.Content, { children: [
-                /* @__PURE__ */ jsx2(RadioSelectItem, { value: "true", children: t("filters.radio.yes") }),
-                /* @__PURE__ */ jsx2(RadioSelectItem, { value: "false", children: t("filters.radio.no") })
-              ] })
-            ]
+            className: "rtl:rotate-180",
+            checked: value === "true" || value === true,
+            onCheckedChange: (checked) => onChange(String(checked))
           }
         ) : /* @__PURE__ */ jsx2(
           Input,
@@ -934,8 +923,8 @@ var VariantAxisTip = ({ className }) => {
   return /* @__PURE__ */ jsx2(
     InlineTip,
     {
-      label: t("products.create.attributes.tip"),
       className,
+      label: t("products.create.attributes.tip"),
       children: t("products.create.attributes.variantAxisTip")
     }
   );
@@ -948,8 +937,8 @@ Root._tabMeta = defineTabMeta({
 var ProductCreateAttributesForm = Root;
 
 // src/pages/products/create/components/product-create-details-form/product-create-details-form.tsx
-import { Heading as Heading3 } from "@medusajs/ui";
-import { useTranslation as useTranslation6 } from "react-i18next";
+import { Heading as Heading2 } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
 
 // src/pages/products/create/components/product-create-details-form/components/product-create-details-general-section/product-create-general-section.tsx
 import { Input as Input2, Textarea as Textarea2 } from "@medusajs/ui";
@@ -1317,381 +1306,32 @@ function formatFileSize(bytes, decimalPlaces = 2) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPlaces)) + " " + sizes[i];
 }
 
-// src/pages/products/create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
-import {
-  Alert,
-  Checkbox as Checkbox2,
-  clx as clx3,
-  Heading as Heading2,
-  Hint as Hint2,
-  InlineTip as InlineTip2,
-  Label as Label2,
-  Text as Text3
-} from "@medusajs/ui";
-import { useFieldArray as useFieldArray3, useWatch } from "react-hook-form";
-import { useTranslation as useTranslation5 } from "react-i18next";
-import { useMemo as useMemo3 } from "react";
-
-// 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 IconButton3, clx as clx2 } from "@medusajs/ui";
-import {
-  Fragment as Fragment2,
-  createContext,
-  useContext,
-  useMemo as useMemo2,
-  useState as useState3
-} from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var List = ({
-  items,
-  onChange,
-  renderItem
-}) => {
-  const [active, setActive] = useState3(null);
-  const [activeItem, activeIndex] = useMemo2(() => {
-    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__ */ jsxs5(
-    DndContext2,
-    {
-      sensors,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      onDragCancel: handleDragCancel,
-      children: [
-        /* @__PURE__ */ jsx5(Overlay, { children: activeItem && activeIndex !== null ? renderItem(activeItem, activeIndex) : null }),
-        /* @__PURE__ */ jsx5(SortableContext2, { items, children: /* @__PURE__ */ jsx5(
-          "ul",
-          {
-            role: "application",
-            className: "flex list-inside list-none list-image-none flex-col p-0",
-            children: items.map((item, index) => /* @__PURE__ */ jsx5(Fragment2, { children: renderItem(item, index) }, item.id))
-          }
-        ) })
-      ]
-    }
-  );
-};
-var dropAnimationConfig2 = {
-  sideEffects: defaultDropAnimationSideEffects2({
-    styles: {
-      active: {
-        opacity: "0.4"
-      }
-    }
-  })
-};
-var Overlay = ({ children }) => {
-  return /* @__PURE__ */ jsx5(
-    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 = useMemo2(
-    () => ({
-      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__ */ jsx5(SortableItemContext.Provider, { value: context, children: /* @__PURE__ */ jsx5(
-    "li",
-    {
-      className: clx2("transition-fg flex flex-1 list-none", className),
-      ref: setNodeRef,
-      style,
-      children
-    }
-  ) });
-};
-var DragHandle = () => {
-  const { attributes, listeners, ref } = useSortableItemContext();
-  return /* @__PURE__ */ jsx5(
-    IconButton3,
-    {
-      variant: "transparent",
-      size: "small",
-      ...attributes,
-      ...listeners,
-      ref,
-      className: "cursor-grab touch-none active:cursor-grabbing",
-      children: /* @__PURE__ */ jsx5(DotsSix2, { className: "text-ui-fg-muted" })
-    }
-  );
-};
-var SortableList = Object.assign(List, {
-  Item,
-  DragHandle
-});
-
-// src/pages/products/create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var ProductCreateVariantsSection = () => {
-  const form = useTabbedForm();
-  const { t } = useTranslation5();
-  const variants = useFieldArray3({
-    control: form.control,
-    name: "variants"
-  });
-  const watchedAttributes = useWatch({
-    control: form.control,
-    name: "attributes",
-    defaultValue: []
-  });
-  const watchedVariants = useWatch({
-    control: form.control,
-    name: "variants",
-    defaultValue: []
-  });
-  const variantAxes = useMemo3(() => {
-    return (watchedAttributes ?? []).filter((attr) => attr.use_for_variants).map((attr) => ({
-      title: attr.title,
-      values: Array.isArray(attr.values) ? attr.values : attr.values ? [attr.values] : []
-    })).filter((axis) => axis.title && axis.values.length > 0);
-  }, [watchedAttributes]);
-  const hasVariantAxes = variantAxes.length > 0;
-  const showInvalidVariantsMessage = form.formState.errors.variants?.root?.message === "invalid_length";
-  const handleRankChange = (items) => {
-    const update = items.map((item, index) => {
-      const variant = watchedVariants.find((v) => v.title === item.title);
-      return {
-        id: item.id,
-        ...variant || item,
-        variant_rank: index
-      };
-    });
-    variants.replace(update);
-  };
-  const getCheckboxState = (variants2) => {
-    if (variants2.every((variant) => variant.should_create)) {
-      return true;
-    }
-    if (variants2.some((variant) => variant.should_create)) {
-      return "indeterminate";
-    }
-    return false;
-  };
-  const onCheckboxChange = (value) => {
-    switch (value) {
-      case true: {
-        const update = watchedVariants.map((variant) => ({
-          ...variant,
-          should_create: true
-        }));
-        form.setValue("variants", update);
-        break;
-      }
-      case false: {
-        const update = watchedVariants.map((variant) => ({
-          ...variant,
-          should_create: false
-        }));
-        form.setValue("variants", decorateVariantsWithDefaultValues(update));
-        break;
-      }
-      case "indeterminate":
-        break;
-    }
-  };
-  if (!hasVariantAxes) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      id: "variants",
-      className: "flex flex-col gap-y-8",
-      "data-testid": "product-create-variants-section",
-      children: [
-        /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-y-6", children: /* @__PURE__ */ jsx6(Heading2, { level: "h2", children: t("products.create.variants.header") }) }),
-        /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-1 gap-x-4 gap-y-8", children: /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-y-6", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx6(Label2, { weight: "plus", children: t("products.create.variants.productVariants.label") }),
-            /* @__PURE__ */ jsx6(Hint2, { children: t("products.create.variants.productVariants.hint") })
-          ] }),
-          showInvalidVariantsMessage && /* @__PURE__ */ jsx6(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.variants") }),
-          variants.fields.length > 0 ? /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-xl border", children: [
-            /* @__PURE__ */ jsxs6(
-              "div",
-              {
-                className: "bg-ui-bg-component text-ui-fg-subtle grid items-center gap-3 border-b px-6 py-2.5",
-                style: {
-                  gridTemplateColumns: `20px 28px repeat(${variantAxes.length}, 1fr)`
-                },
-                children: [
-                  /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(
-                    Checkbox2,
-                    {
-                      className: "relative",
-                      checked: getCheckboxState(watchedVariants),
-                      onCheckedChange: onCheckboxChange
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx6("div", {}),
-                  variantAxes.map((axis, index) => /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", weight: "plus", children: axis.title }) }, index))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              SortableList,
-              {
-                items: variants.fields,
-                onChange: handleRankChange,
-                renderItem: (item, index) => {
-                  return /* @__PURE__ */ jsx6(
-                    SortableList.Item,
-                    {
-                      id: item.id,
-                      className: clx3("bg-ui-bg-base border-b", {
-                        "border-b-0": index === variants.fields.length - 1
-                      }),
-                      children: /* @__PURE__ */ jsxs6(
-                        "div",
-                        {
-                          className: "text-ui-fg-subtle grid w-full items-center gap-3 px-6 py-2.5",
-                          style: {
-                            gridTemplateColumns: `20px 28px repeat(${variantAxes.length}, 1fr)`
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx6(
-                              Form.Field,
-                              {
-                                control: form.control,
-                                name: `variants.${index}.should_create`,
-                                render: ({
-                                  field: { value, onChange, ...field }
-                                }) => /* @__PURE__ */ jsx6(Form.Item, { children: /* @__PURE__ */ jsx6(Form.Control, { children: /* @__PURE__ */ jsx6(
-                                  Checkbox2,
-                                  {
-                                    className: "relative",
-                                    ...field,
-                                    checked: value,
-                                    onCheckedChange: onChange
-                                  }
-                                ) }) })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx6(SortableList.DragHandle, {}),
-                            variantAxes.map((axis, i) => /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", children: item.options?.[axis.title] ?? "-" }, i))
-                          ]
-                        }
-                      )
-                    }
-                  );
-                }
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx6(Alert, { children: t("products.create.variants.productVariants.alert") }),
-          variants.fields.length > 0 && /* @__PURE__ */ jsx6(InlineTip2, { label: t("general.tip"), children: t("products.create.variants.productVariants.tip") })
-        ] }) })
-      ]
-    }
-  );
-};
-
 // src/pages/products/create/components/product-create-details-form/product-create-details-form.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var Root2 = () => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: "flex flex-col items-center p-16",
       "data-testid": "product-create-details-form",
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs5(
         "div",
         {
           className: "flex w-full max-w-[720px] flex-col gap-y-8",
           "data-testid": "product-create-details-form-content",
           children: [
-            /* @__PURE__ */ jsx7(Header, {}),
-            /* @__PURE__ */ jsxs7(
+            /* @__PURE__ */ jsx5(Header, {}),
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 className: "flex flex-col gap-y-6",
                 "data-testid": "product-create-details-form-sections",
                 children: [
-                  /* @__PURE__ */ jsx7(ProductCreateGeneralSection, {}),
-                  /* @__PURE__ */ jsx7(ProductCreateMediaSection, {})
+                  /* @__PURE__ */ jsx5(ProductCreateGeneralSection, {}),
+                  /* @__PURE__ */ jsx5(ProductCreateMediaSection, {})
                 ]
               }
-            ),
-            /* @__PURE__ */ jsx7(ProductCreateVariantsSection, {})
+            )
           ]
         }
       )
@@ -1705,24 +1345,24 @@ Root2._tabMeta = defineTabMeta({
 });
 var ProductCreateDetailsForm = Root2;
 var Header = () => {
-  const { t } = useTranslation6();
-  return /* @__PURE__ */ jsx7(
+  const { t } = useTranslation5();
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       className: "flex flex-col",
       "data-testid": "product-create-details-form-header",
-      children: /* @__PURE__ */ jsx7(Heading3, { "data-testid": "product-create-details-form-heading", children: t("products.create.header") })
+      children: /* @__PURE__ */ jsx5(Heading2, { "data-testid": "product-create-details-form-heading", children: t("products.create.header") })
     }
   );
 };
 
 // src/pages/products/create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
-import { Heading as Heading4 } from "@medusajs/ui";
-import { useTranslation as useTranslation7 } from "react-i18next";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Heading as Heading3 } from "@medusajs/ui";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductCreateOrganizationSection = () => {
   const form = useTabbedForm();
-  const { t } = useTranslation7();
+  const { t } = useTranslation6();
   const collections = useComboboxData({
     queryKey: ["product_collections"],
     queryFn: (params) => sdk.vendor.collections.query(params),
@@ -1747,9 +1387,9 @@ var ProductCreateOrganizationSection = () => {
       value: tag.id
     }))
   });
-  return /* @__PURE__ */ jsxs8("div", { id: "organize", className: "flex flex-col gap-y-8", "data-testid": "product-create-organize-section", children: [
-    /* @__PURE__ */ jsx8(Heading4, { "data-testid": "product-create-organize-section-heading", children: t("products.organization.header") }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6("div", { id: "organize", className: "flex flex-col gap-y-8", "data-testid": "product-create-organize-section", children: [
+    /* @__PURE__ */ jsx6(Heading3, { "data-testid": "product-create-organize-section-heading", children: t("products.organization.header") }),
+    /* @__PURE__ */ jsx6(
       SwitchBox,
       {
         control: form.control,
@@ -1759,15 +1399,15 @@ var ProductCreateOrganizationSection = () => {
         optional: true
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-category-collection", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-category-collection", children: [
+      /* @__PURE__ */ jsx6(
         Form.Field,
         {
           control: form.control,
           name: "category_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-category-item", children: [
-              /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { "data-testid": "product-create-organize-section-category-item", children: [
+              /* @__PURE__ */ jsx6(
                 Form.Label,
                 {
                   tooltip: t("products.fields.primaryCategory.tooltip"),
@@ -1775,21 +1415,21 @@ var ProductCreateOrganizationSection = () => {
                   children: t("fields.category")
                 }
               ),
-              /* @__PURE__ */ jsx8(Form.Control, { "data-testid": "product-create-organize-section-category-control", children: /* @__PURE__ */ jsx8(SingleCategoryCombobox, { ...field }) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.Control, { "data-testid": "product-create-organize-section-category-control", children: /* @__PURE__ */ jsx6(SingleCategoryCombobox, { ...field }) }),
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx6(
         Form.Field,
         {
           control: form.control,
           name: "collection_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-collection-item", children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, "data-testid": "product-create-organize-section-collection-label", children: t("products.fields.collection.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { "data-testid": "product-create-organize-section-collection-control", children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { "data-testid": "product-create-organize-section-collection-item", children: [
+              /* @__PURE__ */ jsx6(Form.Label, { optional: true, "data-testid": "product-create-organize-section-collection-label", children: t("products.fields.collection.label") }),
+              /* @__PURE__ */ jsx6(Form.Control, { "data-testid": "product-create-organize-section-collection-control", children: /* @__PURE__ */ jsx6(
                 Combobox,
                 {
                   ...field,
@@ -1799,22 +1439,22 @@ var ProductCreateOrganizationSection = () => {
                   fetchNextPage: collections.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-type-tags", children: [
-      /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-type-tags", children: [
+      /* @__PURE__ */ jsx6(
         Form.Field,
         {
           control: form.control,
           name: "type_id",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-type-item", children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, "data-testid": "product-create-organize-section-type-label", children: t("products.fields.type.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { "data-testid": "product-create-organize-section-type-control", children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { "data-testid": "product-create-organize-section-type-item", children: [
+              /* @__PURE__ */ jsx6(Form.Label, { optional: true, "data-testid": "product-create-organize-section-type-label", children: t("products.fields.type.label") }),
+              /* @__PURE__ */ jsx6(Form.Control, { "data-testid": "product-create-organize-section-type-control", children: /* @__PURE__ */ jsx6(
                 Combobox,
                 {
                   ...field,
@@ -1824,20 +1464,20 @@ var ProductCreateOrganizationSection = () => {
                   fetchNextPage: types.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx6(
         Form.Field,
         {
           control: form.control,
           name: "tags",
           render: ({ field }) => {
-            return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-tags-item", children: [
-              /* @__PURE__ */ jsx8(Form.Label, { optional: true, "data-testid": "product-create-organize-section-tags-label", children: t("products.fields.tags.label") }),
-              /* @__PURE__ */ jsx8(Form.Control, { "data-testid": "product-create-organize-section-tags-control", children: /* @__PURE__ */ jsx8(
+            return /* @__PURE__ */ jsxs6(Form.Item, { "data-testid": "product-create-organize-section-tags-item", children: [
+              /* @__PURE__ */ jsx6(Form.Label, { optional: true, "data-testid": "product-create-organize-section-tags-label", children: t("products.fields.tags.label") }),
+              /* @__PURE__ */ jsx6(Form.Control, { "data-testid": "product-create-organize-section-tags-control", children: /* @__PURE__ */ jsx6(
                 Combobox,
                 {
                   ...field,
@@ -1847,7 +1487,7 @@ var ProductCreateOrganizationSection = () => {
                   fetchNextPage: tags.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
@@ -1857,19 +1497,19 @@ var ProductCreateOrganizationSection = () => {
 };
 
 // src/pages/products/create/components/product-create-organize-form/product-create-organize-form.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Root3 = () => {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: "flex flex-col items-center p-16",
       "data-testid": "product-create-organize-form",
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx7(
         "div",
         {
           className: "flex w-full max-w-[720px] flex-col gap-y-8",
           "data-testid": "product-create-organize-form-content",
-          children: /* @__PURE__ */ jsx9(ProductCreateOrganizationSection, {})
+          children: /* @__PURE__ */ jsx7(ProductCreateOrganizationSection, {})
         }
       )
     }
@@ -1896,30 +1536,33 @@ Root3._tabMeta = defineTabMeta({
 var ProductCreateOrganizeForm = Root3;
 
 // src/pages/products/create/components/product-create-variants-form/product-create-variants-form.tsx
-import { useMemo as useMemo4 } from "react";
-import { useWatch as useWatch2 } from "react-hook-form";
-import { useTranslation as useTranslation8 } from "react-i18next";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { Input as Input3 } from "@medusajs/ui";
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import { useWatch } from "react-hook-form";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Root4 = () => {
+  const { t } = useTranslation7();
   const form = useTabbedForm();
   const { setCloseOnEscape } = useRouteModal();
-  const variants = useWatch2({
+  const [search, setSearch] = useState3("");
+  const variants = useWatch({
     control: form.control,
     name: "variants",
     defaultValue: []
   });
-  const watchedAttributes = useWatch2({
+  const watchedAttributes = useWatch({
     control: form.control,
     name: "attributes",
     defaultValue: []
   });
-  const variantAxes = useMemo4(() => {
+  const variantAxes = useMemo2(() => {
     return (watchedAttributes ?? []).filter((attr) => attr.use_for_variants && attr.title).map((attr) => ({
       title: attr.title
     }));
   }, [watchedAttributes]);
   const columns = useColumns2({ variantAxes });
-  const variantData = useMemo4(() => {
+  const variantData = useMemo2(() => {
     const ret = [];
     variants.forEach((v, i) => {
       if (v.should_create) {
@@ -1928,20 +1571,56 @@ var Root4 = () => {
     });
     return ret;
   }, [variants]);
-  return /* @__PURE__ */ jsx10(
+  const filteredVariantData = useMemo2(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) {
+      return variantData;
+    }
+    return variantData.filter((variant) => {
+      const haystack = [
+        variant.title,
+        variant.sku,
+        ...Object.values(variant.options ?? {})
+      ];
+      return haystack.some((value) => value?.toLowerCase().includes(query));
+    });
+  }, [variantData, search]);
+  const headerContent = /* @__PURE__ */ jsx8(
+    Input3,
+    {
+      type: "search",
+      size: "small",
+      autoComplete: "off",
+      value: search,
+      onChange: (event) => setSearch(event.target.value),
+      placeholder: t(
+        "products.create.variants.productVariants.searchPlaceholder"
+      ),
+      "data-testid": "product-create-variants-search-input"
+    }
+  );
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       className: "flex size-full flex-col divide-y overflow-hidden",
       "data-testid": "product-create-variants-form",
-      children: /* @__PURE__ */ jsx10("div", { "data-testid": "product-create-variants-form-datagrid", children: /* @__PURE__ */ jsx10(
-        DataGrid,
+      children: /* @__PURE__ */ jsx8(
+        "div",
         {
-          columns,
-          data: variantData,
-          state: form,
-          onEditingChange: (editing) => setCloseOnEscape(!editing)
+          className: "min-h-0 flex-1 overflow-hidden",
+          "data-testid": "product-create-variants-form-datagrid",
+          children: /* @__PURE__ */ jsx8(
+            DataGrid,
+            {
+              columns,
+              data: filteredVariantData,
+              state: form,
+              onEditingChange: (editing) => setCloseOnEscape(!editing),
+              headerContent
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -1955,14 +1634,14 @@ var columnHelper2 = createDataGridHelper();
 var useColumns2 = ({
   variantAxes
 }) => {
-  const { t } = useTranslation8();
-  return useMemo4(
+  const { t } = useTranslation7();
+  return useMemo2(
     () => [
       columnHelper2.column({
         id: "attributes",
-        header: () => /* @__PURE__ */ jsx10("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx10("span", { className: "truncate", children: variantAxes.map((a) => a.title).join(" / ") }) }),
+        header: () => /* @__PURE__ */ jsx8("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx8("span", { className: "truncate", children: variantAxes.map((a) => a.title).join(" / ") }) }),
         cell: (context) => {
-          return /* @__PURE__ */ jsx10(DataGrid.ReadonlyCell, { context, children: variantAxes.map((a) => context.row.original.options?.[a.title]).join(" / ") });
+          return /* @__PURE__ */ jsx8(DataGrid.ReadonlyCell, { context, children: variantAxes.map((a) => context.row.original.options?.[a.title]).join(" / ") });
         },
         disableHiding: true
       }),
@@ -1973,7 +1652,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.title`,
         type: "text",
         cell: (context) => {
-          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+          return /* @__PURE__ */ jsx8(DataGrid.TextCell, { context });
         }
       }),
       columnHelper2.column({
@@ -1983,7 +1662,7 @@ var useColumns2 = ({
         field: (context) => `variants.${context.row.original.originalIndex}.sku`,
         type: "text",
         cell: (context) => {
-          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+          return /* @__PURE__ */ jsx8(DataGrid.TextCell, { context });
         }
       })
     ],
@@ -1992,13 +1671,13 @@ var useColumns2 = ({
 };
 
 // src/pages/products/create/components/product-create-form/product-create-form.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var ProductCreateForm = ({
   children,
   schema,
   defaultValues: extraDefaults
 }) => {
-  const { t } = useTranslation9();
+  const { t } = useTranslation8();
   const { handleSuccess } = useRouteModal();
   const form = useForm({
     defaultValues: {
@@ -2010,7 +1689,7 @@ var ProductCreateForm = ({
   const { mutateAsync, isPending } = useCreateProduct();
   const { feature_flags } = useFeatureFlags();
   const productRequestEnabled = !!feature_flags?.[import_types6.MercurFeatureFlags.PRODUCT_REQUEST];
-  const watchedAttributes = useWatch3({
+  const watchedAttributes = useWatch2({
     control: form.control,
     name: "attributes"
   });
@@ -2023,7 +1702,7 @@ var ProductCreateForm = ({
     if (JSON.stringify(newVariants.map((v) => v.options)) !== JSON.stringify(currentVariants.map((v) => v.options))) {
       form.setValue("variants", newVariants);
     }
-  }, [watchedAttributes]);
+  }, [watchedAttributes, form]);
   const submitProduct = async (values, isDraftSubmission) => {
     const media = values.media || [];
     const payload = { ...values, media: void 0 };
@@ -2031,9 +1710,9 @@ var ProductCreateForm = ({
     try {
       const filesToUpload = media.map((m, i) => ({ file: m.file, isThumbnail: m.isThumbnail, index: i })).filter((m) => !!m.file);
       if (filesToUpload.length) {
-        const result = await uploadFilesQuery(
-          filesToUpload.map(({ file }) => ({ file }))
-        );
+        const result = await sdk.vendor.uploads.mutate({
+          files: filesToUpload.map(({ file }) => file)
+        });
         const uploadedFiles = result?.files ?? [];
         uploadedMedia = uploadedFiles.map((file, i) => ({
           ...file,
@@ -2081,29 +1760,31 @@ var ProductCreateForm = ({
     }
     await submitProduct(form.getValues(), true);
   };
-  const defaultTabs = useMemo5(
+  const defaultTabs = useMemo3(
     () => [
-      /* @__PURE__ */ jsx11(ProductCreateDetailsForm, {}, "details"),
-      /* @__PURE__ */ jsx11(ProductCreateOrganizeForm, {}, "organize"),
-      /* @__PURE__ */ jsx11(ProductCreateAttributesForm, {}, "attributes"),
-      /* @__PURE__ */ jsx11(ProductCreateVariantsForm, {}, "variants")
+      /* @__PURE__ */ jsx9(ProductCreateDetailsForm, {}, "details"),
+      /* @__PURE__ */ jsx9(ProductCreateOrganizeForm, {}, "organize"),
+      /* @__PURE__ */ jsx9(ProductCreateAttributesForm, {}, "attributes"),
+      /* @__PURE__ */ jsx9(ProductCreateVariantsForm, {}, "variants")
     ],
     []
   );
   const hasCustomChildren = Children.count(children) > 0;
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx9(
     TabbedForm,
     {
+      model: "product",
+      zone: "create",
       form,
       onSubmit: handleSubmit,
       isLoading: isPending,
-      footer: ({ isLastTab, onNext, isLoading }) => /* @__PURE__ */ jsxs9(
+      footer: ({ isLastTab, onNext, isLoading }) => /* @__PURE__ */ jsxs7(
         "div",
         {
           className: "flex items-center justify-end gap-x-2",
           "data-testid": "product-create-form-footer-actions",
           children: [
-            /* @__PURE__ */ jsx11(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx9(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx9(
               Button3,
               {
                 variant: "secondary",
@@ -2112,7 +1793,7 @@ var ProductCreateForm = ({
                 children: t("actions.cancel")
               }
             ) }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx9(
               Button3,
               {
                 variant: "secondary",
@@ -2125,7 +1806,7 @@ var ProductCreateForm = ({
                 children: t("actions.saveAsDraft")
               }
             ),
-            isLastTab ? /* @__PURE__ */ jsx11(
+            isLastTab ? /* @__PURE__ */ jsx9(
               Button3,
               {
                 "data-name": "publish-button",
@@ -2137,7 +1818,7 @@ var ProductCreateForm = ({
                 children: t("actions.publish")
               },
               "submit-button"
-            ) : /* @__PURE__ */ jsx11(
+            ) : /* @__PURE__ */ jsx9(
               Button3,
               {
                 type: "button",
@@ -2158,13 +1839,13 @@ var ProductCreateForm = ({
 };
 
 // src/pages/products/create/product-create.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var Root5 = ({ children }) => {
-  const { t } = useTranslation10();
-  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") }) }),
-    Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx12(ProductCreateForm, {})
+  const { t } = useTranslation9();
+  return /* @__PURE__ */ jsxs8(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx10(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx10("span", { className: "sr-only", children: t("products.create.title") }) }),
+    /* @__PURE__ */ jsx10(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx10("span", { className: "sr-only", children: t("products.create.description") }) }),
+    Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx10(ProductCreateForm, {})
   ] });
 };
 var ProductCreate = Root5;