@mercurjs/admin 2.2.0 → 2.2.1-canary.0

package/dist/{chunk-VWT7NSJO.js → chunk-LU7SPDKK.js}

@@ -1,6 +1,6 @@
 import {
   ProductMediaSection
-} from "./chunk-EDCGEQ4V.js";
+} from "./chunk-PEPANIBF.js";
 import {
   SectionRow
 } from "./chunk-3XPXUIK3.js";
@@ -18,21 +18,25 @@ import {
 } from "./chunk-THHRRYRS.js";
 import {
   require_dist
-} from "./chunk-52KJSIHS.js";
+} from "./chunk-4UQMRTSC.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-GRFWCCUW.js";
+} from "./chunk-IZYVY2QV.js";
 import {
   useSeller
 } from "./chunk-6HHMZ2QV.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
+import {
+  useProductAttributes
+} from "./chunk-XPTKT2SY.js";
 import {
   TwoColumnPageSkeleton
 } from "./chunk-INNFZYX2.js";
 import {
+  useBatchProductAttributes,
   useCancelProductChange,
   useConfirmProduct,
   useConfirmProductChange,
@@ -42,9 +46,8 @@ import {
   useProductChange,
   useProductVariants,
   useRejectProduct,
-  useRemoveAttributeFromProduct,
   useRequestProductChanges
-} from "./chunk-QRN63LUS.js";
+} from "./chunk-QE57IFSR.js";
 import {
   sdk
 } from "./chunk-JTAECZCT.js";
