@mercurjs/vendor 2.2.0-canary.2 → 2.2.0-canary.21

package/dist/{chunk-RTBNJQOV.js → chunk-R4JLYNUA.js}

@@ -1,46 +1,51 @@
 import {
-  HandleInput
-} from "./chunk-HJ56YXBU.js";
+  defineTabMeta
+} from "./chunk-LEWA4BPH.js";
 import {
   DataGrid,
   createDataGridHelper
-} from "./chunk-4LVP635F.js";
+} from "./chunk-TKSKCYM3.js";
 import {
-  defineTabMeta
-} from "./chunk-LEWA4BPH.js";
+  HandleInput
+} from "./chunk-HJ56YXBU.js";
+import {
+  useDateTableFilters
+} from "./chunk-26OOAKQ6.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-WKRW5OPL.js";
 import {
   SwitchBox
 } from "./chunk-YVCBMOJG.js";
 import {
   SingleCategoryCombobox
-} from "./chunk-7SLWXX6L.js";
+} from "./chunk-J434WDD3.js";
 import {
   useComboboxData
 } from "./chunk-OVPAOBZB.js";
 import {
   UploadMediaFormItem
-} from "./chunk-2DXNJURE.js";
+} from "./chunk-3L2DVCOC.js";
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
-  decorateVariantsWithDefaultValues,
   generateVariantsFromAttributes,
   normalizeProductFormValues
-} from "./chunk-DIW4GRTI.js";
+} from "./chunk-RT3G3GEK.js";
 import {
   ChipInput
-} from "./chunk-YGRTRAWX.js";
+} from "./chunk-KDE4HKH2.js";
 import {
-  useAttributeTableFilters,
   useAttributeTableQuery
-} from "./chunk-WLT7K7K7.js";
+} from "./chunk-4YWKKCTT.js";
 import {
   Combobox
 } from "./chunk-VBRTC2VU.js";
 import {
   TabbedForm,
   useTabbedForm
-} from "./chunk-LQD232FW.js";
+} from "./chunk-WJ5EU3KW.js";
 import {
   RouteFocusModal,
   StackedFocusModal,
@@ -50,22 +55,19 @@ import {
 import {
   Form
 } from "./chunk-3QSRE5LS.js";
-import {
-  DataTable
-} from "./chunk-PPLC4IKI.js";
 import {
   require_dist
-} from "./chunk-DZIXC7OE.js";
+} from "./chunk-6FLSBL4Q.js";
 import {
   useFeatureFlags
-} from "./chunk-GXIAIITP.js";
+} from "./chunk-KZYRC3WR.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import {
   useCreateProduct,
   useProductAttributes
