@mercurjs/admin 2.1.2-canary.5 → 2.2.0-canary.1

package/dist/attribute-create-IVRJPVG5.js

@@ -1,997 +0,0 @@
-import {
-  AttributeUIComponent,
-  CreateAttributeSchema,
-  UpdateAttributeSchema
-} from "./chunk-4ZTZTIIM.js";
-import {
-  RouteFocusModal,
-  useRouteModal
-} from "./chunk-FWJLS7XD.js";
-import {
-  Form
-} from "./chunk-3QSRE5LS.js";
-import "./chunk-PBQ5M44A.js";
-import "./chunk-OH4AABUT.js";
-import "./chunk-YKDEE7ZL.js";
-import "./chunk-AEMDNTW5.js";
-import "./chunk-LYD3C73Z.js";
-import {
-  useCreateAttribute
-} from "./chunk-7O5NDICV.js";
-import "./chunk-46M463BR.js";
-import "./chunk-YFRC6GEN.js";
-import "./chunk-N6SI4IIT.js";
-import "./chunk-JPNPTILP.js";
-import "./chunk-DAXXLQKB.js";
-import "./chunk-OHOWEMHO.js";
-import "./chunk-GKGLVDDV.js";
-import "./chunk-WJJXUXSO.js";
-import "./chunk-LAPEZATU.js";
-import "./chunk-DBNPVU3L.js";
-import "./chunk-U7WZYWGA.js";
-import "./chunk-ZN7LWXVC.js";
-import "./chunk-VYMODH6P.js";
-import "./chunk-LEG67A2R.js";
-import "./chunk-PRBE5CM3.js";
-import "./chunk-5TRY5IMZ.js";
-import "./chunk-TAKEQAZZ.js";
-import "./chunk-B6FG7A6W.js";
-import "./chunk-EPHVGD5Z.js";
-import "./chunk-ESPLVOFC.js";
-import "./chunk-FXWKGNRV.js";
-import "./chunk-VDKOJ5WD.js";
-import "./chunk-DL2ZIXBO.js";
-import {
-  useProductCategories
-} from "./chunk-Z2QQZOG3.js";
-import "./chunk-5CK6XEFV.js";
-import "./chunk-RHKRREUU.js";
-import "./chunk-ZA2KFUFR.js";
-import "./chunk-ZBWL72TB.js";
-import "./chunk-NBMM2TZK.js";
-
-// src/pages/attributes/attribute-create/attribute-create.tsx
-import { useRef as useRef2, useState as useState3 } from "react";
-import { Button as Button2, Heading, ProgressTabs, Text as Text3, toast } from "@medusajs/ui";
-import { useTranslation as useTranslation4 } from "react-i18next";
-
-// src/pages/attributes/attribute-edit/components/attribute-form.tsx
-import { forwardRef, useEffect as useEffect2, useMemo, useImperativeHandle, useState as useState2 } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  InlineTip,
-  Input as Input2,
-  Select,
-  Switch,
-  Text as Text2,
-  Textarea
-} from "@medusajs/ui";
-import { FormProvider, useForm, useWatch } from "react-hook-form";
-import { useTranslation as useTranslation3 } from "react-i18next";
-
-// src/pages/attributes/attribute-create/components/multi-select-category.tsx
-import { useEffect, useRef, useState } from "react";
-import {
-  ArrowUturnLeft,
-  TriangleRightMini,
-  TrianglesMini,
-  XMarkMini
-} from "@medusajs/icons";
-import { Badge, Text } from "@medusajs/ui";
-import { useTranslation } from "react-i18next";
-import { jsx, jsxs } from "react/jsx-runtime";
-var MultiSelectCategory = ({
-  categories,
-  value,
-  onChange
-}) => {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-  const triggerRef = useRef(null);
-  const [currentParentId, setCurrentParentId] = useState(null);
-  const [pathHistory, setPathHistory] = useState([]);
-  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 handleToggle = () => {
-    setIsOpen((prev) => !prev);
-  };
-  const hasChildren = (categoryId) => {
-    return categories.some((cat) => cat.parent_category_id === categoryId);
-  };
-  const handleDrillDown = (category, event) => {
-    event.stopPropagation();
-    setPathHistory([...pathHistory, currentParentId]);
-    setCurrentParentId(category.id);
-  };
-  const handleGoBack = () => {
-    const newPathHistory = [...pathHistory];
-    const previousParentId = newPathHistory.pop();
-    setPathHistory(newPathHistory);
-    setCurrentParentId(previousParentId || null);
-  };
-  const handleItemClick = (categoryId) => {
-    const isSelected = value.includes(categoryId);
-    if (isSelected) {
-      onChange(value.filter((id) => id !== categoryId));
-    } else {
-      onChange([...value, categoryId]);
-    }
-  };
-  const currentCategories = categories.filter(
-    (cat) => cat.parent_category_id === currentParentId
-  );
-  const getBackButtonText = () => {
-    const parentCategory = categories.find((cat) => cat.id === currentParentId);
-    return parentCategory?.name || "";
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative",
-      "data-testid": "attribute-form-category-multiselect",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: triggerRef,
-            className: "focus-within:ring-ui-ring-interactive relative flex h-10 w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-ui-border-base bg-ui-bg-field text-ui-fg-base shadow-sm transition-colors duration-150 ease-in-out focus-within:border-ui-border-interactive focus-within:ring-1 hover:bg-ui-bg-field-hover",
-            onClick: handleToggle,
-            "data-testid": "attribute-form-category-multiselect-trigger",
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "flex items-center gap-2 px-3 py-2",
-                  "data-testid": "attribute-form-category-multiselect-trigger-content",
-                  children: value.length > 0 ? /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onChange([]);
-                      },
-                      "data-testid": "attribute-form-category-multiselect-clear-button",
-                      children: /* @__PURE__ */ jsxs(
-                        Badge,
-                        {
-                          size: "small",
-                          className: "w-fit",
-                          "data-testid": "attribute-form-category-multiselect-badge",
-                          children: [
-                            value.length,
-                            /* @__PURE__ */ jsx(XMarkMini, {})
-                          ]
-                        }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      className: "text-ui-fg-subtle",
-                      "data-testid": "attribute-form-category-multiselect-placeholder",
-                      children: t("attributes.fields.categories", "Select categories")
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "flex h-full w-10 items-center justify-center border-l border-ui-border-base",
-                  "data-testid": "attribute-form-category-multiselect-icon",
-                  children: /* @__PURE__ */ jsx(TrianglesMini, {})
-                }
-              )
-            ]
-          }
-        ),
-        isOpen && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: dropdownRef,
-            className: "absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-ui-border-base bg-ui-bg-base shadow-lg",
-            "data-testid": "attribute-form-category-multiselect-dropdown",
-            children: [
-              currentParentId !== null && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "flex cursor-pointer items-center gap-3 border-b border-ui-border-base px-3 py-2 text-ui-fg-subtle hover:bg-ui-bg-base-hover",
-                  onClick: handleGoBack,
-                  "data-testid": "attribute-form-category-multiselect-back-button",
-                  children: [
-                    /* @__PURE__ */ jsx(ArrowUturnLeft, {}),
-                    /* @__PURE__ */ jsx(Text, { "data-testid": "attribute-form-category-multiselect-back-text", children: getBackButtonText() })
-                  ]
-                }
-              ),
-              currentCategories.length === 0 ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "p-3 text-ui-fg-subtle",
-                  "data-testid": "attribute-form-category-multiselect-empty",
-                  children: t("general.noResultsTitle", "No categories found.")
-                }
-              ) : currentCategories.map((category) => {
-                const isSelected = value.includes(category.id);
-                const hasChildrenNode = hasChildren(category.id);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "flex cursor-pointer items-center justify-between px-1 py-1",
-                    onClick: () => handleItemClick(category.id),
-                    "data-testid": `attribute-form-category-multiselect-item-${category.id}`,
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          className: "relative mr-2 flex flex-1 items-center rounded-md px-2 py-1.5 hover:bg-ui-bg-base-hover",
-                          "data-testid": `attribute-form-category-multiselect-item-${category.id}-content`,
-                          children: [
-                            isSelected && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: "absolute left-3 top-1/2 h-1 w-1 -translate-y-1/2 rounded-full bg-ui-fg-base",
-                                "data-testid": `attribute-form-category-multiselect-item-${category.id}-selected-indicator`
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Text,
-                              {
-                                className: "ml-6",
-                                "data-testid": `attribute-form-category-multiselect-item-${category.id}-name`,
-                                children: category.name
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      hasChildrenNode && /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          onClick: (e) => handleDrillDown(category, e),
-                          className: "rounded-md p-2 hover:bg-ui-bg-base-hover",
-                          "data-testid": `attribute-form-category-multiselect-item-${category.id}-drill-down`,
-                          children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "mr-1" })
-                        }
-                      )
-                    ]
-                  },
-                  category.id
-                );
-              })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/pages/attributes/attribute-create/components/possible-values-list.tsx
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors
-} from "@dnd-kit/core";
-import {
-  arrayMove,
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { DotsSix, XMark } from "@medusajs/icons";
-import { Button, Hint, IconButton, Input, Label } from "@medusajs/ui";
-import { useFieldArray, useFormContext } from "react-hook-form";
-import { useTranslation as useTranslation2 } from "react-i18next";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SortableItem = ({ id, index, onRemove }) => {
-  const {
-    register,
-    formState: { errors }
-  } = useFormContext();
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition
-  };
-  const possibleValuesErrors = errors?.possible_values;
-  const fieldError = Array.isArray(possibleValuesErrors) ? possibleValuesErrors[index]?.value : void 0;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        ref: setNodeRef,
-        style,
-        className: "flex items-center gap-2 p-2 bg-ui-bg-component border border-ui-border-base rounded-xl mb-2",
-        "data-testid": `attribute-form-possible-value-item-${index}`,
-        children: [
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              className: "cursor-grab active:cursor-grabbing",
-              ...attributes,
-              ...listeners,
-              "data-testid": `attribute-form-possible-value-drag-handle-${index}`,
-              children: /* @__PURE__ */ jsx2(DotsSix, { className: "text-ui-fg-subtle" })
-            }
-          ),
-          /* @__PURE__ */ jsx2("div", { className: "flex-1", children: /* @__PURE__ */ jsx2(
-            Input,
-            {
-              className: "flex-1",
-              "aria-invalid": !!fieldError,
-              placeholder: "Enter value",
-              ...register(`possible_values.${index}.value`),
-              "data-testid": `attribute-form-possible-value-input-${index}`
-            }
-          ) }),
-          /* @__PURE__ */ jsx2(
-            IconButton,
-            {
-              variant: "transparent",
-              size: "small",
-              type: "button",
-              onClick: onRemove,
-              "data-testid": `attribute-form-possible-value-remove-button-${index}`,
-              children: /* @__PURE__ */ jsx2(XMark, {})
-            }
-          )
-        ]
-      }
-    ),
-    fieldError && /* @__PURE__ */ jsx2(
-      Hint,
-      {
-        variant: "error",
-        className: "mb-2",
-        "data-testid": `attribute-form-possible-value-error-${index}`,
-        children: fieldError.message
-      }
-    )
-  ] });
-};
-var PossibleValuesList = () => {
-  const { t } = useTranslation2();
-  const { control, getValues, formState } = useFormContext();
-  const { fields, append, remove, update } = useFieldArray({
-    control,
-    name: "possible_values"
-  });
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates
-    })
-  );
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    if (over && active.id !== over.id) {
-      const oldIndex = fields.findIndex((field) => field.id === active.id);
-      const newIndex = fields.findIndex((field) => field.id === over.id);
-      const currentValues = getValues("possible_values");
-      const reorderedValues = arrayMove(currentValues, oldIndex, newIndex);
-      reorderedValues.forEach((value, index) => {
-        update(index, {
-          value: value.value,
-          rank: index,
-          metadata: value.metadata || {}
-        });
-      });
-    }
-  };
-  const handleAddValue = (e) => {
-    e.preventDefault();
-    append({
-      value: "",
-      rank: fields.length,
-      metadata: {}
-    });
-  };
-  const possibleValuesError = formState.errors.possible_values;
-  const shouldShowListError = possibleValuesError && !Array.isArray(possibleValuesError);
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", "data-testid": "attribute-form-possible-values-list", children: [
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: "flex items-center justify-between pb-1",
-        "data-testid": "attribute-form-possible-values-header",
-        children: [
-          /* @__PURE__ */ jsx2(Label, { "data-testid": "attribute-form-possible-values-label", children: t("attributes.fields.possibleValues", "Possible Values") }),
-          /* @__PURE__ */ jsx2(
-            Button,
-            {
-              type: "button",
-              variant: "secondary",
-              size: "small",
-              onClick: handleAddValue,
-              "data-testid": "attribute-form-possible-values-add-button",
-              children: t("actions.add", "Add")
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      DndContext,
-      {
-        sensors,
-        collisionDetection: closestCenter,
-        onDragEnd: handleDragEnd,
-        children: /* @__PURE__ */ jsx2(
-          SortableContext,
-          {
-            items: fields.map((field) => field.id),
-            strategy: verticalListSortingStrategy,
-            children: fields.map((field, index) => /* @__PURE__ */ jsx2(
-              SortableItem,
-              {
-                id: field.id,
-                index,
-                onRemove: () => remove(index)
-              },
-              field.id
-            ))
-          }
-        )
-      }
-    ),
-    shouldShowListError && /* @__PURE__ */ jsx2(
-      Hint,
-      {
-        variant: "error",
-        "data-testid": "attribute-form-possible-values-list-error",
-        children: possibleValuesError.message
-      }
-    )
-  ] });
-};
-
-// src/pages/attributes/attribute-edit/components/attribute-form.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var UI_COMPONENT_LABELS = {
-  select: "Single Select",
-  multivalue: "Multi Select",
-  unit: "Unit",
-  toggle: "Toggle",
-  text_area: "Text"
-};
-var AttributeForm = forwardRef(
-  ({
-    initialData,
-    onSubmit,
-    categories,
-    mode = "create",
-    activeTab = "details",
-    onFormStateChange
-  }, ref) => {
-    const { t } = useTranslation3();
-    const [showCategorySection, setShowCategorySection] = useState2(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (initialData?.product_categories?.length || 0) > 0
-    );
-    const form = useForm({
-      resolver: zodResolver(
-        mode === "create" ? CreateAttributeSchema : UpdateAttributeSchema
-      ),
-      defaultValues: {
-        name: initialData?.name ?? "",
-        description: initialData?.description ?? "",
-        handle: initialData?.handle ?? "",
-        ui_component: initialData?.ui_component ?? AttributeUIComponent.SELECT,
-        is_filterable: initialData?.is_filterable ?? false,
-        is_required: initialData?.is_required ?? false,
-        possible_values: initialData?.possible_values?.map((v) => ({
-          id: v.id,
-          value: v.value,
-          rank: v.rank
-        })) ?? [],
-        product_category_ids: [],
-        metadata: {}
-      }
-    });
-    const handleSubmit = form.handleSubmit(async (data) => {
-      try {
-        await onSubmit(data);
-      } catch (error) {
-        console.error(error);
-      }
-    });
-    useImperativeHandle(ref, () => ({
-      validateFields: async (fields) => {
-        const result = await form.trigger(
-          fields
-        );
-        return result;
-      }
-    }));
-    const [name, description, handle, uiComponent, possibleValues] = useWatch({
-      control: form.control,
-      name: [
-        "name",
-        "description",
-        "handle",
-        "ui_component",
-        "possible_values"
-      ]
-    });
-    const formStateKey = useMemo(() => {
-      return JSON.stringify({
-        name,
-        description,
-        handle,
-        uiComponent,
-        valuesCount: possibleValues?.length ?? 0
-      });
-    }, [name, description, handle, uiComponent, possibleValues]);
-    useEffect2(() => {
-      if (!onFormStateChange) return;
-      const hasName = name?.trim();
-      const hasDetailsData = description?.trim() || handle?.trim();
-      const detailsStatus = hasName ? "completed" : hasDetailsData ? "in-progress" : "not-started";
-      const hasTypeData = uiComponent && (possibleValues?.length ?? 0) > 0;
-      const typeStatus = hasTypeData ? "completed" : "not-started";
-      onFormStateChange({
-        detailsStatus,
-        typeStatus
-      });
-    }, [formStateKey, onFormStateChange]);
-    const renderDetailsTab = () => /* @__PURE__ */ jsxs3("div", { className: "grid gap-6", "data-testid": "attribute-form-details-tab", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "name",
-            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-name-field", children: [
-              /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-name-label", children: t("attributes.fields.name", "Name") }),
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-name-control", children: /* @__PURE__ */ jsx3(
-                Input2,
-                {
-                  ...field,
-                  size: "small",
-                  "data-testid": "attribute-form-name-input"
-                }
-              ) }),
-              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-name-error" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "handle",
-            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-handle-field", children: [
-              /* @__PURE__ */ jsx3(Form.Label, { optional: true, "data-testid": "attribute-form-handle-label", children: t("attributes.fields.handle", "Handle") }),
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-handle-control", children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx3(
-                  Input2,
-                  {
-                    ...field,
-                    size: "small",
-                    className: "pl-9",
-                    "data-testid": "attribute-form-handle-input"
-                  }
-                ),
-                /* @__PURE__ */ jsx3("div", { className: "z-100 absolute bottom-0 left-0 top-0 flex w-7 items-center justify-center border-r border-ui-border-base px-2 text-ui-fg-muted", children: "/" })
-              ] }) }),
-              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-handle-error" })
-            ] })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4", children: [
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "description",
-            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-description-field", children: [
-              /* @__PURE__ */ jsx3(
-                Form.Label,
-                {
-                  optional: true,
-                  "data-testid": "attribute-form-description-label",
-                  children: t("attributes.fields.description", "Description")
-                }
-              ),
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-description-control", children: /* @__PURE__ */ jsx3(
-                Textarea,
-                {
-                  ...field,
-                  "data-testid": "attribute-form-description-input"
-                }
-              ) }),
-              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-description-error" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "is_filterable",
-            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-filterable-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-filterable-control", children: /* @__PURE__ */ jsx3(
-                Switch,
-                {
-                  checked: field.value,
-                  onCheckedChange: field.onChange,
-                  className: "mt-1",
-                  "data-testid": "attribute-form-filterable-switch"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs3("div", { children: [
-                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-filterable-label", children: t(
-                  "attributes.fields.isFilterable",
-                  "Yes, this is a filterable attribute"
-                ) }),
-                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
-                  "attributes.fields.isFilterableHint",
-                  "If checked, buyers will be able to filter products using this attribute."
-                ) })
-              ] })
-            ] }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "is_required",
-            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-required-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-required-control", children: /* @__PURE__ */ jsx3(
-                Switch,
-                {
-                  checked: field.value,
-                  onCheckedChange: field.onChange,
-                  className: "mt-1",
-                  "data-testid": "attribute-form-required-switch"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs3("div", { children: [
-                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-required-label", children: t(
-                  "attributes.fields.isRequired",
-                  "Yes, this is a required attribute"
-                ) }),
-                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
-                  "attributes.fields.isRequiredHint",
-                  "If checked, vendors must set a value to this attribute."
-                ) })
-              ] })
-            ] }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Form.Field,
-          {
-            control: form.control,
-            name: "product_category_ids",
-            render: ({ field }) => {
-              const categoryIds = field.value ?? [];
-              const isGlobal = categoryIds.length === 0 && !showCategorySection;
-              return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-global-field", children: [
-                /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
-                  /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-global-control", children: /* @__PURE__ */ jsx3(
-                    Switch,
-                    {
-                      checked: isGlobal,
-                      onCheckedChange: (checked) => {
-                        if (checked) {
-                          field.onChange([]);
-                          setShowCategorySection(false);
-                        } else {
-                          setShowCategorySection(true);
-                        }
-                      },
-                      className: "mt-1",
-                      "data-testid": "attribute-form-global-switch"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxs3("div", { children: [
-                    /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-global-label", children: t(
-                      "attributes.fields.global",
-                      "Yes, this is a global attribute"
-                    ) }),
-                    /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
-                      "attributes.hints.global",
-                      "When enabled, this attribute applies to all products regardless of category."
-                    ) })
-                  ] })
-                ] }) }),
-                (showCategorySection || categoryIds.length > 0) && /* @__PURE__ */ jsxs3("div", { className: "mt-4", "data-testid": "attribute-form-category-field", children: [
-                  /* @__PURE__ */ jsx3(
-                    Form.Label,
-                    {
-                      optional: true,
-                      "data-testid": "attribute-form-category-label",
-                      children: t("attributes.fields.categories", "Product Categories")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3("div", { className: "mt-1", children: /* @__PURE__ */ jsx3(
-                    MultiSelectCategory,
-                    {
-                      categories: categories ?? [],
-                      value: categoryIds,
-                      onChange: (value) => field.onChange(value)
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-category-error" }),
-                  /* @__PURE__ */ jsx3("div", { className: "mt-3", children: /* @__PURE__ */ jsx3(InlineTip, { label: "Warning", variant: "warning", children: t(
-                    "attributes.hints.categoryInheritance",
-                    "Child categories will inherit this attribute."
-                  ) }) })
-                ] })
-              ] });
-            }
-          }
-        )
-      ] })
-    ] });
-    const renderTypeTab = () => /* @__PURE__ */ jsxs3(
-      "div",
-      {
-        className: "grid w-full gap-6",
-        "data-testid": "attribute-form-type-tab",
-        children: [
-          /* @__PURE__ */ jsx3(
-            Form.Field,
-            {
-              control: form.control,
-              name: "ui_component",
-              render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-ui-component-field", children: [
-                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-ui-component-label", children: t("attributes.fields.type", "Type") }),
-                /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-ui-component-control", children: /* @__PURE__ */ jsxs3(
-                  Select,
-                  {
-                    value: field.value,
-                    onValueChange: field.onChange,
-                    "data-testid": "attribute-form-ui-component-select",
-                    children: [
-                      /* @__PURE__ */ jsx3(
-                        Select.Trigger,
-                        {
-                          className: "mt-1",
-                          "data-testid": "attribute-form-ui-component-trigger",
-                          children: /* @__PURE__ */ jsx3(
-                            Select.Value,
-                            {
-                              placeholder: t(
-                                "attributes.fields.typePlaceholder",
-                                "Select Type"
-                              )
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(Select.Content, { "data-testid": "attribute-form-ui-component-content", children: Object.values(AttributeUIComponent).map((component) => /* @__PURE__ */ jsx3(
-                        Select.Item,
-                        {
-                          value: component,
-                          "data-testid": `attribute-form-ui-component-option-${component}`,
-                          children: UI_COMPONENT_LABELS[component] ?? component
-                        },
-                        component
-                      )) })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-ui-component-error" })
-              ] })
-            }
-          ),
-          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3(InlineTip, { label: "Tip", variant: "info", children: uiComponent === AttributeUIComponent.SELECT ? t(
-            "attributes.tips.singleSelect",
-            "When creating Single Select vendor will be able to choose only one value. This type of attribute will be good for product specifications."
-          ) : t(
-            "attributes.tips.multiSelect",
-            "When creating Multi Select vendor will be able to choose multiple values."
-          ) }),
-          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3("div", { "data-testid": "attribute-form-possible-values-section", children: /* @__PURE__ */ jsx3(PossibleValuesList, {}) })
-        ]
-      }
-    );
-    return /* @__PURE__ */ jsx3(FormProvider, { ...form, children: /* @__PURE__ */ jsxs3(
-      "form",
-      {
-        id: "attribute-form",
-        onSubmit: handleSubmit,
-        "data-testid": "attribute-form",
-        children: [
-          activeTab === "details" && renderDetailsTab(),
-          activeTab === "type" && renderTypeTab()
-        ]
-      }
-    ) });
-  }
-);
-AttributeForm.displayName = "AttributeForm";
-
-// src/pages/attributes/attribute-create/attribute-create.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var AttributeCreateInner = () => {
-  const { t } = useTranslation4();
-  const { handleSuccess } = useRouteModal();
-  const formRef = useRef2(null);
-  const [activeTab, setActiveTab] = useState3("details");
-  const [tabStatuses, setTabStatuses] = useState3({
-    detailsStatus: "not-started",
-    typeStatus: "not-started"
-  });
-  const { mutateAsync, isPending } = useCreateAttribute();
-  const { product_categories: categories = [] } = useProductCategories({
-    limit: 999
-  });
-  const handleSave = async (data) => {
-    await mutateAsync(data, {
-      onSuccess: () => {
-        toast.success(
-          t("attributes.create.successToast", {
-            name: data.name
-          })
-        );
-        handleSuccess("/settings/attributes");
-      },
-      onError: (error) => {
-        toast.error(error.message);
-      }
-    });
-  };
-  const handleTabChange = (value) => {
-    const newTab = value;
-    if (newTab === "type" && tabStatuses.detailsStatus === "not-started") {
-      toast.warning(
-        t(
-          "attributes.create.fillNameWarning",
-          "Please fill in the name first."
-        )
-      );
-      return;
-    }
-    setActiveTab(newTab);
-  };
-  const handleNext = async () => {
-    if (formRef.current) {
-      const isValid = await formRef.current.validateFields(["name"]);
-      if (isValid) {
-        setActiveTab("type");
-      }
-    } else {
-      setActiveTab("type");
-    }
-  };
-  return /* @__PURE__ */ jsxs4(
-    ProgressTabs,
-    {
-      value: activeTab,
-      onValueChange: handleTabChange,
-      className: "flex size-full flex-col overflow-hidden",
-      "data-testid": "attribute-create-progress-tabs",
-      children: [
-        /* @__PURE__ */ jsx4(
-          RouteFocusModal.Header,
-          {
-            "data-testid": "attribute-create-modal-header",
-            children: /* @__PURE__ */ jsxs4(
-              ProgressTabs.List,
-              {
-                className: "justify-start flex w-full items-center",
-                "data-testid": "attribute-create-progress-tabs-list",
-                children: [
-                  /* @__PURE__ */ jsx4(
-                    ProgressTabs.Trigger,
-                    {
-                      value: "details",
-                      status: tabStatuses.detailsStatus,
-                      "data-testid": "attribute-create-details-tab",
-                      children: t("attributes.create.tabs.details", "Details")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx4(
-                    ProgressTabs.Trigger,
-                    {
-                      value: "type",
-                      status: tabStatuses.typeStatus,
-                      "data-testid": "attribute-create-type-tab",
-                      children: t("attributes.create.tabs.type", "Type")
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          RouteFocusModal.Body,
-          {
-            className: "flex flex-1 justify-center overflow-auto px-6 py-16",
-            "data-testid": "attribute-create-modal-body",
-            children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
-              /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-1", children: [
-                /* @__PURE__ */ jsx4(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx4(Heading, { "data-testid": "attribute-create-modal-heading", children: t("attributes.create.header", "Create Attribute") }) }),
-                /* @__PURE__ */ jsx4(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx4(
-                  Text3,
-                  {
-                    size: "small",
-                    className: "text-ui-fg-subtle",
-                    "data-testid": "attribute-create-modal-subtitle",
-                    children: t(
-                      "attributes.create.subtitle",
-                      "Define a new product attribute."
-                    )
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx4(
-                AttributeForm,
-                {
-                  ref: formRef,
-                  onSubmit: handleSave,
-                  categories,
-                  mode: "create",
-                  activeTab,
-                  onFormStateChange: setTabStatuses
-                }
-              )
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx4(RouteFocusModal.Footer, { "data-testid": "attribute-create-modal-footer", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2", children: [
-          /* @__PURE__ */ jsx4(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx4(
-            Button2,
-            {
-              size: "small",
-              variant: "secondary",
-              type: "button",
-              "data-testid": "attribute-create-modal-cancel-button",
-              children: t("actions.cancel", "Cancel")
-            }
-          ) }),
-          activeTab === "details" ? /* @__PURE__ */ jsx4(
-            Button2,
-            {
-              size: "small",
-              type: "button",
-              onClick: handleNext,
-              "data-testid": "attribute-create-modal-next-button",
-              children: t("actions.continue", "Next")
-            }
-          ) : /* @__PURE__ */ jsx4(
-            Button2,
-            {
-              size: "small",
-              type: "submit",
-              form: "attribute-form",
-              isLoading: isPending,
-              "data-testid": "attribute-create-modal-save-button",
-              children: t("actions.save", "Save")
-            }
-          )
-        ] }) })
-      ]
-    }
-  );
-};
-var AttributeCreate = () => {
-  return /* @__PURE__ */ jsx4(RouteFocusModal, { "data-testid": "attribute-create-modal", children: /* @__PURE__ */ jsx4(AttributeCreateInner, {}) });
-};
-export {
-  AttributeCreate as Component
-};