@mercurjs/admin 2.2.0-canary.5 → 2.2.0-canary.51

package/dist/{chunk-3OUWXGMT.js → chunk-XDMCPTDG.js}

@@ -3,14 +3,14 @@ import {
 } from "./chunk-IIFQ7KYL.js";
 import {
   UploadMediaFormItem
-} from "./chunk-26UTIAAZ.js";
+} from "./chunk-32URSQ4F.js";
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
   decorateVariantsWithDefaultValues,
   generateVariantsFromAttributes,
   normalizeProductFormValues
-} from "./chunk-AKC67AN5.js";
+} from "./chunk-3FKB6UTO.js";
 import {
   HandleInput
 } from "./chunk-HJ56YXBU.js";
@@ -22,7 +22,7 @@ import {
 } from "./chunk-4YWKKCTT.js";
 import {
   SingleCategoryCombobox
-} from "./chunk-HZQGZQTV.js";
+} from "./chunk-DP6YFZHP.js";
 import {
   useComboboxData
 } from "./chunk-5KGMGL4N.js";
@@ -33,17 +33,17 @@ import {
   TabbedForm,
   defineTabMeta,
   useTabbedForm
-} from "./chunk-4LXBQTFN.js";
+} from "./chunk-FREUYHMS.js";
+import {
+  ChipInput
+} from "./chunk-KDE4HKH2.js";
 import {
   SwitchBox
 } from "./chunk-2EME4AWX.js";
-import {
-  ChipInput
-} from "./chunk-YGRTRAWX.js";
 import {
   DataGrid,
   createDataGridHelper
-} from "./chunk-KT7X72J4.js";
+} from "./chunk-JXSXBSV6.js";
 import {
   RouteFocusModal,
   StackedFocusModal,
@@ -53,33 +53,34 @@ import {
 import {
   Form
 } from "./chunk-3QSRE5LS.js";
-import {
-  DataTable
-} from "./chunk-LYZT5REU.js";
 import {
   require_dist
-} from "./chunk-F5H5JZQZ.js";
+} from "./chunk-VYSB4CTB.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-GRFWCCUW.js";
 import {
   useProductAttributes
-} from "./chunk-533GMKEG.js";
+} from "./chunk-F5NW4XBU.js";
 import {
   useRegions
-} from "./chunk-ESPLVOFC.js";
+} from "./chunk-VHCDSNXF.js";
 import {
   useStore
-} from "./chunk-FXWKGNRV.js";
+} from "./chunk-EJY35WBK.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import {
   useSalesChannel
-} from "./chunk-FEC24V7X.js";
+} from "./chunk-ZOTBKQLG.js";
 import {
   useCreateProduct
-} from "./chunk-ZRFWXNT3.js";
+} from "./chunk-MMKUMSZS.js";
 import {
   sdk
-} from "./chunk-ZBWL72TB.js";
+} from "./chunk-LXZXXOJ3.js";
 import {
   __toESM
 } from "./chunk-NBMM2TZK.js";
@@ -91,7 +92,7 @@ import { useTranslation as useTranslation10 } from "react-i18next";
 // src/pages/products/product-create/components/product-create-form/product-create-form.tsx
 import { Button as Button3, toast } from "@medusajs/ui";
 import { useEffect as useEffect3, useMemo as useMemo4, Children } from "react";
-import { useForm, useWatch as useWatch3 } from "react-hook-form";
+import { useForm, useWatch as useWatch4 } from "react-hook-form";
 import { useTranslation as useTranslation9 } from "react-i18next";
 
 // src/pages/products/product-create/components/product-create-attributes-form/product-create-attributes-form.tsx
