@mercurjs/vendor 2.2.0-canary.13 → 2.2.0-canary.14

package/dist/{chunk-MVYAN2RR.js → chunk-K5H7FQPJ.js}

@@ -1,3 +1,6 @@
+import {
+  defineTabMeta
+} from "./chunk-LEWA4BPH.js";
 import {
   DataGrid,
   createDataGridHelper
@@ -5,28 +8,24 @@ import {
 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-7GKAK7SG.js";
 import {
   useComboboxData
 } from "./chunk-OVPAOBZB.js";
 import {
   UploadMediaFormItem
-} from "./chunk-AQTEEQWX.js";
+} from "./chunk-GDME2OBZ.js";
 import {
   PRODUCT_CREATE_FORM_DEFAULTS,
   ProductCreateSchema,
-  decorateVariantsWithDefaultValues,
   generateVariantsFromAttributes,
   normalizeProductFormValues
-} from "./chunk-5YCDZ4AU.js";
+} from "./chunk-NN7E6UBM.js";
 import {
   ChipInput
 } from "./chunk-YGRTRAWX.js";
@@ -52,20 +51,20 @@ import {
 } from "./chunk-3QSRE5LS.js";
 import {
   DataTable
-} from "./chunk-5T6UWTRU.js";
+} from "./chunk-IV57G2CB.js";
 import {
   require_dist
 } from "./chunk-UCYSCKZV.js";
 import {
   useFeatureFlags
-} from "./chunk-R5QZO3QY.js";
+} from "./chunk-UZQKGNIW.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import {
   useCreateProduct,
   useProductAttributes
-} from "./chunk-JAUZ73XE.js";
+} from "./chunk-6ORRPSPG.js";
 import {
   sdk,
   uploadFilesQuery
@@ -76,19 +75,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 { CircleMiniFilledSolid, XMarkMini } from "@medusajs/icons";
+import { EllipseMiniSolid, XMarkMini } from "@medusajs/icons";
 import {
   Button as Button2,
   Heading,
@@ -111,6 +110,63 @@ import {
 } 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,
@@ -227,7 +283,6 @@ var ProductCreateAddAttributesModal = () => {
   };
   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) ?? []
     );
@@ -241,10 +296,14 @@ 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();
@@ -285,7 +344,6 @@ var ProductCreateAddAttributesModal = () => {
             isLoading,
             layout: "fill",
             prefix: ADD_ATTRIBUTES_MODAL_ID,
-            compact: true,
             emptyState
           }
         )
@@ -768,26 +826,13 @@ 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,
-        type: attr.type
-      };
-    });
-    form.setValue("attributes", [...otherAttributes, ...requiredAttributes]);
+    if (nextAttributes !== currentAttributes) {
+      form.setValue("attributes", nextAttributes);
+    }
   }, [product_attributes]);
   if (!categoryId || !product_attributes?.length) return null;
   const requiredEntries = attributes.map((attr, index) => ({ attr, index })).filter(({ attr }) => !attr.is_custom);
@@ -829,7 +874,7 @@ var RadioSelectItem = forwardRef(({ className, children, ...props }, ref) => /*
     ),
     ...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("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 })
     ]
   }
@@ -948,8 +993,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 +1362,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 +1401,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 +1443,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 +1455,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 +1471,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 +1495,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 +1520,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 +1543,7 @@ var ProductCreateOrganizationSection = () => {
                   fetchNextPage: tags.fetchNextPage
                 }
               ) }),
-              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+              /* @__PURE__ */ jsx6(Form.ErrorMessage, {})
             ] });
           }
         }
@@ -1857,19 +1553,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 +1592,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,18 +1627,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
         }
       ) })
     }
@@ -1955,14 +1683,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 +1701,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 +1711,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 +1720,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 +1738,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"
   });
@@ -2081,29 +1809,29 @@ 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,
     {
       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 +1840,7 @@ var ProductCreateForm = ({
                 children: t("actions.cancel")
               }
             ) }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx9(
               Button3,
               {
                 variant: "secondary",
@@ -2125,7 +1853,7 @@ var ProductCreateForm = ({
                 children: t("actions.saveAsDraft")
               }
             ),
-            isLastTab ? /* @__PURE__ */ jsx11(
+            isLastTab ? /* @__PURE__ */ jsx9(
               Button3,
               {
                 "data-name": "publish-button",
@@ -2137,7 +1865,7 @@ var ProductCreateForm = ({
                 children: t("actions.publish")
               },
               "submit-button"
-            ) : /* @__PURE__ */ jsx11(
+            ) : /* @__PURE__ */ jsx9(
               Button3,
               {
                 type: "button",
@@ -2158,13 +1886,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;