-} from "./chunk-QNNJN4H6.js";
+} from "./chunk-TSTUAL6N.js";
 import {
   sdk,
   uploadFilesQuery
@@ -76,19 +78,19 @@ import {
 
 // 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 { XMarkMini } from "@medusajs/icons";
+import { EllipseMiniSolid, XMarkMini } from "@medusajs/icons";
 import {
   Button as Button2,
   Heading,
@@ -100,21 +102,79 @@ import {
   Select,
   Switch,
   Text,
-  Textarea
+  Textarea,
+  clx
 } from "@medusajs/ui";
-import { useEffect as useEffect2 } from "react";
+import { Select as RadixSelect } from "radix-ui";
+import { forwardRef, useEffect as useEffect2 } from "react";
 import {
   Controller,
   useFieldArray
 } from "react-hook-form";
 import { useTranslation as useTranslation2 } from "react-i18next";
 
+// src/pages/products/create/components/product-create-attributes-form/attribute-merge.ts
+var MULTI_SELECT = "multi_select";
+var buildRequiredEntry = (attr) => ({
+  attribute_id: attr.id,
+  title: attr.name,
+  values: attr.type === MULTI_SELECT ? [] : "",
+  is_custom: false,
+  is_required: true,
+  use_for_variants: !!attr.is_variant_axis,
+  type: attr.type
+});
+var mergeRequiredAttributes = (current, productAttributes) => {
+  const requiredById = new Map(productAttributes.map((a) => [a.id, a]));
+  const present = /* @__PURE__ */ new Set();
+  let changed = false;
+  const next = current.map((entry) => {
+    if (!entry.is_custom && entry.attribute_id && requiredById.has(entry.attribute_id)) {
+      present.add(entry.attribute_id);
+      if (!entry.is_required) {
+        changed = true;
+        return { ...entry, is_required: true };
+      }
+    }
+    return entry;
+  });
+  for (const attr of productAttributes) {
+    if (!present.has(attr.id)) {
+      next.push(buildRequiredEntry(attr));
+      changed = true;
+    }
+  }
+  return changed ? next : current;
+};
+var mergeSelectedAttributes = (current, selected) => {
+  const selectedById = new Map(
+    selected.filter((a) => a.attribute_id).map((a) => [a.attribute_id, a])
+  );
+  const next = [];
+  for (const entry of current) {
+    if (entry.is_custom) {
+      next.push(entry);
+      continue;
+    }
+    if (entry.attribute_id && selectedById.has(entry.attribute_id)) {
+      next.push(selectedById.get(entry.attribute_id));
+      selectedById.delete(entry.attribute_id);
+    }
+  }
+  for (const attr of selected) {
+    if (attr.attribute_id && selectedById.has(attr.attribute_id)) {
+      next.push(attr);
+      selectedById.delete(attr.attribute_id);
+    }
+  }
+  return next;
+};
+
 // src/pages/products/create/components/product-create-attributes-form/product-create-add-attributes-modal.tsx
+import { Badge, Button, Checkbox, Tooltip } from "@medusajs/ui";
 import {
-  Badge,
-  Button,
-  createDataTableColumnHelper
-} 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";
@@ -129,16 +189,18 @@ 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 [rowSelection, setRowSelection] = useState({});
   const [state, setState] = useState([]);
-  const { searchParams } = useAttributeTableQuery({
+  const { searchParams, raw } = useAttributeTableQuery({
     pageSize: PAGE_SIZE,
     prefix: ADD_ATTRIBUTES_MODAL_ID
   });
@@ -188,7 +250,7 @@ var ProductCreateAddAttributesModal = () => {
     setRowSelection(selection);
     setState(stateEntries);
   }, [open, getValues, product_attributes]);
-  const onRowSelectionChange = (next) => {
+  const applySelectionChange = (next) => {
     if (product_attributes) {
       for (const attr of product_attributes) {
         if (attr.is_required) {
@@ -217,9 +279,12 @@ var ProductCreateAddAttributesModal = () => {
     });
     setRowSelection(next);
   };
+  const onRowSelectionChange = (updater) => {
+    const next = typeof updater === "function" ? updater(rowSelection) : updater;
+    applySelectionChange({ ...next });
+  };
   const handleAdd = () => {
     const currentAttributes = getValues("attributes") ?? [];
-    const customAttributes = currentAttributes.filter((a) => a.is_custom);
     const requiredIds = new Set(
       product_attributes?.filter((a) => a.is_required).map((a) => a.id) ?? []
     );
@@ -233,50 +298,127 @@ var ProductCreateAddAttributesModal = () => {
       type: a.type,
       available_values: a.available_values
     }));
-    setValue("attributes", [...selectedAttributes, ...customAttributes], {
-      shouldDirty: true,
-      shouldTouch: true
-    });
+    setValue(
+      "attributes",
+      mergeSelectedAttributes(currentAttributes, selectedAttributes),
+      {
+        shouldDirty: true,
+        shouldTouch: true
+      }
+    );
     setIsOpen(ADD_ATTRIBUTES_MODAL_ID, false);
   };
-  const filters = useAttributeTableFilters();
+  const dateFilters = useDateTableFilters();
+  const filters = useMemo(
+    () => [
+      {
+        key: "is_filterable",
+        label: t("attributes.fields.filterable"),
+        type: "select",
+        options: [
+          { label: t("filters.radio.yes"), value: "true" },
+          { label: t("filters.radio.no"), value: "false" }
+        ]
+      },
+      ...dateFilters
+    ],
+    [t, dateFilters]
+  );
   const columns = useColumns();
+  const { table } = useDataTable({
+    data: product_attributes ?? [],
+    columns,
+    count,
+    pageSize: PAGE_SIZE,
+    prefix: ADD_ATTRIBUTES_MODAL_ID,
+    getRowId: (row) => row.id,
+    enableRowSelection: true,
+    rowSelection: {
+      state: rowSelection,
+      updater: onRowSelectionChange
+    },
+    enablePagination: true
+  });
   if (isError) {
     throw error;
   }
   return /* @__PURE__ */ jsxs(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
-    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
-      DataTable,
+    /* @__PURE__ */ jsx(
+      StackedFocusModal.Body,
       {
-        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
+        className: `flex-1 overflow-hidden ${ROW_HIGHLIGHT_CLASSES}`,
+        "data-testid": "product-create-add-attributes-table",
+        children: /* @__PURE__ */ jsx(
+          _DataTable,
+          {
+            table,
+            columns,
+            filters,
+            count,
+            pageSize: PAGE_SIZE,
+            queryObject: raw,
+            isLoading,
+            layout: "fill",
+            prefix: ADD_ATTRIBUTES_MODAL_ID,
+            pagination: true,
+            search: "autofocus",
+            orderBy: [
+              { key: "name", label: t("attributes.fields.name") },
+              { key: "created_at", label: t("fields.createdAt") },
+              { key: "updated_at", label: t("fields.updatedAt") }
+            ],
+            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(),
+      columnHelper.display({
+        id: "select",
+        header: ({ table }) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: table.getIsSomePageRowsSelected() ? "indeterminate" : table.getIsAllPageRowsSelected(),
+            onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value)
+          }
+        ),
+        cell: ({ row }) => {
+          const isRequired = row.original.is_required;
+          const checkbox = /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              onClick: (e) => e.stopPropagation(),
+              checked: row.getIsSelected() || isRequired,
+              onCheckedChange: (value) => row.toggleSelected(!!value),
+              disabled: isRequired
+            }
+          );
+          if (isRequired) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("products.create.attributes.requiredTooltip"),
+                children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: checkbox })
+              }
+            );
+          }
+          return checkbox;
+        }
+      }),
       columnHelper.accessor("name", {
         header: t("attributes.fields.name"),
         enableSorting: false
@@ -291,7 +433,18 @@ var useColumns = () => {
       }),
       columnHelper.accessor("is_required", {
         header: t("attributes.fields.required"),
-        cell: (info) => info.getValue() ? t("filters.radio.yes") : t("filters.radio.no"),
+        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
       }),
       columnHelper.accessor("type", {
@@ -671,7 +824,7 @@ var SelectedAttributes = ({
             ),
             field.use_for_variants && /* @__PURE__ */ jsxs2(Fragment, { children: [
               /* @__PURE__ */ jsx2("div", {}),
-              /* @__PURE__ */ jsx2(VariantAxisTip, {})
+              /* @__PURE__ */ jsx2(VariantAxisTip, { className: "border-none" })
             ] })
           ] }),
           /* @__PURE__ */ jsx2(
@@ -706,26 +859,14 @@ var RequiredAttributes = () => {
   useEffect2(() => {
     if (!product_attributes) return;
     const currentAttributes = form.getValues("attributes") || [];
-    const requiredIds = new Set(product_attributes.map((a) => a.id));
-    const otherAttributes = currentAttributes.filter(
-      (a) => a.is_custom || !requiredIds.has(a.attribute_id ?? "")
+    const nextAttributes = mergeRequiredAttributes(
+      currentAttributes,
+      product_attributes
     );
-    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
-      };
-    });
-    form.setValue("attributes", [...otherAttributes, ...requiredAttributes]);
-  }, [product_attributes]);
+    if (nextAttributes !== currentAttributes) {
+      form.setValue("attributes", nextAttributes);
+    }
+  }, [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: [
@@ -752,6 +893,26 @@ var RequiredAttributes = () => {
     ] })
   ] });
 };