@@ -118,14 +119,13 @@ import {
 import { useTranslation as useTranslation2 } from "react-i18next";
 
 // src/pages/products/product-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,
-  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";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ADD_ATTRIBUTES_MODAL_ID = "add-attributes";
 var PAGE_SIZE = 20;
@@ -142,12 +142,10 @@ var ProductCreateAddAttributesModal = () => {
   const { t } = useTranslation();
   const { getValues, setValue } = form;
   const { setIsOpen, getIsOpen } = useStackedModal();
-  const [rowSelection, setRowSelection] = useState(
-    {}
-  );
-  const [state, setState] = useState([]);
+  const [rowSelection, setRowSelection] = useState({});
+  const [selected, setSelected] = useState([]);
   const categoryId = form.watch("category_id");
-  const { searchParams } = useAttributeTableQuery({
+  const { searchParams, raw } = useAttributeTableQuery({
     pageSize: PAGE_SIZE,
     prefix: ADD_ATTRIBUTES_MODAL_ID
   });
@@ -166,12 +164,14 @@ 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({
+        const apiAttr = product_attributes?.find(
+          (pa) => pa.id === a.attribute_id
+        );
+        entries.push({
           id: a.attribute_id,
           name: a.title,
           values: Array.isArray(a.values) ? a.values : a.values ? [a.values] : [],
@@ -185,7 +185,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: [],
@@ -197,9 +197,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) {
@@ -207,24 +208,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);
   };
@@ -234,7 +231,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,
@@ -252,28 +249,42 @@ 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;
   }
   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, { className: "flex size-full flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
+      _DataTable,
       {
-        data: product_attributes,
+        table,
         columns,
-        filters,
-        rowCount: count,
+        count,
         pageSize: PAGE_SIZE,
-        getRowId: (row) => row.id,
-        rowSelection: {
-          state: rowSelection,
-          onRowSelectionChange,
-          enableRowSelection: (row) => !row.original.is_required
-        },
         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",
-        prefix: ADD_ATTRIBUTES_MODAL_ID
+        pagination: true,
+        search: true,
+        noRecords: { message: t("attributes.list.noRecordsMessage") }
       }
     ) }),
     /* @__PURE__ */ jsx(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
@@ -282,28 +293,43 @@ var ProductCreateAddAttributesModal = () => {
     ] }) })
   ] });
 };