@@ -461,216 +464,50 @@ var ProductActiveRequestSection = ({
 };
 
 // src/pages/products/product-detail/components/product-attribute-section/product-attribute-section.tsx
+import { toast as toast3 } from "@medusajs/ui";
 import {
-  Plus,
-  Trash,
-  Swatch,
-  DropCap,
-  InformationCircleSolid,
-  PencilSquare
-} from "@medusajs/icons";
-import {
-  Badge,
-  Container as Container2,
-  Heading as Heading2,
-  Text as Text3,
-  toast as toast3,
-  Tooltip,
-  usePrompt
-} from "@medusajs/ui";
-import { useTranslation as useTranslation4 } from "react-i18next";
-import { DisplayExtensionZone as DisplayExtensionZone2 } from "@mercurjs/dashboard-shared";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var AttributeActions = ({
-  productId,
-  attribute
+  ProductAttributeSection as SharedProductAttributeSection
+} from "@mercurjs/dashboard-shared";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ProductAttributeSection = ({
+  product
 }) => {
-  const { t } = useTranslation4();
-  const prompt = usePrompt();
-  const { mutateAsync } = useRemoveAttributeFromProduct(productId, attribute.id);
-  const handleDelete = async () => {
-    const res = await prompt({
-      title: t("general.areYouSure"),
-      description: t("products.deleteAttributeWarning", {
-        title: attribute.name
-      }),
-      confirmText: t("actions.delete"),
-      cancelText: t("actions.cancel")
-    });
-    if (!res) {
-      return;
+  const categoryId = product.categories?.[0]?.id;
+  const { product_attributes } = useProductAttributes(
+    { category_id: categoryId, is_required: true },
+    { enabled: !!categoryId }
+  );
+  const { mutateAsync } = useBatchProductAttributes(product.id);
+  const onDeleteAttribute = async (attribute) => {
+    try {
+      await mutateAsync(
+        { remove: [attribute.id] },
+        {
+          onError: (error) => {
+            toast3.error(error.message);
+          }
+        }
+      );
+    } catch {
     }
-    await mutateAsync(void 0, {
-      onError: (error) => {
-        toast3.error(error.message);
-      }
-    });
   };
   return /* @__PURE__ */ jsx4(
-    ActionMenu,
+    SharedProductAttributeSection,
     {
-      groups: [
-        {
-          actions: [
-            {
-              label: t("actions.edit"),
-              to: `attributes/${attribute.id}/edit`,
-              icon: /* @__PURE__ */ jsx4(PencilSquare, {})
-            }
-          ]
-        },
-        ...attribute.is_required ? [] : [
-          {
-            actions: [
-              {
-                label: t("actions.delete"),
-                onClick: handleDelete,
-                icon: /* @__PURE__ */ jsx4(Trash, {})
-              }
-            ]
-          }
-        ]
-      ]
+      product,
+      requiredAttributes: product_attributes,
+      onDeleteAttribute
     }
   );
 };
-var AttributeValue = ({
-  attribute
-}) => {
-  const { t } = useTranslation4();
-  const values = attribute.values?.map((v) => v.name) ?? [];
-  if (["single_select", "multi_select"].includes(attribute.type)) {
-    return /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1", children: values.map((val) => /* @__PURE__ */ jsx4(
-      Badge,
-      {
-        size: "2xsmall",
-        className: "flex min-w-[20px] items-center justify-center",
-        children: val
-      },
-      val
-    )) });
-  }
-  const textValue = attribute.type === "toggle" ? values.map((val) => val === "true" ? t("general.yes") : t("general.no")).join(", ") || "-" : values.join(", ") || "-";
-  return /* @__PURE__ */ jsx4(Tooltip, { content: /* @__PURE__ */ jsx4("span", { className: "break-all", children: textValue }), children: /* @__PURE__ */ jsx4(
-    Text3,
-    {
-      size: "small",
-      leading: "compact",
-      className: "line-clamp-3 min-w-0 break-words text-ui-fg-subtle",
-      children: textValue
-    }
-  ) });
-};
-var AttributeGroup = ({
-  icon,
-  title,
-  description,
-  attributes,
-  productId
-}) => {
-  const { t } = useTranslation4();
-  if (!attributes.length) {
-    return null;
-  }
-  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(Text3, { size: "small", weight: "plus", leading: "compact", children: title }),
-        /* @__PURE__ */ jsx4(Text3, { size: "small", leading: "compact", className: "text-ui-fg-subtle", children: description })
-      ] })
-    ] }),
-    /* @__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) => {
-      return /* @__PURE__ */ jsx4(
-        "div",
-        {
-          className: index < attributes.length - 1 ? "border-b border-ui-border-base" : "",
-          children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_28px] items-center gap-4 px-4 py-3 bg-ui-bg-component", children: [
-            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-x-2 text-ui-fg-subtle", children: [
-              /* @__PURE__ */ jsx4(Text3, { size: "small", weight: "plus", leading: "compact", children: attr.name }),
-              attr.description && /* @__PURE__ */ jsx4(Tooltip, { content: attr.description, children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) }) }),
-              attr.is_required && /* @__PURE__ */ jsx4(Tooltip, { content: t("products.attributeRequiredByMarketplace"), children: /* @__PURE__ */ jsx4("span", { className: "text-ui-fg-muted flex items-center", children: /* @__PURE__ */ jsx4(InformationCircleSolid, {}) }) })
-            ] }),
-            /* @__PURE__ */ jsx4(AttributeValue, { attribute: attr }),
-            /* @__PURE__ */ jsx4(AttributeActions, { productId, attribute: attr })
-          ] })
-        },
-        attr.id
-      );
-    }) }) })
-  ] });
-};
-var ProductAttributeSection = ({
-  product
-}) => {
-  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__ */ jsxs4(Container2, { 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__ */ jsx4(Heading2, { level: "h2", children: t("products.attributes") }),
-          /* @__PURE__ */ jsx4(
-            ActionMenu,
-            {
-              groups: [
-                {
-                  actions: [
-                    {
-                      label: t("products.create.attributes.addExisting"),
-                      to: "attributes/add",
-                      icon: /* @__PURE__ */ jsx4(Plus, {})
-                    },
-                    {
-                      label: t("products.create.attributes.createNew"),
-                      to: "attributes/create",
-                      icon: /* @__PURE__ */ jsx4(PencilSquare, {})
-                    }
-                  ]
-                }
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    variantAttributes.length > 0 && /* @__PURE__ */ jsx4(
-      AttributeGroup,
-      {
-        icon: /* @__PURE__ */ jsx4(Swatch, {}),
-        title: t("products.attributeVariations"),
-        description: t("products.attributeVariantsDescription"),
-        attributes: variantAttributes,
-        productId: product.id
-      }
-    ),
-    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__ */ jsx4(DropCap, {}),
-        title: t("products.attributeProductInformation"),
-        description: t("products.attributeProductInformationDescription"),
-        attributes: infoAttributes,
-        productId: product.id
-      }
-    ),
-    /* @__PURE__ */ jsx4(DisplayExtensionZone2, { model: "product", zone: "attributes", data: product })
-  ] });
-};
 
 // src/pages/products/product-detail/components/product-general-section/product-general-section.tsx
