@mercurjs/vendor 2.0.0 → 2.0.1

package/dist/chunk-LA6XSPQG.js

@@ -0,0 +1,3723 @@
+import {
+  useSalesChannelTableColumns,
+  useSalesChannelTableEmptyState,
+  useSalesChannelTableFilters,
+  useSalesChannelTableQuery
+} from "./chunk-XZG2HZYW.js";
+import {
+  CategoryCombobox
+} from "./chunk-TZTKHOEK.js";
+import {
+  useComboboxData
+} from "./chunk-OVPAOBZB.js";
+import {
+  UploadMediaFormItem
+} from "./chunk-3BZBEC3Y.js";
+import {
+  CountrySelect
+} from "./chunk-V74Y5NIV.js";
+import {
+  UserCreatedOptionsList
+} from "./chunk-I5K5USJM.js";
+import {
+  PRODUCT_CREATE_FORM_DEFAULTS,
+  ProductCreateSchema,
+  decorateVariantsWithDefaultValues
+} from "./chunk-7XC7ZRG7.js";
+import {
+  NumericInput
+} from "./chunk-DLNNTQRY.js";
+import {
+  SwitchBox
+} from "./chunk-YVCBMOJG.js";
+import {
+  Combobox
+} from "./chunk-VBRTC2VU.js";
+import {
+  TabbedForm,
+  TabbedFormContext,
+  useTabbedForm
+} from "./chunk-LPOAVK6Y.js";
+import {
+  DataGrid,
+  DataGridMediaCell,
+  createDataGridHelper,
+  createDataGridPriceColumns
+} from "./chunk-5IWBNPZX.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  StackedFocusModal,
+  useRouteModal,
+  useStackedModal
+} from "./chunk-3CK6OINO.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  DataTable
+} from "./chunk-CUMY2VZ5.js";
+import {
+  useStockLocations
+} from "./chunk-NBPMNUKZ.js";
+import {
+  usePricePreferences,
+  useRegions
+} from "./chunk-UL4O5M4S.js";
+import {
+  useStore
+} from "./chunk-FX4V5JCF.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useSalesChannels
+} from "./chunk-3B34B2M2.js";
+import {
+  useCreateProduct
+} from "./chunk-ZEVYT6IX.js";
+import {
+  queryKeysFactory
+} from "./chunk-ZA2KFUFR.js";
+import {
+  fetchQuery,
+  sdk,
+  uploadFilesQuery
+} from "./chunk-RIN4CBRB.js";
+
+// src/pages/products/create/product-create-page.tsx
+import { Children as Children4, useCallback as useCallback5, useRef as useRef5, useState as useState10 } from "react";
+import { useTranslation as useTranslation16 } from "react-i18next";
+
+// src/pages/products/create/product-create-form/product-create-form.tsx
+import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef3, useState as useState6 } from "react";
+import { Button as Button4, ProgressTabs, toast } from "@medusajs/ui";
+import { useForm, useWatch as useWatch3 } from "react-hook-form";
+import { useTranslation as useTranslation12 } from "react-i18next";
+import { z as z2 } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+// src/hooks/api/attributes.tsx
+import {
+  useQuery
+} from "@tanstack/react-query";
+var ATTRIBUTES_QUERY_KEY = "attributes";
+var attributesQueryKeys = queryKeysFactory(ATTRIBUTES_QUERY_KEY);
+var useAttributes = (query, options) => {
+  const { data, ...rest } = useQuery({
+    queryFn: () => fetchQuery("/vendor/attributes", {
+      method: "GET",
+      query
+    }),
+    queryKey: attributesQueryKeys.list(query),
+    ...options
+  });
+  return { ...data, ...rest };
+};
+
+// src/pages/products/create/product-create-attributes-form/product-create-attributes-form.tsx
+import { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle } from "react";
+import { CircleInfoSolid } from "@medusajs/icons";
+import { Button, Divider, Heading, Text as Text2, Tooltip } from "@medusajs/ui";
+import { useFieldArray } from "react-hook-form";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/pages/products/create/utils/attribute-validation.ts
+import { z } from "zod";
+var createAttributeValidationRules = (attributes, t) => {
+  const rules = {};
+  attributes.forEach((attr) => {
+    const fieldName = attr.handle;
+    const isRequired = attr.is_required;
+    if (isRequired) {
+      switch (attr.ui_component) {
+        case "select":
+        case "toggle":
+          rules[fieldName] = {
+            required: t("products.fields.attributes.validation.requiredSelect"),
+            validate: (value) => {
+              if (typeof value !== "string" || !value || value === "") {
+                return t("products.fields.attributes.validation.requiredSelect");
+              }
+              return true;
+            }
+          };
+          break;
+        case "text":
+        case "text_area":
+        case "color_picker":
+          rules[fieldName] = {
+            required: t("products.fields.attributes.validation.requiredEnter"),
+            validate: (value) => {
+              if (typeof value !== "string" || !value || value === "") {
+                return t("products.fields.attributes.validation.requiredEnter");
+              }
+              return true;
+            }
+          };
+          break;
+        case "multivalue":
+          rules[fieldName] = {
+            required: t("products.fields.attributes.validation.requiredSelectMultiple"),
+            validate: (value) => {
+              if (!Array.isArray(value) || value.length === 0) {
+                return t("products.fields.attributes.validation.requiredSelectMultiple");
+              }
+              return true;
+            }
+          };
+          break;
+        case "unit":
+          rules[fieldName] = {
+            required: t("products.fields.attributes.validation.requiredEnter"),
+            validate: (value) => {
+              if (value === void 0 || value === null || value === "") {
+                return t("products.fields.attributes.validation.requiredEnter");
+              }
+              return true;
+            }
+          };
+          break;
+        default:
+          rules[fieldName] = {
+            required: t("products.fields.attributes.validation.requiredEnter"),
+            validate: (value) => {
+              if (typeof value !== "string" || !value || value === "") {
+                return t("products.fields.attributes.validation.requiredEnter");
+              }
+              return true;
+            }
+          };
+          break;
+      }
+    }
+  });
+  return rules;
+};
+
+// src/pages/products/create/utils/process-attributes.ts
+var processAttributes = (allAttributes, primaryCategoryId) => {
+  if (!allAttributes || allAttributes.length === 0) {
+    return {
+      required: {
+        categorySpecific: [],
+        global: [],
+        all: []
+      }
+    };
+  }
+  const globalAttributes = allAttributes.filter(
+    (attr) => !attr.product_categories || attr.product_categories.length === 0
+  );
+  const categorySpecificAttributes = allAttributes.filter(
+    (attr) => attr.product_categories && attr.product_categories.length > 0
+  );
+  const applicableCategoryAttributes = categorySpecificAttributes.filter(
+    (attr) => attr.product_categories?.some(
+      (cat) => cat.id === primaryCategoryId
+    )
+  );
+  const mapToFormField = (attr) => ({
+    key: attr.id,
+    id: attr.id,
+    name: attr.name,
+    handle: attr.handle || attr.id,
+    ui_component: attr.ui_component,
+    is_required: attr.is_required,
+    description: attr.description,
+    possible_values: attr.possible_values?.map((value) => ({
+      value: value.id,
+      label: value.value
+    })) || []
+  });
+  const requiredCategorySpecificFormFields = applicableCategoryAttributes.filter((attr) => attr.is_required).map(mapToFormField);
+  const requiredGlobalFormFields = globalAttributes.filter((attr) => attr.is_required).map(mapToFormField);
+  return {
+    required: {
+      categorySpecific: requiredCategorySpecificFormFields,
+      global: requiredGlobalFormFields,
+      all: [
+        ...requiredCategorySpecificFormFields,
+        ...requiredGlobalFormFields
+      ]
+    }
+  };
+};
+
+// src/pages/products/create/product-create-attributes-form/required-attributes-list.tsx
+import { Select, Textarea } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+
+// src/components/inputs/multi-select/multi-select.tsx
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { CheckMini, TrianglesMini, XMarkMini } from "@medusajs/icons";
+import { Badge, Input, Text } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MultiSelect = forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    onBlur,
+    name,
+    placeholder,
+    "aria-invalid": ariaInvalid = false,
+    disabled = false,
+    className = "",
+    showSearch = true
+  }, ref) => {
+    const { t } = useTranslation();
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+    const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const badgesContainerRef = useRef(null);
+    const [visibleBadgesCount, setVisibleBadgesCount] = useState(0);
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    const calculateVisibleBadges = () => {
+      if (!value || value.length === 0 || !badgesContainerRef.current) {
+        setVisibleBadgesCount(0);
+        return;
+      }
+      const container = badgesContainerRef.current;
+      const containerWidth = container.offsetWidth;
+      const padding = 24;
+      const gap = 8;
+      const availableWidth = containerWidth - padding;
+      const estimateBadgeWidth = (label) => {
+        const baseWidth = 32;
+        const charWidth = 8;
+        return baseWidth + label.length * charWidth;
+      };
+      let totalWidth = 0;
+      let count = 0;
+      for (let i = 0; i < value.length; i++) {
+        const option = options.find((opt) => opt.value === value[i]);
+        const optionLabel = option?.label || "Unknown";
+        const badgeWidth = estimateBadgeWidth(optionLabel) > 200 ? 235 : estimateBadgeWidth(optionLabel);
+        if (totalWidth + badgeWidth + (count > 0 ? gap : 0) <= availableWidth) {
+          totalWidth += badgeWidth + (count > 0 ? gap : 0);
+          count++;
+        } else {
+          break;
+        }
+      }
+      setVisibleBadgesCount(count);
+    };
+    useEffect(() => {
+      calculateVisibleBadges();
+    }, [value, options]);
+    useEffect(() => {
+      const resizeObserver = new ResizeObserver(() => {
+        calculateVisibleBadges();
+      });
+      if (badgesContainerRef.current) {
+        resizeObserver.observe(badgesContainerRef.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [value, options]);
+    const handleToggle = () => {
+      if (disabled) return;
+      setIsOpen((prev) => !prev);
+      if (!isOpen && showSearch) {
+        setSearchValue("");
+      }
+    };
+    const handleItemClick = (optionValue) => {
+      const currentValue = value || [];
+      const isSelected = currentValue.includes(optionValue);
+      if (isSelected) {
+        onChange(currentValue.filter((val) => val !== optionValue));
+      } else {
+        onChange([...currentValue, optionValue]);
+      }
+    };
+    const handleRemoveBadge = (optionValue, e) => {
+      e.stopPropagation();
+      const currentValue = value || [];
+      onChange(currentValue.filter((val) => val !== optionValue));
+    };
+    const filteredOptions = useMemo(() => {
+      if (!showSearch || !searchValue.trim()) {
+        return options;
+      }
+      return options.filter(
+        (option) => option.label.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    }, [options, searchValue, showSearch]);
+    const handleSearchChange = (e) => {
+      setSearchValue(e.target.value);
+    };
+    const handleClearSearch = () => {
+      setSearchValue("");
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: `relative ${className}`, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: triggerRef,
+          className: `relative flex h-8 w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border bg-ui-bg-field text-ui-fg-base shadow-sm transition-colors duration-150 ease-in-out focus-within:ring-1 hover:bg-ui-bg-field-hover ${disabled ? "cursor-not-allowed bg-ui-bg-disabled opacity-50" : ariaInvalid ? "!shadow-borders-error" : "focus-within:ring-ui-ring-interactive border-ui-border-base focus-within:border-ui-border-interactive"}`,
+          onClick: handleToggle,
+          onBlur,
+          tabIndex: 0,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-invalid": ariaInvalid,
+          "aria-label": name,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: badgesContainerRef,
+                className: "flex min-w-0 flex-1 items-center gap-2 px-3 py-2",
+                children: value && value.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  value.slice(0, visibleBadgesCount).map((optionValue) => {
+                    const option = options.find(
+                      (opt) => opt.value === optionValue
+                    );
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => handleRemoveBadge(optionValue, e),
+                        className: "flex flex-shrink-0 items-center self-center",
+                        disabled,
+                        children: /* @__PURE__ */ jsxs(
+                          Badge,
+                          {
+                            size: "2xsmall",
+                            className: "w-fit bg-ui-bg-base p-0",
+                            children: [
+                              /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate text-ellipsis border-r border-ui-border-base px-1.5", children: option?.label || "Unknown" }),
+                              /* @__PURE__ */ jsx(XMarkMini, { className: "mr-0.5 !text-ui-fg-base" })
+                            ]
+                          }
+                        )
+                      },
+                      optionValue
+                    );
+                  }),
+                  value && value.length > visibleBadgesCount && /* @__PURE__ */ jsxs(
+                    Badge,
+                    {
+                      size: "small",
+                      className: "txt-compact-small-plus w-fit flex-shrink-0 border-none bg-transparent px-0 text-ui-fg-subtle",
+                      children: [
+                        "+",
+                        value.length - visibleBadgesCount
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: placeholder || t("general.selectValues") })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-8 items-center justify-center", children: /* @__PURE__ */ jsx(TrianglesMini, { className: "text-ui-fg-muted" }) }) })
+          ]
+        }
+      ),
+      isOpen && !disabled && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dropdownRef,
+          className: "absolute z-10 mt-1 max-h-60 w-full overflow-hidden rounded-md border border-ui-border-base bg-ui-bg-base shadow-lg",
+          children: [
+            showSearch && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 border-b border-ui-border-base bg-ui-bg-base p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  value: searchValue,
+                  onChange: handleSearchChange,
+                  placeholder: t("general.searchOptions"),
+                  className: "w-full bg-transparent pr-8 shadow-none focus:!shadow-none",
+                  autoFocus: true
+                }
+              ),
+              searchValue && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClearSearch,
+                  className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 transition-colors hover:bg-ui-bg-base-hover",
+                  "aria-label": "Clear search",
+                  children: /* @__PURE__ */ jsx(XMarkMini, { className: "h-4 w-4 text-ui-fg-muted" })
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${showSearch ? "max-h-48" : "max-h-60"} overflow-y-auto py-1`,
+                children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "txt-compact-small-plus p-3 text-ui-fg-subtle", children: showSearch && searchValue.trim() ? t("general.noOptionsFound") : t("general.noOptionsAvailable") }) : filteredOptions.map((option) => {
+                  const currentValue = value || [];
+                  const isSelected = currentValue.includes(option.value);
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex cursor-pointer items-center px-1 py-1 hover:bg-ui-bg-base-hover",
+                      onClick: () => handleItemClick(option.value),
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-x-2 rounded-md px-2", children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex size-5 shrink-0 items-center justify-center", children: isSelected && /* @__PURE__ */ jsx(CheckMini, {}) }),
+                        /* @__PURE__ */ jsx(Text, { className: "truncate", children: option.label })
+                      ] })
+                    },
+                    option.value
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+var multi_select_default = MultiSelect;
+
+// src/pages/products/create/product-create-attributes-form/required-attributes-list.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var RequiredAttributesList = ({
+  form,
+  fields,
+  validationRules
+}) => {
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsx2(Fragment2, { children: fields.map((field) => /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-4", children: [
+    field.ui_component === "select" && /* @__PURE__ */ jsx2(
+      Form.Field,
+      {
+        control: form.control,
+        name: field.handle,
+        rules: validationRules[field.handle] || {},
+        render: ({ field: formField, fieldState }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+          /* @__PURE__ */ jsx2(Form.Label, { optional: !field.is_required, children: field.name }),
+          field.description && /* @__PURE__ */ jsx2("p", { className: "txt-compact-small !my-1 text-ui-fg-subtle", children: field.description }),
+          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+            Combobox,
+            {
+              ...formField,
+              options: field.possible_values,
+              "aria-invalid": !!fieldState.error
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+        ] })
+      }
+    ),
+    field.ui_component === "multivalue" && /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-y-2", children: [
+      /* @__PURE__ */ jsx2(
+        Form.Field,
+        {
+          control: form.control,
+          name: field.handle,
+          rules: validationRules[field.handle] || {},
+          render: ({ field: formField, fieldState }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+            /* @__PURE__ */ jsx2(Form.Label, { optional: !field.is_required, children: field.name }),
+            field.description && /* @__PURE__ */ jsx2("p", { className: "txt-compact-small mb-1 text-ui-fg-subtle", children: field.description }),
+            /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+              multi_select_default,
+              {
+                value: formField.value,
+                onChange: formField.onChange,
+                name: formField.name,
+                options: field.possible_values,
+                showSearch: true,
+                "aria-invalid": !!fieldState.error
+              }
+            ) }),
+            /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        SwitchBox,
+        {
+          control: form.control,
+          name: `${field.handle}UseForVariants`,
+          label: t(
+            "products.fields.attributes.useForVariants.label"
+          ),
+          description: t(
+            "products.fields.attributes.useForVariants.description"
+          )
+        }
+      )
+    ] }),
+    field.ui_component === "text_area" && /* @__PURE__ */ jsx2(
+      Form.Field,
+      {
+        control: form.control,
+        name: field.handle,
+        rules: validationRules[field.handle] || {},
+        render: ({ field: formField, fieldState }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+          /* @__PURE__ */ jsx2(Form.Label, { optional: !field.is_required, children: field.name }),
+          field.description && /* @__PURE__ */ jsx2("p", { className: "txt-compact-small !my-1 text-ui-fg-subtle", children: field.description }),
+          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+            Textarea,
+            {
+              ...formField,
+              placeholder: t(
+                "products.fields.attributes.enterValuePlaceholder"
+              ),
+              "aria-invalid": !!fieldState.error
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+        ] })
+      }
+    ),
+    field.ui_component === "toggle" && /* @__PURE__ */ jsx2(
+      Form.Field,
+      {
+        control: form.control,
+        name: field.handle,
+        rules: validationRules[field.handle] || {},
+        render: ({ field: formField, fieldState }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+          /* @__PURE__ */ jsx2(Form.Label, { optional: !field.is_required, children: field.name }),
+          field.description && /* @__PURE__ */ jsx2("p", { className: "txt-compact-small !my-1 text-ui-fg-subtle", children: field.description }),
+          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsxs2(
+            Select,
+            {
+              ...formField,
+              onValueChange: formField.onChange,
+              value: formField.value,
+              children: [
+                /* @__PURE__ */ jsx2(
+                  Select.Trigger,
+                  {
+                    "aria-invalid": !!fieldState.error,
+                    children: /* @__PURE__ */ jsx2(
+                      Select.Value,
+                      {
+                        placeholder: t(
+                          "products.fields.attributes.selectValuePlaceholder"
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(Select.Content, { children: [
+                  /* @__PURE__ */ jsx2(Select.Item, { value: "true", children: t("general.true") }),
+                  /* @__PURE__ */ jsx2(Select.Item, { value: "false", children: t("general.false") })
+                ] })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+        ] })
+      }
+    ),
+    field.ui_component === "unit" && /* @__PURE__ */ jsx2(
+      Form.Field,
+      {
+        control: form.control,
+        name: field.handle,
+        rules: validationRules[field.handle] || {},
+        render: ({ field: formField, fieldState }) => /* @__PURE__ */ jsxs2(Form.Item, { children: [
+          /* @__PURE__ */ jsx2(Form.Label, { optional: !field.is_required, children: field.name }),
+          field.description && /* @__PURE__ */ jsx2("p", { className: "txt-compact-small !my-1 text-ui-fg-subtle", children: field.description }),
+          /* @__PURE__ */ jsx2(Form.Control, { children: /* @__PURE__ */ jsx2(
+            NumericInput,
+            {
+              value: formField.value,
+              onChange: formField.onChange,
+              onBlur: formField.onBlur,
+              name: formField.name,
+              placeholder: t(
+                "products.fields.attributes.enterValuePlaceholder"
+              ),
+              "aria-invalid": !!fieldState.error,
+              hideControls: true
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(Form.ErrorMessage, {})
+        ] })
+      }
+    )
+  ] }, field.id)) });
+};
+
+// src/pages/products/create/product-create-attributes-form/product-create-attributes-form.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProductCreateAttributesForm = forwardRef2(({ form }, ref) => {
+  const { t } = useTranslation3();
+  const primaryCategoryId = form.watch("categories")?.[0];
+  const options = useFieldArray({
+    control: form.control,
+    name: "options"
+  });
+  const { attributes: allAttributes, isLoading: allAttributesLoading } = useAttributes({
+    fields: "id,name,handle,description,ui_component,is_required,product_categories.*,possible_values.*"
+  });
+  const processedAttributes = processAttributes(
+    allAttributes,
+    primaryCategoryId
+  );
+  const requiredFormFields = processedAttributes.required.all;
+  const validationRules = createAttributeValidationRules(
+    requiredFormFields,
+    t
+  );
+  const validateAttributes = async () => {
+    const errors = {};
+    requiredFormFields.forEach((field) => {
+      if (field.is_required) {
+        const value = form.getValues(
+          field.handle
+        );
+        switch (field.ui_component) {
+          case "select":
+          case "toggle":
+            if (!value || value === "") {
+              errors[field.handle] = t(
+                "products.fields.attributes.validation.requiredSelect"
+              );
+            }
+            break;
+          case "text":
+          case "text_area":
+            if (!value || value === "") {
+              errors[field.handle] = t(
+                "products.fields.attributes.validation.requiredEnter"
+              );
+            }
+            break;
+          case "multivalue":
+            if (!value || !Array.isArray(value) || value.length === 0) {
+              errors[field.handle] = t(
+                "products.fields.attributes.validation.requiredSelectMultiple"
+              );
+            }
+            break;
+          case "unit":
+            if (value === void 0 || value === null || value === "") {
+              errors[field.handle] = t(
+                "products.fields.attributes.validation.requiredEnter"
+              );
+            }
+            break;
+        }
+      }
+    });
+    requiredFormFields.forEach((field) => {
+      if (field.is_required) {
+        form.clearErrors(
+          field.handle
+        );
+      }
+    });
+    Object.keys(errors).forEach((fieldName) => {
+      form.setError(fieldName, {
+        type: "required",
+        message: errors[fieldName]
+      });
+    });
+    const currentOptions = form.getValues("options") || [];
+    const optionsValid = currentOptions.length > 0 ? await form.trigger("options") : true;
+    return Object.keys(errors).length === 0 && optionsValid;
+  };
+  useImperativeHandle(
+    ref,
+    () => ({
+      validateAttributes,
+      requiredFormFields
+    }),
+    [validateAttributes, requiredFormFields, form, t]
+  );
+  useEffect2(() => {
+    const subscription = form.watch((values, { name }) => {
+      if (name && requiredFormFields.some((field) => field.handle === name)) {
+        const field = requiredFormFields.find(
+          (f) => f.handle === name
+        );
+        if (field && field.is_required) {
+          const value = values[name];
+          let isValid = false;
+          switch (field.ui_component) {
+            case "select":
+            case "toggle":
+              isValid = typeof value === "string" && value !== "";
+              break;
+            case "text":
+            case "text_area":
+              isValid = typeof value === "string" && value !== "";
+              break;
+            case "multivalue":
+              isValid = Array.isArray(value) && value.length > 0;
+              break;
+            case "unit":
+              isValid = value !== void 0 && value !== null && value !== "";
+              break;
+            default:
+              isValid = false;
+              break;
+          }
+          if (isValid) {
+            form.clearErrors(
+              name
+            );
+          }
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [form, requiredFormFields]);
+  const nonRequiredAttributes = allAttributes?.filter(
+    (attribute) => !attribute.is_required
+  );
+  const availableAttributes = nonRequiredAttributes?.filter(
+    (attribute) => !options.fields?.some(
+      (option) => option.attributeId === attribute.id
+    )
+  );
+  return /* @__PURE__ */ jsx3("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs3("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx3(Header, { options }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-8", children: [
+      /* @__PURE__ */ jsx3(
+        UserCreatedOptionsList,
+        {
+          form,
+          options,
+          availableAttributes,
+          allNonRequiredAttributes: nonRequiredAttributes,
+          allowCreate: true
+        }
+      ),
+      requiredFormFields.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "py-8 text-center text-gray-500", children: allAttributesLoading ? "Loading attributes..." : null }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
+        /* @__PURE__ */ jsx3(Divider, { variant: "dashed" }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+          /* @__PURE__ */ jsx3(Heading, { level: "h3", className: "text-ui-fg-base", children: t(
+            "products.create.attributes.requiredHeading"
+          ) }),
+          /* @__PURE__ */ jsx3(
+            Text2,
+            {
+              size: "small",
+              className: "text-ui-fg-subtle",
+              children: t(
+                "products.create.attributes.requiredDescription"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx3(
+          RequiredAttributesList,
+          {
+            form,
+            fields: requiredFormFields,
+            validationRules
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+});
+ProductCreateAttributesForm.displayName = "ProductCreateAttributesForm";
+var Header = ({ options }) => {
+  const { t } = useTranslation3();
+  return /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h1", className: "text-ui-fg-base", children: t("products.create.tabs.attributes") }),
+      /* @__PURE__ */ jsxs3("div", { className: "space-y-0.5", children: [
+        /* @__PURE__ */ jsx3(
+          Text2,
+          {
+            size: "small",
+            className: "max-w-[440px] text-ui-fg-subtle",
+            children: t("products.create.attributes.description")
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          Text2,
+          {
+            size: "small",
+            className: "flex items-center gap-1 text-ui-fg-subtle",
+            children: [
+              t(
+                "products.create.attributes.learnMore.label"
+              ),
+              /* @__PURE__ */ jsx3(
+                Tooltip,
+                {
+                  content: t(
+                    "products.create.attributes.learnMore.content"
+                  ),
+                  children: /* @__PURE__ */ jsx3(CircleInfoSolid, {})
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3(
+      Button,
+      {
+        size: "small",
+        variant: "secondary",
+        type: "button",
+        className: "min-w-[100px]",
+        onClick: () => {
+          options.append(
+            {
+              title: "",
+              values: [],
+              metadata: { author: "vendor" },
+              useForVariants: true
+            },
+            {
+              shouldFocus: false
+            }
+          );
+        },
+        children: [
+          t("actions.add"),
+          " ",
+          t("products.create.attributes.buttonLabel")
+        ]
+      }
+    )
+  ] }) });
+};
+
+// src/pages/products/create/product-create-details-form/product-create-details-form.tsx
+import { Heading as Heading2 } from "@medusajs/ui";
+import { Children } from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
+
+// src/pages/products/create/product-create-details-form/components/product-create-details-general-section/product-create-general-section.tsx
+import { Input as Input3, Textarea as Textarea2 } from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+
+// src/components/inputs/handle-input/handle-input.tsx
+import { Input as Input2, Text as Text3 } from "@medusajs/ui";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var HandleInput = forwardRef3(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx4("div", { className: "absolute inset-y-0 left-0 z-10 flex w-8 items-center justify-center border-r", children: /* @__PURE__ */ jsx4(
+        Text3,
+        {
+          className: "text-ui-fg-muted",
+          size: "small",
+          leading: "compact",
+          weight: "plus",
+          children: "/"
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(Input2, { ref, ...props, className: "pl-10" })
+    ] });
+  }
+);
+HandleInput.displayName = "HandleInput";
+
+// src/pages/products/create/product-create-details-form/components/product-create-details-general-section/product-create-general-section.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ProductCreateGeneralSection = () => {
+  const { t } = useTranslation4();
+  const form = useTabbedForm();
+  return /* @__PURE__ */ jsxs5("div", { id: "general", className: "flex flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [
+      /* @__PURE__ */ jsx5(
+        Form.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+              /* @__PURE__ */ jsx5(Form.Label, { children: t("products.fields.title.label") }),
+              /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(Input3, { ...field, placeholder: "Winter jacket" }) }),
+              /* @__PURE__ */ jsx5(Form.ErrorMessage, { children: form.formState.errors.title?.message })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Form.Field,
+        {
+          control: form.control,
+          name: "subtitle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+              /* @__PURE__ */ jsx5(Form.Label, { optional: true, children: t("products.fields.subtitle.label") }),
+              /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(Input3, { ...field, placeholder: "Warm and cosy" }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+              /* @__PURE__ */ jsx5(
+                Form.Label,
+                {
+                  tooltip: t("products.fields.handle.tooltip"),
+                  optional: true,
+                  children: t("fields.handle")
+                }
+              ),
+              /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(HandleInput, { ...field, placeholder: "winter-jacket" }) }),
+              /* @__PURE__ */ jsx5(Form.ErrorMessage, { children: form.formState.errors.handle?.message })
+            ] });
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx5(
+      Form.Field,
+      {
+        control: form.control,
+        name: "description",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+            /* @__PURE__ */ jsx5(Form.Label, { optional: true, children: t("products.fields.description.label") }),
+            /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(Textarea2, { ...field, placeholder: "A warm and cozy jacket" }) })
+          ] });
+        }
+      }
+    )
+  ] });
+};
+
+// src/pages/products/create/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, Text as Text4 } from "@medusajs/ui";
+import { useState as useState2 } from "react";
+import { useFieldArray as useFieldArray2 } from "react-hook-form";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs6 } 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__ */ jsxs6("div", { id: "media", className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx6(UploadMediaFormItem, { form, append, showHint: false }),
+    /* @__PURE__ */ jsxs6(
+      DndContext,
+      {
+        sensors,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        children: [
+          /* @__PURE__ */ jsx6(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx6(
+            MediaGridItemOverlay,
+            {
+              field: fields.find((m) => m.field_id === activeId)
+            }
+          ) : null }),
+          /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsx6(SortableContext, { items: fields.map((field) => field.field_id), children: fields.map((field, index) => {
+            const { onDelete, onMakeThumbnail } = getItemHandlers(index);
+            return /* @__PURE__ */ jsx6(
+              MediaItem,
+              {
+                field,
+                onDelete,
+                onMakeThumbnail
+              },
+              field.field_id
+            );
+          }) }) })
+        ]
+      }
+    )
+  ] });
+};
+var MediaItem = ({ field, onDelete, onMakeThumbnail }) => {
+  const { t } = useTranslation5();
+  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__ */ jsxs6(
+    "li",
+    {
+      className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2",
+      ref: setNodeRef,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx6(
+            IconButton,
+            {
+              variant: "transparent",
+              type: "button",
+              size: "small",
+              ...attributes,
+              ...listeners,
+              ref: setActivatorNodeRef,
+              className: "cursor-grab touch-none active:cursor-grabbing",
+              children: /* @__PURE__ */ jsx6(DotsSix, { className: "text-ui-fg-muted" })
+            }
+          ),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx6(ThumbnailPreview, { url: field.url }) }),
+            /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: field.file.name }),
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+                field.isThumbnail && /* @__PURE__ */ jsx6(ThumbnailBadge, {}),
+                /* @__PURE__ */ jsx6(
+                  Text4,
+                  {
+                    size: "xsmall",
+                    leading: "compact",
+                    className: "text-ui-fg-subtle",
+                    children: formatFileSize(field.file.size)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx6(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      label: t("products.media.makeThumbnail"),
+                      icon: /* @__PURE__ */ jsx6(StackPerspective, {}),
+                      onClick: onMakeThumbnail
+                    }
+                  ]
+                },
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx6(Trash, {}),
+                      label: t("actions.delete"),
+                      onClick: onDelete
+                    }
+                  ]
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            IconButton,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              onClick: onDelete,
+              children: /* @__PURE__ */ jsx6(XMark, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var MediaGridItemOverlay = ({ field }) => {
+  return /* @__PURE__ */ jsxs6("li", { className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx6(
+        IconButton,
+        {
+          variant: "transparent",
+          size: "small",
+          className: "cursor-grab touch-none active:cursor-grabbing",
+          children: /* @__PURE__ */ jsx6(DotsSix, { className: "text-ui-fg-muted" })
+        }
+      ),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx6(ThumbnailPreview, { url: field.url }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx6(Text4, { size: "small", leading: "compact", children: field.file?.name }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+            field.isThumbnail && /* @__PURE__ */ jsx6(ThumbnailBadge, {}),
+            /* @__PURE__ */ jsx6(
+              Text4,
+              {
+                size: "xsmall",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: formatFileSize(field.file?.size ?? 0)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx6(ActionMenu, { groups: [] }),
+      /* @__PURE__ */ jsx6(
+        IconButton,
+        {
+          type: "button",
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+          },
+          children: /* @__PURE__ */ jsx6(XMark, {})
+        }
+      )
+    ] })
+  ] });
+};
+var ThumbnailPreview = ({ url }) => {
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6("img", { src: url, alt: "", className: "size-full object-cover object-center" });
+};
+function formatFileSize(bytes, decimalPlaces = 2) {
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPlaces)) + " " + sizes[i];
+}
+
+// src/pages/products/create/product-create-details-form/product-create-details-form.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var Root = ({ children }) => {
+  if (Children.count(children) > 0) {
+    return /* @__PURE__ */ jsx7("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+      /* @__PURE__ */ jsx7(Header2, {}),
+      children
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs7("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx7(Header2, {}),
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsx7(ProductCreateGeneralSection, {}),
+      /* @__PURE__ */ jsx7(ProductCreateMediaSection, {})
+    ] })
+  ] }) });
+};
+Root._tabMeta = {
+  id: "details",
+  labelKey: "products.create.tabs.details",
+  validationFields: ["title", "media"]
+};
+var Header2 = () => {
+  const { t } = useTranslation6();
+  return /* @__PURE__ */ jsx7("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx7(Heading2, { children: t("products.create.tabs.details") }) });
+};
+var ProductCreateDetailsForm = Object.assign(Root, {
+  _tabMeta: Root._tabMeta,
+  GeneralSection: ProductCreateGeneralSection,
+  MediaSection: ProductCreateMediaSection
+});
+
+// src/pages/products/create/product-create-inventory-kit-form/product-create-inventory-kit-form.tsx
+import { Children as Children2 } from "react";
+
+// src/pages/products/create/product-create-inventory-kit-form/components/product-create-inventory-kit-section/product-create-inventory-kit-section.tsx
+import { Button as Button2, Heading as Heading3, IconButton as IconButton2, Input as Input4, Label } from "@medusajs/ui";
+import { useFieldArray as useFieldArray3, useWatch } from "react-hook-form";
+import { XMarkMini as XMarkMini2 } from "@medusajs/icons";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function VariantSection({ variant, index }) {
+  const { t } = useTranslation7();
+  const form = useTabbedForm();
+  const inventory = useFieldArray3({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const inventoryFormData = useWatch({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const items = useComboboxData({
+    queryKey: ["inventory_items"],
+    queryFn: (params) => fetchQuery(`/vendor/inventory-items`, {
+      method: "GET",
+      query: params
+    }),
+    getOptions: (data) => data.inventory_items.map((item) => ({
+      label: item.title || item.sku || item.id,
+      value: item.id
+    }))
+  });
+  const isItemOptionDisabled = (option, inventoryIndex) => {
+    return inventoryFormData?.some(
+      (i, index2) => index2 != inventoryIndex && i.inventory_item_id === option.value
+    );
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "grid gap-y-4", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-start justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx8(Form.Label, { children: variant.title }),
+        /* @__PURE__ */ jsx8(Form.Hint, { children: t("products.create.inventory.label") })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        Button2,
+        {
+          size: "small",
+          variant: "secondary",
+          type: "button",
+          onClick: () => {
+            inventory.append({
+              inventory_item_id: "",
+              required_quantity: ""
+            });
+          },
+          children: t("actions.add")
+        }
+      )
+    ] }),
+    inventory.fields.map((inventoryItem, inventoryIndex) => /* @__PURE__ */ jsxs8(
+      "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__ */ jsxs8("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx8("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx8(
+              Label,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-subtle",
+                htmlFor: `variants.${index}.inventory.${inventoryIndex}.inventory_item_id`,
+                children: t("fields.item")
+              }
+            ) }),
+            /* @__PURE__ */ jsx8(
+              Form.Field,
+              {
+                control: form.control,
+                name: `variants.${index}.inventory.${inventoryIndex}.inventory_item_id`,
+                render: ({ field }) => {
+                  return /* @__PURE__ */ jsx8(Form.Item, { children: /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+                    Combobox,
+                    {
+                      ...field,
+                      options: items.options.map((o) => ({
+                        ...o,
+                        disabled: isItemOptionDisabled(o, inventoryIndex)
+                      })),
+                      searchValue: items.searchValue,
+                      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__ */ jsx8("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx8(
+              Label,
+              {
+                size: "xsmall",
+                weight: "plus",
+                className: "text-ui-fg-subtle",
+                htmlFor: `variants.${index}.inventory.${inventoryIndex}.required_quantity`,
+                children: t("fields.quantity")
+              }
+            ) }),
+            /* @__PURE__ */ jsx8(
+              Form.Field,
+              {
+                control: form.control,
+                name: `variants.${index}.inventory.${inventoryIndex}.required_quantity`,
+                render: ({ field: { onChange, value, ...field } }) => {
+                  return /* @__PURE__ */ jsxs8(Form.Item, { children: [
+                    /* @__PURE__ */ jsx8(Form.Control, { children: /* @__PURE__ */ jsx8(
+                      Input4,
+                      {
+                        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__ */ jsx8(Form.ErrorMessage, {})
+                  ] });
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8(
+            IconButton2,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              className: "text-ui-fg-muted",
+              onClick: () => inventory.remove(inventoryIndex),
+              children: /* @__PURE__ */ jsx8(XMarkMini2, {})
+            }
+          )
+        ]
+      },
+      inventoryItem.id
+    ))
+  ] });
+}
+var ProductCreateInventoryKitSection = () => {
+  const { t } = useTranslation7();
+  const form = useTabbedForm();
+  const variants = useFieldArray3({
+    control: form.control,
+    name: "variants"
+  });
+  return /* @__PURE__ */ jsxs8("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx8(Heading3, { children: t("products.create.inventory.heading") }),
+    variants.fields.filter((v) => v.inventory_kit).map((variant, variantIndex) => /* @__PURE__ */ jsx8(
+      VariantSection,
+      {
+        variant,
+        index: variantIndex
+      },
+      variant.id
+    ))
+  ] });
+};
+
+// src/pages/products/create/product-create-inventory-kit-form/product-create-inventory-kit-form.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Root2 = ({ children }) => {
+  if (Children2.count(children) > 0) {
+    return /* @__PURE__ */ jsx9("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx9("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children }) });
+  }
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx9("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: /* @__PURE__ */ jsx9(ProductCreateInventoryKitSection, {}) }) });
+};
+Root2._tabMeta = {
+  id: "inventory",
+  labelKey: "products.create.tabs.inventory",
+  isVisible: (form) => form.getValues("variants").some((v) => v.manage_inventory && v.inventory_kit)
+};
+var ProductCreateInventoryKitForm = Object.assign(Root2, {
+  _tabMeta: Root2._tabMeta,
+  InventoryKitSection: ProductCreateInventoryKitSection
+});
+
+// src/pages/products/create/product-create-organize-form/product-create-organize-form.tsx
+import { Children as Children3 } from "react";
+
+// src/pages/products/create/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
+import { useState as useState3 } from "react";
+import { Heading as Heading4 } from "@medusajs/ui";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var ProductCreateOrganizationSection = () => {
+  const { t } = useTranslation8();
+  const form = useTabbedForm();
+  const collections = useComboboxData({
+    queryKey: ["product_collections"],
+    queryFn: (params) => sdk.vendor.collections.query({ offset: 0, limit: 100, ...params }),
+    getOptions: (data) => data.collections.map((collection) => ({
+      label: collection.title,
+      value: collection.id
+    }))
+  });
+  const types = useComboboxData({
+    queryKey: ["product_types", "creating"],
+    queryFn: (params) => fetchQuery("/vendor/product-types", {
+      method: "GET",
+      query: params
+    }),
+    getOptions: (data) => data.product_types.map((type) => ({
+      label: type.value,
+      value: type.id
+    }))
+  });
+  const tags = useComboboxData({
+    queryKey: ["product_tags", "creating"],
+    queryFn: (params) => fetchQuery("/vendor/product-tags", {
+      method: "GET",
+      query: params
+    }),
+    getOptions: (data) => data.product_tags.map((tag) => ({
+      label: tag.value,
+      value: tag.id
+    }))
+  });
+  return /* @__PURE__ */ jsxs9("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx10(Heading4, { children: t("products.organization.header") }),
+    /* @__PURE__ */ jsx10(
+      SwitchBox,
+      {
+        control: form.control,
+        name: "discountable",
+        label: t("products.fields.discountable.label"),
+        description: t("products.fields.discountable.hint"),
+        optional: true
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx10(
+        Form.Field,
+        {
+          control: form.control,
+          name: "tags",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs9(Form.Item, { children: [
+              /* @__PURE__ */ jsx10(Form.Label, { optional: true, children: t("products.fields.tags.label") }),
+              /* @__PURE__ */ jsx10(Form.Control, { children: /* @__PURE__ */ jsx10(
+                Combobox,
+                {
+                  ...field,
+                  options: tags.options,
+                  searchValue: tags.searchValue,
+                  onSearchValueChange: tags.onSearchValueChange,
+                  fetchNextPage: tags.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx10(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Form.Field,
+        {
+          control: form.control,
+          name: "type_id",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs9(Form.Item, { children: [
+              /* @__PURE__ */ jsx10(Form.Label, { optional: true, children: t("products.fields.type.label") }),
+              /* @__PURE__ */ jsx10(Form.Control, { children: /* @__PURE__ */ jsx10(
+                Combobox,
+                {
+                  ...field,
+                  options: types.options,
+                  searchValue: types.searchValue,
+                  onSearchValueChange: types.onSearchValueChange,
+                  fetchNextPage: types.fetchNextPage,
+                  allowClear: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx10(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx10(
+        Form.Field,
+        {
+          control: form.control,
+          name: "categories",
+          render: ({ field }) => {
+            const [isFocused, setIsFocused] = useState3(false);
+            return /* @__PURE__ */ jsxs9(Form.Item, { children: [
+              /* @__PURE__ */ jsx10(Form.Label, { tooltip: t("products.fields.primaryCategory.tooltip"), children: t("products.fields.primaryCategory.label") }),
+              /* @__PURE__ */ jsx10(Form.Control, { children: /* @__PURE__ */ jsx10(
+                CategoryCombobox,
+                {
+                  ...field,
+                  onFocus: () => setIsFocused(true),
+                  onBlur: () => {
+                    setIsFocused(false);
+                    field.onBlur();
+                  },
+                  isSingleSelect: true,
+                  allowClear: false
+                }
+              ) }),
+              !isFocused && /* @__PURE__ */ jsx10(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Form.Field,
+        {
+          control: form.control,
+          name: "secondary_categories",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs9(Form.Item, { children: [
+              /* @__PURE__ */ jsx10(Form.Label, { optional: true, children: t("products.fields.secondaryCategories.label", "Secondary Categories") }),
+              /* @__PURE__ */ jsx10(Form.Control, { children: /* @__PURE__ */ jsx10(
+                CategoryCombobox,
+                {
+                  ...field,
+                  value: field.value || []
+                }
+              ) }),
+              /* @__PURE__ */ jsx10(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: /* @__PURE__ */ jsx10(
+      Form.Field,
+      {
+        control: form.control,
+        name: "collection_id",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs9(Form.Item, { children: [
+            /* @__PURE__ */ jsx10(Form.Label, { optional: true, children: t("products.fields.collection.label") }),
+            /* @__PURE__ */ jsx10(Form.Control, { children: /* @__PURE__ */ jsx10(
+              Combobox,
+              {
+                ...field,
+                options: collections.options,
+                searchValue: collections.searchValue,
+                onSearchValueChange: collections.onSearchValueChange,
+                fetchNextPage: collections.fetchNextPage,
+                allowClear: true
+              }
+            ) }),
+            /* @__PURE__ */ jsx10(Form.ErrorMessage, {})
+          ] });
+        }
+      }
+    ) })
+  ] });
+};
+
+// src/pages/products/create/product-create-organize-form/components/product-create-organize-attribute-section/product-create-details-attribute-section.tsx
+import { Heading as Heading5, Input as Input5 } from "@medusajs/ui";
+import { useTranslation as useTranslation9 } from "react-i18next";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var ProductCreateAttributeSection = () => {
+  const { t } = useTranslation9();
+  const form = useTabbedForm();
+  return /* @__PURE__ */ jsxs10("div", { id: "attributes", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx11(Heading5, { level: "h2", children: t("products.attributes") }),
+    /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-x-4 gap-y-8", children: [
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "origin_country",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.countryOrigin.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(CountrySelect, { ...field }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "material",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.material.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field }) })
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "grid grid-cols-2 gap-x-4 gap-y-8", children: [
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "width",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.width.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field, type: "number", min: 0 }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "length",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.length.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field, type: "number", min: 0 }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "height",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.height.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field, type: "number", min: 0 }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "weight",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.weight.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field, type: "number", min: 0 }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "mid_code",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.mid_code.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field }) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx11(
+        Form.Field,
+        {
+          control: form.control,
+          name: "hs_code",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs10(Form.Item, { children: [
+              /* @__PURE__ */ jsx11(Form.Label, { optional: true, children: t("products.fields.hs_code.label") }),
+              /* @__PURE__ */ jsx11(Form.Control, { children: /* @__PURE__ */ jsx11(Input5, { ...field }) })
+            ] });
+          }
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/pages/products/create/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx
+import {
+  Button as Button3,
+  createDataTableColumnHelper
+} from "@medusajs/ui";
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
+import { useTranslation as useTranslation10 } from "react-i18next";
+import { keepPreviousData } from "@tanstack/react-query";
+
+// src/pages/products/create/product-create-organize-form/constants.ts
+var SC_STACKED_MODAL_ID = "sc";
+
+// src/pages/products/create/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var PAGE_SIZE = 50;
+var ProductCreateSalesChannelStackedModal = () => {
+  const { t } = useTranslation10();
+  const form = useTabbedForm();
+  const { getValues, setValue } = form;
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState4(
+    {}
+  );
+  const [state, setState] = useState4([]);
+  const searchParams = useSalesChannelTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: SC_STACKED_MODAL_ID
+  });
+  const { sales_channels, count, isLoading, isError, error } = useSalesChannels(
+    searchParams,
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const open = getIsOpen(SC_STACKED_MODAL_ID);
+  useEffect3(() => {
+    if (!open) {
+      return;
+    }
+    const salesChannels = getValues("sales_channels");
+    if (salesChannels) {
+      setState(
+        salesChannels.map((channel) => ({
+          id: channel.id,
+          name: channel.name
+        }))
+      );
+      setRowSelection(
+        salesChannels.reduce(
+          (acc, channel) => ({
+            ...acc,
+            [channel.id]: true
+          }),
+          {}
+        )
+      );
+    }
+  }, [open, getValues]);
+  const onRowSelectionChange = (state2) => {
+    const ids = Object.keys(state2);
+    const addedIdsSet = new Set(
+      ids.filter((id) => state2[id] && !rowSelection[id])
+    );
+    let addedSalesChannels = [];
+    if (addedIdsSet.size > 0) {
+      addedSalesChannels = sales_channels?.filter((channel) => addedIdsSet.has(channel.id)) ?? [];
+    }
+    setState((prev) => {
+      const filteredPrev = prev.filter((channel) => state2[channel.id]);
+      return Array.from(/* @__PURE__ */ new Set([...filteredPrev, ...addedSalesChannels]));
+    });
+    setRowSelection(state2);
+  };
+  const handleAdd = () => {
+    setValue("sales_channels", state, {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    setIsOpen(SC_STACKED_MODAL_ID, false);
+  };
+  const filters = useSalesChannelTableFilters();
+  const columns = useColumns();
+  const emptyState = useSalesChannelTableEmptyState();
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs11(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx12(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx12(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx12(
+      DataTable,
+      {
+        data: sales_channels,
+        columns,
+        filters,
+        emptyState,
+        rowCount: count,
+        pageSize: PAGE_SIZE,
+        getRowId: (row) => row.id,
+        rowSelection: {
+          state: rowSelection,
+          onRowSelectionChange
+        },
+        isLoading,
+        layout: "fill",
+        prefix: SC_STACKED_MODAL_ID
+      }
+    ) }),
+    /* @__PURE__ */ jsx12(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx12(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx12(Button3, { size: "small", variant: "secondary", type: "button", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx12(Button3, { size: "small", onClick: handleAdd, type: "button", children: t("actions.save") })
+    ] }) })
+  ] });
+};
+var columnHelper = createDataTableColumnHelper();
+var useColumns = () => {
+  const base = useSalesChannelTableColumns();
+  return useMemo2(() => [columnHelper.select(), ...base], [base]);
+};
+
+// src/pages/products/create/product-create-organize-form/product-create-organize-form.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+var Root3 = ({ children }) => {
+  if (Children3.count(children) > 0) {
+    return /* @__PURE__ */ jsxs12(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
+      /* @__PURE__ */ jsx13("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx13("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children }) }),
+      /* @__PURE__ */ jsx13(ProductCreateSalesChannelStackedModal, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxs12(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
+    /* @__PURE__ */ jsx13("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx13("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: /* @__PURE__ */ jsx13(ProductCreateOrganizationSection, {}) }) }),
+    /* @__PURE__ */ jsx13(ProductCreateSalesChannelStackedModal, {})
+  ] });
+};
+Root3._tabMeta = {
+  id: "organize",
+  labelKey: "products.create.tabs.organize",
+  validationFields: ["discountable", "categories", "tags", "sales_channels"]
+};
+var ProductCreateOrganizeForm = Object.assign(Root3, {
+  _tabMeta: Root3._tabMeta,
+  OrganizationSection: ProductCreateOrganizationSection,
+  AttributeSection: ProductCreateAttributeSection,
+  SalesChannelModal: ProductCreateSalesChannelStackedModal
+});
+
+// src/pages/products/create/product-create-variants-form/product-create-variants-form.tsx
+import { useCallback, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState5 } from "react";
+import { Checkbox, Tooltip as Tooltip2 } from "@medusajs/ui";
+import { useWatch as useWatch2 } from "react-hook-form";
+import { useTranslation as useTranslation11 } from "react-i18next";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ProductCreateVariantsForm = ({
+  form,
+  store,
+  regions = [],
+  pricePreferences = [],
+  onOpenMediaModal,
+  productMedia = []
+}) => {
+  const { t } = useTranslation11();
+  const [searchValue, setSearchValue] = useState5("");
+  const variants = useWatch2({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const attributesResult = useAttributes();
+  const allAttributes = attributesResult.attributes || [];
+  const { stock_locations = [] } = useStockLocations({
+    limit: 9999,
+    fields: "id,name"
+  });
+  const formValues = useWatch2({
+    control: form.control
+  });
+  const variantAttributes = useMemo3(() => {
+    const result = [];
+    allAttributes.forEach((attr) => {
+      if (attr.ui_component === "multivalue") {
+        const useForVariants = formValues?.[`${attr.handle}UseForVariants`];
+        if (useForVariants === false) return;
+        const selectedValueIds = formValues?.[attr.handle];
+        if (selectedValueIds && Array.isArray(selectedValueIds) && selectedValueIds.length > 0) {
+          const selectedValues = selectedValueIds.map((valueId) => {
+            const possibleValue = attr.possible_values?.find(
+              (pv) => pv.id === valueId
+            );
+            return possibleValue ? { id: valueId, value: possibleValue.value } : null;
+          }).filter(
+            (item) => item !== null
+          );
+          if (selectedValues.length > 0) {
+            result.push({
+              handle: attr.handle,
+              name: attr.name,
+              selectedValues
+            });
+          }
+        }
+      }
+    });
+    const options = formValues?.options || [];
+    options.forEach((option) => {
+      if (option?.useForVariants !== false && option?.title && option?.values && Array.isArray(option.values) && option.values.length > 0) {
+        result.push({
+          handle: `option-${option.title}`,
+          name: option.title,
+          selectedValues: option.values.map((value) => ({
+            id: value,
+            value
+          }))
+        });
+      }
+    });
+    return result;
+  }, [allAttributes, formValues]);
+  const hasProductMedia = productMedia.length > 0;
+  const columns = useColumns2({
+    variantAttributes,
+    store,
+    regions,
+    pricePreferences,
+    stockLocations: stock_locations,
+    onOpenMediaModal,
+    form,
+    productMedia,
+    hasProductMedia
+  });
+  const variantData = useMemo3(() => {
+    const ret = [];
+    if (variantAttributes.length > 0) {
+      const totalCombinations = variantAttributes.reduce(
+        (acc, attr) => acc * attr.selectedValues.length,
+        1
+      );
+      for (let i = 0; i < totalCombinations; i++) {
+        const variantOptions = {};
+        variantAttributes.forEach((attr) => {
+          let valueIndex = 0;
+          let divisor = 1;
+          for (let j = variantAttributes.length - 1; j >= 0; j--) {
+            if (variantAttributes[j].handle === attr.handle) {
+              valueIndex = Math.floor(i / divisor) % attr.selectedValues.length;
+              break;
+            }
+            divisor *= variantAttributes[j].selectedValues.length;
+          }
+          variantOptions[attr.name] = attr.selectedValues[valueIndex]?.value || "";
+        });
+        const autoTitle = variantAttributes.map((attr) => variantOptions[attr.name]).filter(Boolean).join(" / ");
+        const existingVariant = variants.find((v) => {
+          if (!v.options) return false;
+          return variantAttributes.every(
+            (attr) => v.options[attr.name] === variantOptions[attr.name]
+          );
+        });
+        ret.push({
+          title: autoTitle,
+          should_create: existingVariant?.should_create ?? true,
+          variant_rank: i,
+          options: variantOptions,
+          sku: existingVariant?.sku || "",
+          prices: existingVariant?.prices || {},
+          is_default: i === 0,
+          media: existingVariant?.media || [],
+          originalIndex: existingVariant ? variants.indexOf(existingVariant) : i
+        });
+      }
+    } else {
+      variants.forEach((v, i) => {
+        if (v.should_create) {
+          ret.push({
+            ...v,
+            originalIndex: i
+          });
+        }
+      });
+    }
+    return ret;
+  }, [variants, variantAttributes]);
+  const filteredVariantData = useMemo3(() => {
+    if (!searchValue.trim()) return variantData;
+    return variantData.filter(
+      (variant) => variant.title.toLowerCase().includes(searchValue.toLowerCase())
+    );
+  }, [variantData, searchValue]);
+  const variantStructureKey = useMemo3(() => {
+    return variantAttributes.map(
+      (attr) => `${attr.handle}:${attr.selectedValues.map((v) => v.id).join(",")}`
+    ).join("|");
+  }, [variantAttributes]);
+  useEffect4(() => {
+    if (variantAttributes.length > 0) {
+      const totalCombinations = variantAttributes.reduce(
+        (acc, attr) => acc * attr.selectedValues.length,
+        1
+      );
+      const currentVariants = form.getValues("variants") || [];
+      const newVariants = [];
+      for (let i = 0; i < totalCombinations; i++) {
+        const variantOptions = {};
+        variantAttributes.forEach((attr) => {
+          let valueIndex = 0;
+          let divisor = 1;
+          for (let j = variantAttributes.length - 1; j >= 0; j--) {
+            if (variantAttributes[j].handle === attr.handle) {
+              valueIndex = Math.floor(i / divisor) % attr.selectedValues.length;
+              break;
+            }
+            divisor *= variantAttributes[j].selectedValues.length;
+          }
+          variantOptions[attr.name] = attr.selectedValues[valueIndex]?.value || "";
+        });
+        const autoTitle = variantAttributes.map((attr) => variantOptions[attr.name]).filter(Boolean).join(" / ");
+        const existingVariant = currentVariants.find((v) => {
+          if (!v.options) return false;
+          return variantAttributes.every(
+            (attr) => v.options[attr.name] === variantOptions[attr.name]
+          );
+        });
+        newVariants.push({
+          title: autoTitle,
+          should_create: existingVariant?.should_create ?? true,
+          variant_rank: i,
+          options: variantOptions,
+          sku: existingVariant?.sku || "",
+          prices: existingVariant?.prices || {},
+          is_default: i === 0,
+          media: existingVariant?.media || []
+        });
+      }
+      form.setValue("variants", newVariants);
+    } else {
+      const currentVariants = form.getValues("variants") || [];
+      if (currentVariants.length === 0) {
+        const defaultVariant = decorateVariantsWithDefaultValues([
+          {
+            title: "Default variant",
+            should_create: true,
+            variant_rank: 0,
+            options: {},
+            sku: "",
+            prices: {},
+            is_default: true,
+            media: []
+          }
+        ]);
+        form.setValue("variants", defaultVariant);
+      } else {
+        const hasOnlyDefaultVariant = currentVariants.length === 1 && currentVariants[0].is_default;
+        if (!hasOnlyDefaultVariant) {
+          const defaultVariant = decorateVariantsWithDefaultValues([
+            {
+              title: "Default variant",
+              should_create: true,
+              variant_rank: 0,
+              options: {},
+              sku: "",
+              prices: {},
+              is_default: true,
+              media: []
+            }
+          ]);
+          form.setValue("variants", defaultVariant);
+        }
+      }
+    }
+  }, [variantStructureKey, form]);
+  return /* @__PURE__ */ jsx14("div", { className: "border-ui-border flex h-full flex-col justify-between divide-y", children: /* @__PURE__ */ jsx14(
+    DataGrid,
+    {
+      columns,
+      data: filteredVariantData,
+      state: form,
+      searchValue,
+      onSearchChange: setSearchValue,
+      searchPlaceholder: t(
+        "products.create.variants.productVariants.searchPlaceholder"
+      )
+    }
+  ) });
+};
+var columnHelper2 = createDataGridHelper();
+var useColumns2 = ({
+  variantAttributes = [],
+  store,
+  regions = [],
+  pricePreferences = [],
+  stockLocations = [],
+  onOpenMediaModal,
+  form,
+  productMedia = [],
+  hasProductMedia = false
+}) => {
+  const { t } = useTranslation11();
+  const variants = useWatch2({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const variantsRef = useRef2(variants);
+  variantsRef.current = variants;
+  const allSelected = variants.length > 0 && variants.every((v) => v.should_create);
+  const someSelected = variants.some((v) => v.should_create) && !allSelected;
+  const handleSelectAll = useCallback(
+    (checked) => {
+      const currentVariants = form.getValues("variants") || [];
+      const updatedVariants = currentVariants.map((v) => ({
+        ...v,
+        should_create: checked
+      }));
+      form.setValue("variants", updatedVariants);
+    },
+    [form]
+  );
+  return useMemo3(
+    () => [
+      columnHelper2.column({
+        id: "checkbox",
+        header: () => /* @__PURE__ */ jsx14(
+          Checkbox,
+          {
+            checked: allSelected ? true : someSelected ? "indeterminate" : false,
+            onCheckedChange: handleSelectAll
+          }
+        ),
+        field: (context) => {
+          const rowData = context.row.original;
+          return `variants.${rowData.originalIndex}.should_create`;
+        },
+        type: "boolean",
+        cell: (context) => /* @__PURE__ */ jsx14(DataGrid.BooleanCell, { context }),
+        disableHiding: true,
+        size: 52,
+        pin: "left"
+      }),
+      columnHelper2.column({
+        id: "options_combined",
+        name: variantAttributes.length > 0 ? variantAttributes.map((attr) => attr.name).join(" / ") : "Options",
+        header: () => {
+          const label = variantAttributes.length > 0 ? variantAttributes.map((attr) => attr.name).join(" / ") : "Options";
+          return /* @__PURE__ */ jsx14(Tooltip2, { content: label, children: /* @__PURE__ */ jsx14("span", { className: "w-full truncate", children: label }) });
+        },
+        cell: (context) => {
+          if (variantAttributes.length === 0) {
+            return /* @__PURE__ */ jsx14(DataGrid.ReadonlyCell, { context });
+          }
+          const rowData = context.row.original;
+          const combinedValue = variantAttributes.map(
+            (attr) => rowData.options?.[attr.name] || ""
+          ).filter(Boolean).join(" / ");
+          return /* @__PURE__ */ jsx14(DataGrid.ReadonlyCell, { context, children: combinedValue });
+        },
+        disableHiding: true,
+        pin: "left"
+      }),
+      columnHelper2.column({
+        id: "title",
+        name: t("fields.title"),
+        header: t("fields.title"),
+        field: (context) => {
+          const rowData = context.row.original;
+          return `variants.${rowData.originalIndex}.title`;
+        },
+        type: "text",
+        cell: (context) => /* @__PURE__ */ jsx14(DataGrid.TextCell, { context }),
+        disableHiding: true,
+        pin: "left"
+      }),
+      columnHelper2.column({
+        id: "media",
+        name: t(
+          "products.create.variants.productVariants.media"
+        ),
+        header: t(
+          "products.create.variants.productVariants.media"
+        ),
+        field: (context) => {
+          const rowData = context.row.original;
+          return `variants.${rowData.originalIndex}.media`;
+        },
+        type: "media",
+        cell: (context) => {
+          const rowData = context.row.original;
+          return /* @__PURE__ */ jsx14(
+            DataGridMediaCell,
+            {
+              context,
+              disabled: !hasProductMedia,
+              onOpenMediaModal: hasProductMedia ? () => {
+                const currentMedia = variantsRef.current[rowData.originalIndex]?.media;
+                onOpenMediaModal?.(
+                  rowData.originalIndex,
+                  rowData.title,
+                  currentMedia,
+                  productMedia
+                );
+              } : void 0
+            }
+          );
+        }
+      }),
+      columnHelper2.column({
+        id: "sku",
+        name: t("fields.sku"),
+        header: t("fields.sku"),
+        field: (context) => {
+          const rowData = context.row.original;
+          return `variants.${rowData.originalIndex}.sku`;
+        },
+        type: "text",
+        cell: (context) => /* @__PURE__ */ jsx14(DataGrid.TextCell, { context })
+      }),
+      ...createDataGridPriceColumns({
+        currencies: store?.supported_currencies?.map(
+          (c) => c.currency_code
+        ) || [],
+        pricePreferences,
+        getFieldName: (context, value) => {
+          const rowData = context.row.original;
+          return `variants.${rowData.originalIndex}.prices.${value}`;
+        },
+        t
+      })
+    ],
+    [
+      variantAttributes,
+      t,
+      store,
+      regions,
+      pricePreferences,
+      stockLocations,
+      onOpenMediaModal,
+      allSelected,
+      someSelected,
+      handleSelectAll,
+      hasProductMedia,
+      productMedia
+    ]
+  );
+};
+
+// src/pages/products/create/product-create-form/product-create-form.tsx
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+var SAVE_DRAFT_BUTTON = "save-draft-button";
+var SEC_CAT_PRODUCT_KEY = "sec_cat_product_key";
+var TAB_ORDER = [
+  "details" /* DETAILS */,
+  "organize" /* ORGANIZE */,
+  "attributes" /* ATTRIBUTES */,
+  "variants" /* VARIANTS */,
+  "inventory" /* INVENTORY */
+];
+var isMovingForward = (currentTab, newTab) => {
+  const currentIndex = TAB_ORDER.indexOf(currentTab);
+  const newIndex = TAB_ORDER.indexOf(newTab);
+  return newIndex > currentIndex;
+};
+var ProductCreateForm = ({
+  defaultChannel,
+  store,
+  onOpenMediaModal,
+  onSaveVariantMediaRef
+}) => {
+  const [tab, setTab] = useState6("details" /* DETAILS */);
+  const [maxReachedTab, setMaxReachedTab] = useState6("details" /* DETAILS */);
+  const [tabState, setTabState] = useState6({
+    ["details" /* DETAILS */]: "in-progress",
+    ["organize" /* ORGANIZE */]: "not-started",
+    ["attributes" /* ATTRIBUTES */]: "not-started",
+    ["variants" /* VARIANTS */]: "not-started",
+    ["inventory" /* INVENTORY */]: "not-started"
+  });
+  const { t } = useTranslation12();
+  const { handleSuccess } = useRouteModal();
+  const { regions } = useRegions({ limit: 9999 });
+  const { price_preferences: pricePreferences } = usePricePreferences({
+    limit: 9999
+  });
+  const { attributes: allAttributes } = useAttributes({
+    fields: "id,name,handle,description,ui_component,is_required,product_categories.*,possible_values.*"
+  });
+  const { stock_locations = [] } = useStockLocations({
+    limit: 9999,
+    fields: "id,name"
+  });
+  const dynamicAttributeSchema = useMemo4(() => {
+    const attributeFields = {};
+    allAttributes?.forEach((attr) => {
+      switch (attr.ui_component) {
+        case "multivalue":
+          attributeFields[attr.handle] = z2.array(z2.string()).optional();
+          attributeFields[`${attr.handle}UseForVariants`] = z2.boolean().optional();
+          break;
+        case "select":
+        case "text":
+        case "text_area":
+          attributeFields[attr.handle] = z2.string().optional();
+          break;
+        case "unit":
+          attributeFields[attr.handle] = z2.union([z2.string(), z2.number()]).optional();
+          break;
+        case "toggle":
+          attributeFields[attr.handle] = z2.string().optional();
+          break;
+      }
+    });
+    return attributeFields;
+  }, [allAttributes]);
+  const extendedSchema = useMemo4(() => {
+    const baseSchema = ProductCreateSchema.innerType();
+    const extendedBaseSchema = baseSchema.extend({
+      ...dynamicAttributeSchema
+    });
+    return extendedBaseSchema.superRefine((data, ctx) => {
+      if (data.variants.every((v) => !v.should_create)) {
+        return ctx.addIssue({
+          code: z2.ZodIssueCode.custom,
+          path: ["variants"],
+          message: "invalid_length"
+        });
+      }
+      const skus = /* @__PURE__ */ new Set();
+      data.variants.forEach((v, index) => {
+        if (v.sku) {
+          if (skus.has(v.sku)) {
+            ctx.addIssue({
+              code: z2.ZodIssueCode.custom,
+              path: [`variants.${index}.sku`],
+              message: "SKU must be unique"
+            });
+          }
+          skus.add(v.sku);
+        }
+      });
+    });
+  }, [dynamicAttributeSchema]);
+  const dynamicDefaultValues = useMemo4(() => {
+    const defaults = {};
+    allAttributes?.forEach((attr) => {
+      switch (attr.ui_component) {
+        case "multivalue":
+          defaults[attr.handle] = [];
+          defaults[`${attr.handle}UseForVariants`] = false;
+          break;
+        case "select":
+        case "text":
+        case "unit":
+        case "text_area":
+        case "toggle":
+          defaults[attr.handle] = void 0;
+          break;
+      }
+    });
+    return defaults;
+  }, [allAttributes]);
+  const form = useForm({
+    defaultValues: {
+      ...PRODUCT_CREATE_FORM_DEFAULTS,
+      ...dynamicDefaultValues,
+      sales_channels: defaultChannel ? [{ id: defaultChannel.id, name: defaultChannel.name }] : []
+    },
+    resolver: zodResolver(extendedSchema),
+    mode: "onBlur"
+  });
+  const { mutateAsync, isPending } = useCreateProduct();
+  const attributesFormRef = useRef3(null);
+  const watchedVariants = useWatch3({
+    control: form.control,
+    name: "variants"
+  });
+  const watchedMedia = useWatch3({
+    control: form.control,
+    name: "media"
+  });
+  const showInventoryTab = useMemo4(
+    () => watchedVariants.some(
+      (v) => v.manage_inventory && v.inventory_kit
+    ),
+    [watchedVariants]
+  );
+  const handleSaveVariantMedia = useCallback2(
+    (variantIndex, media) => {
+      const currentVariants = form.getValues("variants") || [];
+      if (currentVariants[variantIndex]) {
+        const updatedVariants = [...currentVariants];
+        updatedVariants[variantIndex] = {
+          ...updatedVariants[variantIndex],
+          media
+        };
+        form.setValue("variants", updatedVariants, {
+          shouldDirty: true
+        });
+      }
+    },
+    [form]
+  );
+  useEffect5(() => {
+    if (tab === "variants" /* VARIANTS */) {
+      const currentOptions = form.getValues("options");
+      const currentVariants = form.getValues("variants");
+      if (currentOptions.length === 0 && currentVariants.length === 0) {
+        form.setValue(
+          "variants",
+          decorateVariantsWithDefaultValues([
+            {
+              title: "Default variant",
+              should_create: true,
+              variant_rank: 0,
+              options: {},
+              is_default: true
+            }
+          ])
+        );
+      }
+    }
+  }, [tab]);
+  useEffect5(() => {
+    if (onSaveVariantMediaRef) {
+      onSaveVariantMediaRef.current = handleSaveVariantMedia;
+    }
+  }, [handleSaveVariantMedia, onSaveVariantMediaRef]);
+  const handleSubmit = form.handleSubmit(async (values, e) => {
+    let isDraftSubmission = false;
+    if (e?.nativeEvent instanceof SubmitEvent) {
+      const submitter = e?.nativeEvent?.submitter;
+      isDraftSubmission = submitter.dataset.name === SAVE_DRAFT_BUTTON;
+    }
+    const media = values.media || [];
+    const { secondary_categories, ...rest } = values;
+    const secCatProductKey = Array.isArray(secondary_categories) && secondary_categories.length > 0 ? `sec-cat-${Date.now()}-${Math.random().toString(36).slice(2, 10)}` : void 0;
+    const adminAttributes = [];
+    const vendorAttributes = [];
+    const allFieldNames = Object.keys(values);
+    let dynamicAttributeFields = [];
+    if (allAttributes && allAttributes.length > 0) {
+      dynamicAttributeFields = allAttributes.map(
+        (attr) => attr.handle || attr.id
+      );
+    }
+    const vendorOptions = rest.options?.filter(
+      (opt) => opt.metadata?.author === "vendor" && opt.title && opt.values?.length > 0
+    ) || [];
+    const vendorOptionsForVariants = vendorOptions.filter(
+      (opt) => opt.useForVariants === true
+    );
+    const adminOptionsForVariants = (rest.options || []).filter(
+      (opt) => opt.useForVariants === true && opt.metadata?.author === "admin" && opt.attributeId && opt.title && opt.values?.length > 0
+    );
+    const requiredAttributeOptions = [];
+    allAttributes?.forEach((attr) => {
+      if (!attr.is_required) return;
+      const fieldHandle = attr.handle || attr.id;
+      const value = form.getValues(fieldHandle);
+      if (value === void 0 || value === null || value === "")
+        return;
+      if (attr.ui_component === "multivalue" && Array.isArray(value) && value.length > 0) {
+        const useForVariants = form.getValues(
+          `${fieldHandle}UseForVariants`
+        );
+        const selectedValues = value.map((valueId) => {
+          const possibleValue = attr.possible_values?.find(
+            (pv) => pv.id === valueId
+          );
+          return possibleValue ? possibleValue.value : null;
+        }).filter((item) => item !== null);
+        if (selectedValues.length > 0 && useForVariants === true) {
+          requiredAttributeOptions.push({
+            title: attr.name,
+            values: selectedValues,
+            metadata: { author: "admin" },
+            useForVariants: true
+          });
+        }
+      }
+    });
+    const allOptions = [
+      ...vendorOptionsForVariants,
+      ...requiredAttributeOptions,
+      ...adminOptionsForVariants
+    ];
+    dynamicAttributeFields.forEach((fieldName) => {
+      const value = form.getValues(fieldName);
+      if (value === void 0 || value === null || value === "")
+        return;
+      const attribute = allAttributes?.find(
+        (attr) => (attr.handle || attr.id) === fieldName
+      );
+      if (!attribute) return;
+      if (Array.isArray(value) && value.length > 0) {
+        const attrFieldHandle = attribute.handle || attribute.id;
+        const useForVariants = form.getValues(
+          `${attrFieldHandle}UseForVariants`
+        );
+        const vals = value.map((valueId) => {
+          const possibleValue = attribute.possible_values?.find(
+            (pv) => pv.id === valueId
+          );
+          return possibleValue ? possibleValue.value : valueId;
+        }).filter(
+          (item) => item !== null && item !== void 0
+        );
+        if (vals.length > 0) {
+          adminAttributes.push({
+            attribute_id: attribute.id,
+            values: vals.map((item) => String(item)),
+            use_for_variations: useForVariants === true
+          });
+        }
+      } else if (!Array.isArray(value)) {
+        let actualValue = value;
+        if (attribute.possible_values && typeof value === "string") {
+          const possibleValue = attribute.possible_values.find(
+            (pv) => pv.id === value
+          );
+          if (possibleValue) {
+            actualValue = possibleValue.value;
+          }
+        }
+        adminAttributes.push({
+          attribute_id: attribute.id,
+          values: [String(actualValue)],
+          use_for_variations: false
+        });
+      }
+    });
+    vendorOptions.forEach((option) => {
+      vendorAttributes.push({
+        name: option.title,
+        values: option.values.map((value) => String(value)),
+        use_for_variations: option.useForVariants === true,
+        ui_component: "multivalue"
+      });
+    });
+    const allFormOptions = rest.options || [];
+    allFormOptions.filter(
+      (opt) => opt.useForVariants === false && opt.metadata?.author === "admin" && opt.attributeId && opt.title && opt.values?.length > 0
+    ).forEach((option) => {
+      adminAttributes.push({
+        attribute_id: option.attributeId,
+        values: option.values.map(
+          (value) => String(value)
+        ),
+        use_for_variations: false
+      });
+    });
+    adminOptionsForVariants.forEach((option) => {
+      adminAttributes.push({
+        attribute_id: option.attributeId,
+        values: option.values.map((value) => String(value)),
+        use_for_variations: true
+      });
+    });
+    const { ...payload } = rest;
+    dynamicAttributeFields.forEach((fieldName) => {
+      delete payload[fieldName];
+    });
+    const useForVariantsFields = allFieldNames.filter(
+      (fieldName) => fieldName.endsWith("UseForVariants")
+    );
+    useForVariantsFields.forEach((fieldName) => {
+      delete payload[fieldName];
+    });
+    const finalPayload = { ...payload, media: void 0 };
+    let uploadedMedia = [];
+    try {
+      if (media.length) {
+        const thumbnailReq = media.filter(
+          (m) => m.isThumbnail && m.file
+        );
+        const otherMediaReq = media.filter(
+          (m) => !m.isThumbnail && m.file
+        );
+        const fileReqs = [];
+        if (thumbnailReq?.length) {
+          fileReqs.push(
+            uploadFilesQuery(thumbnailReq).then(
+              (r) => (Array.isArray(r?.files) ? r.files : []).map(
+                (f) => ({
+                  ...f,
+                  isThumbnail: true
+                })
+              )
+            )
+          );
+        }
+        if (otherMediaReq?.length) {
+          fileReqs.push(
+            uploadFilesQuery(otherMediaReq).then(
+              (r) => (Array.isArray(r?.files) ? r.files : []).map(
+                (f) => ({
+                  ...f,
+                  isThumbnail: false
+                })
+              )
+            )
+          );
+        }
+        uploadedMedia = (await Promise.all(fileReqs)).flat();
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    const blobToUploadedUrl = /* @__PURE__ */ new Map();
+    const allOriginalMedia = media;
+    if (uploadedMedia.length > 0) {
+      const thumbnailItems = allOriginalMedia.filter(
+        (m) => m.isThumbnail && m.file
+      );
+      const otherItems = allOriginalMedia.filter(
+        (m) => !m.isThumbnail && m.file
+      );
+      let thumbIdx = 0;
+      let otherIdx = 0;
+      for (const uploaded of uploadedMedia) {
+        if (uploaded.isThumbnail && thumbIdx < thumbnailItems.length) {
+          const blobUrl = thumbnailItems[thumbIdx].url;
+          if (blobUrl) {
+            blobToUploadedUrl.set(blobUrl, uploaded.url);
+          }
+          thumbIdx++;
+        }
+        if (!uploaded.isThumbnail && otherIdx < otherItems.length) {
+          const blobUrl = otherItems[otherIdx].url;
+          if (blobUrl) {
+            blobToUploadedUrl.set(blobUrl, uploaded.url);
+          }
+          otherIdx++;
+        }
+      }
+    }
+    const variantsToCreate = finalPayload.variants.filter(
+      (variant) => variant.should_create === true
+    );
+    const variantImageKeyByIndex = /* @__PURE__ */ new Map();
+    const variantsImages = [];
+    for (let i = 0; i < variantsToCreate.length; i++) {
+      const variant = variantsToCreate[i];
+      const variantMedia = variant.media || [];
+      if (!variantMedia.length) continue;
+      const resolvedUrls = variantMedia.map(
+        (m) => m.url ? blobToUploadedUrl.get(m.url) : void 0
+      ).filter((url) => !!url);
+      if (resolvedUrls.length === 0) continue;
+      const variantThumb = variantMedia.find(
+        (m) => m.isThumbnail
+      );
+      const resolvedThumbUrl = variantThumb?.url ? blobToUploadedUrl.get(variantThumb.url) : void 0;
+      const thumbnailUrl = resolvedThumbUrl || resolvedUrls[0];
+      const variantImageKey = `variant-${i}-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+      variantImageKeyByIndex.set(i, variantImageKey);
+      variantsImages.push({
+        variant_image_key: variantImageKey,
+        image_urls: resolvedUrls,
+        thumbnail_url: thumbnailUrl
+      });
+    }
+    const mappedVariants = variantsToCreate.map(
+      (variant, index) => {
+        const mappedOptions = {};
+        allOptions.forEach((option) => {
+          if (variant.options && variant.options[option.title]) {
+            mappedOptions[option.title] = variant.options[option.title];
+          } else {
+            const variantTitle = variant.title || "";
+            const optionValues = option.values || [];
+            const matchingValue = optionValues.find(
+              (value) => variantTitle.includes(value)
+            );
+            if (matchingValue) {
+              mappedOptions[option.title] = matchingValue;
+            } else if (optionValues.length > 0) {
+              mappedOptions[option.title] = optionValues[0];
+            }
+          }
+        });
+        const variantImageKey = variantImageKeyByIndex.get(index);
+        const {
+          media: _media,
+          stock_locations: _sl,
+          ...variantWithoutMedia
+        } = variant;
+        return {
+          ...variantWithoutMedia,
+          options: Object.keys(mappedOptions).length > 0 ? mappedOptions : { "Default option": "Default option value" },
+          ...variantImageKey && {
+            metadata: { variant_image_key: variantImageKey }
+          }
+        };
+      }
+    );
+    const payloadToSend = {
+      ...finalPayload,
+      status: isDraftSubmission ? "draft" : "proposed",
+      images: uploadedMedia,
+      weight: parseInt(finalPayload.weight || "") || void 0,
+      length: parseInt(finalPayload.length || "") || void 0,
+      height: parseInt(finalPayload.height || "") || void 0,
+      width: parseInt(finalPayload.width || "") || void 0,
+      type_id: finalPayload.type_id || void 0,
+      tags: finalPayload.tags?.map((tag) => ({
+        id: tag
+      })) || [],
+      collection_id: finalPayload.collection_id || void 0,
+      shipping_profile_id: void 0,
+      enable_variants: void 0,
+      options: allOptions.length > 0 ? allOptions : [
+        {
+          title: "Default option",
+          values: ["Default option value"]
+        }
+      ],
+      metadata: (() => {
+        const existing = finalPayload?.metadata ?? void 0;
+        if (!secCatProductKey) return existing;
+        return {
+          ...existing ?? {},
+          [SEC_CAT_PRODUCT_KEY]: secCatProductKey
+        };
+      })(),
+      additional_data: (() => {
+        const additionalData = {};
+        if (adminAttributes.length > 0) {
+          additionalData.admin_attributes = adminAttributes;
+        }
+        if (vendorAttributes.length > 0) {
+          additionalData.vendor_attributes = vendorAttributes;
+        }
+        if (Array.isArray(secondary_categories) && secondary_categories.length > 0 && secCatProductKey) {
+          additionalData.secondary_categories = [
+            {
+              sec_cat_product_key: secCatProductKey,
+              category_ids: secondary_categories
+            }
+          ];
+        }
+        if (variantsImages.length > 0) {
+          additionalData.variants_images = variantsImages;
+        }
+        return Object.keys(additionalData).length > 0 ? additionalData : void 0;
+      })(),
+      categories: finalPayload.categories.map((cat) => ({
+        id: cat
+      })),
+      variants: mappedVariants.map((variant) => {
+        const {
+          media: _m,
+          stock_locations: _sl,
+          ...variantWithoutMedia
+        } = variant;
+        return {
+          ...variantWithoutMedia,
+          sku: variant.sku === "" ? void 0 : variant.sku,
+          manage_inventory: true,
+          allow_backorder: false,
+          should_create: void 0,
+          is_default: void 0,
+          inventory_kit: void 0,
+          inventory: void 0,
+          prices: Object.keys(variant.prices || {}).map(
+            (key) => ({
+              currency_code: key,
+              amount: parseFloat(variant.prices?.[key])
+            })
+          )
+        };
+      })
+    };
+    const productData = await mutateAsync(payloadToSend, {
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+    toast.success(t("products.create.successToast", { title: productData.product.title }));
+    handleSuccess(`../${productData.product.id}`);
+  });
+  const onNext = async (currentTab) => {
+    let fieldsToValidate = [];
+    let shouldProceed = true;
+    switch (currentTab) {
+      case "details" /* DETAILS */:
+        fieldsToValidate = ["title", "handle"];
+        break;
+      case "organize" /* ORGANIZE */:
+        fieldsToValidate = ["categories"];
+        break;
+      case "attributes" /* ATTRIBUTES */:
+        if (attributesFormRef.current) {
+          shouldProceed = await attributesFormRef.current.validateAttributes();
+        }
+        break;
+      case "variants" /* VARIANTS */:
+        fieldsToValidate = ["variants", "options"];
+        break;
+      case "inventory" /* INVENTORY */:
+        break;
+    }
+    if (fieldsToValidate.length > 0) {
+      const valid = await form.trigger(fieldsToValidate);
+      if (!valid) return;
+    }
+    if (!shouldProceed) return;
+    let nextTab;
+    if (currentTab === "details" /* DETAILS */) {
+      nextTab = "organize" /* ORGANIZE */;
+    } else if (currentTab === "organize" /* ORGANIZE */) {
+      nextTab = "attributes" /* ATTRIBUTES */;
+    } else if (currentTab === "attributes" /* ATTRIBUTES */) {
+      nextTab = "variants" /* VARIANTS */;
+    } else if (currentTab === "variants" /* VARIANTS */) {
+      nextTab = "inventory" /* INVENTORY */;
+    } else {
+      return;
+    }
+    const currentTabIndex = TAB_ORDER.indexOf(currentTab);
+    const currentMaxIndex = TAB_ORDER.indexOf(maxReachedTab);
+    if (currentTabIndex >= currentMaxIndex) {
+      setMaxReachedTab(TAB_ORDER[currentMaxIndex + 1]);
+    }
+    setTab(nextTab);
+  };
+  useEffect5(() => {
+    const currentIndex = TAB_ORDER.indexOf(tab);
+    const maxReachedIndex = TAB_ORDER.indexOf(maxReachedTab);
+    const currentState = {
+      ["details" /* DETAILS */]: "not-started",
+      ["organize" /* ORGANIZE */]: "not-started",
+      ["attributes" /* ATTRIBUTES */]: "not-started",
+      ["variants" /* VARIANTS */]: "not-started",
+      ["inventory" /* INVENTORY */]: "not-started"
+    };
+    TAB_ORDER.forEach((tabItem, index) => {
+      if (index < currentIndex && index <= maxReachedIndex) {
+        currentState[tabItem] = "completed";
+      } else if (index === currentIndex) {
+        currentState[tabItem] = "in-progress";
+      } else if (index > currentIndex && index <= maxReachedIndex) {
+        currentState[tabItem] = "completed";
+      } else {
+        currentState[tabItem] = "not-started";
+      }
+    });
+    setTabState(currentState);
+  }, [tab, maxReachedTab]);
+  return /* @__PURE__ */ jsx15(TabbedFormContext.Provider, { value: form, children: /* @__PURE__ */ jsx15(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs13(
+    KeyboundForm,
+    {
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          if (e.target instanceof HTMLTextAreaElement && !(e.metaKey || e.ctrlKey)) {
+            return;
+          }
+          e.preventDefault();
+          if (e.metaKey || e.ctrlKey) {
+            if (tab !== "variants" /* VARIANTS */) {
+              e.stopPropagation();
+              onNext(tab);
+              return;
+            }
+            handleSubmit();
+          }
+        }
+      },
+      onSubmit: handleSubmit,
+      className: "flex h-full flex-col",
+      children: [
+        /* @__PURE__ */ jsxs13(
+          ProgressTabs,
+          {
+            value: tab,
+            onValueChange: async (newTab) => {
+              const newTabValue = newTab;
+              const currentIndex = TAB_ORDER.indexOf(tab);
+              const newIndex = TAB_ORDER.indexOf(newTabValue);
+              const maxReachedIndex = TAB_ORDER.indexOf(maxReachedTab);
+              const movingForward = isMovingForward(
+                tab,
+                newTabValue
+              );
+              if (movingForward) {
+                if (newIndex > maxReachedIndex + 1) return;
+                let fieldsToValidate = [];
+                switch (tab) {
+                  case "details" /* DETAILS */:
+                    fieldsToValidate = ["title", "handle"];
+                    break;
+                  case "organize" /* ORGANIZE */:
+                    fieldsToValidate = ["categories"];
+                    break;
+                  case "attributes" /* ATTRIBUTES */:
+                    fieldsToValidate = [];
+                    break;
+                  case "variants" /* VARIANTS */:
+                    fieldsToValidate = ["variants", "options"];
+                    break;
+                  case "inventory" /* INVENTORY */:
+                    break;
+                }
+                if (fieldsToValidate.length > 0) {
+                  const valid = await form.trigger(fieldsToValidate);
+                  if (!valid) return;
+                } else if (tab === "attributes" /* ATTRIBUTES */) {
+                  if (attributesFormRef.current) {
+                    const valid = await attributesFormRef.current.validateAttributes();
+                    if (!valid) return;
+                  }
+                }
+                if (currentIndex >= maxReachedIndex) {
+                  setMaxReachedTab(
+                    TAB_ORDER[currentIndex + 1]
+                  );
+                }
+              }
+              setTab(newTabValue);
+            },
+            className: "flex h-full flex-col overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx15(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx15("div", { className: "-my-2 w-full border-l", children: /* @__PURE__ */ jsxs13(ProgressTabs.List, { className: "justify-start-start flex w-full items-center", children: [
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["details" /* DETAILS */],
+                    value: "details" /* DETAILS */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.details")
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["organize" /* ORGANIZE */],
+                    value: "organize" /* ORGANIZE */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.organize")
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["attributes" /* ATTRIBUTES */],
+                    value: "attributes" /* ATTRIBUTES */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.attributes")
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["variants" /* VARIANTS */],
+                    value: "variants" /* VARIANTS */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.variants")
+                  }
+                ),
+                showInventoryTab && /* @__PURE__ */ jsx15(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["inventory" /* INVENTORY */],
+                    value: "inventory" /* INVENTORY */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.inventory")
+                  }
+                )
+              ] }) }) }),
+              /* @__PURE__ */ jsxs13(RouteFocusModal.Body, { className: "size-full overflow-hidden", children: [
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "details" /* DETAILS */,
+                    children: /* @__PURE__ */ jsx15(ProductCreateDetailsForm, { form })
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "organize" /* ORGANIZE */,
+                    children: /* @__PURE__ */ jsx15(
+                      ProductCreateOrganizeForm,
+                      {
+                        form
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "attributes" /* ATTRIBUTES */,
+                    children: /* @__PURE__ */ jsx15(
+                      ProductCreateAttributesForm,
+                      {
+                        form,
+                        ref: attributesFormRef
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx15(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "variants" /* VARIANTS */,
+                    children: /* @__PURE__ */ jsx15(
+                      ProductCreateVariantsForm,
+                      {
+                        form,
+                        store,
+                        regions,
+                        pricePreferences,
+                        onOpenMediaModal,
+                        productMedia: watchedMedia || []
+                      }
+                    )
+                  }
+                ),
+                showInventoryTab && /* @__PURE__ */ jsx15(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "inventory" /* INVENTORY */,
+                    children: /* @__PURE__ */ jsx15(
+                      ProductCreateInventoryKitForm,
+                      {
+                        form
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx15(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx15(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx15(Button4, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx15(
+            Button4,
+            {
+              "data-name": SAVE_DRAFT_BUTTON,
+              size: "small",
+              type: "submit",
+              onClick: () => {
+                if (form.getValues("categories").length === 0 && form.getValues("title")) {
+                  onNext("details" /* DETAILS */);
+                  return;
+                }
+                handleSubmit();
+              },
+              isLoading: isPending,
+              variant: "secondary",
+              className: "whitespace-nowrap",
+              children: t("actions.saveAsDraft")
+            }
+          ),
+          /* @__PURE__ */ jsx15(
+            PrimaryButton,
+            {
+              tab,
+              next: onNext,
+              isLoading: isPending,
+              showInventoryTab
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) }) });
+};
+var PrimaryButton = ({
+  tab,
+  next,
+  isLoading,
+  showInventoryTab
+}) => {
+  const { t } = useTranslation12();
+  if (tab === "variants" /* VARIANTS */ && !showInventoryTab || tab === "inventory" /* INVENTORY */ && showInventoryTab) {
+    return /* @__PURE__ */ jsx15(
+      Button4,
+      {
+        "data-name": "publish-button",
+        type: "submit",
+        variant: "primary",
+        size: "small",
+        isLoading,
+        children: t("actions.publish")
+      },
+      "submit-button"
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    Button4,
+    {
+      type: "button",
+      variant: "primary",
+      size: "small",
+      onClick: () => next(tab),
+      children: t("actions.continue")
+    },
+    "next-button"
+  );
+};
+
+// src/pages/products/create/variant-media-view/variant-media-view.tsx
+import { useRef as useRef4, useState as useState9 } from "react";
+import { Button as Button6 } from "@medusajs/ui";
+import { useTranslation as useTranslation15 } from "react-i18next";
+
+// src/pages/products/create/edit-variant-media-form/edit-variant-media-form.tsx
+import { Fragment as Fragment4, useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo5, useState as useState7 } from "react";
+import { ThumbnailBadge as ThumbnailBadge2 } from "@medusajs/icons";
+import { Checkbox as Checkbox2, clx, CommandBar, Tooltip as Tooltip3 } from "@medusajs/ui";
+import { useTranslation as useTranslation13 } from "react-i18next";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+var EditVariantMediaForm = ({
+  variantIndex,
+  onSaveMedia,
+  onClose,
+  saveRef,
+  initialMedia = [],
+  productMedia = []
+}) => {
+  const { t } = useTranslation13();
+  const [selectedUrls, setSelectedUrls] = useState7(
+    () => new Set(initialMedia.filter((m) => m.url).map((m) => m.url))
+  );
+  const [thumbnailUrl, setThumbnailUrl] = useState7(
+    () => {
+      const thumb = initialMedia.find((m) => m.isThumbnail);
+      return thumb?.url ?? null;
+    }
+  );
+  const [checkedUrls, setCheckedUrls] = useState7({});
+  const availableMedia = useMemo5(
+    () => productMedia.filter(
+      (m) => !!m.url
+    ),
+    [productMedia]
+  );
+  const selectedImages = useMemo5(
+    () => availableMedia.filter((m) => selectedUrls.has(m.url)),
+    [availableMedia, selectedUrls]
+  );
+  const unselectedImages = useMemo5(
+    () => availableMedia.filter((m) => !selectedUrls.has(m.url)),
+    [availableMedia, selectedUrls]
+  );
+  const handleSelectImage = useCallback3((url) => {
+    setSelectedUrls((prev) => {
+      const next = new Set(prev);
+      next.add(url);
+      return next;
+    });
+  }, []);
+  const handleDeselectImage = useCallback3(
+    (url) => {
+      setSelectedUrls((prev) => {
+        const next = new Set(prev);
+        next.delete(url);
+        return next;
+      });
+      if (thumbnailUrl === url) {
+        setThumbnailUrl(null);
+      }
+      const { [url]: _, ...restChecked } = checkedUrls;
+      setCheckedUrls(restChecked);
+    },
+    [thumbnailUrl, checkedUrls]
+  );
+  const handleCheckedChange = useCallback3(
+    (url, value) => {
+      if (!value) {
+        const { [url]: _, ...rest } = checkedUrls;
+        setCheckedUrls(rest);
+        return;
+      }
+      setCheckedUrls((prev) => ({ ...prev, [url]: true }));
+    },
+    [checkedUrls]
+  );
+  const handlePromoteToThumbnail = useCallback3(() => {
+    const urls = Object.keys(checkedUrls);
+    if (urls.length !== 1) {
+      return;
+    }
+    setThumbnailUrl(urls[0]);
+    setCheckedUrls({});
+  }, [checkedUrls]);
+  const getEffectiveThumbnailUrl = useCallback3(() => {
+    if (selectedUrls.size === 0) {
+      return null;
+    }
+    if (thumbnailUrl && selectedUrls.has(thumbnailUrl)) {
+      return thumbnailUrl;
+    }
+    return [...selectedUrls][0];
+  }, [selectedUrls, thumbnailUrl]);
+  const handleSave = useCallback3(() => {
+    const effectiveThumb = getEffectiveThumbnailUrl();
+    const media = [...selectedUrls].map((url) => ({
+      url,
+      isThumbnail: url === effectiveThumb
+    }));
+    onSaveMedia?.(variantIndex, media);
+    onClose?.();
+  }, [
+    getEffectiveThumbnailUrl,
+    selectedUrls,
+    onSaveMedia,
+    variantIndex,
+    onClose
+  ]);
+  useEffect6(() => {
+    saveRef.current = handleSave;
+  }, [handleSave, saveRef]);
+  const checkedCount = Object.keys(checkedUrls).length;
+  return /* @__PURE__ */ jsxs14("div", { className: "flex size-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "flex size-full", children: [
+      /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-auto bg-ui-bg-subtle p-6", children: /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap content-start gap-6", children: selectedImages.map((img) => {
+        const effectiveThumb = getEffectiveThumbnailUrl();
+        const isThumb = img.url === effectiveThumb;
+        return /* @__PURE__ */ jsx16(
+          SelectedImageCard,
+          {
+            image: img,
+            isThumbnail: isThumb,
+            checked: !!checkedUrls[img.url],
+            onCheckedChange: (val) => handleCheckedChange(img.url, val)
+          },
+          img.url
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx16("div", { className: "w-px shrink-0 bg-ui-border-base" }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex w-[318px] shrink-0 flex-col", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsx16("p", { className: "txt-compact-small-plus text-ui-fg-base", children: t("products.media.selectImages") }),
+          /* @__PURE__ */ jsx16("p", { className: "txt-small mt-1 text-ui-fg-subtle", children: t("products.media.selectImagesHint") })
+        ] }),
+        /* @__PURE__ */ jsx16("div", { className: "h-px bg-ui-border-base" }),
+        /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-auto p-4", children: /* @__PURE__ */ jsx16("div", { className: "grid grid-cols-2 gap-4", children: unselectedImages.map((img) => /* @__PURE__ */ jsx16(
+          UnselectedImageCard,
+          {
+            image: img,
+            onSelect: () => handleSelectImage(img.url)
+          },
+          img.url
+        )) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx16(CommandBar, { open: !!checkedCount, children: /* @__PURE__ */ jsxs14(CommandBar.Bar, { children: [
+      /* @__PURE__ */ jsx16(CommandBar.Value, { children: t("general.countSelected", {
+        count: checkedCount
+      }) }),
+      /* @__PURE__ */ jsx16(CommandBar.Seperator, {}),
+      checkedCount === 1 && /* @__PURE__ */ jsxs14(Fragment4, { children: [
+        /* @__PURE__ */ jsx16(
+          CommandBar.Command,
+          {
+            action: handlePromoteToThumbnail,
+            label: t("products.media.makeThumbnail"),
+            shortcut: "t"
+          }
+        ),
+        /* @__PURE__ */ jsx16(CommandBar.Seperator, {})
+      ] }),
+      /* @__PURE__ */ jsx16(
+        CommandBar.Command,
+        {
+          action: () => {
+            Object.keys(checkedUrls).forEach(
+              (url) => handleDeselectImage(url)
+            );
+            setCheckedUrls({});
+          },
+          label: t("actions.remove"),
+          shortcut: "r"
+        }
+      )
+    ] }) })
+  ] });
+};
+var SelectedImageCard = ({
+  image,
+  isThumbnail,
+  checked,
+  onCheckedChange
+}) => {
+  const { t } = useTranslation13();
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: clx(
+        "group relative size-[156px] shrink-0 overflow-hidden rounded-lg",
+        "shadow-elevation-card-rest"
+      ),
+      children: [
+        isThumbnail && /* @__PURE__ */ jsx16("div", { className: "absolute left-2 top-2 z-[1]", children: /* @__PURE__ */ jsx16(
+          Tooltip3,
+          {
+            content: t("products.media.thumbnailTooltip"),
+            children: /* @__PURE__ */ jsx16(ThumbnailBadge2, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: clx(
+              "absolute right-2 top-2 z-[1] opacity-0 transition-opacity",
+              "group-hover:opacity-100",
+              { "opacity-100": checked }
+            ),
+            children: /* @__PURE__ */ jsx16(
+              Checkbox2,
+              {
+                checked,
+                onCheckedChange,
+                "aria-label": t("actions.select")
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "img",
+          {
+            src: image.url,
+            alt: "",
+            className: "size-full object-cover object-center"
+          }
+        )
+      ]
+    }
+  );
+};
+var UnselectedImageCard = ({
+  image,
+  onSelect
+}) => {
+  const { t } = useTranslation13();
+  return /* @__PURE__ */ jsx16(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      className: clx(
+        "aspect-square w-full overflow-hidden rounded-lg",
+        "shadow-elevation-card-rest transition-shadow",
+        "hover:shadow-elevation-card-hover",
+        "outline-none focus-visible:shadow-borders-focus"
+      ),
+      "aria-label": t("products.media.selectImages"),
+      children: /* @__PURE__ */ jsx16(
+        "img",
+        {
+          src: image.url,
+          alt: "",
+          className: "size-full object-cover object-center"
+        }
+      )
+    }
+  );
+};
+
+// src/pages/products/create/variant-media-view/components/variant-media-gallery/variant-media-gallery.tsx
+import { useCallback as useCallback4, useEffect as useEffect7, useState as useState8 } from "react";
+import {
+  ThumbnailBadge as ThumbnailBadge3,
+  TriangleLeftMini,
+  TriangleRightMini
+} from "@medusajs/icons";
+import { Button as Button5, clx as clx2, IconButton as IconButton3, Text as Text5, Tooltip as Tooltip4 } from "@medusajs/ui";
+import { useTranslation as useTranslation14 } from "react-i18next";
+
+// src/pages/products/create/variant-media-view/variant-media-view-context.tsx
+import { createContext } from "react";
+var VariantMediaViewContext = createContext(null);
+
+// src/pages/products/create/variant-media-view/components/variant-media-gallery/variant-media-gallery.tsx
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+var VariantMediaGallery = ({
+  goToEdit,
+  variantMedia = []
+}) => {
+  const [curr, setCurr] = useState8(0);
+  const { t } = useTranslation14();
+  const media = (variantMedia || []).map(
+    (m, idx) => ({
+      ...m,
+      id: m.id || `variant-${idx}-${m.url}`
+    })
+  );
+  const next = useCallback4(() => {
+    setCurr((prev2) => (prev2 + 1) % media.length);
+  }, [media.length]);
+  const prev = useCallback4(() => {
+    setCurr((prev2) => (prev2 - 1 + media.length) % media.length);
+  }, [media.length]);
+  const goTo = useCallback4(
+    (index) => {
+      if (index < 0 || index >= media.length) return;
+      setCurr(index);
+    },
+    [media.length]
+  );
+  useEffect7(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowRight") next();
+      else if (e.key === "ArrowLeft") prev();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [next, prev]);
+  const noMedia = !media.length;
+  return /* @__PURE__ */ jsx17(VariantMediaViewContext.Consumer, { children: () => /* @__PURE__ */ jsx17("div", { className: "flex size-full flex-col bg-ui-bg-subtle", children: noMedia ? /* @__PURE__ */ jsxs15("div", { className: "flex size-full flex-col items-center justify-center gap-y-4 bg-ui-bg-subtle pb-8 pt-6", children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx17(Text5, { size: "small", leading: "compact", weight: "plus", className: "text-ui-fg-subtle", children: t("products.media.emptyState.header", "No media") }),
+      /* @__PURE__ */ jsx17(Text5, { size: "small", className: "text-ui-fg-muted", children: t("products.media.emptyState.description", "No images assigned to this variant.") })
+    ] }),
+    /* @__PURE__ */ jsx17(Button5, { size: "small", variant: "secondary", onClick: goToEdit, children: t("products.media.emptyState.action", "Add images") })
+  ] }) : /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    /* @__PURE__ */ jsx17("div", { className: "relative size-full overflow-hidden bg-ui-bg-subtle", children: /* @__PURE__ */ jsx17("div", { className: "flex size-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs15("div", { className: "relative inline-block max-h-full max-w-full", children: [
+      media[curr]?.isThumbnail && /* @__PURE__ */ jsx17("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx17(Tooltip4, { content: t("products.media.thumbnailTooltip"), children: /* @__PURE__ */ jsx17(ThumbnailBadge3, {}) }) }),
+      /* @__PURE__ */ jsx17(
+        "img",
+        {
+          src: media[curr]?.url,
+          alt: "",
+          className: "object-fit max-h-[calc(100vh-200px)] w-auto rounded-xl object-contain shadow-elevation-card-rest"
+        }
+      )
+    ] }) }) }),
+    media.length > 1 && /* @__PURE__ */ jsxs15("div", { className: "flex shrink-0 items-center justify-center gap-x-2 border-t p-3", children: [
+      /* @__PURE__ */ jsx17(IconButton3, { size: "small", variant: "transparent", className: "text-ui-fg-muted", type: "button", onClick: prev, children: /* @__PURE__ */ jsx17(TriangleLeftMini, {}) }),
+      /* @__PURE__ */ jsx17("div", { className: "flex items-center gap-x-2", children: media.slice(0, 8).map((item, idx) => {
+        const isCurrentImage = item.id === media[curr]?.id;
+        const originalIndex = media.findIndex((i) => i.id === item.id);
+        return /* @__PURE__ */ jsx17(
+          "button",
+          {
+            type: "button",
+            onClick: () => goTo(originalIndex),
+            className: clx2("size-7 overflow-hidden rounded-[4px] outline-none transition-fg", {
+              "shadow-borders-focus": isCurrentImage
+            }),
+            children: /* @__PURE__ */ jsx17("img", { src: item.url, alt: "", className: "size-full object-cover" })
+          },
+          item.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx17(IconButton3, { size: "small", variant: "transparent", className: "text-ui-fg-muted", type: "button", onClick: next, children: /* @__PURE__ */ jsx17(TriangleRightMini, {}) })
+    ] })
+  ] }) }) });
+};
+
+// src/pages/products/create/variant-media-view/variant-media-view.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+var getView = (currentView) => {
+  if (currentView === "edit" /* EDIT */) return "edit" /* EDIT */;
+  return "gallery" /* GALLERY */;
+};
+var VariantMediaView = ({
+  variantIndex,
+  variantTitle,
+  onClose,
+  onSaveMedia,
+  initialMedia,
+  productMedia
+}) => {
+  const [currentView, setCurrentView] = useState9("edit" /* EDIT */);
+  const view = getView(currentView);
+  const { t } = useTranslation15();
+  const saveRef = useRef4(null);
+  const handleGoToView = (v) => () => setCurrentView(v);
+  const contextValue = {
+    goToGallery: handleGoToView("gallery" /* GALLERY */),
+    goToEdit: handleGoToView("edit" /* EDIT */),
+    onCancel: onClose,
+    onClose
+  };
+  const handleFooterSave = () => {
+    saveRef.current?.();
+  };
+  return /* @__PURE__ */ jsx18(VariantMediaViewContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs16(StackedFocusModal.Content, { children: [
+    /* @__PURE__ */ jsx18(StackedFocusModal.Header, { children: view === "edit" /* EDIT */ ? /* @__PURE__ */ jsx18(Button6, { variant: "secondary", size: "small", onClick: contextValue.goToGallery, children: t("products.media.galleryLabel", "Gallery") }) : /* @__PURE__ */ jsx18(Button6, { variant: "secondary", size: "small", onClick: contextValue.goToEdit, children: t("products.media.editLabel", "Edit") }) }),
+    /* @__PURE__ */ jsxs16(StackedFocusModal.Body, { className: "flex flex-col overflow-hidden", children: [
+      view === "gallery" /* GALLERY */ && /* @__PURE__ */ jsx18(VariantMediaGallery, { goToEdit: contextValue.goToEdit, variantMedia: initialMedia }),
+      view === "edit" /* EDIT */ && /* @__PURE__ */ jsx18(
+        EditVariantMediaForm,
+        {
+          variantIndex,
+          variantTitle,
+          onSaveMedia,
+          onClose,
+          saveRef,
+          initialMedia,
+          productMedia
+        }
+      )
+    ] }),
+    view === "edit" /* EDIT */ && /* @__PURE__ */ jsx18(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs16("div", { className: "flex justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx18(Button6, { variant: "secondary", size: "small", onClick: onClose, children: t("actions.cancel") }),
+      /* @__PURE__ */ jsx18(Button6, { size: "small", onClick: handleFooterSave, children: t("actions.save") })
+    ] }) })
+  ] }) });
+};
+
+// src/pages/products/create/product-create-page.tsx
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+var ProductCreateFormWithModal = ({
+  defaultChannel,
+  store
+}) => {
+  const { setIsOpen } = useStackedModal();
+  const [selectedVariantIndex, setSelectedVariantIndex] = useState10(null);
+  const [selectedVariantTitle, setSelectedVariantTitle] = useState10(void 0);
+  const [selectedVariantMedia, setSelectedVariantMedia] = useState10(void 0);
+  const [productMedia, setProductMedia] = useState10([]);
+  const saveVariantMediaRef = useRef5(null);
+  const handleOpenMediaModal = useCallback5(
+    (variantIndex, variantTitle, initialMedia, currentProductMedia) => {
+      setSelectedVariantIndex(variantIndex);
+      setSelectedVariantTitle(variantTitle);
+      setSelectedVariantMedia(initialMedia);
+      setProductMedia(currentProductMedia || []);
+      setIsOpen("variant-media-modal", true);
+    },
+    []
+  );
+  const handleCloseModal = () => {
+    setIsOpen("variant-media-modal", false);
+    setSelectedVariantIndex(null);
+    setSelectedVariantTitle(void 0);
+    setSelectedVariantMedia(void 0);
+    setProductMedia([]);
+  };
+  const handleSaveMedia = useCallback5((variantIndex, media) => {
+    if (saveVariantMediaRef.current) {
+      saveVariantMediaRef.current(variantIndex, media);
+    }
+    handleCloseModal();
+  }, []);
+  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+    /* @__PURE__ */ jsx19(
+      ProductCreateForm,
+      {
+        defaultChannel,
+        store,
+        onOpenMediaModal: handleOpenMediaModal,
+        onSaveVariantMediaRef: saveVariantMediaRef
+      }
+    ),
+    /* @__PURE__ */ jsx19(
+      StackedFocusModal,
+      {
+        id: "variant-media-modal",
+        onOpenChangeCallback: (open) => {
+          if (!open) {
+            handleCloseModal();
+          }
+        },
+        children: selectedVariantIndex !== null && /* @__PURE__ */ jsx19(
+          VariantMediaView,
+          {
+            variantIndex: selectedVariantIndex,
+            variantTitle: selectedVariantTitle,
+            onClose: handleCloseModal,
+            onSaveMedia: handleSaveMedia,
+            initialMedia: selectedVariantMedia,
+            productMedia
+          }
+        )
+      }
+    )
+  ] });
+};
+var Root4 = ({ children }) => {
+  const { t } = useTranslation16();
+  const { store, isPending: isStorePending } = useStore();
+  const { sales_channels, isPending: isSalesChannelPending } = useSalesChannels();
+  const ready = !!store && !isStorePending && !!sales_channels && !isSalesChannelPending;
+  const defaultChannel = sales_channels?.[0];
+  return /* @__PURE__ */ jsxs17(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx19(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx19("span", { className: "sr-only", children: t("products.create.title") }) }),
+    /* @__PURE__ */ jsx19(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx19("span", { className: "sr-only", children: t("products.create.description") }) }),
+    ready && (Children4.count(children) > 0 ? children : /* @__PURE__ */ jsx19(ProductCreateFormWithModal, { defaultChannel, store }))
+  ] });
+};
+var ProductCreatePage = Object.assign(Root4, {
+  DetailsForm: ProductCreateDetailsForm,
+  OrganizeForm: ProductCreateOrganizeForm,
+  VariantsForm: ProductCreateVariantsForm,
+  InventoryKitForm: ProductCreateInventoryKitForm,
+  Form: ProductCreateForm,
+  Tab: TabbedForm.Tab
+});
+
+export {
+  ProductCreatePage
+};