@mercurjs/admin 2.1.2 → 2.2.0-canary.1

package/dist/chunk-LT3REHJG.js

@@ -0,0 +1,2355 @@
+import {
+  SortableList
+} from "./chunk-IIFQ7KYL.js";
+import {
+  HandleInput
+} from "./chunk-HJ56YXBU.js";
+import {
+  UploadMediaFormItem
+} from "./chunk-26UTIAAZ.js";
+import {
+  PRODUCT_CREATE_FORM_DEFAULTS,
+  ProductCreateSchema,
+  decorateVariantsWithDefaultValues,
+  generateVariantsFromAttributes,
+  normalizeProductFormValues
+} from "./chunk-EREXPX6I.js";
+import {
+  useAttributeTableFilters
+} from "./chunk-RT6L7JXU.js";
+import {
+  useAttributeTableQuery
+} from "./chunk-4YWKKCTT.js";
+import {
+  SingleCategoryCombobox
+} from "./chunk-BHOZKBYY.js";
+import {
+  useComboboxData
+} from "./chunk-5KGMGL4N.js";
+import {
+  Combobox
+} from "./chunk-AW77UWCZ.js";
+import {
+  TabbedForm,
+  defineTabMeta,
+  useTabbedForm
+} from "./chunk-4LXBQTFN.js";
+import {
+  SwitchBox
+} from "./chunk-2EME4AWX.js";
+import {
+  ChipInput
+} from "./chunk-YGRTRAWX.js";
+import {
+  DataGrid,
+  createDataGridHelper,
+  createDataGridPriceColumns
+} from "./chunk-V6OGMYAI.js";
+import {
+  RouteFocusModal,
+  StackedFocusModal,
+  useRouteModal,
+  useStackedModal
+} from "./chunk-FWJLS7XD.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  DataTable
+} from "./chunk-LYZT5REU.js";
+import {
+  require_dist
+} from "./chunk-2MDGYHWN.js";
+import {
+  useProductAttributes
+} from "./chunk-533GMKEG.js";
+import {
+  useRegions
+} from "./chunk-ESPLVOFC.js";
+import {
+  useStore
+} from "./chunk-FXWKGNRV.js";
+import {
+  usePricePreferences
+} from "./chunk-VDKOJ5WD.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useSalesChannel
+} from "./chunk-S5BJ5CMF.js";
+import {
+  useCreateProduct
+} from "./chunk-2YYXP6XI.js";
+import {
+  sdk
+} from "./chunk-ZBWL72TB.js";
+import {
+  __toESM
+} from "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-create/product-create.tsx
+import { Children as Children2 } from "react";
+import { useTranslation as useTranslation11 } from "react-i18next";
+
+// src/pages/products/product-create/components/product-create-form/product-create-form.tsx
+import { Button as Button4, toast } from "@medusajs/ui";
+import { useCallback, useEffect as useEffect3, useMemo as useMemo4, Children } from "react";
+import { useForm, useWatch as useWatch4 } from "react-hook-form";
+import { useTranslation as useTranslation10 } from "react-i18next";
+
+// src/pages/products/product-create/components/product-create-attributes-form/product-create-attributes-form.tsx
+var import_types = __toESM(require_dist(), 1);
+import { XMarkMini } from "@medusajs/icons";
+import {
+  Button as Button2,
+  Heading,
+  Hint,
+  IconButton,
+  InlineTip,
+  Input,
+  Label,
+  Select,
+  Switch,
+  Text,
+  Textarea
+} from "@medusajs/ui";
+import { useEffect as useEffect2 } from "react";
+import {
+  Controller,
+  useFieldArray
+} from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/pages/products/product-create/components/product-create-attributes-form/product-create-add-attributes-modal.tsx
+import {
+  Badge,
+  Button,
+  createDataTableColumnHelper
+} 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 ProductCreateAddAttributesModal = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation();
+  const { getValues, setValue } = form;
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState(
+    {}
+  );
+  const [state, setState] = useState([]);
+  const categoryId = form.watch("category_id");
+  const { searchParams } = useAttributeTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: ADD_ATTRIBUTES_MODAL_ID
+  });
+  const attributesQuery = useMemo(
+    () => ({ ...searchParams, category_id: categoryId || void 0 }),
+    [searchParams, categoryId]
+  );
+  const { product_attributes, count, isLoading, isError, error } = useProductAttributes(attributesQuery, {
+    placeholderData: keepPreviousData
+  });
+  const open = getIsOpen(ADD_ATTRIBUTES_MODAL_ID);
+  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;
+  }
+  return /* @__PURE__ */ jsxs(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        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
+      }
+    ) }),
+    /* @__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(),
+      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) => info.getValue() ? t("filters.radio.yes") : 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/product-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,
+                "data-testid": "product-create-attributes-add-existing",
+                children: t("products.create.attributes.addExisting")
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              Button2,
+              {
+                type: "button",
+                variant: "secondary",
+                size: "small",
+                onClick: handleCreateNew,
+                "data-testid": "product-create-attributes-create-new",
+                children: t("products.create.attributes.createNew")
+              }
+            )
+          ] }),
+          fields.some((f) => !f.is_custom && !!f.attribute_id) && /* @__PURE__ */ jsx2(SelectedAttributes, { fields, remove }),
+          fields.some((f) => f.is_custom) && /* @__PURE__ */ jsx2(
+            "ul",
+            {
+              className: "flex flex-col gap-y-4",
+              "data-testid": "product-create-attributes-list",
+              children: fields.map((field, index) => {
+                if (!field.is_custom) return null;
+                const useForVariants = form.watch(
+                  `attributes.${index}.use_for_variants`
+                );
+                return /* @__PURE__ */ jsxs2(
+                  "li",
+                  {
+                    className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+                    "data-testid": `product-create-attribute-row-${index}`,
+                    children: [
+                      /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                          Label,
+                          {
+                            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"
+                            ),
+                            "data-testid": `product-create-attribute-title-${index}`
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                          Label,
+                          {
+                            size: "xsmall",
+                            weight: "plus",
+                            className: "text-ui-fg-subtle",
+                            htmlFor: `attributes.${index}.values`,
+                            children: t("fields.values")
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx2(
+                          Controller,
+                          {
+                            control: form.control,
+                            name: `attributes.${index}.values`,
+                            render: ({ field: { onChange, value, ...field2 } }) => useForVariants ? /* @__PURE__ */ jsx2(
+                              ChipInput,
+                              {
+                                ...field2,
+                                variant: "contrast",
+                                value: Array.isArray(value) ? value : [],
+                                onChange,
+                                placeholder: t(
+                                  "products.create.attributes.valuePlaceholder"
+                                ),
+                                "data-testid": `product-create-attribute-values-${index}`
+                              }
+                            ) : /* @__PURE__ */ jsx2(
+                              Textarea,
+                              {
+                                ...field2,
+                                className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                                value: Array.isArray(value) ? value[0] ?? "" : value ?? "",
+                                onChange: (e) => onChange(e.target.value),
+                                placeholder: t(
+                                  "products.create.attributes.valuePlaceholder"
+                                ),
+                                "data-testid": `product-create-attribute-values-${index}`
+                              }
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("div", {}),
+                        /* @__PURE__ */ jsx2(
+                          Form.Field,
+                          {
+                            control: form.control,
+                            name: `attributes.${index}.use_for_variants`,
+                            render: ({
+                              field: { value, onChange, ref }
+                            }) => /* @__PURE__ */ jsx2(Form.Item, { children: /* @__PURE__ */ jsxs2(
+                              "div",
+                              {
+                                className: "flex items-start gap-x-3 py-1.5",
+                                "data-testid": `product-create-attribute-use-for-variants-${index}`,
+                                children: [
+                                  /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+                                    Switch,
+                                    {
+                                      ref,
+                                      className: "shrink-0 rtl:rotate-180",
+                                      checked: value,
+                                      onCheckedChange: onChange
+                                    }
+                                  ) }),
+                                  /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+                                    /* @__PURE__ */ jsx2(Label, { size: "xsmall", weight: "plus", children: t(
+                                      "products.create.attributes.useForVariants"
+                                    ) }),
+                                    /* @__PURE__ */ jsx2(Hint, { className: "!txt-small", children: t(
+                                      "products.create.attributes.useForVariantsDescription"
+                                    ) })
+                                  ] })
+                                ]
+                              }
+                            ) })
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx2(
+                        IconButton,
+                        {
+                          type: "button",
+                          size: "small",
+                          variant: "transparent",
+                          className: "text-ui-fg-muted",
+                          onClick: () => remove(index),
+                          "data-testid": `product-create-attribute-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",
+      "data-testid": "product-create-selected-attributes-list",
+      children: entries.map(({ field, index }) => {
+        const attrType = field.type;
+        const availableValues = field.available_values ?? [];
+        return /* @__PURE__ */ jsxs2(
+          "li",
+          {
+            className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+            "data-testid": `product-create-selected-attribute-row-${index}`,
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                  Label,
+                  {
+                    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",
+                    "data-testid": `product-create-selected-attribute-title-${index}`
+                  }
+                ),
+                /* @__PURE__ */ jsx2("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx2(
+                  Label,
+                  {
+                    size: "xsmall",
+                    weight: "plus",
+                    className: "text-ui-fg-subtle",
+                    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, {})
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                IconButton,
+                {
+                  type: "button",
+                  size: "small",
+                  variant: "transparent",
+                  className: "text-ui-fg-muted",
+                  onClick: () => remove(index),
+                  "data-testid": `product-create-selected-attribute-remove-${index}`,
+                  children: /* @__PURE__ */ jsx2(XMarkMini, {})
+                }
+              )
+            ]
+          },
+          field.id
+        );
+      })
+    }
+  );
+};
+var RequiredAttributes = () => {
+  const { t } = useTranslation2();
+  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
+      };
+    });
+    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",
+        "data-testid": "product-create-attributes-required",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2(Text, { size: "small", weight: "plus", leading: "compact", children: t("products.create.attributes.requiredAttributes") }),
+            /* @__PURE__ */ jsx2(Text, { size: "small", className: "text-ui-fg-subtle", children: t("products.create.attributes.requiredAttributesHint") })
+          ] }),
+          requiredEntries.map(({ attr, index }) => {
+            const apiAttr = product_attributes.find(
+              (a) => a.id === attr.attribute_id
+            );
+            if (!apiAttr) return null;
+            return /* @__PURE__ */ jsx2(
+              RequiredAttributeField,
+              {
+                attribute: apiAttr,
+                index
+              },
+              apiAttr.id
+            );
+          })
+        ]
+      }
+    )
+  ] });
+};
+var 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.valuePlaceholder"
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx2(Select.Content, { children: attribute.values?.map((v) => /* @__PURE__ */ jsx2(Select.Item, { value: v.name, children: v.name }, v.id)) })
+            ]
+          }
+        ) : attribute.type === import_types.AttributeType.MULTI_SELECT ? /* @__PURE__ */ jsx2(
+          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(
+          Input,
+          {
+            ...field,
+            ref,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: t(
+              "products.create.attributes.valuePlaceholder"
+            )
+          }
+        ) : attribute.type === import_types.AttributeType.TOGGLE ? /* @__PURE__ */ jsx2(
+          Switch,
+          {
+            ...field,
+            className: "rtl:rotate-180",
+            checked: value === "true" || value === true,
+            onCheckedChange: (checked) => onChange(String(checked))
+          }
+        ) : /* @__PURE__ */ jsx2(
+          Input,
+          {
+            ...field,
+            ref,
+            value: typeof value === "string" ? value : value?.[0] ?? "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: t(
+              "products.create.attributes.valuePlaceholder"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx2(Form.ErrorMessage, {}),
+        attribute.is_variant_axis && /* @__PURE__ */ jsx2(VariantAxisTip, {})
+      ] })
+    }
+  );
+};
+var VariantAxisTip = () => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsx2(InlineTip, { label: t("products.create.attributes.tip"), children: t("products.create.attributes.variantAxisTip") });
+};
+Root._tabMeta = defineTabMeta({
+  id: "attributes",
+  labelKey: "products.create.tabs.attributes",
+  validationFields: ["attributes"]
+});
+var ProductCreateAttributesForm = Root;
+
+// src/pages/products/product-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/product-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.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/product-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, "data-testid": "product-create-media-section-upload" }),
+    /* @__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
+                    }
+                  ]
+                }
+              ],
+              "data-testid": `product-create-media-section-item-menu-${field.field_id}`
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            IconButton2,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              onClick: onDelete,
+              "data-testid": `product-create-media-section-item-delete-${field.field_id}`,
+              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/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
+import {
+  Alert,
+  Checkbox,
+  clx,
+  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 useMemo2 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } 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 = useMemo2(() => {
+    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__ */ jsxs5(
+    "div",
+    {
+      id: "variants",
+      className: "flex flex-col gap-y-8",
+      "data-testid": "product-create-variants-section",
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-y-6", children: /* @__PURE__ */ jsx5(Heading2, { level: "h2", children: t("products.create.variants.header") }) }),
+        /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-1 gap-x-4 gap-y-8", children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-y-6", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx5(Label2, { weight: "plus", children: t("products.create.variants.productVariants.label") }),
+            /* @__PURE__ */ jsx5(Hint2, { children: t("products.create.variants.productVariants.hint") })
+          ] }),
+          showInvalidVariantsMessage && /* @__PURE__ */ jsx5(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.variants") }),
+          variants.fields.length > 0 ? /* @__PURE__ */ jsxs5("div", { className: "overflow-hidden rounded-xl border", children: [
+            /* @__PURE__ */ jsxs5(
+              "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__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
+                    Checkbox,
+                    {
+                      className: "relative",
+                      checked: getCheckboxState(watchedVariants),
+                      onCheckedChange: onCheckboxChange
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx5("div", {}),
+                  variantAxes.map((axis, index) => /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", weight: "plus", children: axis.title }) }, index))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              SortableList,
+              {
+                items: variants.fields,
+                onChange: handleRankChange,
+                renderItem: (item, index) => {
+                  return /* @__PURE__ */ jsx5(
+                    SortableList.Item,
+                    {
+                      id: item.id,
+                      className: clx("bg-ui-bg-base border-b", {
+                        "border-b-0": index === variants.fields.length - 1
+                      }),
+                      children: /* @__PURE__ */ jsxs5(
+                        "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__ */ jsx5(
+                              Form.Field,
+                              {
+                                control: form.control,
+                                name: `variants.${index}.should_create`,
+                                render: ({
+                                  field: { value, onChange, ...field }
+                                }) => /* @__PURE__ */ jsx5(Form.Item, { children: /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
+                                  Checkbox,
+                                  {
+                                    className: "relative",
+                                    ...field,
+                                    checked: value,
+                                    onCheckedChange: onChange
+                                  }
+                                ) }) })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx5(SortableList.DragHandle, {}),
+                            variantAxes.map((axis, i) => /* @__PURE__ */ jsx5(Text3, { size: "small", leading: "compact", children: item.attribute_values?.[axis.title] ?? "-" }, i))
+                          ]
+                        }
+                      )
+                    }
+                  );
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx5(Alert, { children: t("products.create.variants.productVariants.alert") }),
+          variants.fields.length > 0 && /* @__PURE__ */ jsx5(InlineTip2, { label: t("general.tip"), children: t("products.create.variants.productVariants.tip") })
+        ] }) })
+      ]
+    }
+  );
+};
+
+// src/pages/products/product-create/components/product-create-details-form/product-create-details-form.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var Root2 = () => {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "product-create-details-form",
+      children: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: "flex w-full max-w-[720px] flex-col gap-y-8",
+          "data-testid": "product-create-details-form-content",
+          children: [
+            /* @__PURE__ */ jsx6(Header, {}),
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: "flex flex-col gap-y-6",
+                "data-testid": "product-create-details-form-sections",
+                children: [
+                  /* @__PURE__ */ jsx6(ProductCreateGeneralSection, {}),
+                  /* @__PURE__ */ jsx6(ProductCreateMediaSection, {})
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx6(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__ */ jsx6(
+    "div",
+    {
+      className: "flex flex-col",
+      "data-testid": "product-create-details-form-header",
+      children: /* @__PURE__ */ jsx6(Heading3, { "data-testid": "product-create-details-form-heading", children: t("products.create.header") })
+    }
+  );
+};
+
+// src/pages/products/product-create/components/product-create-inventory-kit-form/components/product-create-inventory-kit-section/product-create-inventory-kit-section.tsx
+import { Button as Button3, Heading as Heading4, IconButton as IconButton3, Input as Input3, Label as Label3 } from "@medusajs/ui";
+import { useFieldArray as useFieldArray4, useWatch as useWatch2 } from "react-hook-form";
+import { XMarkMini as XMarkMini2 } from "@medusajs/icons";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function InventoryItemRow({
+  variantIndex,
+  inventoryIndex,
+  inventoryItem,
+  isItemOptionDisabled,
+  onRemove
+}) {
+  const form = useTabbedForm();
+  const { t } = useTranslation7();
+  const selectedInventoryItemId = useWatch2({
+    control: form.control,
+    name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`
+  });
+  const items = useComboboxData({
+    queryKey: ["inventory_items"],
+    defaultValueKey: "id",
+    selectedValue: selectedInventoryItemId,
+    queryFn: (params) => sdk.admin.inventoryItems.query(params),
+    getOptions: (data) => data.inventory_items.map((item) => ({
+      label: `${item.title} ${item.sku ? `(${item.sku})` : ""}`,
+      value: item.id
+    }))
+  });
+  return /* @__PURE__ */ jsxs7(
+    "li",
+    {
+      className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-center gap-1.5 rounded-xl p-1.5",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx7(
+            Label3,
+            {
+              size: "xsmall",
+              weight: "plus",
+              className: "text-ui-fg-subtle",
+              htmlFor: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
+              children: t("fields.item")
+            }
+          ) }),
+          /* @__PURE__ */ jsx7(
+            Form.Field,
+            {
+              control: form.control,
+              name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsx7(Form.Item, { children: /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                  Combobox,
+                  {
+                    ...field,
+                    options: items.options.map((o) => ({
+                      ...o,
+                      disabled: isItemOptionDisabled(o, inventoryIndex)
+                    })),
+                    searchValue: items.searchValue,
+                    onBlur: () => items.onSearchValueChange(""),
+                    onSearchValueChange: items.onSearchValueChange,
+                    fetchNextPage: items.fetchNextPage,
+                    className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                    placeholder: t("products.create.inventory.itemPlaceholder")
+                  }
+                ) }) });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx7("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx7(
+            Label3,
+            {
+              size: "xsmall",
+              weight: "plus",
+              className: "text-ui-fg-subtle",
+              htmlFor: `variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`,
+              children: t("fields.quantity")
+            }
+          ) }),
+          /* @__PURE__ */ jsx7(
+            Form.Field,
+            {
+              control: form.control,
+              name: `variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`,
+              render: ({ field: { onChange, value, ...field } }) => {
+                return /* @__PURE__ */ jsxs7(Form.Item, { children: [
+                  /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                    Input3,
+                    {
+                      type: "number",
+                      className: "bg-ui-bg-field-component",
+                      min: 0,
+                      value,
+                      onChange: (e) => {
+                        const value2 = e.target.value;
+                        if (value2 === "") {
+                          onChange(null);
+                        } else {
+                          onChange(Number(value2));
+                        }
+                      },
+                      ...field,
+                      placeholder: t(
+                        "products.create.inventory.quantityPlaceholder"
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+                ] });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7(
+          IconButton3,
+          {
+            type: "button",
+            size: "small",
+            variant: "transparent",
+            className: "text-ui-fg-muted",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx7(XMarkMini2, {})
+          }
+        )
+      ]
+    },
+    inventoryItem.id
+  );
+}
+function VariantSection({ variant, index }) {
+  const form = useTabbedForm();
+  const { t } = useTranslation7();
+  const inventory = useFieldArray4({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const inventoryFormData = useWatch2({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const isItemOptionDisabled = (option, inventoryIndex) => {
+    return !!inventoryFormData?.some(
+      (i, index2) => index2 != inventoryIndex && i.inventory_item_id === option.value
+    );
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "grid gap-y-4", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx7(Form.Label, { children: variant.title }),
+        /* @__PURE__ */ jsx7(Form.Hint, { children: t("products.create.inventory.label") })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        Button3,
+        {
+          size: "small",
+          variant: "secondary",
+          type: "button",
+          onClick: () => {
+            inventory.append({
+              inventory_item_id: "",
+              required_quantity: ""
+            });
+          },
+          children: t("actions.add")
+        }
+      )
+    ] }),
+    inventory.fields.map((inventoryItem, inventoryIndex) => /* @__PURE__ */ jsx7(
+      InventoryItemRow,
+      {
+        variantIndex: index,
+        inventoryIndex,
+        inventoryItem,
+        isItemOptionDisabled,
+        onRemove: () => inventory.remove(inventoryIndex)
+      },
+      inventoryItem.id
+    ))
+  ] });
+}
+var ProductCreateInventoryKitSection = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation7();
+  const variants = useFieldArray4({
+    control: form.control,
+    name: "variants"
+  });
+  return /* @__PURE__ */ jsxs7("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx7(Heading4, { children: t("products.create.inventory.heading") }),
+    variants.fields.filter((v) => v.inventory_kit).map((variant, variantIndex) => /* @__PURE__ */ jsx7(
+      VariantSection,
+      {
+        variant,
+        index: variantIndex
+      },
+      variant.id
+    ))
+  ] });
+};
+
+// src/pages/products/product-create/components/product-create-inventory-kit-form/product-create-inventory-kit-form.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Root3 = () => {
+  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col items-center p-16", "data-testid": "product-create-inventory-kit-form", children: /* @__PURE__ */ jsx8("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", "data-testid": "product-create-inventory-kit-form-content", children: /* @__PURE__ */ jsx8(ProductCreateInventoryKitSection, {}) }) });
+};
+Root3._tabMeta = defineTabMeta({
+  id: "inventory",
+  labelKey: "products.create.tabs.inventory",
+  validationFields: ["variants"]
+});
+var ProductCreateInventoryKitForm = Root3;
+
+// src/pages/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
+import { Heading as Heading5 } from "@medusajs/ui";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var ProductCreateOrganizationSection = () => {
+  const form = useTabbedForm();
+  const { t } = useTranslation8();
+  const collections = useComboboxData({
+    queryKey: ["product_collections"],
+    queryFn: (params) => sdk.admin.collections.query(params),
+    getOptions: (data) => data.collections.map((collection) => ({
+      label: collection.title,
+      value: collection.id
+    }))
+  });
+  const types = useComboboxData({
+    queryKey: ["product_types"],
+    queryFn: (params) => sdk.admin.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.admin.productTags.query(params),
+    getOptions: (data) => data.product_tags.map((tag) => ({
+      label: tag.value,
+      value: tag.id
+    }))
+  });
+  const sellers = useComboboxData({
+    queryKey: ["sellers"],
+    queryFn: (params) => sdk.admin.sellers.query(params),
+    getOptions: (data) => data.sellers.map((seller) => ({
+      label: seller.name,
+      value: seller.id
+    }))
+  });
+  return /* @__PURE__ */ jsxs8("div", { id: "organize", className: "flex flex-col gap-y-8", "data-testid": "product-create-organize-section", children: [
+    /* @__PURE__ */ jsx9(Heading5, { "data-testid": "product-create-organize-section-heading", children: t("products.organization.header") }),
+    /* @__PURE__ */ jsx9(
+      SwitchBox,
+      {
+        control: form.control,
+        name: "discountable",
+        label: t("products.fields.discountable.label"),
+        description: t("products.fields.discountable.hint"),
+        optional: true,
+        "data-testid": "product-create-organize-section-discountable-switch"
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-category-collection", children: [
+      /* @__PURE__ */ jsx9(
+        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__ */ jsx9(Form.Label, { "data-testid": "product-create-organize-section-category-label", children: t("fields.category") }),
+              /* @__PURE__ */ jsx9(Form.Control, { "data-testid": "product-create-organize-section-category-control", children: /* @__PURE__ */ jsx9(
+                SingleCategoryCombobox,
+                {
+                  ...field,
+                  "data-testid": "product-create-organize-section-category-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        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__ */ jsx9(Form.Label, { optional: true, "data-testid": "product-create-organize-section-collection-label", children: t("products.fields.collection.label") }),
+              /* @__PURE__ */ jsx9(Form.Control, { "data-testid": "product-create-organize-section-collection-control", children: /* @__PURE__ */ jsx9(
+                Combobox,
+                {
+                  ...field,
+                  options: collections.options,
+                  searchValue: collections.searchValue,
+                  onSearchValueChange: collections.onSearchValueChange,
+                  fetchNextPage: collections.fetchNextPage,
+                  "data-testid": "product-create-organize-section-collection-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(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__ */ jsx9(
+        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__ */ jsx9(Form.Label, { optional: true, "data-testid": "product-create-organize-section-type-label", children: t("products.fields.type.label") }),
+              /* @__PURE__ */ jsx9(Form.Control, { "data-testid": "product-create-organize-section-type-control", children: /* @__PURE__ */ jsx9(
+                Combobox,
+                {
+                  ...field,
+                  options: types.options,
+                  searchValue: types.searchValue,
+                  onSearchValueChange: types.onSearchValueChange,
+                  fetchNextPage: types.fetchNextPage,
+                  "data-testid": "product-create-organize-section-type-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        Form.Field,
+        {
+          control: form.control,
+          name: "tags",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-tags-item", children: [
+              /* @__PURE__ */ jsx9(Form.Label, { optional: true, "data-testid": "product-create-organize-section-tags-label", children: t("products.fields.tags.label") }),
+              /* @__PURE__ */ jsx9(Form.Control, { "data-testid": "product-create-organize-section-tags-control", children: /* @__PURE__ */ jsx9(
+                Combobox,
+                {
+                  ...field,
+                  options: tags.options,
+                  searchValue: tags.searchValue,
+                  onSearchValueChange: tags.onSearchValueChange,
+                  fetchNextPage: tags.fetchNextPage,
+                  "data-testid": "product-create-organize-section-tags-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx9(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", "data-testid": "product-create-organize-section-stores", children: /* @__PURE__ */ jsx9(
+      Form.Field,
+      {
+        control: form.control,
+        name: "seller_ids",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs8(Form.Item, { "data-testid": "product-create-organize-section-stores-item", children: [
+            /* @__PURE__ */ jsx9(Form.Label, { optional: true, "data-testid": "product-create-organize-section-stores-label", children: t("products.fields.stores.label") }),
+            /* @__PURE__ */ jsx9(Form.Control, { "data-testid": "product-create-organize-section-stores-control", children: /* @__PURE__ */ jsx9(
+              Combobox,
+              {
+                ...field,
+                value: field.value ?? [],
+                options: sellers.options,
+                searchValue: sellers.searchValue,
+                onSearchValueChange: sellers.onSearchValueChange,
+                fetchNextPage: sellers.fetchNextPage,
+                "data-testid": "product-create-organize-section-stores-input"
+              }
+            ) }),
+            /* @__PURE__ */ jsx9(Form.ErrorMessage, {})
+          ] });
+        }
+      }
+    ) })
+  ] });
+};
+
+// src/pages/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Root4 = () => {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: "flex flex-col items-center p-16",
+      "data-testid": "product-create-organize-form",
+      children: /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "flex w-full max-w-[720px] flex-col gap-y-8",
+          "data-testid": "product-create-organize-form-content",
+          children: /* @__PURE__ */ jsx10(ProductCreateOrganizationSection, {})
+        }
+      )
+    }
+  );
+};
+Root4._tabMeta = defineTabMeta({
+  id: "organize",
+  labelKey: "products.create.tabs.organize",
+  validationFields: [
+    "type_id",
+    "collection_id",
+    "category_id",
+    "seller_ids",
+    "tags",
+    "origin_country",
+    "material",
+    "width",
+    "length",
+    "height",
+    "weight",
+    "mid_code",
+    "hs_code"
+  ]
+});
+var ProductCreateOrganizeForm = Root4;
+
+// src/pages/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
+import { useMemo as useMemo3 } from "react";
+import { useWatch as useWatch3 } from "react-hook-form";
+import { useTranslation as useTranslation9 } from "react-i18next";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Root5 = () => {
+  const form = useTabbedForm();
+  const { setCloseOnEscape } = useRouteModal();
+  const { store } = useStore({
+    fields: "+default_sales_channel"
+  });
+  const { regions } = useRegions({ limit: 9999 });
+  const { price_preferences: pricePreferences } = usePricePreferences({
+    limit: 9999
+  });
+  const currencyCodes = useMemo3(
+    () => store?.supported_currencies?.map((c) => c.currency_code) || [],
+    [store]
+  );
+  const variants = useWatch3({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const watchedAttributes = useWatch3({
+    control: form.control,
+    name: "attributes",
+    defaultValue: []
+  });
+  const variantAxes = useMemo3(() => {
+    return (watchedAttributes ?? []).filter((attr) => attr.use_for_variants && attr.title).map((attr) => ({
+      title: attr.title
+    }));
+  }, [watchedAttributes]);
+  const columns = useColumns2({
+    variantAxes,
+    currencies: currencyCodes,
+    regions: regions ?? [],
+    pricePreferences: pricePreferences ?? []
+  });
+  const variantData = useMemo3(() => {
+    const ret = [];
+    variants.forEach((v, i) => {
+      if (v.should_create) {
+        ret.push({ ...v, originalIndex: i });
+      }
+    });
+    return ret;
+  }, [variants]);
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: "flex size-full flex-col divide-y overflow-hidden",
+      "data-testid": "product-create-variants-form",
+      children: /* @__PURE__ */ jsx11("div", { "data-testid": "product-create-variants-form-datagrid", children: /* @__PURE__ */ jsx11(
+        DataGrid,
+        {
+          columns,
+          data: variantData,
+          state: form,
+          onEditingChange: (editing) => setCloseOnEscape(!editing)
+        }
+      ) })
+    }
+  );
+};
+Root5._tabMeta = defineTabMeta({
+  id: "variants",
+  labelKey: "products.create.tabs.variants",
+  validationFields: ["variants"]
+});
+var ProductCreateVariantsForm = Root5;
+var columnHelper2 = createDataGridHelper();
+var useColumns2 = ({
+  variantAxes,
+  currencies = [],
+  regions = [],
+  pricePreferences = []
+}) => {
+  const { t } = useTranslation9();
+  return useMemo3(
+    () => [
+      columnHelper2.column({
+        id: "attributes",
+        header: () => /* @__PURE__ */ jsx11("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx11("span", { className: "truncate", children: variantAxes.map((a) => a.title).join(" / ") }) }),
+        cell: (context) => {
+          return /* @__PURE__ */ jsx11(DataGrid.ReadonlyCell, { context, children: variantAxes.map((a) => context.row.original.attribute_values?.[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__ */ jsx11(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__ */ jsx11(DataGrid.TextCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "manage_inventory",
+        name: t("fields.managedInventory"),
+        header: t("fields.managedInventory"),
+        field: (context) => `variants.${context.row.original.originalIndex}.manage_inventory`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx11(DataGrid.BooleanCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "allow_backorder",
+        name: t("fields.allowBackorder"),
+        header: t("fields.allowBackorder"),
+        field: (context) => `variants.${context.row.original.originalIndex}.allow_backorder`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx11(DataGrid.BooleanCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "inventory_kit",
+        name: t("fields.inventoryKit"),
+        header: t("fields.inventoryKit"),
+        field: (context) => `variants.${context.row.original.originalIndex}.inventory_kit`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx11(
+            DataGrid.BooleanCell,
+            {
+              context,
+              disabled: !context.row.original.manage_inventory
+            }
+          );
+        }
+      }),
+      ...createDataGridPriceColumns({
+        currencies,
+        regions,
+        pricePreferences,
+        getFieldName: (context, value) => {
+          if (context.column.id?.startsWith("currency_prices")) {
+            return `variants.${context.row.original.originalIndex}.prices.${value}`;
+          }
+          return `variants.${context.row.original.originalIndex}.prices.${value}`;
+        },
+        t
+      })
+    ],
+    [currencies, regions, variantAxes, pricePreferences, t]
+  );
+};
+
+// src/pages/products/product-create/components/product-create-form/product-create-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var SAVE_DRAFT_BUTTON = "save-draft-button";
+var ProductCreateForm = ({
+  children,
+  schema,
+  defaultValues: extraDefaults
+}) => {
+  const { t } = useTranslation10();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      ...PRODUCT_CREATE_FORM_DEFAULTS,
+      ...extraDefaults
+    },
+    resolver: zodResolver(schema ?? ProductCreateSchema)
+  });
+  const { mutateAsync, isPending } = useCreateProduct();
+  const {
+    regions,
+    isPending: isRegionsPending,
+    isError: isRegionsError,
+    error: regionsError
+  } = useRegions({ limit: 9999 });
+  if (isRegionsError) {
+    throw regionsError;
+  }
+  const regionsCurrencyMap = useMemo4(() => {
+    if (!regions?.length) {
+      return {};
+    }
+    return regions.reduce(
+      (acc, reg) => {
+        acc[reg.id] = reg.currency_code;
+        return acc;
+      },
+      {}
+    );
+  }, [regions]);
+  const watchedVariants = useWatch4({
+    control: form.control,
+    name: "variants"
+  });
+  const watchedAttributes = useWatch4({
+    control: form.control,
+    name: "attributes"
+  });
+  useEffect3(() => {
+    const currentVariants = form.getValues("variants") ?? [];
+    const newVariants = generateVariantsFromAttributes(
+      watchedAttributes ?? [],
+      currentVariants
+    );
+    if (JSON.stringify(newVariants.map((v) => v.attribute_values)) !== JSON.stringify(currentVariants.map((v) => v.attribute_values))) {
+      form.setValue("variants", newVariants);
+    }
+  }, [watchedAttributes]);
+  const handleSubmit = form.handleSubmit(async (values, e) => {
+    if (isRegionsPending) {
+      return;
+    }
+    let isDraftSubmission = false;
+    if (e?.nativeEvent instanceof SubmitEvent) {
+      const submitter = e?.nativeEvent?.submitter;
+      isDraftSubmission = submitter.dataset.name === SAVE_DRAFT_BUTTON;
+    }
+    const media = values.media || [];
+    const payload = { ...values, media: void 0 };
+    let uploadedMedia = [];
+    try {
+      if (media.length) {
+        const thumbnailReq = media.find((m) => m.isThumbnail);
+        const otherMediaReq = media.filter((m) => !m.isThumbnail);
+        const fileReqs = [];
+        if (thumbnailReq) {
+          fileReqs.push(
+            sdk.admin.uploads.mutate({ files: [thumbnailReq.file] }).then((r) => r.files.map((f) => ({ ...f, isThumbnail: true })))
+          );
+        }
+        if (otherMediaReq?.length) {
+          fileReqs.push(
+            sdk.admin.uploads.mutate({
+              files: otherMediaReq.map((m) => m.file)
+            }).then((r) => r.files.map((f) => ({ ...f, isThumbnail: false })))
+          );
+        }
+        uploadedMedia = (await Promise.all(fileReqs)).flat();
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    await mutateAsync(
+      normalizeProductFormValues({
+        ...payload,
+        media: uploadedMedia,
+        status: isDraftSubmission ? "draft" : "published",
+        regionsCurrencyMap
+      }),
+      {
+        onSuccess: (data) => {
+          toast.success(
+            t("products.create.successToast", {
+              title: data.product.title
+            })
+          );
+          handleSuccess(`../${data.product.id}`);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  const transformTabs = useCallback(
+    (tabs) => {
+      const showInventoryTab = watchedVariants?.some((v) => v.manage_inventory && v.inventory_kit) ?? false;
+      return tabs.map((tab) => {
+        if (tab.id === "inventory") {
+          return {
+            ...tab,
+            isVisible: () => showInventoryTab
+          };
+        }
+        return tab;
+      });
+    },
+    [watchedVariants]
+  );
+  const defaultTabs = useMemo4(
+    () => [
+      /* @__PURE__ */ jsx12(ProductCreateDetailsForm, {}, "details"),
+      /* @__PURE__ */ jsx12(ProductCreateOrganizeForm, {}, "organize"),
+      /* @__PURE__ */ jsx12(ProductCreateAttributesForm, {}, "attributes"),
+      /* @__PURE__ */ jsx12(ProductCreateVariantsForm, {}, "variants"),
+      /* @__PURE__ */ jsx12(ProductCreateInventoryKitForm, {}, "inventory")
+    ],
+    []
+  );
+  const hasCustomChildren = Children.count(children) > 0;
+  return /* @__PURE__ */ jsx12(
+    TabbedForm,
+    {
+      form,
+      onSubmit: handleSubmit,
+      isLoading: isPending || isRegionsPending,
+      transformTabs,
+      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__ */ jsx12(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx12(
+              Button4,
+              {
+                variant: "secondary",
+                size: "small",
+                "data-testid": "product-create-form-cancel-button",
+                children: t("actions.cancel")
+              }
+            ) }),
+            /* @__PURE__ */ jsx12(
+              Button4,
+              {
+                "data-name": SAVE_DRAFT_BUTTON,
+                size: "small",
+                type: "submit",
+                isLoading,
+                className: "whitespace-nowrap",
+                "data-testid": "product-create-form-save-draft-button",
+                children: t("actions.saveAsDraft")
+              }
+            ),
+            isLastTab ? /* @__PURE__ */ jsx12(
+              Button4,
+              {
+                "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__ */ jsx12(
+              Button4,
+              {
+                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/product-create/product-create.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var Root6 = ({ children }) => {
+  const { t } = useTranslation11();
+  const {
+    store,
+    isPending: isStorePending,
+    isError: isStoreError,
+    error: storeError
+  } = useStore({
+    fields: "+default_sales_channel"
+  });
+  const {
+    sales_channel,
+    isPending: isSalesChannelPending,
+    isError: isSalesChannelError,
+    error: salesChannelError
+  } = useSalesChannel(store?.default_sales_channel_id, {
+    enabled: !!store?.default_sales_channel_id
+  });
+  const ready = !!store && !isStorePending && !!sales_channel && !isSalesChannelPending;
+  if (isStoreError) {
+    throw storeError;
+  }
+  if (isSalesChannelError) {
+    throw salesChannelError;
+  }
+  return /* @__PURE__ */ jsxs10(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx13(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx13("span", { className: "sr-only", children: t("products.create.title") }) }),
+    /* @__PURE__ */ jsx13(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx13("span", { className: "sr-only", children: t("products.create.description") }) }),
+    ready && (Children2.count(children) > 0 ? children : /* @__PURE__ */ jsx13(ProductCreateForm, {}))
+  ] });
+};
+var ProductCreate = Root6;
+var ProductCreatePage = Object.assign(Root6, {
+  Form: ProductCreateForm,
+  DetailsTab: ProductCreateDetailsForm,
+  OrganizeTab: ProductCreateOrganizeForm,
+  AttributesTab: ProductCreateAttributesForm,
+  VariantsTab: ProductCreateVariantsForm,
+  InventoryTab: ProductCreateInventoryKitForm,
+  Tab: TabbedForm.Tab
+});
+
+export {
+  ProductCreate,
+  ProductCreatePage
+};