-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 }) => /* @__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) => 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.accessor("type", {
         header: t("attributes.fields.type"),
@@ -311,19 +337,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: "-" });
           }
@@ -641,7 +665,7 @@ var SelectedAttributes = ({
                             Select.Value,
                             {
                               placeholder: t(
-                                "products.create.attributes.selectValues"
+                                "products.create.attributes.selectValuePlaceholder"
                               )
                             }
                           ) }),
@@ -663,7 +687,7 @@ var SelectedAttributes = ({
                         value: typeof value === "string" ? value : value?.[0] ?? "",
                         onChange: (e) => onChange(e.target.value),
                         placeholder: t(
-                          "products.create.attributes.valuePlaceholder"
+                          "products.create.attributes.enterValuePlaceholder"
                         )
                       }
                     )
@@ -684,7 +708,7 @@ var SelectedAttributes = ({
                             Select.Value,
                             {
                               placeholder: t(
-                                "products.create.attributes.selectValues"
+                                "products.create.attributes.selectValuePlaceholder"
                               )
                             }
                           ) }),
@@ -708,7 +732,7 @@ var SelectedAttributes = ({
                         value: typeof value === "string" ? value : value?.[0] ?? "",
                         onChange: (e) => onChange(e.target.value),
                         placeholder: t(
-                          "products.create.attributes.valuePlaceholder"
+                          "products.create.attributes.enterValuePlaceholder"
                         )
                       }
                     )
@@ -716,7 +740,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(
@@ -766,14 +790,16 @@ var RequiredAttributes = () => {
       return {
         attribute_id: attr.id,
         title: attr.name,
-        values: attr.type === import_types.AttributeType.MULTI_SELECT ? [] : "",
+        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
+        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: [
@@ -831,7 +857,7 @@ var RequiredAttributeField = ({
                 Select.Value,
                 {
                   placeholder: t(
-                    "products.create.attributes.valuePlaceholder"
+                    "products.create.attributes.selectValuePlaceholder"
                   )
                 }
               ) }),
@@ -861,7 +887,7 @@ var RequiredAttributeField = ({
             value: typeof value === "string" ? value : value?.[0] ?? "",
             onChange: (e) => onChange(e.target.value),
             placeholder: t(
-              "products.create.attributes.valuePlaceholder"
+              "products.create.attributes.enterValuePlaceholder"
             )
           }
         ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
@@ -880,7 +906,7 @@ var RequiredAttributeField = ({
             value: typeof value === "string" ? value : value?.[0] ?? "",
             onChange: (e) => onChange(e.target.value),
             placeholder: t(
-              "products.create.attributes.valuePlaceholder"
+              "products.create.attributes.enterValuePlaceholder"
             )
           }
         ) }),
@@ -890,9 +916,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,
+    {
+      className,
+      label: t("products.create.attributes.tip"),
+      children: t("products.create.attributes.variantAxisTip")
+    }
+  );
 };
 Root._tabMeta = defineTabMeta({
   id: "attributes",
@@ -922,7 +955,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, { "data-testid": "product-create-general-section-title-error" })
             ] });
           }
         }
@@ -1275,7 +1309,7 @@ function formatFileSize(bytes, decimalPlaces = 2) {
 // src/pages/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
 import {
   Alert,
-  Checkbox,
+  Checkbox as Checkbox2,
   clx,
   Heading as Heading2,
   Hint as Hint2,
@@ -1381,7 +1415,7 @@ var ProductCreateVariantsSection = () => {
                 },
                 children: [
                   /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
-                    Checkbox,
+                    Checkbox2,
                     {
                       className: "relative",
                       checked: getCheckboxState(watchedVariants),
@@ -1422,7 +1456,7 @@ var ProductCreateVariantsSection = () => {
                                 render: ({
                                   field: { value, onChange, ...field }
                                 }) => /* @__PURE__ */ jsx5(Form.Item, { children: /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
-                                  Checkbox,
+                                  Checkbox2,
                                   {
                                     className: "relative",
                                     ...field,
@@ -1503,6 +1537,7 @@ var Header = () => {
 
 // src/pages/products/product-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 { useWatch as useWatch2 } from "react-hook-form";
 import { useTranslation as useTranslation7 } from "react-i18next";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ProductCreateOrganizationSection = () => {
@@ -1540,19 +1575,12 @@ var ProductCreateOrganizationSection = () => {
       value: seller.id
     }))
   });
+  const isGloballyAvailable = useWatch2({
+    control: form.control,
+    name: "globally_available"
+  });
   return /* @__PURE__ */ jsxs7("div", { id: "organize", className: "flex flex-col gap-y-8", "data-testid": "product-create-organize-section", children: [
     /* @__PURE__ */ jsx7(Heading4, { "data-testid": "product-create-organize-section-heading", children: t("products.organization.header") }),
-    /* @__PURE__ */ jsx7(
-      SwitchBox,
-      {
-        control: form.control,
-        name: "discountable",
-        label: t("products.fields.discountable.label"),
-        description: t("products.fields.discountable.hint"),
-        optional: true,
-        "data-testid": "product-create-organize-section-discountable-switch"
-      }
-    ),
     /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-category-collection", children: [
       /* @__PURE__ */ jsx7(
         Form.Field,
@@ -1649,14 +1677,38 @@ var ProductCreateOrganizationSection = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-stores", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsx7(
+        SwitchBox,
+        {
+          control: form.control,
+          name: "discountable",
+          label: t("products.fields.discountable.label"),
+          description: t("products.fields.discountable.hint"),
+          optional: true,
+          "data-testid": "product-create-organize-section-discountable-switch"
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        SwitchBox,
+        {
+          control: form.control,
+          name: "globally_available",
+          label: t("products.fields.globally_available.label"),
+          description: t("products.fields.globally_available.hint"),
+          optional: true,
+          "data-testid": "product-create-organize-section-globally-available-switch"
+        }
+      )
+    ] }),
+    !isGloballyAvailable && /* @__PURE__ */ jsx7(
       Form.Field,
       {
         control: form.control,
         name: "seller_ids",
         render: ({ field }) => {
           return /* @__PURE__ */ jsxs7(Form.Item, { "data-testid": "product-create-organize-section-stores-item", children: [
-            /* @__PURE__ */ jsx7(Form.Label, { optional: true, "data-testid": "product-create-organize-section-stores-label", children: t("products.fields.stores.label") }),
+            /* @__PURE__ */ jsx7(Form.Label, { "data-testid": "product-create-organize-section-stores-label", children: t("products.fields.stores.label") }),
             /* @__PURE__ */ jsx7(Form.Control, { "data-testid": "product-create-organize-section-stores-control", children: /* @__PURE__ */ jsx7(
               Combobox,
               {
@@ -1673,7 +1725,7 @@ var ProductCreateOrganizationSection = () => {
           ] });
         }
       }
-    ) })
+    )
   ] });
 };
 