+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(EllipseMiniSolid, {}) }) }),
+      /* @__PURE__ */ jsx2(RadixSelect.ItemText, { className: "flex-1 truncate", children })
+    ]
+  }
+));
+RadioSelectItem.displayName = "RadioSelectItem";
 var RequiredAttributeField = ({
   attribute,
   index
@@ -776,11 +937,11 @@ var RequiredAttributeField = ({
                 Select.Value,
                 {
                   placeholder: t(
-                    "products.create.attributes.valuePlaceholder"
+                    "products.create.attributes.selectValuePlaceholder"
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx2(Select.Content, { children: attribute.values?.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
+              /* @__PURE__ */ jsx2(Select.Content, { children: attribute.values?.map((v) => /* @__PURE__ */ jsx2(RadioSelectItem, { value: v.name, children: v.name }, v.id)) })
             ]
           }
         ) : attribute.type === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
@@ -797,21 +958,36 @@ var RequiredAttributeField = ({
             placeholder: t("products.create.attributes.selectValues")
           }
         ) : attribute.type === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
-          Input,
+          Textarea,
           {
             ...field,
             ref,
             value: typeof value === "string" ? value : value?.[0] ?? "",
             onChange: (e) => onChange(e.target.value),
-            placeholder: t("products.create.attributes.valuePlaceholder")
+            placeholder: t(
+              "products.create.attributes.enterValuePlaceholder"
+            )
           }
-        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
-          Switch,
+        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsxs2(
+          Select,
           {
             ...field,
-            className: "rtl:rotate-180",
-            checked: value === "true" || value === true,
-            onCheckedChange: (checked) => onChange(String(checked))
+            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") })
+              ] })
+            ]
           }
         ) : /* @__PURE__ */ jsx2(
           Input,
@@ -820,7 +996,9 @@ var RequiredAttributeField = ({
             ref,
             value: typeof value === "string" ? value : value?.[0] ?? "",
             onChange: (e) => onChange(e.target.value),
-            placeholder: t("products.create.attributes.valuePlaceholder")
+            placeholder: t(
+              "products.create.attributes.enterValuePlaceholder"
+            )
           }
         ) }),
         /* @__PURE__ */ jsx2(Form.ErrorMessage, {}),
