@workharu/dashboard 1.0.1

package/dist/product-create-PO5KOWIQ.mjs

@@ -0,0 +1,2193 @@
+import {
+  ChipGroup
+} from "./chunk-X5VECN6S.mjs";
+import {
+  HandleInput
+} from "./chunk-7OYLCEKK.mjs";
+import {
+  ChipInput,
+  SortableList
+} from "./chunk-XD72PXRS.mjs";
+import {
+  DataGrid,
+  createDataGridHelper,
+  createDataGridPriceColumns
+} from "./chunk-FGWPAC3I.mjs";
+import {
+  SwitchBox
+} from "./chunk-PRLQLEEQ.mjs";
+import {
+  useSalesChannelTableColumns,
+  useSalesChannelTableEmptyState,
+  useSalesChannelTableFilters,
+  useSalesChannelTableQuery
+} from "./chunk-AS4IIBUS.mjs";
+import "./chunk-4T4MNG4Z.mjs";
+import {
+  CategoryCombobox
+} from "./chunk-GYYYXLFU.mjs";
+import {
+  useComboboxData
+} from "./chunk-3TZOFKX2.mjs";
+import {
+  Combobox
+} from "./chunk-AFCZP34D.mjs";
+import {
+  PRODUCT_CREATE_FORM_DEFAULTS,
+  ProductCreateSchema,
+  UploadMediaFormItem,
+  decorateVariantsWithDefaultValues,
+  formatFileSize,
+  normalizeProductFormValues
+} from "./chunk-RWGJ5RIL.mjs";
+import "./chunk-P2IBGUII.mjs";
+import "./chunk-6GU6IDUA.mjs";
+import "./chunk-IUCDCPJU.mjs";
+import {
+  KeyboundForm
+} from "./chunk-6HTZNHPT.mjs";
+import {
+  FormExtensionZone,
+  useExtendableForm
+} from "./chunk-VA3DYGSG.mjs";
+import "./chunk-ONB3JEHR.mjs";
+import "./chunk-JAW6ZD7F.mjs";
+import "./chunk-3TEQI7Q2.mjs";
+import "./chunk-4GQOUCX6.mjs";
+import "./chunk-K5OJP3ZJ.mjs";
+import "./chunk-D3YQN7HV.mjs";
+import "./chunk-SGUYOGWH.mjs";
+import "./chunk-BPIG7PI6.mjs";
+import "./chunk-6UAK5Q3S.mjs";
+import {
+  DataTable
+} from "./chunk-PBD6N7EO.mjs";
+import "./chunk-MNXC6Q4F.mjs";
+import "./chunk-LPEUYMRK.mjs";
+import "./chunk-K37W6IGC.mjs";
+import "./chunk-PJU3RODH.mjs";
+import {
+  useExtension
+} from "./chunk-5SZFF255.mjs";
+import "./chunk-ZRP3G32N.mjs";
+import "./chunk-QR6FHSFY.mjs";
+import "./chunk-UBW4T4MS.mjs";
+import {
+  ActionMenu
+} from "./chunk-OZPB6JBL.mjs";
+import "./chunk-OC7BQLYI.mjs";
+import {
+  useDocumentDirection
+} from "./chunk-S4DMV3ZT.mjs";
+import "./chunk-V2OKIIO7.mjs";
+import "./chunk-C76H5USB.mjs";
+import "./chunk-3BQAAPDR.mjs";
+import "./chunk-QJ63TWAK.mjs";
+import {
+  StackedFocusModal
+} from "./chunk-ZUBJF5QL.mjs";
+import {
+  RouteFocusModal,
+  useRouteModal,
+  useStackedModal
+} from "./chunk-H7AAHR2V.mjs";
+import {
+  Form
+} from "./chunk-OBQI23QM.mjs";
+import {
+  productTagsQueryKeys
+} from "./chunk-4XKRB45V.mjs";
+import "./chunk-EKTC7HGF.mjs";
+import "./chunk-HIX2NSSN.mjs";
+import "./chunk-SDOIEL4H.mjs";
+import "./chunk-2LVQXUFY.mjs";
+import "./chunk-EYDZJ522.mjs";
+import "./chunk-ISGDOD5J.mjs";
+import {
+  productTypesQueryKeys
+} from "./chunk-QG545K2O.mjs";
+import "./chunk-QIUJGXDT.mjs";
+import "./chunk-ZB3WPQQA.mjs";
+import "./chunk-PTP3K7TB.mjs";
+import "./chunk-DEOCXBV2.mjs";
+import "./chunk-2V5DOTI3.mjs";
+import "./chunk-EGZR6JFL.mjs";
+import "./chunk-4BG52NTE.mjs";
+import "./chunk-6OFSUHM5.mjs";
+import {
+  collectionsQueryKeys
+} from "./chunk-XQMUOXFW.mjs";
+import "./chunk-3C2RPYDJ.mjs";
+import "./chunk-4SIZ37QP.mjs";
+import "./chunk-ZVR323XY.mjs";
+import "./chunk-IWY35GD5.mjs";
+import "./chunk-BGQF2VTH.mjs";
+import "./chunk-2EQK5L52.mjs";
+import {
+  useRegions
+} from "./chunk-EMDIIWVL.mjs";
+import {
+  useStore
+} from "./chunk-YDJ774GR.mjs";
+import {
+  usePricePreferences
+} from "./chunk-SKQPG6BC.mjs";
+import {
+  useSalesChannel,
+  useSalesChannels
+} from "./chunk-LYZ7OUA3.mjs";
+import "./chunk-556FUJDY.mjs";
+import {
+  shippingProfileQueryKeys
+} from "./chunk-D3TDNKSZ.mjs";
+import {
+  productOptionsQueryKeys,
+  useCreateProduct
+} from "./chunk-TPANFD43.mjs";
+import "./chunk-7AXHHXCX.mjs";
+import "./chunk-SEMVMECK.mjs";
+import {
+  sdk
+} from "./chunk-NFEK63OE.mjs";
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/routes/products/product-create/product-create.tsx
+import { useTranslation as useTranslation10 } from "react-i18next";
+
+// src/routes/products/product-create/components/product-create-form/product-create-form.tsx
+import { Button as Button4, ProgressTabs, toast } from "@medusajs/ui";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
+import { useWatch as useWatch4 } from "react-hook-form";
+import { useTranslation as useTranslation9 } from "react-i18next";
+
+// src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx
+import { Divider, Heading as Heading2 } from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+
+// src/routes/products/product-create/components/product-create-details-form/components/product-create-details-general-section/product-create-general-section.tsx
+import { Input, Textarea } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductCreateGeneralSection = ({
+  form
+}) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { id: "general", className: "flex flex-col gap-y-6", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: [
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "title",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { children: t("products.fields.title.label") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...field,
+                  placeholder: t("products.fields.title.placeholder")
+                }
+              ) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "subtitle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("products.fields.subtitle.label") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...field,
+                  placeholder: t("products.fields.subtitle.placeholder")
+                }
+              ) })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(
+                Form.Label,
+                {
+                  tooltip: t("products.fields.handle.tooltip"),
+                  optional: true,
+                  children: t("fields.handle")
+                }
+              ),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                HandleInput,
+                {
+                  ...field,
+                  placeholder: t("products.fields.handle.placeholder")
+                }
+              ) })
+            ] });
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Form.Field,
+      {
+        control: form.control,
+        name: "description",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs(Form.Item, { children: [
+            /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("products.fields.description.label") }),
+            /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                ...field,
+                placeholder: t("products.fields.description.placeholder")
+              }
+            ) })
+          ] });
+        }
+      }
+    )
+  ] });
+};
+
+// src/routes/products/product-create/components/product-create-details-form/components/product-create-details-media-section/product-create-details-media-section.tsx
+import {
+  defaultDropAnimationSideEffects,
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  DotsSix,
+  StackPerspective,
+  ThumbnailBadge,
+  Trash,
+  XMark
+} from "@medusajs/icons";
+import { IconButton, Text } from "@medusajs/ui";
+import { useState } from "react";
+import { useFieldArray } from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+var ProductCreateMediaSection = ({
+  form
+}) => {
+  const { fields, append, remove } = useFieldArray({
+    name: "media",
+    control: form.control,
+    keyName: "field_id"
+  });
+  const [activeId, setActiveId] = useState(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__ */ jsxs2("div", { id: "media", className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsx2(UploadMediaFormItem, { form, append, showHint: false }),
+    /* @__PURE__ */ jsxs2(
+      DndContext,
+      {
+        sensors,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        onDragCancel: handleDragCancel,
+        children: [
+          /* @__PURE__ */ jsx2(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx2(
+            MediaGridItemOverlay,
+            {
+              field: fields.find((m) => m.field_id === activeId)
+            }
+          ) : null }),
+          /* @__PURE__ */ jsx2("ul", { className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsx2(SortableContext, { items: fields.map((field) => field.field_id), children: fields.map((field, index) => {
+            const { onDelete, onMakeThumbnail } = getItemHandlers(index);
+            return /* @__PURE__ */ jsx2(
+              MediaItem,
+              {
+                field,
+                onDelete,
+                onMakeThumbnail
+              },
+              field.field_id
+            );
+          }) }) })
+        ]
+      }
+    )
+  ] });
+};
+var MediaItem = ({ field, onDelete, onMakeThumbnail }) => {
+  const { t } = useTranslation2();
+  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__ */ jsxs2(
+    "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__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              variant: "transparent",
+              type: "button",
+              size: "small",
+              ...attributes,
+              ...listeners,
+              ref: setActivatorNodeRef,
+              className: "cursor-grab touch-none active:cursor-grabbing",
+              children: /* @__PURE__ */ jsx2(DotsSix, { className: "text-ui-fg-muted" })
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx2(ThumbnailPreview, { url: field.url }) }),
+            /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: field.file.name }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-1", children: [
+                field.isThumbnail && /* @__PURE__ */ jsx2(ThumbnailBadge, {}),
+                /* @__PURE__ */ jsx2(
+                  Text,
+                  {
+                    size: "xsmall",
+                    leading: "compact",
+                    className: "text-ui-fg-subtle",
+                    children: formatFileSize(field.file.size)
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-1", children: [
+          /* @__PURE__ */ jsx2(
+            ActionMenu,
+            {
+              groups: [
+                {
+                  actions: [
+                    {
+                      label: t("products.media.makeThumbnail"),
+                      icon: /* @__PURE__ */ jsx2(StackPerspective, {}),
+                      onClick: onMakeThumbnail
+                    }
+                  ]
+                },
+                {
+                  actions: [
+                    {
+                      icon: /* @__PURE__ */ jsx2(Trash, {}),
+                      label: t("actions.delete"),
+                      onClick: onDelete
+                    }
+                  ]
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              type: "button",
+              size: "small",
+              variant: "transparent",
+              onClick: onDelete,
+              children: /* @__PURE__ */ jsx2(XMark, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var MediaGridItemOverlay = ({ field }) => {
+  return /* @__PURE__ */ jsxs2("li", { className: "bg-ui-bg-component shadow-elevation-card-rest flex items-center justify-between rounded-lg px-3 py-2", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          variant: "transparent",
+          size: "small",
+          className: "cursor-grab touch-none active:cursor-grabbing",
+          children: /* @__PURE__ */ jsx2(DotsSix, { className: "text-ui-fg-muted" })
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx2("div", { className: "bg-ui-bg-base h-10 w-[30px] overflow-hidden rounded-md", children: /* @__PURE__ */ jsx2(ThumbnailPreview, { url: field.url }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx2(Text, { size: "small", leading: "compact", children: field.file?.name }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-1", children: [
+            field.isThumbnail && /* @__PURE__ */ jsx2(ThumbnailBadge, {}),
+            /* @__PURE__ */ jsx2(
+              Text,
+              {
+                size: "xsmall",
+                leading: "compact",
+                className: "text-ui-fg-subtle",
+                children: formatFileSize(field.file?.size ?? 0)
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-1", children: [
+      /* @__PURE__ */ jsx2(ActionMenu, { groups: [] }),
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          type: "button",
+          size: "small",
+          variant: "transparent",
+          onClick: () => {
+          },
+          children: /* @__PURE__ */ jsx2(XMark, {})
+        }
+      )
+    ] })
+  ] });
+};
+var ThumbnailPreview = ({ url }) => {
+  if (!url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2("img", { src: url, alt: "", className: "size-full object-cover object-center" });
+};
+
+// src/routes/products/product-create/components/product-create-details-form/components/product-create-details-variant-section/product-create-details-variant-section.tsx
+import {
+  Alert,
+  Checkbox,
+  clx,
+  Heading,
+  Hint,
+  InlineTip,
+  Label,
+  Text as Text2
+} from "@medusajs/ui";
+import {
+  useFieldArray as useFieldArray2,
+  useWatch
+} from "react-hook-form";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { useEffect, useMemo, useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var getPermutations = (data) => {
+  if (data.length === 0) {
+    return [];
+  }
+  if (data.length === 1) {
+    return data[0].values.map((value) => ({ [data[0].title]: value }));
+  }
+  const toProcess = data[0];
+  const rest = data.slice(1);
+  return toProcess.values.flatMap((value) => {
+    return getPermutations(rest).map((permutation) => {
+      return {
+        [toProcess.title]: value,
+        ...permutation
+      };
+    });
+  });
+};
+var getVariantName = (options) => {
+  return Object.values(options).join(" / ");
+};
+var ProductCreateVariantsSection = ({
+  form
+}) => {
+  const { t } = useTranslation3();
+  const variants = useFieldArray2({
+    control: form.control,
+    name: "variants"
+  });
+  const watchedAreVariantsEnabled = useWatch({
+    control: form.control,
+    name: "enable_variants",
+    defaultValue: false
+  });
+  const watchedOptions = useWatch({
+    control: form.control,
+    name: "options",
+    defaultValue: []
+  });
+  const watchedVariants = useWatch({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const showInvalidOptionsMessage = !!form.formState.errors.options?.length;
+  const showInvalidVariantsMessage = form.formState.errors.variants?.root?.message === "invalid_length";
+  const selectedExistingOptionIds = useMemo(
+    () => watchedOptions.map((opt) => opt.id).filter((id) => !!id),
+    [watchedOptions]
+  );
+  const productOptionsCombobox = useComboboxData({
+    queryKey: productOptionsQueryKeys.list({ is_exclusive: false }),
+    queryFn: (params) => sdk.admin.productOption.list({
+      ...params,
+      is_exclusive: false,
+      fields: "id,title,values.id,values.value,values.rank"
+    }),
+    getOptions: (data) => data.product_options.map((option) => ({
+      label: option.title,
+      value: option.id,
+      option
+    }))
+  });
+  const [optionDetailsById, setOptionDetailsById] = useState2(
+    () => /* @__PURE__ */ new Map()
+  );
+  useEffect(() => {
+    setOptionDetailsById((prev) => {
+      let next;
+      for (const choice of productOptionsCombobox.options) {
+        if (choice.option && prev.get(choice.value) !== choice.option) {
+          next ?? (next = new Map(prev));
+          next.set(choice.value, choice.option);
+        }
+      }
+      return next ?? prev;
+    });
+  }, [productOptionsCombobox.options]);
+  const knownOptionIds = useMemo(() => {
+    const ids = new Set(selectedExistingOptionIds);
+    productOptionsCombobox.options.forEach((option) => ids.add(option.value));
+    return ids;
+  }, [selectedExistingOptionIds, productOptionsCombobox.options]);
+  const productOptionChoices = useMemo(() => {
+    const merged = /* @__PURE__ */ new Map();
+    productOptionsCombobox.options.forEach(
+      (option) => merged.set(option.value, option)
+    );
+    watchedOptions.forEach((opt) => {
+      const value = opt.id || opt.title;
+      if (value && !merged.has(value)) {
+        merged.set(value, { value, label: opt.title || value });
+      }
+    });
+    return [...merged.values()];
+  }, [productOptionsCombobox.options, watchedOptions]);
+  const selectedOptionValues = useMemo(() => {
+    return watchedOptions.map((opt) => opt.id || opt.title);
+  }, [watchedOptions]);
+  const handleProductOptionSelect = (optionValues) => {
+    const existingOptionIds = optionValues.filter(
+      (val) => knownOptionIds.has(val)
+    );
+    const newOptionTitles = optionValues.filter(
+      (val) => !knownOptionIds.has(val)
+    );
+    const allSelectedOptions = [];
+    const watchedOptions2 = form.getValues("options");
+    existingOptionIds.forEach((id) => {
+      const details = optionDetailsById.get(id);
+      if (details) {
+        allSelectedOptions.push(details);
+      }
+    });
+    watchedOptions2.forEach((opt) => {
+      if (!opt.id && opt.title && newOptionTitles.includes(opt.title)) {
+        allSelectedOptions.push({
+          title: opt.title,
+          values: opt.values || []
+        });
+      }
+    });
+    const newSelectedValues = {};
+    allSelectedOptions.forEach((option) => {
+      if ("id" in option && option.id) {
+        const currentOption = watchedOptions2.find((opt) => opt.id === option.id);
+        if (currentOption?.value_ids) {
+          newSelectedValues[option.id] = currentOption.value_ids;
+        } else {
+          newSelectedValues[option.id] = option.values?.map((v) => v.id) || [];
+        }
+      }
+    });
+    updateFormWithSelectedValues(allSelectedOptions, newSelectedValues);
+  };
+  const generateAndSetVariants = (options) => {
+    const permutations = getPermutations(
+      options.filter(({ values }) => values && values.length > 0)
+    );
+    const newVariants = permutations.map((permutation, index) => ({
+      title: getVariantName(permutation),
+      options: permutation,
+      should_create: true,
+      variant_rank: index,
+      inventory: [{ inventory_item_id: "", required_quantity: "" }]
+    }));
+    form.setValue("variants", newVariants);
+  };
+  const handleValueChange = (optionId, valueIds) => {
+    if (valueIds.length === 0) {
+      return;
+    }
+    const currentOption = watchedOptions.find((opt) => opt.id === optionId);
+    if (!currentOption) {
+      return;
+    }
+    const productOption = optionDetailsById.get(optionId);
+    const existingValueIds = new Set(
+      productOption?.values?.map((v) => v.id) || []
+    );
+    const validValueIds = [];
+    const newValueNames = [];
+    valueIds.forEach((id) => {
+      if (existingValueIds.has(id)) {
+        validValueIds.push(id);
+      } else {
+        newValueNames.push(id);
+      }
+    });
+    const updatedOptions = watchedOptions.map((opt) => {
+      if (opt.id === optionId) {
+        const selectedExistingValues = productOption?.values?.filter((v) => validValueIds.includes(v.id)).map((v) => v.value) || [];
+        return {
+          ...opt,
+          value_ids: valueIds,
+          values: [...selectedExistingValues, ...newValueNames]
+        };
+      }
+      return opt;
+    });
+    form.setValue("options", updatedOptions);
+    generateAndSetVariants(updatedOptions);
+  };
+  const handleNewOptionValueChange = (optionTitle, valueNames) => {
+    const updatedOptions = watchedOptions.map((opt) => {
+      if (!opt.id && opt.title === optionTitle) {
+        return {
+          ...opt,
+          values: valueNames
+        };
+      }
+      return opt;
+    });
+    form.setValue("options", updatedOptions);
+    generateAndSetVariants(updatedOptions);
+  };
+  const updateFormWithSelectedValues = (selectedProductOptions, valueSelections) => {
+    const newOptions = selectedProductOptions.map(
+      (option) => {
+        if ("id" in option && option.id !== void 0) {
+          const existingOption = option;
+          const selectedValueIds = valueSelections[existingOption.id] || [];
+          const allValues = option.values || [];
+          const selectedValues = allValues.filter((v) => selectedValueIds.includes(v.id)).sort((a, b) => {
+            const rankA = a.rank ?? Number.MAX_VALUE;
+            const rankB = b.rank ?? Number.MAX_VALUE;
+            return rankA - rankB;
+          }).map((v) => v.value);
+          return {
+            id: existingOption.id,
+            title: existingOption.title,
+            values: selectedValues,
+            value_ids: selectedValueIds.length > 0 ? selectedValueIds : void 0
+          };
+        } else {
+          const newOption = option;
+          return {
+            title: newOption.title,
+            values: newOption.values
+          };
+        }
+      }
+    );
+    form.setValue("options", newOptions);
+    generateAndSetVariants(newOptions);
+  };
+  const handleRankChange = (items) => {
+    const update = items.map((item, index) => {
+      const variant = watchedVariants.find((v) => v.title === item.title);
+      return {
+        id: item.id,
+        ...variant || item,
+        variant_rank: index
+      };
+    });
+    variants.replace(update);
+  };
+  const getCheckboxState = (variants2) => {
+    if (variants2.every((variant) => variant.should_create)) {
+      return true;
+    }
+    if (variants2.some((variant) => variant.should_create)) {
+      return "indeterminate";
+    }
+    return false;
+  };
+  const onCheckboxChange = (value) => {
+    switch (value) {
+      case true: {
+        const update = watchedVariants.map((variant) => {
+          return {
+            ...variant,
+            should_create: true
+          };
+        });
+        form.setValue("variants", update);
+        break;
+      }
+      case false: {
+        const update = watchedVariants.map((variant) => {
+          return {
+            ...variant,
+            should_create: false
+          };
+        });
+        form.setValue("variants", decorateVariantsWithDefaultValues(update));
+        break;
+      }
+      case "indeterminate":
+        break;
+    }
+  };
+  const createDefaultOptionAndVariant = () => {
+    form.setValue("options", [
+      {
+        title: "Default option",
+        values: ["Default option value"]
+      }
+    ]);
+    form.setValue(
+      "variants",
+      decorateVariantsWithDefaultValues([
+        {
+          title: "Default variant",
+          should_create: true,
+          variant_rank: 0,
+          options: {
+            "Default option": "Default option value"
+          },
+          inventory: [{ inventory_item_id: "", required_quantity: "" }],
+          is_default: true
+        }
+      ])
+    );
+  };
+  return /* @__PURE__ */ jsxs3("div", { id: "variants", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsx3(Heading, { level: "h2", children: t("products.create.variants.header") }),
+      /* @__PURE__ */ jsx3(
+        SwitchBox,
+        {
+          control: form.control,
+          name: "enable_variants",
+          label: t("products.create.variants.subHeadingTitle"),
+          description: t("products.create.variants.subHeadingDescription"),
+          onCheckedChange: (checked) => {
+            if (checked) {
+              form.setValue("options", [
+                {
+                  title: "",
+                  values: []
+                }
+              ]);
+              form.setValue("variants", []);
+            } else {
+              createDefaultOptionAndVariant();
+            }
+          }
+        }
+      )
+    ] }),
+    watchedAreVariantsEnabled && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("products.create.variants.productOptions.label") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.productOptions.hint") })
+        ] }),
+        showInvalidOptionsMessage && /* @__PURE__ */ jsx3(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.options") }),
+        /* @__PURE__ */ jsx3(
+          Combobox,
+          {
+            value: selectedOptionValues,
+            onChange: (value) => handleProductOptionSelect(value),
+            options: productOptionChoices,
+            searchValue: productOptionsCombobox.searchValue,
+            onSearchValueChange: productOptionsCombobox.onSearchValueChange,
+            fetchNextPage: productOptionsCombobox.fetchNextPage,
+            isFetchingNextPage: productOptionsCombobox.isFetchingNextPage,
+            shouldAlwaysShowCreateOption: true,
+            onCreateOption: async (options) => {
+              const optionTitle = options[options.length - 1]?.trim();
+              if (!optionTitle) {
+                return;
+              }
+              const allSelectedOptions = [];
+              const valueSelections = {};
+              watchedOptions.forEach((opt) => {
+                if (opt.id) {
+                  const productOption = optionDetailsById.get(opt.id);
+                  if (productOption) {
+                    allSelectedOptions.push(productOption);
+                    if (opt.value_ids) {
+                      valueSelections[opt.id] = opt.value_ids;
+                    }
+                  }
+                } else {
+                  allSelectedOptions.push({
+                    title: opt.title,
+                    values: opt.values || []
+                  });
+                }
+              });
+              const newOption = {
+                title: optionTitle,
+                is_exclusive: true,
+                values: []
+              };
+              allSelectedOptions.push(newOption);
+              updateFormWithSelectedValues(
+                allSelectedOptions,
+                valueSelections
+              );
+            },
+            placeholder: t("products.fields.options.optionTitlePlaceholder"),
+            disabled: productOptionsCombobox.isLoading,
+            displayMode: "chips"
+          }
+        )
+      ] }),
+      watchedOptions.length > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-4", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("fields.values") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.selectValuesHint") })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "flex flex-col gap-y-3", children: watchedOptions.map((opt, index) => {
+          if (opt.id) {
+            const productOption = optionDetailsById.get(opt.id);
+            const existingValues = productOption?.values || [];
+            const customValueNames = opt.values?.filter(
+              (v) => !existingValues.some((ev) => ev.value === v)
+            ) || [];
+            const existingValueOptions = [...existingValues].sort((a, b) => {
+              const rankA = a.rank ?? Number.MAX_VALUE;
+              const rankB = b.rank ?? Number.MAX_VALUE;
+              return rankA - rankB;
+            }).map((v) => ({
+              value: v.id,
+              label: v.value
+            }));
+            const customValueOptions = customValueNames.map((v) => ({
+              value: v,
+              label: v
+            }));
+            const valueOptions = [
+              ...existingValueOptions,
+              ...customValueOptions
+            ];
+            return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx3(Label, { size: "small", weight: "plus", children: opt.title }),
+              /* @__PURE__ */ jsx3(
+                Combobox,
+                {
+                  value: opt.value_ids ?? [],
+                  onChange: (value) => handleValueChange(opt.id, value),
+                  options: valueOptions,
+                  placeholder: t(
+                    "products.fields.options.variantionsPlaceholder"
+                  ),
+                  displayMode: "chips"
+                }
+              )
+            ] }, opt.id);
+          } else {
+            return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx3(Label, { size: "small", weight: "plus", children: opt.title }),
+              /* @__PURE__ */ jsx3(
+                ChipInput,
+                {
+                  value: opt.values ?? [],
+                  onChange: (value) => handleNewOptionValueChange(opt.title, value),
+                  placeholder: t(
+                    "products.fields.options.variantionsPlaceholder"
+                  )
+                }
+              )
+            ] }, index);
+          }
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-1 gap-x-4 gap-y-8", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-y-6", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx3(Label, { weight: "plus", children: t("products.create.variants.productVariants.label") }),
+          /* @__PURE__ */ jsx3(Hint, { children: t("products.create.variants.productVariants.hint") })
+        ] }),
+        !showInvalidOptionsMessage && showInvalidVariantsMessage && /* @__PURE__ */ jsx3(Alert, { dismissible: true, variant: "error", children: t("products.create.errors.variants") }),
+        variants.fields.length > 0 ? /* @__PURE__ */ jsxs3("div", { className: "overflow-hidden rounded-xl border", children: [
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: "bg-ui-bg-component text-ui-fg-subtle grid items-center gap-3 border-b px-6 py-2.5",
+              style: {
+                gridTemplateColumns: `20px 28px repeat(${watchedOptions.length}, 1fr)`
+              },
+              children: [
+                /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(
+                  Checkbox,
+                  {
+                    className: "relative",
+                    checked: getCheckboxState(watchedVariants),
+                    onCheckedChange: onCheckboxChange
+                  }
+                ) }),
+                /* @__PURE__ */ jsx3("div", {}),
+                watchedOptions.map((option, index) => /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", weight: "plus", children: option.title }) }, index))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            SortableList,
+            {
+              items: variants.fields,
+              onChange: handleRankChange,
+              renderItem: (item, index) => {
+                return /* @__PURE__ */ jsx3(
+                  SortableList.Item,
+                  {
+                    id: item.id,
+                    className: clx("bg-ui-bg-base border-b", {
+                      "border-b-0": index === variants.fields.length - 1
+                    }),
+                    children: /* @__PURE__ */ jsxs3(
+                      "div",
+                      {
+                        className: "text-ui-fg-subtle grid w-full items-center gap-3 px-6 py-2.5",
+                        style: {
+                          gridTemplateColumns: `20px 28px repeat(${watchedOptions.length}, 1fr)`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            Form.Field,
+                            {
+                              control: form.control,
+                              name: `variants.${index}.should_create`,
+                              render: ({
+                                field: { value, onChange, ...field }
+                              }) => {
+                                return /* @__PURE__ */ jsx3(Form.Item, { children: /* @__PURE__ */ jsx3(Form.Control, { children: /* @__PURE__ */ jsx3(
+                                  Checkbox,
+                                  {
+                                    className: "relative",
+                                    ...field,
+                                    checked: value,
+                                    onCheckedChange: onChange
+                                  }
+                                ) }) });
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx3(SortableList.DragHandle, {}),
+                          Object.values(item.options).map((value, index2) => /* @__PURE__ */ jsx3(Text2, { size: "small", leading: "compact", children: value }, index2))
+                        ]
+                      }
+                    )
+                  }
+                );
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx3(Alert, { children: t("products.create.variants.productVariants.alert") }),
+        variants.fields.length > 0 && /* @__PURE__ */ jsx3(InlineTip, { label: t("general.tip"), children: t("products.create.variants.productVariants.tip") })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/routes/products/product-create/components/product-create-details-form/product-create-details-form.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ProductCreateDetailsForm = ({ form }) => {
+  const { getFormFields } = useExtension();
+  const fields = getFormFields("product", "create", "general");
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx4(Header, {}),
+    /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-6", children: [
+      /* @__PURE__ */ jsx4(ProductCreateGeneralSection, { form }),
+      /* @__PURE__ */ jsx4(FormExtensionZone, { fields, form }),
+      /* @__PURE__ */ jsx4(ProductCreateMediaSection, { form })
+    ] }),
+    /* @__PURE__ */ jsx4(Divider, {}),
+    /* @__PURE__ */ jsx4(ProductCreateVariantsSection, { form })
+  ] }) });
+};
+var Header = () => {
+  const { t } = useTranslation4();
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col", children: /* @__PURE__ */ jsx4(Heading2, { children: t("products.create.header") }) });
+};
+
+// src/routes/products/product-create/components/product-create-inventory-kit-form/components/product-create-inventory-kit-section/product-create-inventory-kit-section.tsx
+import { Button, Heading as Heading3, IconButton as IconButton2, Input as Input2, Label as Label2 } from "@medusajs/ui";
+import { useFieldArray as useFieldArray3, useWatch as useWatch2 } from "react-hook-form";
+import { XMarkMini } from "@medusajs/icons";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function InventoryItemRow({
+  form,
+  variantIndex,
+  inventoryIndex,
+  inventoryItem,
+  isItemOptionDisabled,
+  onRemove
+}) {
+  const { t } = useTranslation5();
+  const selectedInventoryItemId = useWatch2({
+    control: form.control,
+    name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`
+  });
+  const items = useComboboxData({
+    queryKey: ["inventory_items"],
+    defaultValueKey: "id",
+    selectedValue: selectedInventoryItemId,
+    queryFn: (params) => sdk.admin.inventoryItem.list(params),
+    getOptions: (data) => data.inventory_items.map((item) => ({
+      label: `${item.title} ${item.sku ? `(${item.sku})` : ""}`,
+      value: item.id
+    }))
+  });
+  return /* @__PURE__ */ jsxs5(
+    "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__ */ jsxs5("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx5(
+            Label2,
+            {
+              size: "xsmall",
+              weight: "plus",
+              className: "text-ui-fg-subtle",
+              htmlFor: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
+              children: t("fields.item")
+            }
+          ) }),
+          /* @__PURE__ */ jsx5(
+            Form.Field,
+            {
+              control: form.control,
+              name: `variants.${variantIndex}.inventory.${inventoryIndex}.inventory_item_id`,
+              render: ({ field }) => {
+                return /* @__PURE__ */ jsx5(Form.Item, { children: /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
+                  Combobox,
+                  {
+                    ...field,
+                    options: items.options.map((o) => ({
+                      ...o,
+                      disabled: isItemOptionDisabled(o, inventoryIndex)
+                    })),
+                    searchValue: items.searchValue,
+                    onBlur: () => items.onSearchValueChange(""),
+                    onSearchValueChange: items.onSearchValueChange,
+                    fetchNextPage: items.fetchNextPage,
+                    className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+                    placeholder: t("products.create.inventory.itemPlaceholder")
+                  }
+                ) }) });
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx5("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx5(
+            Label2,
+            {
+              size: "xsmall",
+              weight: "plus",
+              className: "text-ui-fg-subtle",
+              htmlFor: `variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`,
+              children: t("fields.quantity")
+            }
+          ) }),
+          /* @__PURE__ */ jsx5(
+            Form.Field,
+            {
+              control: form.control,
+              name: `variants.${variantIndex}.inventory.${inventoryIndex}.required_quantity`,
+              render: ({ field: { onChange, value, ...field } }) => {
+                return /* @__PURE__ */ jsxs5(Form.Item, { children: [
+                  /* @__PURE__ */ jsx5(Form.Control, { children: /* @__PURE__ */ jsx5(
+                    Input2,
+                    {
+                      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__ */ jsx5(Form.ErrorMessage, {})
+                ] });
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5(
+          IconButton2,
+          {
+            type: "button",
+            size: "small",
+            variant: "transparent",
+            className: "text-ui-fg-muted",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx5(XMarkMini, {})
+          }
+        )
+      ]
+    },
+    inventoryItem.id
+  );
+}
+function VariantSection({ form, variant, index }) {
+  const { t } = useTranslation5();
+  const inventory = useFieldArray3({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const inventoryFormData = useWatch2({
+    control: form.control,
+    name: `variants.${index}.inventory`
+  });
+  const isItemOptionDisabled = (option, inventoryIndex) => {
+    return !!inventoryFormData?.some(
+      (i, index2) => index2 != inventoryIndex && i.inventory_item_id === option.value
+    );
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "grid gap-y-4", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-start justify-between gap-x-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx5(Form.Label, { children: variant.title }),
+        /* @__PURE__ */ jsx5(Form.Hint, { children: t("products.create.inventory.label") })
+      ] }),
+      /* @__PURE__ */ jsx5(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          type: "button",
+          onClick: () => {
+            inventory.append({
+              inventory_item_id: "",
+              required_quantity: ""
+            });
+          },
+          children: t("actions.add")
+        }
+      )
+    ] }),
+    inventory.fields.map((inventoryItem, inventoryIndex) => /* @__PURE__ */ jsx5(
+      InventoryItemRow,
+      {
+        form,
+        variantIndex: index,
+        inventoryIndex,
+        inventoryItem,
+        isItemOptionDisabled,
+        onRemove: () => inventory.remove(inventoryIndex)
+      },
+      inventoryItem.id
+    ))
+  ] });
+}
+var ProductCreateInventoryKitSection = ({
+  form
+}) => {
+  const { t } = useTranslation5();
+  const variants = useFieldArray3({
+    control: form.control,
+    name: "variants"
+  });
+  return /* @__PURE__ */ jsxs5("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx5(Heading3, { children: t("products.create.inventory.heading") }),
+    variants.fields.filter((v) => v.inventory_kit).map((variant, variantIndex) => /* @__PURE__ */ jsx5(
+      VariantSection,
+      {
+        form,
+        variant,
+        index: variantIndex
+      },
+      variant.id
+    ))
+  ] });
+};
+
+// src/routes/products/product-create/components/product-create-inventory-kit-form/product-create-inventory-kit-form.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ProductCreateInventoryKitForm = ({
+  form
+}) => {
+  return /* @__PURE__ */ jsx6("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsx6("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: /* @__PURE__ */ jsx6(ProductCreateInventoryKitSection, { form }) }) });
+};
+
+// src/routes/products/product-create/components/product-create-organize-form/components/product-create-organize-section/product-create-details-organize-section.tsx
+import { Button as Button2, Heading as Heading4 } from "@medusajs/ui";
+import { useFieldArray as useFieldArray4 } from "react-hook-form";
+import { Trans, useTranslation as useTranslation6 } from "react-i18next";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ProductCreateOrganizationSection = ({
+  form
+}) => {
+  const { t } = useTranslation6();
+  const collections = useComboboxData({
+    queryKey: collectionsQueryKeys.lists(),
+    queryFn: (params) => sdk.admin.productCollection.list(params),
+    getOptions: (data) => data.collections.map((collection) => ({
+      label: collection.title,
+      value: collection.id
+    }))
+  });
+  const types = useComboboxData({
+    queryKey: productTypesQueryKeys.lists(),
+    queryFn: (params) => sdk.admin.productType.list(params),
+    getOptions: (data) => data.product_types.map((type) => ({
+      label: type.value,
+      value: type.id
+    }))
+  });
+  const tags = useComboboxData({
+    queryKey: productTagsQueryKeys.lists(),
+    queryFn: (params) => sdk.admin.productTag.list(params),
+    getOptions: (data) => data.product_tags.map((tag) => ({
+      label: tag.value,
+      value: tag.id
+    }))
+  });
+  const shippingProfiles = useComboboxData({
+    queryKey: shippingProfileQueryKeys.lists(),
+    queryFn: (params) => sdk.admin.shippingProfile.list(params),
+    getOptions: (data) => data.shipping_profiles.map((shippingProfile) => ({
+      label: shippingProfile.name,
+      value: shippingProfile.id
+    }))
+  });
+  const { fields, remove, replace } = useFieldArray4({
+    control: form.control,
+    name: "sales_channels",
+    keyName: "key"
+  });
+  const handleClearAllSalesChannels = () => {
+    replace([]);
+  };
+  return /* @__PURE__ */ jsxs6("div", { id: "organize", className: "flex flex-col gap-y-8", children: [
+    /* @__PURE__ */ jsx7(Heading4, { children: t("products.organization.header") }),
+    /* @__PURE__ */ jsx7(
+      SwitchBox,
+      {
+        control: form.control,
+        name: "discountable",
+        label: t("products.fields.discountable.label"),
+        description: t("products.fields.discountable.hint"),
+        optional: true
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx7(
+        Form.Field,
+        {
+          control: form.control,
+          name: "type_id",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.type.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                Combobox,
+                {
+                  ...field,
+                  value: field.value || "",
+                  onChange: (value) => field.onChange(value || ""),
+                  options: types.options,
+                  searchValue: types.searchValue,
+                  onSearchValueChange: types.onSearchValueChange,
+                  fetchNextPage: types.fetchNextPage,
+                  allowClear: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Form.Field,
+        {
+          control: form.control,
+          name: "collection_id",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.collection.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                Combobox,
+                {
+                  ...field,
+                  value: field.value || "",
+                  onChange: (value) => field.onChange(value || ""),
+                  options: collections.options,
+                  searchValue: collections.searchValue,
+                  onSearchValueChange: collections.onSearchValueChange,
+                  fetchNextPage: collections.fetchNextPage,
+                  allowClear: true
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx7(
+        Form.Field,
+        {
+          control: form.control,
+          name: "categories",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.categories.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(CategoryCombobox, { ...field }) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Form.Field,
+        {
+          control: form.control,
+          name: "tags",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.tags.label") }),
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                Combobox,
+                {
+                  ...field,
+                  options: tags.options,
+                  searchValue: tags.searchValue,
+                  onSearchValueChange: tags.onSearchValueChange,
+                  fetchNextPage: tags.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.shipping_profile.label") }),
+        /* @__PURE__ */ jsx7(Form.Hint, { children: /* @__PURE__ */ jsx7(Trans, { i18nKey: "products.fields.shipping_profile.hint" }) })
+      ] }),
+      /* @__PURE__ */ jsx7(
+        Form.Field,
+        {
+          control: form.control,
+          name: "shipping_profile_id",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+              /* @__PURE__ */ jsx7(Form.Control, { children: /* @__PURE__ */ jsx7(
+                Combobox,
+                {
+                  ...field,
+                  options: shippingProfiles.options,
+                  searchValue: shippingProfiles.searchValue,
+                  onSearchValueChange: shippingProfiles.onSearchValueChange,
+                  fetchNextPage: shippingProfiles.fetchNextPage
+                }
+              ) }),
+              /* @__PURE__ */ jsx7(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-1 gap-y-4", children: /* @__PURE__ */ jsx7(
+      Form.Field,
+      {
+        control: form.control,
+        name: "sales_channels",
+        render: () => {
+          return /* @__PURE__ */ jsxs6(Form.Item, { children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-start justify-between gap-x-4", children: [
+              /* @__PURE__ */ jsxs6("div", { children: [
+                /* @__PURE__ */ jsx7(Form.Label, { optional: true, children: t("products.fields.sales_channels.label") }),
+                /* @__PURE__ */ jsx7(Form.Hint, { children: /* @__PURE__ */ jsx7(Trans, { i18nKey: "products.fields.sales_channels.hint" }) })
+              ] }),
+              /* @__PURE__ */ jsx7(StackedFocusModal.Trigger, { asChild: true, children: /* @__PURE__ */ jsx7(Button2, { size: "small", variant: "secondary", type: "button", children: t("actions.add") }) })
+            ] }),
+            /* @__PURE__ */ jsx7(Form.Control, { className: "mt-0", children: fields.length > 0 && /* @__PURE__ */ jsx7(
+              ChipGroup,
+              {
+                onClearAll: handleClearAllSalesChannels,
+                onRemove: remove,
+                className: "py-4",
+                children: fields.map((field, index) => /* @__PURE__ */ jsx7(ChipGroup.Chip, { index, children: field.name }, field.key))
+              }
+            ) })
+          ] });
+        }
+      }
+    ) })
+  ] });
+};
+
+// src/routes/products/product-create/components/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 useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import { useTranslation as useTranslation7 } from "react-i18next";
+import { keepPreviousData } from "@tanstack/react-query";
+
+// src/routes/products/product-create/components/product-create-organize-form/constants.ts
+var SC_STACKED_MODAL_ID = "sc";
+
+// src/routes/products/product-create/components/product-create-organize-form/components/product-create-sales-channel-stacked-modal/product-create-sales-channel-drawer.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var ProductCreateSalesChannelStackedModal = ({
+  form
+}) => {
+  const { t } = useTranslation7();
+  const { getValues, setValue } = form;
+  const { setIsOpen, getIsOpen } = useStackedModal();
+  const [rowSelection, setRowSelection] = useState3(
+    {}
+  );
+  const [state, setState] = useState3([]);
+  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);
+  useEffect2(() => {
+    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__ */ jsxs7(StackedFocusModal.Content, { className: "flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx8(StackedFocusModal.Header, {}),
+    /* @__PURE__ */ jsx8(StackedFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx8(
+      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__ */ jsx8(StackedFocusModal.Footer, { children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx8(StackedFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button3, { size: "small", variant: "secondary", type: "button", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx8(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/routes/products/product-create/components/product-create-organize-form/product-create-organize-form.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var ProductCreateOrganizeForm = ({ form }) => {
+  const { getFormFields } = useExtension();
+  const fields = getFormFields("product", "create", "organize");
+  return /* @__PURE__ */ jsxs8(StackedFocusModal, { id: SC_STACKED_MODAL_ID, children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs8("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+      /* @__PURE__ */ jsx9(ProductCreateOrganizationSection, { form }),
+      /* @__PURE__ */ jsx9(FormExtensionZone, { fields, form })
+    ] }) }),
+    /* @__PURE__ */ jsx9(ProductCreateSalesChannelStackedModal, { form })
+  ] });
+};
+
+// src/routes/products/product-create/components/product-create-variants-form/product-create-variants-form.tsx
+import { useMemo as useMemo3 } from "react";
+import { useWatch as useWatch3 } from "react-hook-form";
+import { useTranslation as useTranslation8 } from "react-i18next";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ProductCreateVariantsForm = ({
+  form,
+  regions,
+  store,
+  pricePreferences
+}) => {
+  const { setCloseOnEscape } = useRouteModal();
+  const currencyCodes = useMemo3(
+    () => store?.supported_currencies?.map((c) => c.currency_code) || [],
+    [store]
+  );
+  const variants = useWatch3({
+    control: form.control,
+    name: "variants",
+    defaultValue: []
+  });
+  const options = useWatch3({
+    control: form.control,
+    name: "options",
+    defaultValue: []
+  });
+  const columns = useColumns2({
+    options,
+    currencies: currencyCodes,
+    regions,
+    pricePreferences
+  });
+  const variantData = useMemo3(() => {
+    const ret = [];
+    variants.forEach((v, i) => {
+      if (v.should_create) {
+        ret.push({ ...v, originalIndex: i });
+      }
+    });
+    return ret;
+  }, [variants]);
+  return /* @__PURE__ */ jsx10("div", { className: "flex size-full flex-col divide-y overflow-hidden", children: /* @__PURE__ */ jsx10(
+    DataGrid,
+    {
+      columns,
+      data: variantData,
+      state: form,
+      onEditingChange: (editing) => setCloseOnEscape(!editing)
+    }
+  ) });
+};
+var columnHelper2 = createDataGridHelper();
+var useColumns2 = ({
+  options,
+  currencies = [],
+  regions = [],
+  pricePreferences = []
+}) => {
+  const { t } = useTranslation8();
+  return useMemo3(
+    () => [
+      columnHelper2.column({
+        id: "options",
+        header: () => /* @__PURE__ */ jsx10("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx10("span", { className: "truncate", children: options.map((o) => o.title).join(" / ") }) }),
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.ReadonlyCell, { context, children: options.map((o) => context.row.original.options[o.title]).join(" / ") });
+        },
+        disableHiding: true
+      }),
+      columnHelper2.column({
+        id: "title",
+        name: t("fields.title"),
+        header: t("fields.title"),
+        field: (context) => `variants.${context.row.original.originalIndex}.title`,
+        type: "text",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "sku",
+        name: t("fields.sku"),
+        header: t("fields.sku"),
+        field: (context) => `variants.${context.row.original.originalIndex}.sku`,
+        type: "text",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.TextCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "manage_inventory",
+        name: t("fields.managedInventory"),
+        header: t("fields.managedInventory"),
+        field: (context) => `variants.${context.row.original.originalIndex}.manage_inventory`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.BooleanCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "allow_backorder",
+        name: t("fields.allowBackorder"),
+        header: t("fields.allowBackorder"),
+        field: (context) => `variants.${context.row.original.originalIndex}.allow_backorder`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(DataGrid.BooleanCell, { context });
+        }
+      }),
+      columnHelper2.column({
+        id: "inventory_kit",
+        name: t("fields.inventoryKit"),
+        header: t("fields.inventoryKit"),
+        field: (context) => `variants.${context.row.original.originalIndex}.inventory_kit`,
+        type: "boolean",
+        cell: (context) => {
+          return /* @__PURE__ */ jsx10(
+            DataGrid.BooleanCell,
+            {
+              context,
+              disabled: !context.row.original.manage_inventory
+            }
+          );
+        }
+      }),
+      ...createDataGridPriceColumns({
+        currencies,
+        regions,
+        pricePreferences,
+        getFieldName: (context, value) => {
+          if (context.column.id?.startsWith("currency_prices")) {
+            return `variants.${context.row.original.originalIndex}.prices.${value}`;
+          }
+          return `variants.${context.row.original.originalIndex}.prices.${value}`;
+        },
+        t
+      })
+    ],
+    [currencies, regions, options, pricePreferences, t]
+  );
+};
+
+// src/routes/products/product-create/components/product-create-form/product-create-form.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var SAVE_DRAFT_BUTTON = "save-draft-button";
+var ProductCreateForm = ({
+  defaultChannel,
+  regions,
+  store,
+  pricePreferences
+}) => {
+  const [tab, setTab] = useState4("details" /* DETAILS */);
+  const [tabState, setTabState] = useState4({
+    ["details" /* DETAILS */]: "in-progress",
+    ["organize" /* ORGANIZE */]: "not-started",
+    ["variants" /* VARIANTS */]: "not-started",
+    ["inventory" /* INVENTORY */]: "not-started"
+  });
+  const { t } = useTranslation9();
+  const { handleSuccess } = useRouteModal();
+  const { getFormConfigs } = useExtension();
+  const configs = getFormConfigs("product", "create");
+  const direction = useDocumentDirection();
+  const form = useExtendableForm({
+    defaultValues: {
+      ...PRODUCT_CREATE_FORM_DEFAULTS,
+      sales_channels: defaultChannel ? [{ id: defaultChannel.id, name: defaultChannel.name }] : []
+    },
+    schema: ProductCreateSchema,
+    configs
+  });
+  const { mutateAsync, isPending } = useCreateProduct();
+  const regionsCurrencyMap = useMemo4(() => {
+    if (!regions?.length) {
+      return {};
+    }
+    return regions.reduce((acc, reg) => {
+      acc[reg.id] = reg.currency_code;
+      return acc;
+    }, {});
+  }, [regions]);
+  const watchedVariants = useWatch4({
+    control: form.control,
+    name: "variants"
+  });
+  const showInventoryTab = useMemo4(
+    () => watchedVariants.some((v) => v.manage_inventory && v.inventory_kit),
+    [watchedVariants]
+  );
+  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 payload = { ...values, media: void 0 };
+    let uploadedMedia = [];
+    try {
+      if (media.length) {
+        const thumbnailReq = media.find((m) => m.isThumbnail);
+        const otherMediaReq = media.filter((m) => !m.isThumbnail);
+        const fileReqs = [];
+        if (thumbnailReq) {
+          fileReqs.push(
+            sdk.admin.upload.create({ files: [thumbnailReq.file] }).then((r) => r.files.map((f) => ({ ...f, isThumbnail: true })))
+          );
+        }
+        if (otherMediaReq?.length) {
+          fileReqs.push(
+            sdk.admin.upload.create({
+              files: otherMediaReq.map((m) => m.file)
+            }).then((r) => r.files.map((f) => ({ ...f, isThumbnail: false })))
+          );
+        }
+        uploadedMedia = (await Promise.all(fileReqs)).flat();
+      }
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+    await mutateAsync(
+      normalizeProductFormValues({
+        ...payload,
+        media: uploadedMedia,
+        status: isDraftSubmission ? "draft" : "published",
+        regionsCurrencyMap
+      }),
+      {
+        onSuccess: (data) => {
+          toast.success(
+            t("products.create.successToast", {
+              title: data.product.title
+            })
+          );
+          handleSuccess(`../${data.product.id}`);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  const onNext = async (currentTab) => {
+    const valid = await form.trigger();
+    if (!valid) {
+      return;
+    }
+    if (currentTab === "details" /* DETAILS */) {
+      setTab("organize" /* ORGANIZE */);
+    }
+    if (currentTab === "organize" /* ORGANIZE */) {
+      setTab("variants" /* VARIANTS */);
+    }
+    if (currentTab === "variants" /* VARIANTS */) {
+      setTab("inventory" /* INVENTORY */);
+    }
+  };
+  useEffect3(() => {
+    const currentState = { ...tabState };
+    if (tab === "details" /* DETAILS */) {
+      currentState["details" /* DETAILS */] = "in-progress";
+    }
+    if (tab === "organize" /* ORGANIZE */) {
+      currentState["details" /* DETAILS */] = "completed";
+      currentState["organize" /* ORGANIZE */] = "in-progress";
+    }
+    if (tab === "variants" /* VARIANTS */) {
+      currentState["details" /* DETAILS */] = "completed";
+      currentState["organize" /* ORGANIZE */] = "completed";
+      currentState["variants" /* VARIANTS */] = "in-progress";
+    }
+    if (tab === "inventory" /* INVENTORY */) {
+      currentState["details" /* DETAILS */] = "completed";
+      currentState["organize" /* ORGANIZE */] = "completed";
+      currentState["variants" /* VARIANTS */] = "completed";
+      currentState["inventory" /* INVENTORY */] = "in-progress";
+    }
+    setTabState({ ...currentState });
+  }, [tab]);
+  return /* @__PURE__ */ jsx11(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs9(
+    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.preventDefault();
+              e.stopPropagation();
+              onNext(tab);
+              return;
+            }
+            handleSubmit();
+          }
+        }
+      },
+      onSubmit: handleSubmit,
+      className: "flex h-full flex-col",
+      children: [
+        /* @__PURE__ */ jsxs9(
+          ProgressTabs,
+          {
+            dir: direction,
+            value: tab,
+            onValueChange: async (tab2) => {
+              const valid = await form.trigger();
+              if (!valid) {
+                return;
+              }
+              setTab(tab2);
+            },
+            className: "flex h-full flex-col overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsx11(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx11("div", { className: "-my-2 w-full border-l", children: /* @__PURE__ */ jsxs9(ProgressTabs.List, { className: "justify-start-start flex w-full items-center", children: [
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["details" /* DETAILS */],
+                    value: "details" /* DETAILS */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.details")
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["organize" /* ORGANIZE */],
+                    value: "organize" /* ORGANIZE */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.organize")
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["variants" /* VARIANTS */],
+                    value: "variants" /* VARIANTS */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.variants")
+                  }
+                ),
+                showInventoryTab && /* @__PURE__ */ jsx11(
+                  ProgressTabs.Trigger,
+                  {
+                    status: tabState["inventory" /* INVENTORY */],
+                    value: "inventory" /* INVENTORY */,
+                    className: "max-w-[200px] truncate",
+                    children: t("products.create.tabs.inventory")
+                  }
+                )
+              ] }) }) }),
+              /* @__PURE__ */ jsxs9(RouteFocusModal.Body, { className: "size-full overflow-hidden", children: [
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "details" /* DETAILS */,
+                    children: /* @__PURE__ */ jsx11(ProductCreateDetailsForm, { form })
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "organize" /* ORGANIZE */,
+                    children: /* @__PURE__ */ jsx11(ProductCreateOrganizeForm, { form })
+                  }
+                ),
+                /* @__PURE__ */ jsx11(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "variants" /* VARIANTS */,
+                    children: /* @__PURE__ */ jsx11(
+                      ProductCreateVariantsForm,
+                      {
+                        form,
+                        store,
+                        regions,
+                        pricePreferences
+                      }
+                    )
+                  }
+                ),
+                showInventoryTab && /* @__PURE__ */ jsx11(
+                  ProgressTabs.Content,
+                  {
+                    className: "size-full overflow-y-auto",
+                    value: "inventory" /* INVENTORY */,
+                    children: /* @__PURE__ */ jsx11(ProductCreateInventoryKitForm, { form })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx11(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx11(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx11(Button4, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx11(
+            Button4,
+            {
+              "data-name": SAVE_DRAFT_BUTTON,
+              size: "small",
+              type: "submit",
+              isLoading: isPending,
+              className: "whitespace-nowrap",
+              children: t("actions.saveAsDraft")
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            PrimaryButton,
+            {
+              tab,
+              next: onNext,
+              isLoading: isPending,
+              showInventoryTab
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+};
+var PrimaryButton = ({
+  tab,
+  next,
+  isLoading,
+  showInventoryTab
+}) => {
+  const { t } = useTranslation9();
+  if (tab === "variants" /* VARIANTS */ && !showInventoryTab || tab === "inventory" /* INVENTORY */ && showInventoryTab) {
+    return /* @__PURE__ */ jsx11(
+      Button4,
+      {
+        "data-name": "publish-button",
+        type: "submit",
+        variant: "primary",
+        size: "small",
+        isLoading,
+        children: t("actions.publish")
+      },
+      "submit-button"
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    Button4,
+    {
+      type: "button",
+      variant: "primary",
+      size: "small",
+      onClick: () => next(tab),
+      children: t("actions.continue")
+    },
+    "next-button"
+  );
+};
+
+// src/routes/products/product-create/product-create.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+var ProductCreate = () => {
+  const { t } = useTranslation10();
+  const {
+    store,
+    isPending: isStorePending,
+    isError: isStoreError,
+    error: storeError
+  } = useStore({
+    fields: "+default_sales_channel"
+  });
+  const {
+    sales_channel,
+    isPending: isSalesChannelPending,
+    isError: isSalesChannelError,
+    error: salesChannelError
+  } = useSalesChannel(store?.default_sales_channel_id, {
+    enabled: !!store?.default_sales_channel_id
+  });
+  const {
+    regions,
+    isPending: isRegionsPending,
+    isError: isRegionsError,
+    error: regionsError
+  } = useRegions({ limit: 9999 });
+  const {
+    price_preferences,
+    isPending: isPricePreferencesPending,
+    isError: isPricePreferencesError,
+    error: pricePreferencesError
+  } = usePricePreferences({
+    limit: 9999
+  });
+  const ready = !!store && !isStorePending && !!regions && !isRegionsPending && !!sales_channel && !isSalesChannelPending && !!price_preferences && !isPricePreferencesPending;
+  if (isStoreError) {
+    throw storeError;
+  }
+  if (isRegionsError) {
+    throw regionsError;
+  }
+  if (isSalesChannelError) {
+    throw salesChannelError;
+  }
+  if (isPricePreferencesError) {
+    throw pricePreferencesError;
+  }
+  return /* @__PURE__ */ jsxs10(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx12(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx12("span", { className: "sr-only", children: t("products.create.title") }) }),
+    /* @__PURE__ */ jsx12(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx12("span", { className: "sr-only", children: t("products.create.description") }) }),
+    ready && /* @__PURE__ */ jsx12(
+      ProductCreateForm,
+      {
+        defaultChannel: sales_channel,
+        store,
+        pricePreferences: price_preferences,
+        regions
+      }
+    )
+  ] });
+};
+export {
+  ProductCreate as Component
+};