@@ -1703,6 +1755,7 @@ Root3._tabMeta = defineTabMeta({
     "type_id",
     "collection_id",
     "category_id",
+    "globally_available",
     "seller_ids",
     "tags",
     "origin_country",
@@ -1718,19 +1771,22 @@ Root3._tabMeta = defineTabMeta({
 var ProductCreateOrganizeForm = Root3;
 
 // src/pages/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
-import { useMemo as useMemo3 } from "react";
-import { useWatch as useWatch2 } from "react-hook-form";
+import { Input as Input3 } from "@medusajs/ui";
+import { useMemo as useMemo3, useState as useState3 } from "react";
+import { useWatch as useWatch3 } from "react-hook-form";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var Root4 = () => {
+  const { t } = useTranslation8();
   const form = useTabbedForm();
   const { setCloseOnEscape } = useRouteModal();
-  const variants = useWatch2({
+  const [search, setSearch] = useState3("");
+  const variants = useWatch3({
     control: form.control,
     name: "variants",
     defaultValue: []
   });
-  const watchedAttributes = useWatch2({
+  const watchedAttributes = useWatch3({
     control: form.control,
     name: "attributes",
     defaultValue: []
@@ -1752,20 +1808,54 @@ var Root4 = () => {
     });
     return ret;
   }, [variants]);
+  const filteredVariantData = useMemo3(() => {
+    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__ */ jsx9(
+    Input3,
+    {
+      type: "search",
+      size: "small",
+      autoComplete: "off",
+      value: search,
+      onChange: (event) => setSearch(event.target.value),
+      placeholder: t("general.search"),
+      "data-testid": "product-create-variants-search-input"
+    }
+  );
   return /* @__PURE__ */ jsx9(
     "div",
     {
       className: "flex size-full flex-col divide-y overflow-hidden",
       "data-testid": "product-create-variants-form",
-      children: /* @__PURE__ */ jsx9("div", { "data-testid": "product-create-variants-form-datagrid", children: /* @__PURE__ */ jsx9(
-        DataGrid,
+      children: /* @__PURE__ */ jsx9(
+        "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__ */ jsx9(
+            DataGrid,
+            {
+              columns,
+              data: filteredVariantData,
+              state: form,
+              onEditingChange: (editing) => setCloseOnEscape(!editing),
+              headerContent
+            }
+          )
         }
-      ) })
+      )
     }
   );
 };
@@ -1855,7 +1945,7 @@ var ProductCreateForm = ({
       {}
     );
   }, [regions]);
-  const watchedAttributes = useWatch3({
+  const watchedAttributes = useWatch4({
     control: form.control,
     name: "attributes"
   });
@@ -1868,7 +1958,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 handleSubmit = form.handleSubmit(async (values, e) => {
     if (isRegionsPending) {
       return;
@@ -1940,6 +2030,8 @@ var ProductCreateForm = ({
   return /* @__PURE__ */ jsx10(
     TabbedForm,
     {
+      model: "product",
+      zone: "create",
       form,
       onSubmit: handleSubmit,
       isLoading: isPending || isRegionsPending,
@@ -1962,6 +2054,7 @@ var ProductCreateForm = ({
               Button3,
               {
                 "data-name": SAVE_DRAFT_BUTTON,
+                variant: "secondary",
                 size: "small",
                 type: "submit",
                 isLoading,