@@ -829,9 +1007,16 @@ var RequiredAttributeField = ({
     }
   );
 };
-var VariantAxisTip = () => {
+var VariantAxisTip = ({ className }) => {
   const { t } = useTranslation2();
-  return /* @__PURE__ */ jsx2(InlineTip, { label: t("products.create.attributes.tip"), children: t("products.create.attributes.variantAxisTip") });
+  return /* @__PURE__ */ jsx2(
+    InlineTip,
+    {
+      label: t("products.create.attributes.tip"),
+      className,
+      children: t("products.create.attributes.variantAxisTip")
+    }
+  );
 };
 Root._tabMeta = defineTabMeta({
   id: "attributes",
@@ -841,8 +1026,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";
@@ -861,7 +1046,8 @@ var ProductCreateGeneralSection = () => {
           render: ({ field }) => {
             return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "product-create-general-section-title-item", children: [
               /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "product-create-general-section-title-label", children: t("products.fields.title.label") }),
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "product-create-general-section-title-control", children: /* @__PURE__ */ jsx3(Input2, { ...field, placeholder: t("products.fields.title.placeholder"), "data-testid": "product-create-general-section-title-input" }) })
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "product-create-general-section-title-control", children: /* @__PURE__ */ jsx3(Input2, { ...field, placeholder: t("products.fields.title.placeholder"), "data-testid": "product-create-general-section-title-input" }) }),
+              /* @__PURE__ */ jsx3(Form.ErrorMessage, {})
             ] });
           }
         }
@@ -1209,381 +1395,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,
-  clx as clx2,
-  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 } 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: clx("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(
-                    Checkbox,
-                    {
-                      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: clx2("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(
-                                  Checkbox,
-                                  {
-                                    className: "relative",
-                                    ...field,
-                                    checked: value,
-                                    onCheckedChange: onChange
-                                  }
-                                ) }) })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx6(SortableList.DragHandle, {}),
-                            variantAxes.map((axis, i) => /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", children: item.attribute_values?.[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, {})
+            )
           ]
         }
       )
