@mercurjs/admin 2.0.0-canary.34 → 2.0.0-canary.36

package/dist/{product-detail-3UWUMNHC.js → chunk-NQPAEBSZ.js}

@@ -1,7 +1,6 @@
 import {
   SidebarLink
 } from "./chunk-4GPAS5GW.js";
-import "./chunk-U2EI2ZLM.js";
 import {
   getFormattedCountry
 } from "./chunk-W6Y3PPU5.js";
@@ -11,11 +10,9 @@ import {
 import {
   ProductSellerSection
 } from "./chunk-VZEMURY7.js";
-import "./chunk-FI474ADU.js";
 import {
   SectionRow
 } from "./chunk-3XPXUIK3.js";
-import "./chunk-JRTZWK77.js";
 import {
   TwoColumnPage
 } from "./chunk-U2UCL2VG.js";
@@ -34,45 +31,13 @@ import {
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
-import "./chunk-LAVHRER2.js";
-import "./chunk-Y7QKP6QU.js";
 import {
   useQueryParams
 } from "./chunk-THHRRYRS.js";
-import "./chunk-UZWFZMOX.js";
-import "./chunk-XQNVC4Q7.js";
-import "./chunk-XM6GCWNF.js";
-import "./chunk-ODBDAABQ.js";
-import "./chunk-CDQJKJMX.js";
-import "./chunk-JLATVDLM.js";
-import "./chunk-GPRBBA7S.js";
-import "./chunk-E7ZBQO6E.js";
-import "./chunk-XGHM75N2.js";
-import "./chunk-U2GCSKW3.js";
-import "./chunk-RTAIDSDS.js";
-import "./chunk-LW3UWYZU.js";
-import "./chunk-A4X5VP3G.js";
-import "./chunk-NNZP4PYP.js";
-import "./chunk-GF4QHVX3.js";
-import "./chunk-JOQ3RTF5.js";
-import "./chunk-V534K7G4.js";
-import "./chunk-A5XOYSDC.js";
-import "./chunk-TQI3DOQ5.js";
-import "./chunk-5PB7KCTF.js";
-import "./chunk-YOIARITB.js";
-import "./chunk-W7G64ULL.js";
-import "./chunk-6C7TCU42.js";
-import "./chunk-4YF3GAKE.js";
-import "./chunk-M3I52H3M.js";
 import {
   useSalesChannels
 } from "./chunk-LORVU5II.js";
-import "./chunk-36ORDF7W.js";
-import "./chunk-QSM56ZOP.js";
-import "./chunk-MIHEJ6Y6.js";
-import "./chunk-3VZV6SJQ.js";
 import {
-  productsQueryKeys,
   useDeleteProduct,
   useDeleteProductOption,
   useDeleteVariantLazy,
@@ -80,56 +45,16 @@ import {
   useProductVariants,
   useUpdateProduct
 } from "./chunk-K357FGGP.js";
-import {
-  queryClient
-} from "./chunk-RHKRREUU.js";
-import "./chunk-ZA2KFUFR.js";
-import {
-  sdk
-} from "./chunk-ZYNBKBY3.js";
-import "./chunk-NBMM2TZK.js";
-
-// src/pages/products/product-detail/breadcrumb.tsx
-import { jsx } from "react/jsx-runtime";
-var ProductDetailBreadcrumb = (props) => {
-  const { id } = props.params || {};
-  const { product } = useProduct(
-    id,
-    {},
-    {
-      initialData: props.data,
-      enabled: Boolean(id)
-    }
-  );
-  if (!product) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("span", { children: product.title });
-};
-
-// src/pages/products/product-detail/loader.ts
-var productDetailQuery = (id) => ({
-  queryKey: productsQueryKeys.detail(id),
-  queryFn: async () => sdk.admin.products.$id.query({ $id: id, fields: "*seller" })
-});
-var productLoader = async ({ params }) => {
-  const id = params.id;
-  const query = productDetailQuery(id);
-  const response = await queryClient.ensureQueryData({
-    ...query,
-    staleTime: 9e4
-  });
-  return response;
-};
 
 // src/pages/products/product-detail/product-detail.tsx
+import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
 
 // src/pages/products/product-detail/components/product-attribute-section/product-attribute-section.tsx
 import { PencilSquare } from "@medusajs/icons";
 import { Container, Heading } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ProductAttributeSection = ({
   product
 }) => {
@@ -141,8 +66,8 @@ var ProductAttributeSection = ({
         className: "flex items-center justify-between px-6 py-4",
         "data-testid": "product-attribute-header",
         children: [
-          /* @__PURE__ */ jsx2(Heading, { level: "h2", "data-testid": "product-attribute-title", children: t("products.attributes") }),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "product-attribute-title", children: t("products.attributes") }),
+          /* @__PURE__ */ jsx(
             ActionMenu,
             {
               groups: [
@@ -151,7 +76,7 @@ var ProductAttributeSection = ({
                     {
                       label: t("actions.edit"),
                       to: "attributes",
-                      icon: /* @__PURE__ */ jsx2(PencilSquare, {})
+                      icon: /* @__PURE__ */ jsx(PencilSquare, {})
                     }
                   ]
                 }
@@ -162,7 +87,7 @@ var ProductAttributeSection = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.height"),
@@ -170,7 +95,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-height-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.width"),
@@ -178,7 +103,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-width-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.length"),
@@ -186,7 +111,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-length-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.weight"),
@@ -194,7 +119,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-weight-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.midCode"),
@@ -202,7 +127,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-mid-code-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.hsCode"),
@@ -210,7 +135,7 @@ var ProductAttributeSection = ({
         "data-testid": "product-hs-code-row"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: t("fields.countryOfOrigin"),
@@ -226,7 +151,7 @@ import { PencilSquare as PencilSquare2, Trash } from "@medusajs/icons";
 import { Container as Container2, Heading as Heading2, StatusBadge, usePrompt } from "@medusajs/ui";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var productStatusColor = (status) => {
   switch (status) {
     case "draft":
@@ -273,14 +198,14 @@ var ProductGeneralSection = ({
         className: "flex items-center justify-between px-6 py-4",
         "data-testid": "product-general-header",
         children: [
-          /* @__PURE__ */ jsx3(Heading2, { "data-testid": "product-general-title", children: product.title }),
+          /* @__PURE__ */ jsx2(Heading2, { "data-testid": "product-general-title", children: product.title }),
           /* @__PURE__ */ jsxs2(
             "div",
             {
               className: "flex items-center gap-x-4",
               "data-testid": "product-general-actions",
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   StatusBadge,
                   {
                     color: productStatusColor(product.status),
@@ -288,7 +213,7 @@ var ProductGeneralSection = ({
                     children: t(`products.productStatus.${product.status}`)
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   ActionMenu,
                   {
                     groups: [
@@ -297,7 +222,7 @@ var ProductGeneralSection = ({
                           {
                             label: t("actions.edit"),
                             to: "edit",
-                            icon: /* @__PURE__ */ jsx3(PencilSquare2, {})
+                            icon: /* @__PURE__ */ jsx2(PencilSquare2, {})
                           }
                         ]
                       },
@@ -306,7 +231,7 @@ var ProductGeneralSection = ({
                           {
                             label: t("actions.delete"),
                             onClick: handleDelete,
-                            icon: /* @__PURE__ */ jsx3(Trash, {})
+                            icon: /* @__PURE__ */ jsx2(Trash, {})
                           }
                         ]
                       }
@@ -320,7 +245,7 @@ var ProductGeneralSection = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       SectionRow,
       {
         title: t("fields.description"),
@@ -328,7 +253,7 @@ var ProductGeneralSection = ({
         "data-testid": "product-description-row"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       SectionRow,
       {
         title: t("fields.subtitle"),
@@ -336,7 +261,7 @@ var ProductGeneralSection = ({
         "data-testid": "product-subtitle-row"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       SectionRow,
       {
         title: t("fields.handle"),
@@ -344,7 +269,7 @@ var ProductGeneralSection = ({
         "data-testid": "product-handle-row"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       SectionRow,
       {
         title: t("fields.discountable"),
@@ -371,8 +296,10 @@ import {
 import { useState } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
 import { Link } from "react-router-dom";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var ProductMediaSection = ({ product }) => {
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProductMediaSection = ({
+  product
+}) => {
   const { t } = useTranslation3();
   const prompt = usePrompt2();
   const [selection, setSelection] = useState({});
@@ -421,8 +348,8 @@ var ProductMediaSection = ({ product }) => {
   };
   return /* @__PURE__ */ jsxs3(Container3, { className: "divide-y p-0", "data-testid": "product-media-section", children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-media-header", children: [
-      /* @__PURE__ */ jsx4(Heading3, { level: "h2", "data-testid": "product-media-title", children: t("products.media.label") }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx3(Heading3, { level: "h2", "data-testid": "product-media-title", children: t("products.media.label") }),
+      /* @__PURE__ */ jsx3(
         ActionMenu,
         {
           groups: [
@@ -431,7 +358,7 @@ var ProductMediaSection = ({ product }) => {
                 {
                   label: t("actions.edit"),
                   to: "media?view=edit",
-                  icon: /* @__PURE__ */ jsx4(PencilSquare3, {})
+                  icon: /* @__PURE__ */ jsx3(PencilSquare3, {})
                 }
               ]
             }
@@ -440,7 +367,7 @@ var ProductMediaSection = ({ product }) => {
         }
       )
     ] }),
-    media.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", "data-testid": "product-media-grid", children: media.map((i, index) => {
+    media.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", "data-testid": "product-media-grid", children: media.map((i, index) => {
       const isSelected = selection[i.id];
       return /* @__PURE__ */ jsxs3(
         "div",
@@ -448,7 +375,7 @@ var ProductMediaSection = ({ product }) => {
           className: "shadow-elevation-card-rest hover:shadow-elevation-card-hover transition-fg group relative aspect-square size-full cursor-pointer overflow-hidden rounded-[8px]",
           "data-testid": `product-media-item-${i.id}`,
           children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx3(
               "div",
               {
                 className: clx(
@@ -458,7 +385,7 @@ var ProductMediaSection = ({ product }) => {
                   }
                 ),
                 "data-testid": `product-media-checkbox-container-${i.id}`,
-                children: /* @__PURE__ */ jsx4(
+                children: /* @__PURE__ */ jsx3(
                   Checkbox,
                   {
                     checked: selection[i.id] || false,
@@ -468,8 +395,8 @@ var ProductMediaSection = ({ product }) => {
                 )
               }
             ),
-            i.isThumbnail && /* @__PURE__ */ jsx4("div", { className: "absolute left-2 top-2", "data-testid": `product-media-thumbnail-badge-${i.id}`, children: /* @__PURE__ */ jsx4(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx4(ThumbnailBadge, {}) }) }),
-            /* @__PURE__ */ jsx4(Link, { to: `media`, state: { curr: index }, "data-testid": `product-media-link-${i.id}`, children: /* @__PURE__ */ jsx4(
+            i.isThumbnail && /* @__PURE__ */ jsx3("div", { className: "absolute left-2 top-2", "data-testid": `product-media-thumbnail-badge-${i.id}`, children: /* @__PURE__ */ jsx3(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx3(ThumbnailBadge, {}) }) }),
+            /* @__PURE__ */ jsx3(Link, { to: `media`, state: { curr: index }, "data-testid": `product-media-link-${i.id}`, children: /* @__PURE__ */ jsx3(
               "img",
               {
                 src: i.url,
@@ -484,7 +411,7 @@ var ProductMediaSection = ({ product }) => {
       );
     }) }) : /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", "data-testid": "product-media-empty-state", children: [
       /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(
           Text,
           {
             size: "small",
@@ -495,16 +422,16 @@ var ProductMediaSection = ({ product }) => {
             children: t("products.media.emptyState.header")
           }
         ),
-        /* @__PURE__ */ jsx4(Text, { size: "small", className: "text-ui-fg-muted", "data-testid": "product-media-empty-state-description", children: t("products.media.emptyState.description") })
+        /* @__PURE__ */ jsx3(Text, { size: "small", className: "text-ui-fg-muted", "data-testid": "product-media-empty-state-description", children: t("products.media.emptyState.description") })
       ] }),
-      /* @__PURE__ */ jsx4(Button, { size: "small", variant: "secondary", asChild: true, "data-testid": "product-media-empty-state-button", children: /* @__PURE__ */ jsx4(Link, { to: "media?view=edit", "data-testid": "product-media-empty-state-link", children: t("products.media.emptyState.action") }) })
+      /* @__PURE__ */ jsx3(Button, { size: "small", variant: "secondary", asChild: true, "data-testid": "product-media-empty-state-button", children: /* @__PURE__ */ jsx3(Link, { to: "media?view=edit", "data-testid": "product-media-empty-state-link", children: t("products.media.emptyState.action") }) })
     ] }),
-    /* @__PURE__ */ jsx4(CommandBar, { open: !!Object.keys(selection).length, "data-testid": "product-media-command-bar", children: /* @__PURE__ */ jsxs3(CommandBar.Bar, { "data-testid": "product-media-command-bar-bar", children: [
-      /* @__PURE__ */ jsx4(CommandBar.Value, { "data-testid": "product-media-command-bar-value", children: t("general.countSelected", {
+    /* @__PURE__ */ jsx3(CommandBar, { open: !!Object.keys(selection).length, "data-testid": "product-media-command-bar", children: /* @__PURE__ */ jsxs3(CommandBar.Bar, { "data-testid": "product-media-command-bar-bar", children: [
+      /* @__PURE__ */ jsx3(CommandBar.Value, { "data-testid": "product-media-command-bar-value", children: t("general.countSelected", {
         count: Object.keys(selection).length
       }) }),
-      /* @__PURE__ */ jsx4(CommandBar.Seperator, { "data-testid": "product-media-command-bar-separator" }),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx3(CommandBar.Seperator, { "data-testid": "product-media-command-bar-separator" }),
+      /* @__PURE__ */ jsx3(
         CommandBar.Command,
         {
           action: handleDelete,
@@ -537,13 +464,13 @@ var getMedia = (product) => {
 import { PencilSquare as PencilSquare4, Plus, Trash as Trash2 } from "@medusajs/icons";
 import { Badge, Container as Container4, Heading as Heading4, usePrompt as usePrompt3 } from "@medusajs/ui";
 import { useTranslation as useTranslation4 } from "react-i18next";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var OptionActions = ({
-  product,
+  productId,
   option
 }) => {
   const { t } = useTranslation4();
-  const { mutateAsync } = useDeleteProductOption(product.id, option.id);
+  const { mutateAsync } = useDeleteProductOption(productId, option.id);
   const prompt = usePrompt3();
   const handleDelete = async () => {
     const res = await prompt({
@@ -559,7 +486,7 @@ var OptionActions = ({
     }
     await mutateAsync();
   };
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     ActionMenu,
     {
       groups: [
@@ -568,7 +495,7 @@ var OptionActions = ({
             {
               label: t("actions.edit"),
               to: `options/${option.id}/edit`,
-              icon: /* @__PURE__ */ jsx5(PencilSquare4, {})
+              icon: /* @__PURE__ */ jsx4(PencilSquare4, {})
             }
           ]
         },
@@ -577,7 +504,7 @@ var OptionActions = ({
             {
               label: t("actions.delete"),
               onClick: handleDelete,
-              icon: /* @__PURE__ */ jsx5(Trash2, {})
+              icon: /* @__PURE__ */ jsx4(Trash2, {})
             }
           ]
         }
@@ -592,8 +519,8 @@ var ProductOptionSection = ({
   const { t } = useTranslation4();
   return /* @__PURE__ */ jsxs4(Container4, { className: "divide-y p-0", "data-testid": "product-option-section", children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-option-header", children: [
-      /* @__PURE__ */ jsx5(Heading4, { level: "h2", "data-testid": "product-option-title", children: t("products.options.header") }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4(Heading4, { level: "h2", "data-testid": "product-option-title", children: t("products.options.header") }),
+      /* @__PURE__ */ jsx4(
         ActionMenu,
         {
           groups: [
@@ -602,7 +529,7 @@ var ProductOptionSection = ({
                 {
                   label: t("actions.create"),
                   to: "options/create",
-                  icon: /* @__PURE__ */ jsx5(Plus, {})
+                  icon: /* @__PURE__ */ jsx4(Plus, {})
                 }
               ]
             }
@@ -612,12 +539,12 @@ var ProductOptionSection = ({
       )
     ] }),
     product.options?.map((option) => {
-      return /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsx4(
         SectionRow,
         {
           title: option.title,
           value: option.values?.map((val) => {
-            return /* @__PURE__ */ jsx5(
+            return /* @__PURE__ */ jsx4(
               Badge,
               {
                 size: "2xsmall",
@@ -628,7 +555,7 @@ var ProductOptionSection = ({
               val.value
             );
           }),
-          actions: /* @__PURE__ */ jsx5(OptionActions, { product, option }),
+          actions: /* @__PURE__ */ jsx4(OptionActions, { productId: product.id, option }),
           "data-testid": `product-option-row-${option.id}`
         },
         option.id
@@ -642,7 +569,7 @@ import { PencilSquare as PencilSquare5 } from "@medusajs/icons";
 import { Badge as Badge2, Container as Container5, Heading as Heading5, Tooltip as Tooltip2 } from "@medusajs/ui";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { Link as Link2 } from "react-router-dom";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ProductOrganizationSection = ({
   product
 }) => {
@@ -659,8 +586,8 @@ var ProductOrganizationSection = ({
             className: "flex items-center justify-between px-6 py-4",
             "data-testid": "product-organization-header",
             children: [
-              /* @__PURE__ */ jsx6(Heading5, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx5(Heading5, { level: "h2", "data-testid": "product-organization-title", children: t("products.organization.header") }),
+              /* @__PURE__ */ jsx5(
                 ActionMenu,
                 {
                   groups: [
@@ -669,7 +596,7 @@ var ProductOrganizationSection = ({
                         {
                           label: t("actions.edit"),
                           to: "organization",
-                          icon: /* @__PURE__ */ jsx6(PencilSquare5, {})
+                          icon: /* @__PURE__ */ jsx5(PencilSquare5, {})
                         }
                       ]
                     }
@@ -680,11 +607,11 @@ var ProductOrganizationSection = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           SectionRow,
           {
             title: t("fields.tags"),
-            value: product.tags?.length ? product.tags.map((tag) => /* @__PURE__ */ jsx6(
+            value: product.tags?.length ? product.tags.map((tag) => /* @__PURE__ */ jsx5(
               OrganizationTag,
               {
                 label: tag.value,
@@ -695,11 +622,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-tags-row"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           SectionRow,
           {
             title: t("fields.type"),
-            value: product.type ? /* @__PURE__ */ jsx6(
+            value: product.type ? /* @__PURE__ */ jsx5(
               OrganizationTag,
               {
                 label: product.type.value,
@@ -709,11 +636,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-type-row"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           SectionRow,
           {
             title: t("fields.collection"),
-            value: product.collection ? /* @__PURE__ */ jsx6(
+            value: product.collection ? /* @__PURE__ */ jsx5(
               OrganizationTag,
               {
                 label: product.collection.title,
@@ -723,11 +650,11 @@ var ProductOrganizationSection = ({
             "data-testid": "product-collection-row"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           SectionRow,
           {
             title: t("fields.categories"),
-            value: product.categories?.length ? product.categories.map((pcat) => /* @__PURE__ */ jsx6(
+            value: product.categories?.length ? product.categories.map((pcat) => /* @__PURE__ */ jsx5(
               OrganizationTag,
               {
                 label: pcat.name,
@@ -743,7 +670,7 @@ var ProductOrganizationSection = ({
   );
 };
 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__ */ jsx5(Tooltip2, { content: label, children: /* @__PURE__ */ jsx5(Badge2, { size: "2xsmall", className: "block w-fit truncate", asChild: true, children: /* @__PURE__ */ jsx5(
     Link2,
     {
       to,
@@ -757,7 +684,7 @@ var OrganizationTag = ({ label, to }) => {
 import { Channels, PencilSquare as PencilSquare6 } from "@medusajs/icons";
 import { Container as Container6, Heading as Heading6, Text as Text2, Tooltip as Tooltip3 } from "@medusajs/ui";
 import { Trans, useTranslation as useTranslation6 } from "react-i18next";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var ProductSalesChannelSection = ({
   product
 }) => {
@@ -771,8 +698,8 @@ var ProductSalesChannelSection = ({
   const restChannels = availableInSalesChannels.slice(3);
   return /* @__PURE__ */ jsxs6(Container6, { className: "flex flex-col gap-y-4 px-6 py-4", "data-testid": "product-sales-channel-section", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", "data-testid": "product-sales-channel-header", children: [
-      /* @__PURE__ */ jsx7(Heading6, { level: "h2", "data-testid": "product-sales-channel-title", children: t("fields.sales_channels") }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6(Heading6, { level: "h2", "data-testid": "product-sales-channel-title", children: t("fields.sales_channels") }),
+      /* @__PURE__ */ jsx6(
         ActionMenu,
         {
           groups: [
@@ -781,7 +708,7 @@ var ProductSalesChannelSection = ({
                 {
                   label: t("actions.edit"),
                   to: "sales-channels",
-                  icon: /* @__PURE__ */ jsx7(PencilSquare6, {})
+                  icon: /* @__PURE__ */ jsx6(PencilSquare6, {})
                 }
               ]
             }
@@ -791,15 +718,15 @@ var ProductSalesChannelSection = ({
       )
     ] }),
     /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-[28px_1fr] items-center gap-x-3", "data-testid": "product-sales-channels-content", children: [
-      /* @__PURE__ */ jsx7("div", { className: "bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md", "data-testid": "product-sales-channels-icon-container", children: /* @__PURE__ */ jsx7("div", { className: "bg-ui-bg-component flex size-6 items-center justify-center rounded-[4px]", children: /* @__PURE__ */ jsx7(Channels, { className: "text-ui-fg-subtle", "data-testid": "product-sales-channels-icon" }) }) }),
+      /* @__PURE__ */ jsx6("div", { className: "bg-ui-bg-base shadow-borders-base flex size-7 items-center justify-center rounded-md", "data-testid": "product-sales-channels-icon-container", 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", "data-testid": "product-sales-channels-icon" }) }) }),
       availableInSalesChannels.length > 0 ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-x-1", "data-testid": "product-sales-channels-list", children: [
-        /* @__PURE__ */ jsx7(Text2, { size: "small", leading: "compact", "data-testid": "product-sales-channels-names", children: firstChannels.map((sc) => sc.name).join(", ") }),
-        restChannels.length > 0 && /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(Text2, { size: "small", leading: "compact", "data-testid": "product-sales-channels-names", children: firstChannels.map((sc) => sc.name).join(", ") }),
+        restChannels.length > 0 && /* @__PURE__ */ jsx6(
           Tooltip3,
           {
-            content: /* @__PURE__ */ jsx7("ul", { children: restChannels.map((sc) => /* @__PURE__ */ jsx7("li", { children: sc.name }, sc.id)) }),
+            content: /* @__PURE__ */ jsx6("ul", { children: restChannels.map((sc) => /* @__PURE__ */ jsx6("li", { children: sc.name }, sc.id)) }),
             "data-testid": "product-sales-channels-more-tooltip",
-            children: /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsx6(
               Text2,
               {
                 size: "small",
@@ -811,9 +738,9 @@ var ProductSalesChannelSection = ({
             )
           }
         )
-      ] }) : /* @__PURE__ */ jsx7(Text2, { size: "small", leading: "compact", className: "text-ui-fg-subtle", "data-testid": "product-sales-channels-empty", children: t("products.noSalesChannels") })
+      ] }) : /* @__PURE__ */ jsx6(Text2, { size: "small", leading: "compact", className: "text-ui-fg-subtle", "data-testid": "product-sales-channels-empty", children: t("products.noSalesChannels") })
     ] }),
-    /* @__PURE__ */ jsx7("div", { "data-testid": "product-sales-channels-stats", children: /* @__PURE__ */ jsx7(Text2, { className: "text-ui-fg-subtle", size: "small", leading: "compact", "data-testid": "product-sales-channels-stats-text", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx6("div", { "data-testid": "product-sales-channels-stats", children: /* @__PURE__ */ jsx6(Text2, { className: "text-ui-fg-subtle", size: "small", leading: "compact", "data-testid": "product-sales-channels-stats-text", children: /* @__PURE__ */ jsx6(
       Trans,
       {
         i18nKey: "sales_channels.availableIn",
@@ -822,7 +749,7 @@ var ProductSalesChannelSection = ({
           y: count ?? 0
         },
         components: [
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: "text-ui-fg-base txt-compact-medium-plus",
@@ -830,7 +757,7 @@ var ProductSalesChannelSection = ({
             },
             "x"
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx6(
             "span",
             {
               className: "text-ui-fg-base txt-compact-medium-plus",
@@ -848,7 +775,7 @@ var ProductSalesChannelSection = ({
 import { PencilSquare as PencilSquare7, ShoppingBag } from "@medusajs/icons";
 import { Container as Container7, Heading as Heading7 } from "@medusajs/ui";
 import { useTranslation as useTranslation7 } from "react-i18next";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var ProductShippingProfileSection = ({
   product
 }) => {
@@ -856,8 +783,8 @@ var ProductShippingProfileSection = ({
   const shippingProfile = product.shipping_profile;
   return /* @__PURE__ */ jsxs7(Container7, { className: "p-0", "data-testid": "product-shipping-profile-section", children: [
     /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-shipping-profile-header", children: [
-      /* @__PURE__ */ jsx8(Heading7, { level: "h2", "data-testid": "product-shipping-profile-title", children: t("products.shippingProfile.header") }),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx7(Heading7, { level: "h2", "data-testid": "product-shipping-profile-title", children: t("products.shippingProfile.header") }),
+      /* @__PURE__ */ jsx7(
         ActionMenu,
         {
           groups: [
@@ -866,7 +793,7 @@ var ProductShippingProfileSection = ({
                 {
                   label: t("actions.edit"),
                   to: "shipping-profile",
-                  icon: /* @__PURE__ */ jsx8(PencilSquare7, {})
+                  icon: /* @__PURE__ */ jsx7(PencilSquare7, {})
                 }
               ]
             }
@@ -875,13 +802,13 @@ var ProductShippingProfileSection = ({
         }
       )
     ] }),
-    shippingProfile && /* @__PURE__ */ jsx8("div", { "data-testid": "product-shipping-profile-link-container", children: /* @__PURE__ */ jsx8(
+    shippingProfile && /* @__PURE__ */ jsx7("div", { "data-testid": "product-shipping-profile-link-container", children: /* @__PURE__ */ jsx7(
       SidebarLink,
       {
         to: `/settings/locations/shipping-profiles/${shippingProfile.id}`,
         labelKey: shippingProfile.name,
         descriptionKey: shippingProfile.type,
-        icon: /* @__PURE__ */ jsx8(ShoppingBag, {}),
+        icon: /* @__PURE__ */ jsx7(ShoppingBag, {}),
         "data-testid": "product-shipping-profile-link"
       }
     ) })
@@ -904,10 +831,12 @@ import {
 import { keepPreviousData } from "@tanstack/react-query";
 import { useTranslation as useTranslation8 } from "react-i18next";
 import { useNavigate as useNavigate2, useSearchParams } from "react-router-dom";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var PAGE_SIZE = 10;
 var PREFIX = "pv";
-var ProductVariantSection = ({ product }) => {
+var ProductVariantSection = ({
+  product
+}) => {
   const { t } = useTranslation8();
   const { q, order, offset, allow_backorder, manage_inventory, created_at, updated_at } = useQueryParams(
     ["q", "order", "offset", "manage_inventory", "allow_backorder", "created_at", "updated_at"],
@@ -936,12 +865,12 @@ var ProductVariantSection = ({ product }) => {
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     Container8,
     {
       className: "divide-y p-0",
       "data-testid": "product-variant-section",
-      children: /* @__PURE__ */ jsx9("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx8("div", { "data-testid": "product-variants-table-container", children: /* @__PURE__ */ jsx8(
         DataTable,
         {
           data: variants,
@@ -974,12 +903,12 @@ var ProductVariantSection = ({ product }) => {
                   {
                     label: t("products.editPrices"),
                     to: `prices`,
-                    icon: /* @__PURE__ */ jsx9(PencilSquare8, {})
+                    icon: /* @__PURE__ */ jsx8(PencilSquare8, {})
                   },
                   {
                     label: t("inventory.stock.action"),
                     to: `stock`,
-                    icon: /* @__PURE__ */ jsx9(Buildings, {})
+                    icon: /* @__PURE__ */ jsx8(Buildings, {})
                   }
                 ]
               }
@@ -1038,14 +967,14 @@ var useColumns = (product) => {
         cell: ({ row }) => {
           const variantOpt = row.original.options?.find((opt) => opt.option_id === option.id);
           if (!variantOpt) {
-            return /* @__PURE__ */ jsx9("span", { className: "text-ui-fg-muted", children: "-" });
+            return /* @__PURE__ */ jsx8("span", { className: "text-ui-fg-muted", children: "-" });
           }
-          return /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsx8(
             "div",
             {
               className: "flex items-center",
               "data-testid": `product-variant-option-${option.id}-${row.original.id}`,
-              children: /* @__PURE__ */ jsx9(Tooltip4, { content: variantOpt.value, children: /* @__PURE__ */ jsx9(
+              children: /* @__PURE__ */ jsx8(Tooltip4, { content: variantOpt.value, children: /* @__PURE__ */ jsx8(
                 Badge3,
                 {
                   size: "2xsmall",
@@ -1066,7 +995,7 @@ var useColumns = (product) => {
       const variant = ctx.row.original;
       const mainActions = [
         {
-          icon: /* @__PURE__ */ jsx9(PencilSquare8, {}),
+          icon: /* @__PURE__ */ jsx8(PencilSquare8, {}),
           label: t("actions.edit"),
           onClick: (row) => {
             navigate(
@@ -1082,7 +1011,7 @@ var useColumns = (product) => {
       ];
       const secondaryActions = [
         {
-          icon: /* @__PURE__ */ jsx9(Trash3, {}),
+          icon: /* @__PURE__ */ jsx8(Trash3, {}),
           label: t("actions.delete"),
           onClick: () => handleDelete(variant.id, variant.title)
         }
@@ -1098,7 +1027,7 @@ var useColumns = (product) => {
             onClick: () => {
               navigate(inventoryItemLink);
             },
-            icon: /* @__PURE__ */ jsx9(Buildings, {})
+            icon: /* @__PURE__ */ jsx8(Buildings, {})
           });
           break;
         }
@@ -1115,7 +1044,7 @@ var useColumns = (product) => {
             onClick: () => {
               navigate(inventoryKitLink);
             },
-            icon: /* @__PURE__ */ jsx9(Component, {})
+            icon: /* @__PURE__ */ jsx8(Component, {})
           });
         }
       }
@@ -1174,19 +1103,19 @@ var useColumns = (product) => {
         header: t("fields.inventory"),
         cell: ({ row }) => {
           const { text, hasInventoryKit, quantity, notManaged } = getInventory(row.original);
-          return /* @__PURE__ */ jsx9(Tooltip4, { content: text, children: /* @__PURE__ */ jsxs8(
+          return /* @__PURE__ */ jsx8(Tooltip4, { content: text, children: /* @__PURE__ */ jsxs8(
             "div",
             {
               className: "flex h-full w-full items-center gap-2 overflow-hidden",
               "data-testid": `product-variant-inventory-${row.original.id}`,
               children: [
-                hasInventoryKit && /* @__PURE__ */ jsx9(
+                hasInventoryKit && /* @__PURE__ */ jsx8(
                   Component,
                   {
                     "data-testid": `product-variant-inventory-kit-icon-${row.original.id}`
                   }
                 ),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx8(
                   "span",
                   {
                     className: clx2("truncate", {
@@ -1251,8 +1180,8 @@ var useCommands = () => {
 };
 
 // src/pages/products/product-detail/product-detail.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var ProductDetail = () => {
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id } = useParams();
   const { product, isLoading, isError, error } = useProduct(
@@ -1263,7 +1192,7 @@ var ProductDetail = () => {
     }
   );
   if (isLoading || !product) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx9(
       TwoColumnPageSkeleton,
       {
         mainSections: 4,
@@ -1276,24 +1205,45 @@ var ProductDetail = () => {
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsx10("div", { "data-testid": "product-detail-page", children: /* @__PURE__ */ jsxs9(TwoColumnPage, { showJSON: true, showMetadata: true, data: product, children: [
-    /* @__PURE__ */ jsxs9(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
-      /* @__PURE__ */ jsx10(ProductGeneralSection, { product }),
-      /* @__PURE__ */ jsx10(ProductMediaSection, { product }),
-      /* @__PURE__ */ jsx10(ProductOptionSection, { product }),
-      /* @__PURE__ */ jsx10(ProductVariantSection, { product })
-    ] }),
-    /* @__PURE__ */ jsxs9(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
-      /* @__PURE__ */ jsx10(ProductSellerSection, { seller: product.seller }),
-      /* @__PURE__ */ jsx10(ProductSalesChannelSection, { product }),
-      /* @__PURE__ */ jsx10(ProductShippingProfileSection, { product }),
-      /* @__PURE__ */ jsx10(ProductOrganizationSection, { product }),
-      /* @__PURE__ */ jsx10(ProductAttributeSection, { product })
-    ] })
-  ] }) });
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx9(TwoColumnPage, { "data-testid": "product-detail-page", children }) : /* @__PURE__ */ jsxs9(
+    TwoColumnPage,
+    {
+      data: product,
+      showJSON: true,
+      showMetadata: true,
+      "data-testid": "product-detail-page",
+      children: [
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Main, { "data-testid": "product-detail-main", children: [
+          /* @__PURE__ */ jsx9(ProductGeneralSection, { product }),
+          /* @__PURE__ */ jsx9(ProductMediaSection, { product }),
+          /* @__PURE__ */ jsx9(ProductOptionSection, { product }),
+          /* @__PURE__ */ jsx9(ProductVariantSection, { product })
+        ] }),
+        /* @__PURE__ */ jsxs9(TwoColumnPage.Sidebar, { "data-testid": "product-detail-sidebar", children: [
+          /* @__PURE__ */ jsx9(ProductSellerSection, { seller: product.seller }),
+          /* @__PURE__ */ jsx9(ProductSalesChannelSection, { product }),
+          /* @__PURE__ */ jsx9(ProductShippingProfileSection, { product }),
+          /* @__PURE__ */ jsx9(ProductOrganizationSection, { product }),
+          /* @__PURE__ */ jsx9(ProductAttributeSection, { product })
+        ] })
+      ]
+    }
+  );
 };
+var ProductDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainGeneralSection: ProductGeneralSection,
+  MainMediaSection: ProductMediaSection,
+  MainOptionSection: ProductOptionSection,
+  MainVariantSection: ProductVariantSection,
+  SidebarSellerSection: ProductSellerSection,
+  SidebarSalesChannelSection: ProductSalesChannelSection,
+  SidebarShippingProfileSection: ProductShippingProfileSection,
+  SidebarOrganizationSection: ProductOrganizationSection,
+  SidebarAttributeSection: ProductAttributeSection
+});
+
 export {
-  ProductDetailBreadcrumb as Breadcrumb,
-  ProductDetail as Component,
-  productLoader as loader
+  ProductDetailPage
 };