@mercurjs/vendor 2.2.0-canary.11 → 2.2.0-canary.13

package/dist/{[id]-B4YZTANM.js → [id]-US6IULL2.js}

@@ -1,3 +1,7 @@
+import {
+  ProductGeneralSection,
+  ProductMediaSection
+} from "./chunk-4WCPN4OA.js";
 import {
   SectionRow
 } from "./chunk-4TLP3TAA.js";
@@ -32,7 +36,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProductTag
-} from "./chunk-TBYCZRZ7.js";
+} from "./chunk-R5QZO3QY.js";
 import "./chunk-F4OJN2F2.js";
 import "./chunk-LRARA622.js";
 import "./chunk-M6N4ISXL.js";
@@ -42,10 +46,9 @@ import {
 } from "./chunk-VV6IKGCN.js";
 import "./chunk-BXRNZS5K.js";
 import "./chunk-BOZJOOGW.js";
-import "./chunk-T6LHVNWO.js";
+import "./chunk-IQWK723D.js";
 import "./chunk-4S6XGIC6.js";
 import "./chunk-S23FD6FA.js";
-import "./chunk-IQWK723D.js";
 import {
   useCollection
 } from "./chunk-DDJQRV6E.js";
@@ -57,7 +60,7 @@ import {
 import "./chunk-VZUA5SRD.js";
 import "./chunk-VXMOPVRH.js";
 import "./chunk-NBPMNUKZ.js";
-import "./chunk-UORPTGV2.js";
+import "./chunk-SIEEMXNZ.js";
 import "./chunk-Y2MQ5EMD.js";
 import {
   useSalesChannels
@@ -75,14 +78,12 @@ import {
   productAttributesQueryKeys,
   productsQueryKeys,
   useCancelProductEdit,
-  useDeleteProduct,
   useDeleteVariantLazy,
   useProduct,
   useProductAttribute,
   useProductChange,
   useProductVariants,
-  useRemoveProductAttribute,
-  useUpdateProduct
+  useRemoveProductAttribute
 } from "./chunk-JAUZ73XE.js";
 import "./chunk-A5DJIOHN.js";
 import {
@@ -325,28 +326,57 @@ var VariantUpdateBlock = ({
 }) => {
   const { t } = useTranslation();
   const found = variantsById.get(variantId);
-  const title = found?.title || found?.sku || variantId || t("fields.variant", { defaultValue: "Variant" });
+  const variantFallback = t("fields.variant", { defaultValue: "Variant" });
+  const title = found?.title || found?.sku || variantId || variantFallback;
+  const sku = found?.sku && title !== found.sku ? found.sku : void 0;
   const images = isImageList(found?.images) ? found?.images : void 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex flex-col gap-y-3",
-      "data-testid": `product-active-edit-variant-${variantId}`,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          images && images.length > 0 && /* @__PURE__ */ jsx(ImageStrip, { images }),
-          /* @__PURE__ */ jsxs(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: [
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-ui-fg-base", children: t("products.edits.panel.variantUpdated", {
-              defaultValue: "Variant updated"
-            }) }),
-            ": ",
-            title
+  return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-start gap-4 px-6 py-4",
+        "data-testid": `product-active-edit-variant-${variantId}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "small",
+              weight: "plus",
+              leading: "compact",
+              className: "text-ui-fg-subtle w-[160px] shrink-0",
+              children: variantFallback
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+            images && images.length > 0 && /* @__PURE__ */ jsx(ImageStrip, { images }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "small",
+                leading: "compact",
+                className: "text-ui-fg-base font-medium",
+                children: title
+              }
+            ),
+            sku && /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: `\xB7 ${sku}` })
           ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4 pl-1", children: diffs.map((diff, idx) => /* @__PURE__ */ jsx(FieldRow, { diff }, `${variantId}-${diff.field}-${idx}`)) })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    diffs.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 px-6 py-4", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "small",
+          weight: "plus",
+          leading: "compact",
+          className: "text-ui-fg-subtle w-[160px] shrink-0",
+          children: t("labels.updated")
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-y-4", children: diffs.map((diff, idx) => /* @__PURE__ */ jsx(FieldRow, { diff }, `${variantId}-${diff.field}-${idx}`)) })
+    ] })
+  ] });
 };
 var ProductActiveEditSection = ({
   product
@@ -449,29 +479,15 @@ var ProductActiveEditSection = ({
             ),
             /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-y-4", children: productUpdated.map((diff, idx) => /* @__PURE__ */ jsx(FieldRow, { diff }, `${diff.field}-${idx}`)) })
           ] }),
-          variantsUpdated.size > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 px-6 py-4", children: [
-            /* @__PURE__ */ jsx(
-              Text,
-              {
-                size: "small",
-                weight: "plus",
-                leading: "compact",
-                className: "text-ui-fg-subtle w-[160px] shrink-0",
-                children: t("labels.updated")
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-y-6", children: Array.from(variantsUpdated.entries()).map(
-              ([variantId, diffs]) => /* @__PURE__ */ jsx(
-                VariantUpdateBlock,
-                {
-                  variantId,
-                  diffs,
-                  variantsById
-                },
-                variantId
-              )
-            ) })
-          ] }),
+          variantsUpdated.size > 0 && Array.from(variantsUpdated.entries()).map(([variantId, diffs]) => /* @__PURE__ */ jsx(
+            VariantUpdateBlock,
+            {
+              variantId,
+              diffs,
+              variantsById
+            },
+            variantId
+          )),
           added.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 px-6 py-4", children: [
             /* @__PURE__ */ jsx(
               Text,
@@ -558,325 +574,30 @@ var ProductActiveEditSection = ({
   );
 };
 
-// src/pages/products/[id]/_components/product-general-section/product-general-section.tsx
-import { PencilSquare, Trash } from "@medusajs/icons";
-import { Container as Container2, Heading as Heading2, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
+// src/pages/products/[id]/_components/product-organization-section/product-organization-section.tsx
+import { PencilSquare } from "@medusajs/icons";
+import { Badge, Container as Container2, Heading as Heading2, Tooltip } from "@medusajs/ui";
 import { useTranslation as useTranslation2 } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var productStatusColor = (status) => {
-  switch (status) {
-    case "draft":
-      return "grey";
-    case "proposed":
-      return "orange";
-    case "published":
-      return "green";
-    case "rejected":
-      return "red";
-    default:
-      return "grey";
-  }
-};
-var ProductGeneralSection = ({
-  product
-}) => {
-  const { t } = useTranslation2();
-  const prompt = usePrompt2();
-  const navigate = useNavigate();
-  const { mutateAsync } = useDeleteProduct(product.id);
-  const handleDelete = async () => {
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("products.deleteWarning", {
-        title: product.title
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel")
-    });
-    if (!res) {
-      return;
-    }
-    await mutateAsync(void 0, {
-      onSuccess: () => {
-        navigate("..");
-      }
-    });
-  };
-  return /* @__PURE__ */ jsxs2(Container2, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx2(Heading2, { children: product.title }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-4", children: [
-        /* @__PURE__ */ jsx2(StatusBadge, { color: productStatusColor(product.status), children: t(`products.productStatus.${product.status}`) }),
-        /* @__PURE__ */ jsx2(
-          ActionMenu,
-          {
-            groups: [
-              {
-                actions: [
-                  {
-                    label: t("actions.edit"),
-                    to: "edit",
-                    icon: /* @__PURE__ */ jsx2(PencilSquare, {})
-                  }
-                ]
-              },
-              {
-                actions: [
-                  {
-                    label: t("actions.delete"),
-                    onClick: handleDelete,
-                    icon: /* @__PURE__ */ jsx2(Trash, {})
-                  }
-                ]
-              }
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx2(
-      SectionRow,
-      {
-        title: t("fields.description"),
-        value: product.description || "-"
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      SectionRow,
-      {
-        title: t("fields.subtitle"),
-        value: product.subtitle || "-"
-      }
-    ),
-    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.handle"), value: `/${product.handle}` }),
-    /* @__PURE__ */ jsx2(
-      SectionRow,
-      {
-        title: t("fields.discountable"),
-        value: product.discountable ? t("general.true") : t("general.false")
-      }
-    )
-  ] });
-};
-
-// src/pages/products/[id]/_components/product-media-section/product-media-section.tsx
-import { useState } from "react";
-import { PencilSquare as PencilSquare2, ThumbnailBadge } from "@medusajs/icons";
-import {
-  Button as Button2,
-  Checkbox,
-  clx,
-  CommandBar,
-  Container as Container3,
-  Heading as Heading3,
-  Text as Text2,
-  Tooltip,
-  usePrompt as usePrompt3
-} from "@medusajs/ui";
-import { useTranslation as useTranslation3 } from "react-i18next";
 import { Link } from "react-router-dom";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var ProductMediaSection = ({
-  product
-}) => {
-  const { t } = useTranslation3();
-  const prompt = usePrompt3();
-  const [selection, setSelection] = useState({});
-  const media = getMedia(product);
-  const handleCheckedChange = (id) => {
-    setSelection((prev) => {
-      if (prev[id]) {
-        const { [id]: _, ...rest } = prev;
-        return rest;
-      } else {
-        return { ...prev, [id]: true };
-      }
-    });
-  };
-  const { mutateAsync } = useUpdateProduct(product.id);
-  const handleDelete = async () => {
-    const ids = Object.keys(selection);
-    const includingThumbnail = ids.some((id) => media.find((m) => m.id === id)?.isThumbnail);
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: includingThumbnail ? t("products.media.deleteWarningWithThumbnail", {
-        count: ids.length
-      }) : t("products.media.deleteWarning", {
-        count: ids.length
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel")
-    });
-    if (!res) {
-      return;
-    }
-    const mediaToKeep = product.images?.filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
-    await mutateAsync(
-      {
-        images: mediaToKeep,
-        thumbnail: includingThumbnail ? "" : void 0
-      },
-      {
-        onSuccess: () => {
-          setSelection({});
-        }
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx3(Heading3, { level: "h2", children: t("products.media.label") }),
-      /* @__PURE__ */ jsx3(
-        ActionMenu,
-        {
-          groups: [
-            {
-              actions: [
-                {
-                  label: t("actions.edit"),
-                  to: "media?view=edit",
-                  icon: /* @__PURE__ */ jsx3(PencilSquare2, {})
-                }
-              ]
-            }
-          ]
-        }
-      )
-    ] }),
-    media.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", children: media.map((i, index) => {
-      const isSelected = selection[i.id];
-      return /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          className: "group relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px] shadow-elevation-card-rest transition-fg hover:shadow-elevation-card-hover",
-          children: [
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                className: clx(
-                  "invisible absolute right-2 top-2 opacity-0 transition-fg group-hover:visible group-hover:opacity-100",
-                  {
-                    "visible opacity-100": isSelected
-                  }
-                ),
-                children: /* @__PURE__ */ jsx3(
-                  Checkbox,
-                  {
-                    checked: selection[i.id] || false,
-                    onCheckedChange: () => handleCheckedChange(i.id)
-                  }
-                )
-              }
-            ),
-            i.isThumbnail && /* @__PURE__ */ jsx3("div", { className: "absolute left-2 top-2", children: /* @__PURE__ */ jsx3(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx3(ThumbnailBadge, {}) }) }),
-            /* @__PURE__ */ jsx3(
-              Link,
-              {
-                to: `media`,
-                state: { curr: index },
-                children: /* @__PURE__ */ jsx3(
-                  "img",
-                  {
-                    src: i.url,
-                    alt: product.title,
-                    className: "size-full object-cover"
-                  }
-                )
-              }
-            )
-          ]
-        },
-        i.id
-      );
-    }) }) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx3(
-          Text2,
-          {
-            size: "small",
-            leading: "compact",
-            weight: "plus",
-            className: "text-ui-fg-subtle",
-            children: t("products.media.emptyState.header")
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          Text2,
-          {
-            size: "small",
-            className: "text-ui-fg-muted",
-            children: t("products.media.emptyState.description")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx3(
-        Button2,
-        {
-          size: "small",
-          variant: "secondary",
-          asChild: true,
-          children: /* @__PURE__ */ jsx3(Link, { to: "media?view=edit", children: t("products.media.emptyState.action") })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx3(CommandBar, { open: !!Object.keys(selection).length, children: /* @__PURE__ */ jsxs3(CommandBar.Bar, { children: [
-      /* @__PURE__ */ jsx3(CommandBar.Value, { children: t("general.countSelected", {
-        count: Object.keys(selection).length
-      }) }),
-      /* @__PURE__ */ jsx3(CommandBar.Seperator, {}),
-      /* @__PURE__ */ jsx3(
-        CommandBar.Command,
-        {
-          action: handleDelete,
-          label: t("actions.delete"),
-          shortcut: "d"
-        }
-      )
-    ] }) })
-  ] });
-};
-var getMedia = (product) => {
-  const { images = [], thumbnail } = product;
-  const media = (images || []).map((image) => ({
-    id: image.id,
-    url: image.url,
-    isThumbnail: image.url === thumbnail
-  }));
-  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
-    media.unshift({
-      id: "img_thumbnail",
-      url: thumbnail,
-      isThumbnail: true
-    });
-  }
-  return media;
-};
-
-// src/pages/products/[id]/_components/product-organization-section/product-organization-section.tsx
-import { PencilSquare as PencilSquare3 } from "@medusajs/icons";
-import { Badge, Container as Container4, Heading as Heading4, Tooltip as Tooltip2 } from "@medusajs/ui";
-import { useTranslation as useTranslation4 } from "react-i18next";
-import { Link as Link2 } from "react-router-dom";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ProductOrganizationSection = ({
   product
 }) => {
-  const { t } = useTranslation4();
-  return /* @__PURE__ */ jsxs4(
-    Container4,
+  const { t } = useTranslation2();
+  return /* @__PURE__ */ jsxs2(
+    Container2,
     {
       className: "divide-y p-0",
       "data-testid": "product-organization-section",
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             className: "flex items-center justify-between px-6 py-4",
             "data-testid": "product-organization-header",
             children: [
-              /* @__PURE__ */ jsx4(Heading4, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx2(Heading2, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
+              /* @__PURE__ */ jsx2(
                 ActionMenu,
                 {
                   groups: [
@@ -885,7 +606,7 @@ var ProductOrganizationSection = ({
                         {
                           label: t("actions.edit"),
                           to: "organization",
-                          icon: /* @__PURE__ */ jsx4(PencilSquare3, {})
+                          icon: /* @__PURE__ */ jsx2(PencilSquare, {})
                         }
                       ]
                     }
@@ -896,11 +617,11 @@ var ProductOrganizationSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           SectionRow,
           {
             title: t("fields.category"),
-            value: product.categories?.length ? product.categories.map((pcat) => /* @__PURE__ */ jsx4(
+            value: product.categories?.length ? product.categories.map((pcat) => /* @__PURE__ */ jsx2(
               OrganizationTag,
               {
                 label: pcat.name,
@@ -911,11 +632,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-categories-row"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           SectionRow,
           {
             title: t("fields.collection"),
-            value: product.collection ? /* @__PURE__ */ jsx4(
+            value: product.collection ? /* @__PURE__ */ jsx2(
               OrganizationTag,
               {
                 label: product.collection.title,
@@ -925,11 +646,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-collection-row"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           SectionRow,
           {
             title: t("fields.tags"),
-            value: product.tags?.length ? product.tags.map((tag) => /* @__PURE__ */ jsx4(
+            value: product.tags?.length ? product.tags.map((tag) => /* @__PURE__ */ jsx2(
               OrganizationTag,
               {
                 label: tag.value,
@@ -940,11 +661,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-tags-row"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx2(
           SectionRow,
           {
             title: t("fields.type"),
-            value: product.type ? /* @__PURE__ */ jsx4(
+            value: product.type ? /* @__PURE__ */ jsx2(
               OrganizationTag,
               {
                 label: product.type.value,
@@ -959,8 +680,8 @@ var ProductOrganizationSection = ({
   );
 };
 var OrganizationTag = ({ label, to }) => {
-  return /* @__PURE__ */ jsx4(Tooltip2, { content: label, children: /* @__PURE__ */ jsx4(Badge, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx4(
-    Link2,
+  return /* @__PURE__ */ jsx2(Tooltip, { content: label, children: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx2(
+    Link,
     {
       to,
       "data-testid": `organization-tag-${label.toLowerCase().replace(/\s+/g, "-")}`,
@@ -971,27 +692,27 @@ var OrganizationTag = ({ label, to }) => {
 
 // src/pages/products/[id]/_components/product-variant-section/product-variant-section.tsx
 import { useCallback, useMemo as useMemo2 } from "react";
-import { PencilSquare as PencilSquare4, Trash as Trash2 } from "@medusajs/icons";
+import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
 import {
   Badge as Badge2,
-  Button as Button3,
-  Container as Container5,
+  Button as Button2,
+  Container as Container3,
   createDataTableColumnHelper,
-  Heading as Heading5,
+  Heading as Heading3,
   toast as toast2,
-  Tooltip as Tooltip3,
-  usePrompt as usePrompt4
+  Tooltip as Tooltip2,
+  usePrompt as usePrompt2
 } from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
-import { useTranslation as useTranslation5 } from "react-i18next";
-import { Link as Link3, useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { Link as Link2, useNavigate, useSearchParams } from "react-router-dom";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "pv";
 var ProductVariantSection = ({
   product
 }) => {
-  const { t } = useTranslation5();
+  const { t } = useTranslation3();
   const { q, order, offset, created_at, updated_at } = useQueryParams(
     ["q", "order", "offset", "created_at", "updated_at"],
     PREFIX
@@ -1016,21 +737,21 @@ var ProductVariantSection = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs5(Container5, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx5(Heading5, { level: "h2", children: t("products.variants.header") }),
-      /* @__PURE__ */ jsx5(
-        Button3,
+  return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx3(Heading3, { level: "h2", children: t("products.variants.header") }),
+      /* @__PURE__ */ jsx3(
+        Button2,
         {
           size: "small",
           variant: "secondary",
           asChild: true,
           "data-testid": "product-variants-create-button",
-          children: /* @__PURE__ */ jsx5(Link3, { to: "variants/create", children: t("actions.create") })
+          children: /* @__PURE__ */ jsx3(Link2, { to: "variants/create", children: t("actions.create") })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx5("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx3("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx3(
       DataTable,
       {
         data: variants,
@@ -1059,10 +780,10 @@ var ProductVariantSection = ({
 };
 var columnHelper = createDataTableColumnHelper();
 var useColumns = (product) => {
-  const { t } = useTranslation5();
-  const navigate = useNavigate2();
+  const { t } = useTranslation3();
+  const navigate = useNavigate();
   const { mutateAsync } = useDeleteVariantLazy(product.id);
-  const prompt = usePrompt4();
+  const prompt = usePrompt2();
   const [searchParams] = useSearchParams();
   const tableSearchParams = useMemo2(() => {
     const filtered = new URLSearchParams();
@@ -1112,14 +833,14 @@ var useColumns = (product) => {
             (opt) => opt.option?.title === attribute.name
           );
           if (!variantOpt?.value) {
-            return /* @__PURE__ */ jsx5("span", { className: "text-ui-fg-muted", children: "-" });
+            return /* @__PURE__ */ jsx3("span", { className: "text-ui-fg-muted", children: "-" });
           }
-          return /* @__PURE__ */ jsx5(
+          return /* @__PURE__ */ jsx3(
             "div",
             {
               className: "flex flex-wrap items-center gap-1",
               "data-testid": `product-variant-attribute-${attribute.id}-${row.original.id}`,
-              children: /* @__PURE__ */ jsx5(Tooltip3, { content: variantOpt.value, children: /* @__PURE__ */ jsx5(
+              children: /* @__PURE__ */ jsx3(Tooltip2, { content: variantOpt.value, children: /* @__PURE__ */ jsx3(
                 Badge2,
                 {
                   size: "2xsmall",
@@ -1140,7 +861,7 @@ var useColumns = (product) => {
       const variant = _ctx.row.original;
       const mainActions = [
         {
-          icon: /* @__PURE__ */ jsx5(PencilSquare4, {}),
+          icon: /* @__PURE__ */ jsx3(PencilSquare2, {}),
           label: t("actions.edit"),
           onClick: (row) => {
             navigate(
@@ -1156,7 +877,7 @@ var useColumns = (product) => {
       ];
       const secondaryActions = [
         {
-          icon: /* @__PURE__ */ jsx5(Trash2, {}),
+          icon: /* @__PURE__ */ jsx3(Trash, {}),
           label: t("actions.delete"),
           onClick: () => handleDelete(variant.id, variant.title)
         }
@@ -1177,7 +898,7 @@ var useColumns = (product) => {
         header: t("fields.sku"),
         cell: ({ getValue }) => {
           const value = getValue();
-          return value ? value : /* @__PURE__ */ jsx5("span", { className: "text-ui-fg-muted", children: "-" });
+          return value ? value : /* @__PURE__ */ jsx3("span", { className: "text-ui-fg-muted", children: "-" });
         }
       }),
       ...attributeColumns,
@@ -1199,29 +920,29 @@ var useFilters = () => {
 import {
   ListBullet,
   Plus,
-  Trash as Trash3,
+  Trash as Trash2,
   Swatch,
   DropCap,
   InformationCircleSolid,
-  PencilSquare as PencilSquare5
+  PencilSquare as PencilSquare3
 } from "@medusajs/icons";
 import {
   Badge as Badge3,
-  Container as Container6,
-  Heading as Heading6,
-  Text as Text3,
+  Container as Container4,
+  Heading as Heading4,
+  Text as Text2,
   toast as toast3,
-  Tooltip as Tooltip4,
-  usePrompt as usePrompt5
+  Tooltip as Tooltip3,
+  usePrompt as usePrompt3
 } from "@medusajs/ui";
-import { useTranslation as useTranslation6 } from "react-i18next";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useTranslation as useTranslation4 } from "react-i18next";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var AttributeActions = ({
   productId,
   attribute
 }) => {
-  const { t } = useTranslation6();
-  const prompt = usePrompt5();
+  const { t } = useTranslation4();
+  const prompt = usePrompt3();
   const { mutateAsync } = useRemoveProductAttribute(productId, attribute.id);
   const handleDelete = async () => {
     const res = await prompt({
@@ -1241,7 +962,7 @@ var AttributeActions = ({
       }
     });
   };
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx4(
     ActionMenu,
     {
       groups: [
@@ -1250,7 +971,7 @@ var AttributeActions = ({
             {
               label: t("actions.edit"),
               to: `attributes/${attribute.id}/edit`,
-              icon: /* @__PURE__ */ jsx6(PencilSquare5, {})
+              icon: /* @__PURE__ */ jsx4(PencilSquare3, {})
             }
           ]
         },
@@ -1259,7 +980,7 @@ var AttributeActions = ({
             {
               label: t("actions.delete"),
               onClick: handleDelete,
-              icon: /* @__PURE__ */ jsx6(Trash3, {}),
+              icon: /* @__PURE__ */ jsx4(Trash2, {}),
               disabled: attribute.is_required,
               disabledTooltip: attribute.is_required ? t("products.attributeRequiredDeleteDisabledTooltip") : void 0
             }
@@ -1276,37 +997,37 @@ var AttributeGroup = ({
   attributes,
   productId
 }) => {
-  const { t } = useTranslation6();
+  const { t } = useTranslation4();
   if (!attributes.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-y-4 px-3 py-4", children: [
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-3 px-3", children: [
-      /* @__PURE__ */ jsx6("div", { className: "text-ui-fg-muted flex h-8 w-8 items-center justify-center rounded-lg border border-ui-border-base bg-ui-bg-component", children: icon }),
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsx6(Text3, { size: "small", weight: "plus", leading: "compact", children: title }),
-        /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: description })
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-4 px-3 py-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-3 px-3", children: [
+      /* @__PURE__ */ jsx4("div", { className: "text-ui-fg-muted flex h-8 w-8 items-center justify-center rounded-lg border border-ui-border-base bg-ui-bg-component", children: icon }),
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx4(Text2, { size: "small", weight: "plus", leading: "compact", children: title }),
+        /* @__PURE__ */ jsx4(Text2, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: description })
       ] })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "flex flex-col gap-y-0", children: /* @__PURE__ */ jsx6("div", { className: "overflow-hidden rounded-xl border border-ui-border-base", children: attributes.map((attr, index) => {
+    /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-y-0", children: /* @__PURE__ */ jsx4("div", { className: "overflow-hidden rounded-xl border border-ui-border-base", children: attributes.map((attr, index) => {
       const values = attr.values?.map((v) => v.name) ?? [];
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx4(
         "div",
         {
           className: index < attributes.length - 1 ? "border-b border-ui-border-base" : "",
-          children: /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-[1fr_1fr_28px] items-center gap-4 bg-ui-bg-component px-4 py-3", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "text-ui-fg-subtle flex items-center gap-x-2", children: [
-              /* @__PURE__ */ jsx6(Text3, { size: "small", weight: "plus", leading: "compact", children: attr.name }),
-              attr.description && /* @__PURE__ */ jsx6(Tooltip4, { content: attr.description, children: /* @__PURE__ */ jsx6("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx6(InformationCircleSolid, {}) }) }),
-              attr.is_required && /* @__PURE__ */ jsx6(
-                Tooltip4,
+          children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[1fr_1fr_28px] items-center gap-4 bg-ui-bg-component px-4 py-3", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "text-ui-fg-subtle flex items-center gap-x-2", children: [
+              /* @__PURE__ */ jsx4(Text2, { size: "small", weight: "plus", leading: "compact", children: attr.name }),
+              attr.description && /* @__PURE__ */ jsx4(Tooltip3, { content: attr.description, children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) }) }),
+              attr.is_required && /* @__PURE__ */ jsx4(
+                Tooltip3,
                 {
                   content: t("products.attributeRequiredByMarketplace"),
-                  children: /* @__PURE__ */ jsx6("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx6(InformationCircleSolid, {}) })
+                  children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1", children: ["single_select", "multi_select"].includes(attr.type) ? values.map((val) => /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: ["single_select", "multi_select"].includes(attr.type) ? values.map((val) => /* @__PURE__ */ jsx4(
               Badge3,
               {
                 size: "2xsmall",
@@ -1314,8 +1035,8 @@ var AttributeGroup = ({
                 children: val
               },
               val
-            )) : /* @__PURE__ */ jsx6(
-              Text3,
+            )) : /* @__PURE__ */ jsx4(
+              Text2,
               {
                 size: "small",
                 leading: "compact",
@@ -1323,7 +1044,7 @@ var AttributeGroup = ({
                 children: values.join(", ") || "-"
               }
             ) }),
-            /* @__PURE__ */ jsx6(AttributeActions, { productId, attribute: attr })
+            /* @__PURE__ */ jsx4(AttributeActions, { productId, attribute: attr })
           ] })
         },
         attr.id
@@ -1334,19 +1055,19 @@ var AttributeGroup = ({
 var ProductAttributeSection = ({
   product
 }) => {
-  const { t } = useTranslation6();
+  const { t } = useTranslation4();
   const allAttributes = product.attributes ?? [];
   const variantAttributes = allAttributes.filter((a) => a.is_variant_axis);
   const infoAttributes = allAttributes.filter((a) => !a.is_variant_axis);
   const isEmpty = !variantAttributes.length && !infoAttributes.length;
-  return /* @__PURE__ */ jsxs6(Container6, { className: "p-0", children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4(Container4, { className: "p-0", children: [
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         className: `flex items-center justify-between px-6 py-4${isEmpty ? "" : " border-b border-ui-border-base"}`,
         children: [
-          /* @__PURE__ */ jsx6(Heading6, { level: "h2", children: t("products.attributes") }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx4(Heading4, { level: "h2", children: t("products.attributes") }),
+          /* @__PURE__ */ jsx4(
             ActionMenu,
             {
               groups: [
@@ -1355,12 +1076,12 @@ var ProductAttributeSection = ({
                     {
                       label: t("products.create.attributes.addExisting"),
                       to: "attributes/add",
-                      icon: /* @__PURE__ */ jsx6(ListBullet, {})
+                      icon: /* @__PURE__ */ jsx4(ListBullet, {})
                     },
                     {
                       label: t("products.create.attributes.createNew"),
                       to: "attributes/create",
-                      icon: /* @__PURE__ */ jsx6(Plus, {})
+                      icon: /* @__PURE__ */ jsx4(Plus, {})
                     }
                   ]
                 }
@@ -1370,21 +1091,21 @@ var ProductAttributeSection = ({
         ]
       }
     ),
-    variantAttributes.length > 0 && /* @__PURE__ */ jsx6(
+    variantAttributes.length > 0 && /* @__PURE__ */ jsx4(
       AttributeGroup,
       {
-        icon: /* @__PURE__ */ jsx6(Swatch, {}),
+        icon: /* @__PURE__ */ jsx4(Swatch, {}),
         title: t("products.create.tabs.variants"),
         description: t("products.attributeVariantsDescription"),
         attributes: variantAttributes,
         productId: product.id
       }
     ),
-    variantAttributes.length > 0 && infoAttributes.length > 0 && /* @__PURE__ */ jsx6("div", { className: "border-t border-dashed border-ui-border-base" }),
-    infoAttributes.length > 0 && /* @__PURE__ */ jsx6(
+    variantAttributes.length > 0 && infoAttributes.length > 0 && /* @__PURE__ */ jsx4("div", { className: "border-t border-dashed border-ui-border-base" }),
+    infoAttributes.length > 0 && /* @__PURE__ */ jsx4(
       AttributeGroup,
       {
-        icon: /* @__PURE__ */ jsx6(DropCap, {}),
+        icon: /* @__PURE__ */ jsx4(DropCap, {}),
         title: t("products.attributeProductInformation"),
         description: t("products.attributeProductInformationDescription"),
         attributes: infoAttributes,
@@ -1395,19 +1116,19 @@ var ProductAttributeSection = ({
 };
 
 // src/pages/products/[id]/_components/product-shipping-profile-section/product-shipping-profile-section.tsx
-import { PencilSquare as PencilSquare6, ShoppingBag } from "@medusajs/icons";
-import { Container as Container7, Heading as Heading7 } from "@medusajs/ui";
-import { useTranslation as useTranslation7 } from "react-i18next";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { PencilSquare as PencilSquare4, ShoppingBag } from "@medusajs/icons";
+import { Container as Container5, Heading as Heading5 } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ProductShippingProfileSection = ({
   product
 }) => {
-  const { t } = useTranslation7();
+  const { t } = useTranslation5();
   const shippingProfile = product.shipping_profile;
-  return /* @__PURE__ */ jsxs7(Container7, { className: "p-0", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx7(Heading7, { level: "h2", children: t("products.shippingProfile.header") }),
-      /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5(Container5, { className: "p-0", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx5(Heading5, { level: "h2", children: t("products.shippingProfile.header") }),
+      /* @__PURE__ */ jsx5(
         ActionMenu,
         {
           groups: [
@@ -1416,7 +1137,7 @@ var ProductShippingProfileSection = ({
                 {
                   label: t("actions.edit"),
                   to: "shipping-profile",
-                  icon: /* @__PURE__ */ jsx7(PencilSquare6, {})
+                  icon: /* @__PURE__ */ jsx5(PencilSquare4, {})
                 }
               ]
             }
@@ -1424,38 +1145,38 @@ var ProductShippingProfileSection = ({
         }
       )
     ] }),
-    shippingProfile && /* @__PURE__ */ jsx7(
+    shippingProfile && /* @__PURE__ */ jsx5(
       SidebarLink,
       {
         to: `/settings/locations/shipping-profiles/${shippingProfile.id}`,
         labelKey: shippingProfile.name,
         descriptionKey: shippingProfile.type,
-        icon: /* @__PURE__ */ jsx7(ShoppingBag, {})
+        icon: /* @__PURE__ */ jsx5(ShoppingBag, {})
       }
     )
   ] });
 };
 
 // src/pages/products/[id]/_components/product-sales-channel-section/product-sales-channel-section.tsx
-import { Channels, PencilSquare as PencilSquare7 } from "@medusajs/icons";
-import { Container as Container8, Heading as Heading8, Text as Text4, Tooltip as Tooltip5 } from "@medusajs/ui";
-import { Trans, useTranslation as useTranslation8 } from "react-i18next";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Channels, PencilSquare as PencilSquare5 } from "@medusajs/icons";
+import { Container as Container6, Heading as Heading6, Text as Text3, Tooltip as Tooltip4 } from "@medusajs/ui";
+import { Trans, useTranslation as useTranslation6 } from "react-i18next";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductSalesChannelSection = ({
   product
 }) => {
   const { count } = useSalesChannels();
-  const { t } = useTranslation8();
+  const { t } = useTranslation6();
   const availableInSalesChannels = product.sales_channels?.map((sc) => ({
     id: sc.id,
     name: sc.name
   })) ?? [];
   const firstChannels = availableInSalesChannels.slice(0, 3);
   const restChannels = availableInSalesChannels.slice(3);
-  return /* @__PURE__ */ jsxs8(Container8, { className: "flex flex-col gap-y-4 px-6 py-4", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx8(Heading8, { level: "h2", children: t("fields.sales_channels") }),
-      /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs6(Container6, { className: "flex flex-col gap-y-4 px-6 py-4", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx6(Heading6, { level: "h2", children: t("fields.sales_channels") }),
+      /* @__PURE__ */ jsx6(
         ActionMenu,
         {
           groups: [
@@ -1464,7 +1185,7 @@ var ProductSalesChannelSection = ({
                 {
                   label: t("actions.edit"),
                   to: "sales-channels",
-                  icon: /* @__PURE__ */ jsx8(PencilSquare7, {})
+                  icon: /* @__PURE__ */ jsx6(PencilSquare5, {})
                 }
               ]
             }
@@ -1472,16 +1193,16 @@ var ProductSalesChannelSection = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-[28px_1fr] items-center gap-x-3", children: [
-      /* @__PURE__ */ jsx8("div", { className: "bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx8("div", { className: "bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]", children: /* @__PURE__ */ jsx8(Channels, { className: "text-ui-fg-subtle" }) }) }),
-      availableInSalesChannels.length > 0 ? /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-x-1", children: [
-        /* @__PURE__ */ jsx8(Text4, { size: "small", leading: "compact", children: firstChannels.map((sc) => sc.name).join(", ") }),
-        restChannels.length > 0 && /* @__PURE__ */ jsx8(
-          Tooltip5,
+    /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-[28px_1fr] items-center gap-x-3", children: [
+      /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md", children: /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]", children: /* @__PURE__ */ jsx6(Channels, { className: "text-ui-fg-subtle" }) }) }),
+      availableInSalesChannels.length > 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", children: [
+        /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", children: firstChannels.map((sc) => sc.name).join(", ") }),
+        restChannels.length > 0 && /* @__PURE__ */ jsx6(
+          Tooltip4,
           {
-            content: /* @__PURE__ */ jsx8("ul", { children: restChannels.map((sc) => /* @__PURE__ */ jsx8("li", { children: sc.name }, sc.id)) }),
-            children: /* @__PURE__ */ jsx8(
-              Text4,
+            content: /* @__PURE__ */ jsx6("ul", { children: restChannels.map((sc) => /* @__PURE__ */ jsx6("li", { children: sc.name }, sc.id)) }),
+            children: /* @__PURE__ */ jsx6(
+              Text3,
               {
                 size: "small",
                 leading: "compact",
@@ -1491,9 +1212,9 @@ var ProductSalesChannelSection = ({
             )
           }
         )
-      ] }) : /* @__PURE__ */ jsx8(Text4, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.noSalesChannels") })
+      ] }) : /* @__PURE__ */ jsx6(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: t("products.noSalesChannels") })
     ] }),
-    /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsx8(Text4, { className: "text-ui-fg-subtle", size: "small", leading: "compact", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6(Text3, { className: "text-ui-fg-subtle", size: "small", leading: "compact", children: /* @__PURE__ */ jsx6(
       Trans,
       {
         i18nKey: "sales_channels.availableIn",
@@ -1502,14 +1223,14 @@ var ProductSalesChannelSection = ({
           y: count ?? 0
         },
         components: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: "text-ui-fg-base txt-compact-medium-plus"
             },
             "x"
           ),
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: "text-ui-fg-base txt-compact-medium-plus"
@@ -1523,7 +1244,7 @@ var ProductSalesChannelSection = ({
 };
 
 // src/pages/products/[id]/product-detail-page.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
@@ -1535,21 +1256,21 @@ var Root = ({ children }) => {
     }
   );
   if (isLoading || !product) {
-    return /* @__PURE__ */ jsx9(TwoColumnPageSkeleton, { mainSections: 4, sidebarSections: 3 });
+    return /* @__PURE__ */ jsx7(TwoColumnPageSkeleton, { mainSections: 4, sidebarSections: 3 });
   }
   if (isError) {
     throw error;
   }
-  return Children.count(children) > 0 ? /* @__PURE__ */ jsx9(TwoColumnPage, { data: product, "data-testid": "product-detail-page", children }) : /* @__PURE__ */ jsxs9(TwoColumnPage, { data: product, "data-testid": "product-detail-page", children: [
-    /* @__PURE__ */ jsxs9(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
-      /* @__PURE__ */ jsx9(ProductActiveEditSection, { product }),
-      /* @__PURE__ */ jsx9(ProductGeneralSection, { product }),
-      /* @__PURE__ */ jsx9(ProductMediaSection, { product }),
-      /* @__PURE__ */ jsx9(ProductVariantSection, { product })
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx7(TwoColumnPage, { data: product, "data-testid": "product-detail-page", children }) : /* @__PURE__ */ jsxs7(TwoColumnPage, { data: product, "data-testid": "product-detail-page", children: [
+    /* @__PURE__ */ jsxs7(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
+      /* @__PURE__ */ jsx7(ProductActiveEditSection, { product }),
+      /* @__PURE__ */ jsx7(ProductGeneralSection, { product }),
+      /* @__PURE__ */ jsx7(ProductMediaSection, { product }),
+      /* @__PURE__ */ jsx7(ProductVariantSection, { product })
     ] }),
-    /* @__PURE__ */ jsxs9(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
-      /* @__PURE__ */ jsx9(ProductOrganizationSection, { product }),
-      /* @__PURE__ */ jsx9(ProductAttributeSection, { product })
+    /* @__PURE__ */ jsxs7(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
+      /* @__PURE__ */ jsx7(ProductOrganizationSection, { product }),
+      /* @__PURE__ */ jsx7(ProductAttributeSection, { product })
     ] })
   ] });
 };