@mercurjs/vendor 2.1.6 → 2.2.0-canary.11

package/dist/chunk-XP23ZVQT.js

@@ -0,0 +1,2183 @@
+import {
+  DataGrid,
+  createDataGridHelper
+} from "./chunk-4LVP635F.js";
+import {
+  HandleInput
+} from "./chunk-HJ56YXBU.js";
+import {
+  defineTabMeta
+} from "./chunk-LEWA4BPH.js";
+import {
+  SwitchBox
+} from "./chunk-YVCBMOJG.js";
+import {
+  SingleCategoryCombobox
+} from "./chunk-GAE6TKOR.js";
+import {
+  useComboboxData
+} from "./chunk-OVPAOBZB.js";
+import {
+  UploadMediaFormItem
+} from "./chunk-GN6KB75Z.js";
+import {
+  PRODUCT_CREATE_FORM_DEFAULTS,
+  ProductCreateSchema,
+  decorateVariantsWithDefaultValues,
+  generateVariantsFromAttributes,
+  normalizeProductFormValues
+} from "./chunk-LDZCCWJB.js";
+import {
+  ChipInput
+} from "./chunk-YGRTRAWX.js";
+import {
+  useAttributeTableFilters,
+  useAttributeTableQuery
+} from "./chunk-HDEOZN2Q.js";
+import {
+  Combobox
+} from "./chunk-VBRTC2VU.js";
+import {
+  TabbedForm,
+  useTabbedForm
+} from "./chunk-LQD232FW.js";
+import {
+  RouteFocusModal,
+  StackedFocusModal,
+  useRouteModal,
+  useStackedModal
+} from "./chunk-GDWBOQI5.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  DataTable
+} from "./chunk-5T6UWTRU.js";
+import {
+  require_dist
+} from "./chunk-UCYSCKZV.js";
+import {
+  useFeatureFlags
+} from "./chunk-TBYCZRZ7.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useCreateProduct,
+  useProductAttributes
+} from "./chunk-JAUZ73XE.js";
+import {
+  sdk,
+  uploadFilesQuery
+} from "./chunk-RIN4CBRB.js";
+import {
+  __toESM
+} from "./chunk-NBMM2TZK.js";
+
+// src/pages/products/create/product-create.tsx
+import { Children as Children2 } from "react";
+import { useTranslation as useTranslation10 } from "react-i18next";
+
+// 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 { 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 {
+  Button as Button2,
+  Heading,
+  Hint,
+  IconButton,
+  InlineTip,
+  Input,
+  Label,
+  Select,
+  Switch,
+  Text,
+  Textarea,
+  clx
+} from "@medusajs/ui";
+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/product-create-add-attributes-modal.tsx
+import {
+  Badge,
+  Button,
+  Checkbox,
+  createDataTableColumnHelper,
+  Tooltip
+} from "@medusajs/ui";
+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;
+var MAX_VISIBLE_VALUES = 2;
+var ATTRIBUTE_TYPE_LABELS = {
+  single_select: "attributes.type.select",
+  multi_select: "attributes.type.multivalue",
+  unit: "attributes.type.unit",
+  toggle: "attributes.type.toggle",
+  text: "attributes.type.text_area"
+};
+var ROW_HIGHLIGHT_CLASSES = [
+  "[&_tr:has(button[role=checkbox][data-state=checked]:not([disabled]))>td]:!bg-ui-bg-highlight",
+  "[&_tr:has(button[role=checkbox][data-state=checked][disabled])>td]:!bg-ui-bg-subtle"
+].join(" ");
+var ProductCreateAddAttributesModal = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation();
+  const { getValues, setValue } = form;
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState(
+    {}
+  );
+  const [state, setState] = useState([]);
+  const { searchParams } = useAttributeTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: ADD_ATTRIBUTES_MODAL_ID
+  });
+  const { product_attributes, count, isLoading, isError, error } = useProductAttributes(searchParams, {
+    placeholderData: keepPreviousData
+  });
+  const open = getIsOpen(ADD_ATTRIBUTES_MODAL_ID);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const attributes = getValues("attributes") ?? [];
+    const existing = attributes.filter((a) => a.attribute_id);
+    const selection = {};
+    const stateEntries = [];
+    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({
+          id: a.attribute_id,
+          name: a.title,
+          values: Array.isArray(a.values) ? a.values : a.values ? [a.values] : [],
+          is_variant_axis: a.use_for_variants,
+          type: a.type ?? apiAttr?.type ?? "",
+          available_values: a.available_values ?? apiAttr?.values?.map((v) => ({ id: v.id, name: v.name })) ?? []
+        });
+      }
+    }
+    if (product_attributes) {
+      for (const attr of product_attributes) {
+        if (attr.is_required && !selection[attr.id]) {
+          selection[attr.id] = true;
+          stateEntries.push({
+            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 })) ?? []
+          });
+        }
+      }
+    }
+    setRowSelection(selection);
+    setState(stateEntries);
+  }, [open, getValues, product_attributes]);
+  const onRowSelectionChange = (next) => {
+    if (product_attributes) {
+      for (const attr of product_attributes) {
+        if (attr.is_required) {
+          next[attr.id] = true;
+        }
+      }
+    }
+    const ids = Object.keys(next);
+    const addedIdsSet = new Set(
+      ids.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]));
+    });
+    setRowSelection(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) ?? []
+    );
+    const selectedAttributes = state.map((a) => ({
+      attribute_id: a.id,
+      title: a.name,
+      values: a.values,
+      is_custom: false,
+      is_required: requiredIds.has(a.id),
+      use_for_variants: a.is_variant_axis,
+      type: a.type,
+      available_values: a.available_values
+    }));
+    setValue("attributes", [...selectedAttributes, ...customAttributes], {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    setIsOpen(ADD_ATTRIBUTES_MODAL_ID, false);
+  };
+  const filters = useAttributeTableFilters();
+  const columns = useColumns();
+  if (isError) {
+    throw error;
+  }
+  const emptyState = useMemo(
+    () => ({
+      empty: {
+        heading: t("products.create.attributes.noAttributesTitle"),
+        description: t("products.create.attributes.noAttributesDescription")
+      }
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ jsxs(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(
+      StackedFocusModal.Body,
+      {
+        className: `flex-1 overflow-hidden ${ROW_HIGHLIGHT_CLASSES}`,
+        "data-testid": "product-create-add-attributes-table",
+        children: /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            data: product_attributes,
+            columns,
+            filters,
+            rowCount: count,
+            pageSize: PAGE_SIZE,
+            getRowId: (row) => row.id,
+            rowSelection: {
+              state: rowSelection,
+              onRowSelectionChange,
+              enableRowSelection: (row) => !row.original.is_required
+            },
+            isLoading,
+            layout: "fill",
+            prefix: ADD_ATTRIBUTES_MODAL_ID,
+            compact: true,
+            emptyState
+          }
+        )
+      }
+    ),
+    /* @__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 useColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.select({
+        cell: (ctx) => {
+          const checked = ctx.row.getIsSelected();
+          const onChange = ctx.row.getToggleSelectedHandler();
+          const disabled = !ctx.row.getCanSelect();
+          const checkbox = /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              onClick: (e) => e.stopPropagation(),
+              checked,
+              onCheckedChange: onChange,
+              disabled
+            }
+          );
+          if (disabled) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("products.create.attributes.requiredTooltip"),
+                children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: checkbox })
+              }
+            );
+          }
+          return checkbox;
+        }
+      }),
+      columnHelper.accessor("name", {
+        header: t("attributes.fields.name"),
+        enableSorting: false
+      }),
+      columnHelper.accessor("handle", {
+        header: t("attributes.fields.handle"),
+        cell: (info) => {
+          const handle = info.getValue();
+          return handle ? `/${handle}` : "-";
+        },
+        enableSorting: false
+      }),
+      columnHelper.accessor("is_required", {
+        header: t("attributes.fields.required"),
+        cell: (info) => {
+          if (info.getValue()) {
+            return /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                content: t("products.create.attributes.requiredTooltip"),
+                children: /* @__PURE__ */ jsx("span", { className: "cursor-help underline decoration-dotted underline-offset-2", children: t("filters.radio.yes") })
+              }
+            );
+          }
+          return t("filters.radio.no");
+        },
+        enableSorting: false
+      }),
+      columnHelper.accessor("type", {
+        header: t("attributes.fields.type"),
+        cell: (info) => {
+          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
+      }),
+      columnHelper.display({
+        id: "values",
+        header: t("attributes.fields.values"),
+        cell: ({ row }) => {
+          const values = row.original.values ?? [];
+          if (!values.length) {
+            return /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          const visible = values.slice(0, MAX_VISIBLE_VALUES);
+          const remaining = values.length - MAX_VISIBLE_VALUES;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+            visible.map((v) => /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: v.name }, v.id)),
+            remaining > 0 && /* @__PURE__ */ jsxs(Badge, { size: "2xsmall", color: "grey", children: [
+              "+",
+              remaining
+            ] })
+          ] });
+        }
+      })
+    ],
+    [t]
+  );
+};
+
+// src/pages/products/create/components/product-create-attributes-form/product-create-attributes-form.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Root = () => {
+  const { t } = useTranslation2();
+  const form = useTabbedForm();
+  const { setIsOpen } = useStackedModal();
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "attributes"
+  });
+  const handleCreateNew = () => {
+    append({
+      attribute_id: void 0,
+      title: "",
+      values: [],
+      is_custom: true,
+      use_for_variants: false
+    });
+  };
+  const handleAddExisting = () => {
+    setIsOpen(ADD_ATTRIBUTES_MODAL_ID, true);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "product-create-attributes-form",
+      children: [
+        /* @__PURE__ */ jsx2(StackedFocusModal, { id: ADD_ATTRIBUTES_MODAL_ID, children: /* @__PURE__ */ jsx2(ProductCreateAddAttributesModal, {}) }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Heading, { level: "h2", children: t("products.create.attributes.header") }),
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "small",
+                className: "text-ui-fg-subtle mt-1 whitespace-pre-line",
+                children: t("products.create.attributes.description")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                type: "button",
+                variant: "secondary",
+                size: "small",
+                onClick: handleAddExisting,
+                children: t("products.create.attributes.addExisting")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                type: "button",
+                variant: "secondary",
+                size: "small",
+                onClick: handleCreateNew,
+                children: t("products.create.attributes.createNew")
+              }
+            )
+          ] }),
+          fields.some((f) => !f.is_custom && !!f.attribute_id) && /* @__PURE__ */ jsx2(SelectedAttributes, { fields, remove }),
+          fields.some((f) => f.is_custom) && /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-y-4", children: fields.map((field, index) => {
+            if (!field.is_custom) return null;
+            const useForVariants = form.watch(
+              `attributes.${index}.use_for_variants`
+            );
+            return /* @__PURE__ */ jsxs2(
+              "li",
+              {
+                className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                      Label,
+                      {
+                        size: "xsmall",
+                        weight: "plus",
+                        className: "text-ui-fg-subtle",
+                        htmlFor: `attributes.${index}.title`,
+                        children: t("fields.title")
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(
+                      Input,
+                      {
+                        className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                        ...form.register(`attributes.${index}.title`),
+                        placeholder: t(
+                          "products.create.attributes.titlePlaceholder"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                      Label,
+                      {
+                        size: "xsmall",
+                        weight: "plus",
+                        className: "text-ui-fg-subtle",
+                        htmlFor: `attributes.${index}.values`,
+                        children: t("fields.values")
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx2(
+                      Controller,
+                      {
+                        control: form.control,
+                        name: `attributes.${index}.values`,
+                        render: ({ field: { onChange, value, ...field2 } }) => useForVariants ? /* @__PURE__ */ jsx2(
+                          ChipInput,
+                          {
+                            ...field2,
+                            variant: "contrast",
+                            value: Array.isArray(value) ? value : [],
+                            onChange,
+                            placeholder: t(
+                              "products.create.attributes.valuePlaceholder"
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsx2(
+                          Textarea,
+                          {
+                            ...field2,
+                            className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                            value: Array.isArray(value) ? value[0] ?? "" : value ?? "",
+                            onChange: (e) => onChange(e.target.value),
+                            placeholder: t(
+                              "products.create.attributes.valuePlaceholder"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("div", {}),
+                    /* @__PURE__ */ jsx2(
+                      Form.Field,
+                      {
+                        control: form.control,
+                        name: `attributes.${index}.use_for_variants`,
+                        render: ({ field: { value, onChange, ref } }) => /* @__PURE__ */ jsx2(Form.Item, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-x-3 py-1.5", children: [
+                          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+                            Switch,
+                            {
+                              ref,
+                              className: "shrink-0 rtl:rotate-180",
+                              checked: value,
+                              onCheckedChange: onChange
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+                            /* @__PURE__ */ jsx2(Label, { size: "xsmall", weight: "plus", children: t("products.create.attributes.useForVariants") }),
+                            /* @__PURE__ */ jsx2(Hint, { className: "!txt-small", children: t(
+                              "products.create.attributes.useForVariantsDescription"
+                            ) })
+                          ] })
+                        ] }) })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx2(
+                    IconButton,
+                    {
+                      type: "button",
+                      size: "small",
+                      variant: "transparent",
+                      className: "text-ui-fg-muted",
+                      onClick: () => remove(index),
+                      children: /* @__PURE__ */ jsx2(XMarkMini, {})
+                    }
+                  )
+                ]
+              },
+              field.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx2(RequiredAttributes, {})
+        ] })
+      ]
+    }
+  );
+};
+var SelectedAttributes = ({
+  fields,
+  remove
+}) => {
+  const { t } = useTranslation2();
+  const form = useTabbedForm();
+  const entries = fields.map((field, index) => ({ field, index })).filter(
+    ({ field }) => !field.is_custom && !field.is_required && !!field.attribute_id
+  );
+  if (!entries.length) return null;
+  return /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-y-4", children: entries.map(({ field, index }) => {
+    const attrType = field.type;
+    const availableValues = field.available_values ?? [];
+    return /* @__PURE__ */ jsxs2(
+      "li",
+      {
+        className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+              Label,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-subtle",
+                children: t("fields.title")
+              }
+            ) }),
+            /* @__PURE__ */ jsx2(
+              Input,
+              {
+                value: field.title,
+                disabled: true,
+                className: "bg-ui-bg-field-component"
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+              Label,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-subtle",
+                children: t("fields.values")
+              }
+            ) }),
+            attrType === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
+              Controller,
+              {
+                control: form.control,
+                name: `attributes.${index}.values`,
+                render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsx2(
+                  Combobox,
+                  {
+                    ...rest,
+                    ref,
+                    value: Array.isArray(value) ? value : [],
+                    onChange: (val) => onChange(val ?? []),
+                    options: availableValues.map((v) => ({
+                      value: v.name,
+                      label: v.name
+                    })),
+                    placeholder: t("products.create.attributes.selectValues")
+                  }
+                )
+              }
+            ) : attrType === import_types.AttributeType.SINGLE_SELECT ? /* @__PURE__ */ jsx2(
+              Controller,
+              {
+                control: form.control,
+                name: `attributes.${index}.values`,
+                render: ({ field: { onChange, value, ref, ...rest } }) => /* @__PURE__ */ jsxs2(
+                  Select,
+                  {
+                    ...rest,
+                    value: typeof value === "string" ? value : value?.[0] ?? "",
+                    onValueChange: onChange,
+                    children: [
+                      /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
+                        Select.Value,
+                        {
+                          placeholder: t(
+                            "products.create.attributes.selectValues"
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx2(Select.Content, { children: availableValues.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
+                    ]
+                  }
+                )
+              }
+            ) : attrType === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
+              Controller,
+              {
+                control: form.control,
+                name: `attributes.${index}.values`,
+                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
+                  Textarea,
+                  {
+                    ...rest,
+                    className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                    value: typeof value === "string" ? value : value?.[0] ?? "",
+                    onChange: (e) => onChange(e.target.value),
+                    placeholder: t(
+                      "products.create.attributes.valuePlaceholder"
+                    )
+                  }
+                )
+              }
+            ) : attrType === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
+              Controller,
+              {
+                control: form.control,
+                name: `attributes.${index}.values`,
+                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsxs2(
+                  Select,
+                  {
+                    ...rest,
+                    value: typeof value === "string" ? value : value?.[0] ?? "",
+                    onValueChange: onChange,
+                    children: [
+                      /* @__PURE__ */ jsx2(Select.Trigger, { children: /* @__PURE__ */ jsx2(
+                        Select.Value,
+                        {
+                          placeholder: t(
+                            "products.create.attributes.selectValues"
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs2(Select.Content, { children: [
+                        /* @__PURE__ */ jsx2(Select.Item, { value: "true", children: t("filters.radio.yes") }),
+                        /* @__PURE__ */ jsx2(Select.Item, { value: "false", children: t("filters.radio.no") })
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx2(
+              Controller,
+              {
+                control: form.control,
+                name: `attributes.${index}.values`,
+                render: ({ field: { onChange, value, ...rest } }) => /* @__PURE__ */ jsx2(
+                  Input,
+                  {
+                    ...rest,
+                    value: typeof value === "string" ? value : value?.[0] ?? "",
+                    onChange: (e) => onChange(e.target.value),
+                    placeholder: t(
+                      "products.create.attributes.valuePlaceholder"
+                    )
+                  }
+                )
+              }
+            ),
+            field.use_for_variants && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2("div", {}),
+              /* @__PURE__ */ jsx2(VariantAxisTip, { className: "border-none" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              className: "text-ui-fg-muted",
+              onClick: () => remove(index),
+              children: /* @__PURE__ */ jsx2(XMarkMini, {})
+            }
+          )
+        ]
+      },
+      field.id
+    );
+  }) });
+};
+var RequiredAttributes = () => {
+  const { t } = useTranslation2();
+  const form = useTabbedForm();
+  const categoryId = form.watch("category_id");
+  const { product_attributes } = useProductAttributes(
+    {
+      category_id: categoryId,
+      is_required: true
+    },
+    { enabled: !!categoryId }
+  );
+  const attributes = form.watch("attributes") || [];
+  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 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]);
+  }, [product_attributes]);
+  if (!categoryId || !product_attributes?.length) return null;
+  const requiredEntries = attributes.map((attr, index) => ({ attr, index })).filter(({ attr }) => !attr.is_custom);
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2("div", { className: "border-ui-border-base border-t border-dashed" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Text, { size: "small", weight: "plus", leading: "compact", children: t("products.create.attributes.requiredAttributes") }),
+        /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-ui-fg-subtle", children: t("products.create.attributes.requiredAttributesHint") })
+      ] }),
+      requiredEntries.map(({ attr, index }) => {
+        const apiAttr = product_attributes.find(
+          (a) => a.id === attr.attribute_id
+        );
+        if (!apiAttr) return null;
+        return /* @__PURE__ */ jsx2(
+          RequiredAttributeField,
+          {
+            attribute: apiAttr,
+            index
+          },
+          apiAttr.id
+        );
+      })
+    ] })
+  ] });
+};
+var RadioSelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  RadixSelect.Item,
+  {
+    ref,
+    className: clx(
+      "bg-ui-bg-component txt-compact-small grid cursor-pointer grid-cols-[15px_1fr] items-center gap-x-2 rounded-[4px] px-2 py-1.5 outline-none transition-colors",
+      "focus-visible:bg-ui-bg-component-hover",
+      "active:bg-ui-bg-component-pressed",
+      "data-[state=checked]:txt-compact-small-plus",
+      "disabled:text-ui-fg-disabled",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2("span", { className: "flex h-[15px] w-[15px] items-center justify-center", children: /* @__PURE__ */ jsx2(RadixSelect.ItemIndicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx2(CircleMiniFilledSolid, {}) }) }),
+      /* @__PURE__ */ jsx2(RadixSelect.ItemText, { className: "flex-1 truncate", children })
+    ]
+  }
+));
+RadioSelectItem.displayName = "RadioSelectItem";
+var RequiredAttributeField = ({
+  attribute,
+  index
+}) => {
+  const { t } = useTranslation2();
+  const form = useTabbedForm();
+  return /* @__PURE__ */ jsx2(
+    Form.Field,
+    {
+      control: form.control,
+      name: `attributes.${index}.values`,
+      render: ({ field: { onChange, value, ref, ...field } }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+        /* @__PURE__ */ jsx2(Form.Label, { children: attribute.name }),
+        /* @__PURE__ */ jsx2(Form.Control, { children: attribute.type === import_types.AttributeType.SINGLE_SELECT ? /* @__PURE__ */ jsxs2(
+          Select,
+          {
+            ...field,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onValueChange: onChange,
+            children: [
+              /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
+                Select.Value,
+                {
+                  placeholder: t(
+                    "products.create.attributes.selectValuePlaceholder"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ 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(
+          Combobox,
+          {
+            ...field,
+            ref,
+            value: Array.isArray(value) ? value : [],
+            onChange: (val) => onChange(val ?? []),
+            options: attribute.values?.map((v) => ({
+              value: v.name,
+              label: v.name
+            })) ?? [],
+            placeholder: t("products.create.attributes.selectValues")
+          }
+        ) : attribute.type === import_types.AttributeType.TEXT ? /* @__PURE__ */ jsx2(
+          Textarea,
+          {
+            ...field,
+            ref,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: t(
+              "products.create.attributes.enterValuePlaceholder"
+            )
+          }
+        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsxs2(
+          Select,
+          {
+            ...field,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onValueChange: onChange,
+            children: [
+              /* @__PURE__ */ jsx2(Select.Trigger, { ref, children: /* @__PURE__ */ jsx2(
+                Select.Value,
+                {
+                  placeholder: t(
+                    "products.create.attributes.selectValuePlaceholder"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxs2(Select.Content, { children: [
+                /* @__PURE__ */ jsx2(RadioSelectItem, { value: "true", children: t("filters.radio.yes") }),
+                /* @__PURE__ */ jsx2(RadioSelectItem, { value: "false", children: t("filters.radio.no") })
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx2(
+          Input,
+          {
+            ...field,
+            ref,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: t(
+              "products.create.attributes.enterValuePlaceholder"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(Form.ErrorMessage, {}),
+        attribute.is_variant_axis && /* @__PURE__ */ jsx2(VariantAxisTip, {})
+      ] })
+    }
+  );
+};
+var VariantAxisTip = ({ className }) => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsx2(
+    InlineTip,
+    {
+      label: t("products.create.attributes.tip"),
+      className,
+      children: t("products.create.attributes.variantAxisTip")
+    }
+  );
+};
+Root._tabMeta = defineTabMeta({
+  id: "attributes",
+  labelKey: "products.create.tabs.attributes",
+  validationFields: ["attributes"]
+});
+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";
+
+// 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";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProductCreateGeneralSection = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsxs3("div", { id: "general", className: "flex flex-col gap-y-6", "data-testid": "product-create-general-section", children: [
+    /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-y-2", "data-testid": "product-create-general-section-fields", children: /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", "data-testid": "product-create-general-section-title-fields", children: [
+      /* @__PURE__ */ jsx3(
+        Form.Field,
+        {
+          control: form.control,
+          name: "title",
+          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.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Form.Field,
+        {
+          control: form.control,
+          name: "subtitle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "product-create-general-section-subtitle-item", children: [
+              /* @__PURE__ */ jsx3(Form.Label, { optional: true, "data-testid": "product-create-general-section-subtitle-label", children: t("products.fields.subtitle.label") }),
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "product-create-general-section-subtitle-control", children: /* @__PURE__ */ jsx3(Input2, { ...field, placeholder: t("products.fields.subtitle.placeholder"), "data-testid": "product-create-general-section-subtitle-input" }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "product-create-general-section-handle-item", children: [
+              /* @__PURE__ */ jsx3(
+                Form.Label,
+                {
+                  tooltip: t("products.fields.handle.tooltip"),
+                  optional: true,
+                  "data-testid": "product-create-general-section-handle-label",
+                  children: t("fields.handle")
+                }
+              ),
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "product-create-general-section-handle-control", children: /* @__PURE__ */ jsx3(HandleInput, { ...field, placeholder: t("products.fields.handle.placeholder"), "data-testid": "product-create-general-section-handle-input" }) })
+            ] });
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx3(
+      Form.Field,
+      {
+        control: form.control,
+        name: "description",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "product-create-general-section-description-item", children: [
+            /* @__PURE__ */ jsx3(Form.Label, { optional: true, "data-testid": "product-create-general-section-description-label", children: t("products.fields.description.label") }),
+            /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "product-create-general-section-description-control", children: /* @__PURE__ */ jsx3(Textarea2, { ...field, placeholder: t("products.fields.description.placeholder"), "data-testid": "product-create-general-section-description-input" }) })
+          ] });
+        }
+      }
+    )
+  ] });
+};
+
+// src/pages/products/create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx
+import {
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  DotsSix,
+  StackPerspective,
+  ThumbnailBadge,
+  Trash,
+  XMark
+} from "@medusajs/icons";
+import { IconButton as IconButton2, Text as Text2 } from "@medusajs/ui";
+import { useState as useState2 } from "react";
+import { useFieldArray as useFieldArray2 } from "react-hook-form";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+var ProductCreateMediaSection = () => {
+  const form = useTabbedForm();
+  const { fields, append, remove } = useFieldArray2({
+    name: "media",
+    control: form.control,
+    keyName: "field_id"
+  });
+  const [activeId, setActiveId] = useState2(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = fields.findIndex((item) => item.field_id === active.id);
+      const newIndex = fields.findIndex((item) => item.field_id === over?.id);
+      form.setValue("media", arrayMove(fields, oldIndex, newIndex), {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+    }
+  };
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+  const getOnDelete = (index) => {
+    return () => {
+      remove(index);
+    };
+  };
+  const getMakeThumbnail = (index) => {
+    return () => {
+      const newFields = fields.map((field, i) => {
+        return {
+          ...field,
+          isThumbnail: i === index
+        };
+      });
+      form.setValue("media", newFields, {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+    };
+  };
+  const getItemHandlers = (index) => {
+    return {
+      onDelete: getOnDelete(index),
+      onMakeThumbnail: getMakeThumbnail(index)
+    };
+  };
+  return /* @__PURE__ */ jsxs4("div", { id: "media", className: "flex flex-col gap-y-2", "data-testid": "product-create-media-section", children: [
+    /* @__PURE__ */ jsx4(UploadMediaFormItem, { form, append, showHint: false }),
+    /* @__PURE__ */ jsxs4(
+      DndContext,
+      {
+        sensors,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        children: [
+          /* @__PURE__ */ jsx4(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx4(
+            MediaGridItemOverlay,
+            {
+              field: fields.find((m) => m.field_id === activeId)
+            }
+          ) : null }),
+          /* @__PURE__ */ jsx4("ul", { className: "flex flex-col gap-y-2", "data-testid": "product-create-media-section-list", children: /* @__PURE__ */ jsx4(SortableContext, { items: fields.map((field) => field.field_id), children: fields.map((field, index) => {
+            const { onDelete, onMakeThumbnail } = getItemHandlers(index);
+            return /* @__PURE__ */ jsx4(
+              MediaItem,
+              {
+                field,
+                onDelete,
+                onMakeThumbnail
+              },
+              field.field_id
+            );
+          }) }) })
+        ]
+      }
+    )
+  ] });
+};
+var MediaItem = ({ field, onDelete, onMakeThumbnail }) => {
+  const { t } = useTranslation4();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: field.field_id });
+  const style = {
+    opacity: isDragging ? 0.4 : void 0,
+    transform: CSS.Translate.toString(transform),
+    transition
+  };
+  if (!field.file) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4(
+    "li",
+    {
+      className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
+      ref: setNodeRef,
+      style,
+      "data-testid": `product-create-media-section-item-${field.field_id}`,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx4(
+            IconButton2,
+            {
+              variant: "transparent",
+              type: "button",
+              size: "small",
+              ...attributes,
+              ...listeners,
+              ref: setActivatorNodeRef,
+              className: "cursor-grab touch-none active:cursor-grabbing",
+              children: /* @__PURE__ */ jsx4(DotsSix, { className: "text-ui-fg-muted" })
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx4("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx4(ThumbnailPreview, { url: field.url }) }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: field.file.name }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1", children: [
+                field.isThumbnail && /* @__PURE__ */ jsx4(ThumbnailBadge, {}),
+                /* @__PURE__ */ jsx4(
+                  Text2,
+                  {
+                    size: "xsmall",
+                    leading: "compact",
+                    className: "text-ui-fg-subtle",
+                    children: formatFileSize(field.file.size)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx4(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      label: t("products.media.makeThumbnail"),
+                      icon: /* @__PURE__ */ jsx4(StackPerspective, {}),
+                      onClick: onMakeThumbnail
+                    }
+                  ]
+                },
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx4(Trash, {}),
+                      label: t("actions.delete"),
+                      onClick: onDelete
+                    }
+                  ]
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            IconButton2,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              onClick: onDelete,
+              children: /* @__PURE__ */ jsx4(XMark, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var MediaGridItemOverlay = ({ field }) => {
+  return /* @__PURE__ */ jsxs4("li", { className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx4(
+        IconButton2,
+        {
+          variant: "transparent",
+          size: "small",
+          className: "cursor-grab touch-none active:cursor-grabbing",
+          children: /* @__PURE__ */ jsx4(DotsSix, { className: "text-ui-fg-muted" })
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx4("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx4(ThumbnailPreview, { url: field.url }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", children: field.file?.name }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1", children: [
+            field.isThumbnail && /* @__PURE__ */ jsx4(ThumbnailBadge, {}),
+            /* @__PURE__ */ jsx4(
+              Text2,
+              {
+                size: "xsmall",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: formatFileSize(field.file?.size ?? 0)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx4(ActionMenu, { groups: [] }),
+      /* @__PURE__ */ jsx4(
+        IconButton2,
+        {
+          type: "button",
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+          },
+          children: /* @__PURE__ */ jsx4(XMark, {})
+        }
+      )
+    ] })
+  ] });
+};
+var ThumbnailPreview = ({ url }) => {
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4("img", { src: url, alt: "", className: "size-full object-cover object-center" });
+};
+function formatFileSize(bytes, decimalPlaces = 2) {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  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";
+var Root2 = () => {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "product-create-details-form",
+      children: /* @__PURE__ */ jsxs7(
+        "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(
+              "div",
+              {
+                className: "flex flex-col gap-y-6",
+                "data-testid": "product-create-details-form-sections",
+                children: [
+                  /* @__PURE__ */ jsx7(ProductCreateGeneralSection, {}),
+                  /* @__PURE__ */ jsx7(ProductCreateMediaSection, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx7(ProductCreateVariantsSection, {})
+          ]
+        }
+      )
+    }
+  );
+};
+Root2._tabMeta = defineTabMeta({
+  id: "details",
+  labelKey: "products.create.tabs.details",
+  validationFields: ["title", "handle", "description", "media"]
+});
+var ProductCreateDetailsForm = Root2;
+var Header = () => {
+  const { t } = useTranslation6();
+  return /* @__PURE__ */ jsx7(
+    "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") })
+    }
+  );
+};
+
+// 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";
+var ProductCreateOrganizationSection = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation7();
+  const collections = useComboboxData({
+    queryKey: ["product_collections"],
+    queryFn: (params) => sdk.vendor.collections.query(params),
+    getOptions: (data) => data.collections.map((collection) => ({
+      label: collection.title,
+      value: collection.id
+    }))
+  });
+  const types = useComboboxData({
+    queryKey: ["product_types"],
+    queryFn: (params) => sdk.vendor.productTypes.query(params),
+    getOptions: (data) => data.product_types.map((type) => ({
+      label: type.value,
+      value: type.id
+    }))
+  });
+  const tags = useComboboxData({
+    queryKey: ["product_tags"],
+    queryFn: (params) => sdk.vendor.productTags.query(params),
+    getOptions: (data) => data.product_tags.map((tag) => ({
+      label: tag.value,
+      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(
+      SwitchBox,
+      {
+        control: form.control,
+        name: "discountable",
+        label: t("products.fields.discountable.label"),
+        description: t("products.fields.discountable.hint"),
+        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(
+        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,
+                {
+                  tooltip: t("products.fields.primaryCategory.tooltip"),
+                  "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, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        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(
+                Combobox,
+                {
+                  ...field,
+                  options: collections.options,
+                  searchValue: collections.searchValue,
+                  onSearchValueChange: collections.onSearchValueChange,
+                  fetchNextPage: collections.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx8(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(
+        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(
+                Combobox,
+                {
+                  ...field,
+                  options: types.options,
+                  searchValue: types.searchValue,
+                  onSearchValueChange: types.onSearchValueChange,
+                  fetchNextPage: types.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        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(
+                Combobox,
+                {
+                  ...field,
+                  options: tags.options,
+                  searchValue: tags.searchValue,
+                  onSearchValueChange: tags.onSearchValueChange,
+                  fetchNextPage: tags.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx8(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/pages/products/create/components/product-create-organize-form/product-create-organize-form.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Root3 = () => {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "product-create-organize-form",
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "flex w-full max-w-[720px] flex-col gap-y-8",
+          "data-testid": "product-create-organize-form-content",
+          children: /* @__PURE__ */ jsx9(ProductCreateOrganizationSection, {})
+        }
+      )
+    }
+  );
+};
+Root3._tabMeta = defineTabMeta({
+  id: "organize",
+  labelKey: "products.create.tabs.organize",
+  validationFields: [
+    "type_id",
+    "collection_id",
+    "category_id",
+    "tags",
+    "origin_country",
+    "material",
+    "width",
+    "length",
+    "height",
+    "weight",
+    "mid_code",
+    "hs_code"
+  ]
+});
+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";
+var Root4 = () => {
+  const form = useTabbedForm();
+  const { setCloseOnEscape } = useRouteModal();
+  const variants = useWatch2({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const watchedAttributes = useWatch2({
+    control: form.control,
+    name: "attributes",
+    defaultValue: []
+  });
+  const variantAxes = useMemo4(() => {
+    return (watchedAttributes ?? []).filter((attr) => attr.use_for_variants && attr.title).map((attr) => ({
+      title: attr.title
+    }));
+  }, [watchedAttributes]);
+  const columns = useColumns2({ variantAxes });
+  const variantData = useMemo4(() => {
+    const ret = [];
+    variants.forEach((v, i) => {
+      if (v.should_create) {
+        ret.push({ ...v, originalIndex: i });
+      }
+    });
+    return ret;
+  }, [variants]);
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "flex size-full flex-col divide-y overflow-hidden",
+      "data-testid": "product-create-variants-form",
+      children: /* @__PURE__ */ jsx10("div", { "data-testid": "product-create-variants-form-datagrid", children: /* @__PURE__ */ jsx10(
+        DataGrid,
+        {
+          columns,
+          data: variantData,
+          state: form,
+          onEditingChange: (editing) => setCloseOnEscape(!editing)
+        }
+      ) })
+    }
+  );
+};
+Root4._tabMeta = defineTabMeta({
+  id: "variants",
+  labelKey: "products.create.tabs.variants",
+  validationFields: ["variants"]
+});
+var ProductCreateVariantsForm = Root4;
+var columnHelper2 = createDataGridHelper();
+var useColumns2 = ({
+  variantAxes
+}) => {
+  const { t } = useTranslation8();
+  return useMemo4(
+    () => [
+      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(" / ") }) }),
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.ReadonlyCell, { context, children: variantAxes.map((a) => context.row.original.options?.[a.title]).join(" / ") });
+        },
+        disableHiding: true
+      }),
+      columnHelper2.column({
+        id: "title",
+        name: t("fields.title"),
+        header: t("fields.title"),
+        field: (context) => `variants.${context.row.original.originalIndex}.title`,
+        type: "text",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "sku",
+        name: t("fields.sku"),
+        header: t("fields.sku"),
+        field: (context) => `variants.${context.row.original.originalIndex}.sku`,
+        type: "text",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+        }
+      })
+    ],
+    [variantAxes, t]
+  );
+};
+
+// src/pages/products/create/components/product-create-form/product-create-form.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var ProductCreateForm = ({
+  children,
+  schema,
+  defaultValues: extraDefaults
+}) => {
+  const { t } = useTranslation9();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      ...PRODUCT_CREATE_FORM_DEFAULTS,
+      ...extraDefaults
+    },
+    resolver: zodResolver(schema ?? ProductCreateSchema)
+  });
+  const { mutateAsync, isPending } = useCreateProduct();
+  const { feature_flags } = useFeatureFlags();
+  const productRequestEnabled = !!feature_flags?.[import_types6.MercurFeatureFlags.PRODUCT_REQUEST];
+  const watchedAttributes = useWatch3({
+    control: form.control,
+    name: "attributes"
+  });
+  useEffect3(() => {
+    const currentVariants = form.getValues("variants") ?? [];
+    const newVariants = generateVariantsFromAttributes(
+      watchedAttributes ?? [],
+      currentVariants
+    );
+    if (JSON.stringify(newVariants.map((v) => v.options)) !== JSON.stringify(currentVariants.map((v) => v.options))) {
+      form.setValue("variants", newVariants);
+    }
+  }, [watchedAttributes]);
+  const submitProduct = async (values, isDraftSubmission) => {
+    const media = values.media || [];
+    const payload = { ...values, media: void 0 };
+    let uploadedMedia = [];
+    try {
+      const filesToUpload = media.map((m, i) => ({ file: m.file, isThumbnail: m.isThumbnail, index: i })).filter((m) => !!m.file);
+      if (filesToUpload.length) {
+        const result = await uploadFilesQuery(
+          filesToUpload.map(({ file }) => ({ file }))
+        );
+        const uploadedFiles = result?.files ?? [];
+        uploadedMedia = uploadedFiles.map((file, i) => ({
+          ...file,
+          isThumbnail: filesToUpload[i].isThumbnail
+        }));
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    const submittedStatus = isDraftSubmission ? "draft" : productRequestEnabled ? "proposed" : "published";
+    await mutateAsync(
+      normalizeProductFormValues({
+        ...payload,
+        media: uploadedMedia,
+        status: submittedStatus
+      }),
+      {
+        onSuccess: (data) => {
+          if (submittedStatus === "proposed") {
+            toast.success(t("products.create.requestSuccessToast"));
+          } else {
+            toast.success(
+              t("products.create.successToast", {
+                title: data.product.title
+              })
+            );
+          }
+          handleSuccess(`../${data.product.id}`);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  };
+  const handleSubmit = form.handleSubmit(async (values) => {
+    await submitProduct(values, false);
+  });
+  const handleSaveAsDraft = async () => {
+    const titleValid = await form.trigger("title");
+    if (!titleValid) {
+      return;
+    }
+    await submitProduct(form.getValues(), true);
+  };
+  const defaultTabs = useMemo5(
+    () => [
+      /* @__PURE__ */ jsx11(ProductCreateDetailsForm, {}, "details"),
+      /* @__PURE__ */ jsx11(ProductCreateOrganizeForm, {}, "organize"),
+      /* @__PURE__ */ jsx11(ProductCreateAttributesForm, {}, "attributes"),
+      /* @__PURE__ */ jsx11(ProductCreateVariantsForm, {}, "variants")
+    ],
+    []
+  );
+  const hasCustomChildren = Children.count(children) > 0;
+  return /* @__PURE__ */ jsx11(
+    TabbedForm,
+    {
+      form,
+      onSubmit: handleSubmit,
+      isLoading: isPending,
+      footer: ({ isLastTab, onNext, isLoading }) => /* @__PURE__ */ jsxs9(
+        "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(
+              Button3,
+              {
+                variant: "secondary",
+                size: "small",
+                "data-testid": "product-create-form-cancel-button",
+                children: t("actions.cancel")
+              }
+            ) }),
+            /* @__PURE__ */ jsx11(
+              Button3,
+              {
+                variant: "secondary",
+                size: "small",
+                type: "button",
+                onClick: handleSaveAsDraft,
+                isLoading,
+                className: "whitespace-nowrap",
+                "data-testid": "product-create-form-save-draft-button",
+                children: t("actions.saveAsDraft")
+              }
+            ),
+            isLastTab ? /* @__PURE__ */ jsx11(
+              Button3,
+              {
+                "data-name": "publish-button",
+                type: "submit",
+                variant: "primary",
+                size: "small",
+                isLoading,
+                "data-testid": "product-create-form-publish-button",
+                children: t("actions.publish")
+              },
+              "submit-button"
+            ) : /* @__PURE__ */ jsx11(
+              Button3,
+              {
+                type: "button",
+                variant: "primary",
+                size: "small",
+                onClick: () => onNext(),
+                "data-testid": "product-create-form-continue-button",
+                children: t("actions.continue")
+              },
+              "next-button"
+            )
+          ]
+        }
+      ),
+      children: hasCustomChildren ? children : defaultTabs
+    }
+  );
+};
+
+// src/pages/products/create/product-create.tsx
+import { jsx as jsx12, jsxs as jsxs10 } 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, {})
+  ] });
+};
+var ProductCreate = Root5;
+var ProductCreatePage = Object.assign(Root5, {
+  Form: ProductCreateForm,
+  DetailsTab: ProductCreateDetailsForm,
+  OrganizeTab: ProductCreateOrganizeForm,
+  AttributesTab: ProductCreateAttributesForm,
+  VariantsTab: ProductCreateVariantsForm,
+  Tab: TabbedForm.Tab
+});
+
+export {
+  ProductCreate,
+  ProductCreatePage
+};