@@ -1597,24 +1434,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),
@@ -1639,9 +1476,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,
@@ -1651,30 +1488,37 @@ 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(Form.Label, { "data-testid": "product-create-organize-section-category-label", 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, {})
+            return /* @__PURE__ */ jsxs6(Form.Item, { "data-testid": "product-create-organize-section-category-item", children: [
+              /* @__PURE__ */ jsx6(
+                Form.Label,
+                {
+                  tooltip: t("products.fields.primaryCategory.tooltip"),
+                  "data-testid": "product-create-organize-section-category-label",
+                  children: t("fields.category")
+                }
+              ),
+              /* @__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,
@@ -1684,22 +1528,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,
@@ -1709,20 +1553,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,
@@ -1732,7 +1576,7 @@ var ProductCreateOrganizationSection = () => {
                   fetchNextPage: tags.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
@@ -1742,19 +1586,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, {})
         }
       )
     }
@@ -1781,30 +1625,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) {
@@ -1813,18 +1660,47 @@ 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(
+      children: /* @__PURE__ */ jsx8("div", { "data-testid": "product-create-variants-form-datagrid", children: /* @__PURE__ */ jsx8(
         DataGrid,
         {
           columns,
-          data: variantData,
+          data: filteredVariantData,
           state: form,
-          onEditingChange: (editing) => setCloseOnEscape(!editing)
+          onEditingChange: (editing) => setCloseOnEscape(!editing),
+          headerContent
         }
       ) })
     }
@@ -1840,14 +1716,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.attribute_values?.[a.title]).join(" / ") });
+          return /* @__PURE__ */ jsx8(DataGrid.ReadonlyCell, { context, children: variantAxes.map((a) => context.row.original.options?.[a.title]).join(" / ") });
         },
         disableHiding: true
       }),
@@ -1858,7 +1734,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({
@@ -1868,7 +1744,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 });
         }
       })
     ],
@@ -1877,14 +1753,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";
-var SAVE_DRAFT_BUTTON = "save-draft-button";
+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: {
@@ -1896,7 +1771,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"
   });
@@ -1906,16 +1781,11 @@ var ProductCreateForm = ({
       watchedAttributes ?? [],
       currentVariants
     );
-    if (JSON.stringify(newVariants.map((v) => v.attribute_values)) !== JSON.stringify(currentVariants.map((v) => v.attribute_values))) {
+    if (JSON.stringify(newVariants.map((v) => v.options)) !== JSON.stringify(currentVariants.map((v) => v.options))) {
       form.setValue("variants", newVariants);
     }
-  }, [watchedAttributes]);
-  const handleSubmit = form.handleSubmit(async (values, e) => {
-    let isDraftSubmission = false;
-    if (e?.nativeEvent instanceof SubmitEvent) {
-      const submitter = e?.nativeEvent?.submitter;
-      isDraftSubmission = submitter?.dataset?.name === SAVE_DRAFT_BUTTON;
-    }
+  }, [watchedAttributes, form]);
+  const submitProduct = async (values, isDraftSubmission) => {
     const media = values.media || [];
     const payload = { ...values, media: void 0 };
     let uploadedMedia = [];
@@ -1961,30 +1831,40 @@ var ProductCreateForm = ({
         }
       }
     );
+  };
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await submitProduct(values, false);
   });
-  const defaultTabs = useMemo5(
+  const handleSaveAsDraft = async () => {
+    const titleValid = await form.trigger("title");
+    if (!titleValid) {
+      return;
+    }
+    await submitProduct(form.getValues(), true);
+  };
+  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,
     {
       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",
@@ -1993,19 +1873,20 @@ var ProductCreateForm = ({
                 children: t("actions.cancel")
               }
             ) }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx9(
               Button3,
               {
-                "data-name": SAVE_DRAFT_BUTTON,
+                variant: "secondary",
                 size: "small",
-                type: "submit",
+                type: "button",
+                onClick: handleSaveAsDraft,
                 isLoading,
                 className: "whitespace-nowrap",
                 "data-testid": "product-create-form-save-draft-button",
                 children: t("actions.saveAsDraft")
               }
             ),
-            isLastTab ? /* @__PURE__ */ jsx11(
+            isLastTab ? /* @__PURE__ */ jsx9(
               Button3,
               {
                 "data-name": "publish-button",
@@ -2017,7 +1898,7 @@ var ProductCreateForm = ({
                 children: t("actions.publish")
               },
               "submit-button"
-            ) : /* @__PURE__ */ jsx11(
+            ) : /* @__PURE__ */ jsx9(
               Button3,
               {
                 type: "button",
@@ -2038,13 +1919,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;