-import { PencilSquare as PencilSquare2, Trash as Trash2 } from "@medusajs/icons";
-import { Container as Container3, Heading as Heading3, StatusBadge, usePrompt as usePrompt2 } from "@medusajs/ui";
-import { useTranslation as useTranslation5 } from "react-i18next";
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { Container as Container2, Heading as Heading2, StatusBadge, usePrompt } from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { DisplayExtensionZone as DisplayExtensionZone3, DisplayField } from "@mercurjs/dashboard-shared";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { DisplayExtensionZone as DisplayExtensionZone2, DisplayField } from "@mercurjs/dashboard-shared";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var GENERAL_FIELD_IDS = [
   "title",
   "status",
@@ -696,8 +533,8 @@ var productStatusColor = (status) => {
 var ProductGeneralSection = ({
   product
 }) => {
-  const { t } = useTranslation5();
-  const prompt = usePrompt2();
+  const { t } = useTranslation4();
+  const prompt = usePrompt();
   const navigate = useNavigate();
   const { mutateAsync } = useDeleteProduct(product.id);
   const handleDelete = async () => {
@@ -718,15 +555,15 @@ var ProductGeneralSection = ({
       }
     });
   };
-  return /* @__PURE__ */ jsxs5(Container3, { className: "divide-y p-0", "data-testid": "product-general-section", children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(Container2, { className: "divide-y p-0", "data-testid": "product-general-section", children: [
+    /* @__PURE__ */ jsxs4(
       "div",
       {
         className: "flex items-center justify-between px-6 py-4",
         "data-testid": "product-general-header",
         children: [
-          /* @__PURE__ */ jsx5(DisplayField, { model: "product", zone: "general", id: "title", data: product, children: /* @__PURE__ */ jsx5(Heading3, { "data-testid": "product-general-title", children: product.title }) }),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsx5(DisplayField, { model: "product", zone: "general", id: "title", data: product, children: /* @__PURE__ */ jsx5(Heading2, { "data-testid": "product-general-title", children: product.title }) }),
+          /* @__PURE__ */ jsxs4(
             "div",
             {
               className: "flex items-center gap-x-4",
@@ -758,7 +595,7 @@ var ProductGeneralSection = ({
                           {
                             label: t("actions.edit"),
                             to: "edit",
-                            icon: /* @__PURE__ */ jsx5(PencilSquare2, {})
+                            icon: /* @__PURE__ */ jsx5(PencilSquare, {})
                           }
                         ]
                       },
@@ -767,7 +604,7 @@ var ProductGeneralSection = ({
                           {
                             label: t("actions.delete"),
                             onClick: handleDelete,
-                            icon: /* @__PURE__ */ jsx5(Trash2, {})
+                            icon: /* @__PURE__ */ jsx5(Trash, {})
                           }
                         ]
                       }
@@ -823,7 +660,7 @@ var ProductGeneralSection = ({
       }
     ),
     /* @__PURE__ */ jsx5(
-      DisplayExtensionZone3,
+      DisplayExtensionZone2,
       {
         model: "product",
         zone: "general",
@@ -835,29 +672,29 @@ var ProductGeneralSection = ({
 };
 
 // src/pages/products/product-detail/components/product-organization-section/product-organization-section.tsx
-import { PencilSquare as PencilSquare3 } from "@medusajs/icons";
-import { Badge as Badge2, Container as Container4, Heading as Heading4, Tooltip as Tooltip2 } from "@medusajs/ui";
-import { useTranslation as useTranslation6 } from "react-i18next";
+import { PencilSquare as PencilSquare2 } from "@medusajs/icons";
+import { Badge, Container as Container3, Heading as Heading3, Tooltip } from "@medusajs/ui";
+import { useTranslation as useTranslation5 } from "react-i18next";
 import { Link } from "react-router-dom";
-import { DisplayExtensionZone as DisplayExtensionZone4 } from "@mercurjs/dashboard-shared";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { DisplayExtensionZone as DisplayExtensionZone3 } from "@mercurjs/dashboard-shared";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var ProductOrganizationSection = ({
   product
 }) => {
-  const { t } = useTranslation6();
-  return /* @__PURE__ */ jsxs6(
-    Container4,
+  const { t } = useTranslation5();
+  return /* @__PURE__ */ jsxs5(
+    Container3,
     {
       className: "divide-y p-0",
       "data-testid": "product-organization-section",
       children: [
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             className: "flex items-center justify-between px-6 py-4",
             "data-testid": "product-organization-header",
             children: [
-              /* @__PURE__ */ jsx6(Heading4, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
+              /* @__PURE__ */ jsx6(Heading3, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
               /* @__PURE__ */ jsx6(
                 ActionMenu,
                 {
@@ -867,7 +704,7 @@ var ProductOrganizationSection = ({
                         {
                           label: t("actions.edit"),
                           to: "organization",
-                          icon: /* @__PURE__ */ jsx6(PencilSquare3, {})
+                          icon: /* @__PURE__ */ jsx6(PencilSquare2, {})
                         }
                       ]
                     }
@@ -936,13 +773,13 @@ var ProductOrganizationSection = ({
             "data-testid": "product-type-row"
           }
         ),
-        /* @__PURE__ */ jsx6(DisplayExtensionZone4, { model: "product", zone: "organize", data: product })
+        /* @__PURE__ */ jsx6(DisplayExtensionZone3, { model: "product", zone: "organize", data: product })
       ]
     }
   );
 };
 var OrganizationTag = ({ label, to }) => {
-  return /* @__PURE__ */ jsx6(Tooltip2, { content: label, children: /* @__PURE__ */ jsx6(Badge2, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx6(Tooltip, { content: label, children: /* @__PURE__ */ jsx6(Badge, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx6(
     Link,
     {
       to,
@@ -954,28 +791,28 @@ var OrganizationTag = ({ label, to }) => {
 
 // src/pages/products/product-detail/components/product-variant-section/product-variant-section.tsx
 import { useCallback, useMemo } from "react";
-import { PencilSquare as PencilSquare4, Trash as Trash3 } from "@medusajs/icons";
-import { DisplayExtensionZone as DisplayExtensionZone5 } from "@mercurjs/dashboard-shared";
+import { PencilSquare as PencilSquare3, Trash as Trash2 } from "@medusajs/icons";
+import { DisplayExtensionZone as DisplayExtensionZone4 } from "@mercurjs/dashboard-shared";
 import {
-  Badge as Badge3,
+  Badge as Badge2,
   Button as Button3,
-  Container as Container5,
-  Heading as Heading5,
+  Container as Container4,
+  Heading as Heading4,
   toast as toast4,
-  Tooltip as Tooltip3,
-  usePrompt as usePrompt3
+  Tooltip as Tooltip2,
+  usePrompt as usePrompt2
 } from "@medusajs/ui";
 import { keepPreviousData } from "@tanstack/react-query";
 import { createColumnHelper } from "@tanstack/react-table";
-import { useTranslation as useTranslation7 } from "react-i18next";
+import { useTranslation as useTranslation6 } from "react-i18next";
 import { Link as Link2, useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "pv";
 var ProductVariantSection = ({
   product
 }) => {
-  const { t } = useTranslation7();
+  const { t } = useTranslation6();
   const { q, order, offset, created_at, updated_at } = useQueryParams(
     ["q", "order", "offset", "created_at", "updated_at"],
     PREFIX
@@ -1009,9 +846,9 @@ var ProductVariantSection = ({
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs7(Container5, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx7(Heading5, { level: "h2", children: t("products.variants.header") }),
+  return /* @__PURE__ */ jsxs6(Container4, { className: "divide-y p-0", "data-testid": "product-variant-section", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsx7(Heading4, { level: "h2", children: t("products.variants.header") }),
       /* @__PURE__ */ jsx7(
         Button3,
         {
@@ -1044,15 +881,15 @@ var ProductVariantSection = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(DisplayExtensionZone5, { model: "product", zone: "variants", data: product })
+    /* @__PURE__ */ jsx7(DisplayExtensionZone4, { model: "product", zone: "variants", data: product })
   ] });
 };
 var columnHelper = createColumnHelper();
 var useColumns = (product) => {
-  const { t } = useTranslation7();
+  const { t } = useTranslation6();
   const navigate = useNavigate2();
   const { mutateAsync } = useDeleteVariantLazy(product.id);
-  const prompt = usePrompt3();
+  const prompt = usePrompt2();
   const [searchParams] = useSearchParams();
   const tableSearchParams = useMemo(() => {
     const filtered = new URLSearchParams();
@@ -1108,8 +945,8 @@ var useColumns = (product) => {
             {
               className: "flex flex-wrap items-center gap-1",
               "data-testid": `product-variant-attribute-${attribute.id}-${row.original.id}`,
-              children: /* @__PURE__ */ jsx7(Tooltip3, { content: variantOpt.value, children: /* @__PURE__ */ jsx7(
-                Badge3,
+              children: /* @__PURE__ */ jsx7(Tooltip2, { content: variantOpt.value, children: /* @__PURE__ */ jsx7(
+                Badge2,
                 {
                   size: "2xsmall",
                   title: variantOpt.value,
@@ -1131,7 +968,7 @@ var useColumns = (product) => {
         header: t("fields.title"),
         cell: ({ getValue }) => {
           const value = getValue();
-          return /* @__PURE__ */ jsxs7("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
+          return /* @__PURE__ */ jsxs6("div", { className: "flex h-full w-full max-w-[250px] items-center gap-x-3 overflow-hidden", children: [
             /* @__PURE__ */ jsx7("div", { className: "w-fit flex-shrink-0", children: /* @__PURE__ */ jsx7(Thumbnail, { src: product.thumbnail }) }),
             value ? /* @__PURE__ */ jsx7("span", { title: value, className: "truncate", children: value }) : /* @__PURE__ */ jsx7("span", { className: "text-ui-fg-muted", children: "-" })
           ] });
@@ -1155,7 +992,7 @@ var useColumns = (product) => {
               {
                 actions: [
                   {
-                    icon: /* @__PURE__ */ jsx7(PencilSquare4, {}),
+                    icon: /* @__PURE__ */ jsx7(PencilSquare3, {}),
                     label: t("actions.edit"),
                     onClick: () => navigate(
                       `edit-variant?variant_id=${row.original.id}&${tableSearchParams.toString()}`,
@@ -1171,7 +1008,7 @@ var useColumns = (product) => {
               {
                 actions: [
                   {
-                    icon: /* @__PURE__ */ jsx7(Trash3, {}),
+                    icon: /* @__PURE__ */ jsx7(Trash2, {}),
                     label: t("actions.delete"),
                     onClick: () => handleDelete(row.original.id, row.original.title ?? "")
                   }
@@ -1186,7 +1023,7 @@ var useColumns = (product) => {
   );
 };
 var useFilters = () => {
-  const { t } = useTranslation7();
+  const { t } = useTranslation6();
   return useMemo(
     () => [
       { key: "created_at", label: t("fields.createdAt"), type: "date" },
@@ -1196,7 +1033,7 @@ var useFilters = () => {
   );
 };
 var useOrderBy = () => {
-  const { t } = useTranslation7();
+  const { t } = useTranslation6();
   return useMemo(
     () => [
       { key: "title", label: t("fields.title") },
@@ -1207,7 +1044,7 @@ var useOrderBy = () => {
 };
 
 // src/pages/products/product-detail/product-detail.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
@@ -1244,7 +1081,7 @@ var Root = ({ children }) => {
       "data-testid": "product-detail-page",
       children
     }
-  ) : /* @__PURE__ */ jsxs8(
+  ) : /* @__PURE__ */ jsxs7(
     TwoColumnPage,
     {
       data: product,
@@ -1252,14 +1089,14 @@ var Root = ({ children }) => {
       showMetadata: true,
       "data-testid": "product-detail-page",
       children: [
-        /* @__PURE__ */ jsx8(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: /* @__PURE__ */ jsxs8(WidgetZone, { id: "product.detail.main", data: product, children: [
+        /* @__PURE__ */ jsx8(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: /* @__PURE__ */ jsxs7(WidgetZone, { id: "product.detail.main", data: product, children: [
           /* @__PURE__ */ jsx8(ProductActiveRequestSection, { product }),
           /* @__PURE__ */ jsx8(ProductActiveEditSection, { product }),
           /* @__PURE__ */ jsx8(ProductGeneralSection, { product }),
           /* @__PURE__ */ jsx8(ProductMediaSection, { product }),
           /* @__PURE__ */ jsx8(ProductVariantSection, { product })
         ] }) }),
-        /* @__PURE__ */ jsx8(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: /* @__PURE__ */ jsxs8(WidgetZone, { id: "product.detail.side", data: product, children: [
+        /* @__PURE__ */ jsx8(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: /* @__PURE__ */ jsxs7(WidgetZone, { id: "product.detail.side", data: product, children: [
           /* @__PURE__ */ jsx8(ProductOrganizationSection, { product }),
           /* @__PURE__ */ jsx8(ProductAttributeSection, { product })
         ] }) })