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

package/dist/{product-variant-detail-DXTUM4R7.js → chunk-JA2XIIIZ.js}

@@ -1,35 +1,28 @@
-import {
-  LinkButton
-} from "./chunk-7AV5EJJ5.js";
 import {
   getLocaleAmount
 } from "./chunk-PXYDR7WQ.js";
+import {
+  LinkButton
+} from "./chunk-7AV5EJJ5.js";
 import {
   VARIANT_DETAIL_FIELDS
 } from "./chunk-WCEMRNW4.js";
-import "./chunk-FQERBIVS.js";
+import {
+  ProductSellerSection
+} from "./chunk-VZEMURY7.js";
+import {
+  SectionRow
+} from "./chunk-3XPXUIK3.js";
 import {
   PlaceholderCell
 } from "./chunk-PHOCVOZ5.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-FLCYR7E5.js";
-import "./chunk-YBZWO4ZV.js";
-import "./chunk-KAZ5BYTQ.js";
+} from "./chunk-ULJ3OMWU.js";
 import {
   NoRecords
 } from "./chunk-3EF54XFY.js";
-import "./chunk-IQPN4PZJ.js";
-import "./chunk-KBYZLKI4.js";
-import "./chunk-YWWUOGJA.js";
-import {
-  ProductSellerSection
-} from "./chunk-VZEMURY7.js";
-import "./chunk-FI474ADU.js";
-import {
-  SectionRow
-} from "./chunk-3XPXUIK3.js";
 import {
   TwoColumnPage
 } from "./chunk-U2UCL2VG.js";
@@ -39,93 +32,14 @@ import {
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
-import "./chunk-LAVHRER2.js";
-import "./chunk-Y7QKP6QU.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 "./chunk-LORVU5II.js";
-import "./chunk-36ORDF7W.js";
-import "./chunk-QSM56ZOP.js";
-import "./chunk-MIHEJ6Y6.js";
-import "./chunk-3VZV6SJQ.js";
 import {
   useDeleteVariant,
   useProduct,
-  useProductVariant,
-  variantsQueryKeys
+  useProductVariant
 } 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/product-variants/product-variant-detail/breadcrumb.tsx
-import { jsx } from "react/jsx-runtime";
-var ProductVariantDetailBreadcrumb = (props) => {
-  const { id, variant_id } = props.params || {};
-  const { variant } = useProductVariant(
-    id,
-    variant_id,
-    {
-      fields: VARIANT_DETAIL_FIELDS
-    },
-    {
-      initialData: props.data,
-      enabled: Boolean(id) && Boolean(variant_id)
-    }
-  );
-  if (!variant) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("span", { children: variant.title });
-};
-
-// src/pages/product-variants/product-variant-detail/loader.ts
-var variantDetailQuery = (productId, variantId) => ({
-  queryKey: variantsQueryKeys.detail(variantId, {
-    fields: VARIANT_DETAIL_FIELDS
-  }),
-  queryFn: async () => sdk.admin.products.$id.variants.$variantId.query({
-    $id: productId,
-    $variantId: variantId,
-    fields: VARIANT_DETAIL_FIELDS
-  })
-});
-var variantLoader = async ({ params }) => {
-  const productId = params.id;
-  const variantId = params.variant_id;
-  const query = variantDetailQuery(productId, variantId);
-  return queryClient.ensureQueryData(query);
-};
 
 // src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
+import { Children } from "react";
 import { useLoaderData, useParams } from "react-router-dom";
 
 // src/pages/product-variants/product-variant-detail/components/variant-general-section/variant-general-section.tsx
@@ -133,12 +47,14 @@ import { Component, PencilSquare, Trash } from "@medusajs/icons";
 import { Badge, Container, Heading, usePrompt } from "@medusajs/ui";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function VariantGeneralSection({ variant }) {
+import { jsx, jsxs } from "react/jsx-runtime";
+function VariantGeneralSection({
+  variant
+}) {
   const { t } = useTranslation();
   const prompt = usePrompt();
   const navigate = useNavigate();
-  const hasInventoryKit = variant.inventory?.length > 1;
+  const hasInventoryKit = (variant.inventory_items?.length ?? 0) > 1;
   const { mutateAsync } = useDeleteVariant(variant.product_id, variant.id);
   const handleDelete = async () => {
     const res = await prompt({
@@ -162,12 +78,12 @@ function VariantGeneralSection({ variant }) {
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx2(Heading, { children: variant.title }),
-          hasInventoryKit && /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-muted font-normal", children: /* @__PURE__ */ jsx2(Component, {}) })
+          /* @__PURE__ */ jsx(Heading, { children: variant.title }),
+          hasInventoryKit && /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted font-normal", children: /* @__PURE__ */ jsx(Component, {}) })
         ] }),
-        /* @__PURE__ */ jsx2("span", { className: "text-ui-fg-subtle txt-small mt-2", children: t("labels.productVariant") })
+        /* @__PURE__ */ jsx("span", { className: "text-ui-fg-subtle txt-small mt-2", children: t("labels.productVariant") })
       ] }),
-      /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx(
         ActionMenu,
         {
           groups: [
@@ -176,7 +92,7 @@ function VariantGeneralSection({ variant }) {
                 {
                   label: t("actions.edit"),
                   to: "edit",
-                  icon: /* @__PURE__ */ jsx2(PencilSquare, {})
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
                 }
               ]
             },
@@ -185,7 +101,7 @@ function VariantGeneralSection({ variant }) {
                 {
                   label: t("actions.delete"),
                   onClick: handleDelete,
-                  icon: /* @__PURE__ */ jsx2(Trash, {})
+                  icon: /* @__PURE__ */ jsx(Trash, {})
                 }
               ]
             }
@@ -193,12 +109,12 @@ function VariantGeneralSection({ variant }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx2(SectionRow, { title: t("fields.sku"), value: variant.sku }),
-    variant.options?.map((o) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(SectionRow, { title: t("fields.sku"), value: variant.sku }),
+    variant.options?.map((o) => /* @__PURE__ */ jsx(
       SectionRow,
       {
         title: o.option?.title,
-        value: /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", children: o.value })
+        value: /* @__PURE__ */ jsx(Badge, { size: "2xsmall", children: o.value })
       },
       o.id
     ))
@@ -213,17 +129,17 @@ import { Container as Container2, Heading as Heading2 } from "@medusajs/ui";
 // src/pages/product-variants/product-variant-detail/components/variant-inventory-section/inventory-actions.tsx
 import { useTranslation as useTranslation2 } from "react-i18next";
 import { Buildings } from "@medusajs/icons";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var InventoryActions = ({ item }) => {
   const { t } = useTranslation2();
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     ActionMenu,
     {
       groups: [
         {
           actions: [
             {
-              icon: /* @__PURE__ */ jsx3(Buildings, {}),
+              icon: /* @__PURE__ */ jsx2(Buildings, {}),
               label: t("products.variant.inventory.navigateToItem"),
               to: `/inventory/${item.id}`
             }
@@ -238,7 +154,7 @@ var InventoryActions = ({ item }) => {
 import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { useTranslation as useTranslation3 } from "react-i18next";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var columnHelper = createColumnHelper();
 var useInventoryTableColumns = () => {
   const { t } = useTranslation3();
@@ -249,9 +165,9 @@ var useInventoryTableColumns = () => {
         cell: ({ getValue }) => {
           const title = getValue();
           if (!title) {
-            return /* @__PURE__ */ jsx4(PlaceholderCell, {});
+            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
           }
-          return /* @__PURE__ */ jsx4("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: title }) });
+          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: title }) });
         }
       }),
       columnHelper.accessor("sku", {
@@ -259,9 +175,9 @@ var useInventoryTableColumns = () => {
         cell: ({ getValue }) => {
           const sku = getValue();
           if (!sku) {
-            return /* @__PURE__ */ jsx4(PlaceholderCell, {});
+            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
           }
-          return /* @__PURE__ */ jsx4("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: sku }) });
+          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: sku }) });
         }
       }),
       columnHelper.accessor("required_quantity", {
@@ -269,9 +185,9 @@ var useInventoryTableColumns = () => {
         cell: ({ getValue }) => {
           const quantity = getValue();
           if (Number.isNaN(quantity)) {
-            return /* @__PURE__ */ jsx4(PlaceholderCell, {});
+            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
           }
-          return /* @__PURE__ */ jsx4("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: quantity }) });
+          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: quantity }) });
         }
       }),
       columnHelper.display({
@@ -279,7 +195,7 @@ var useInventoryTableColumns = () => {
         header: t("fields.inventory"),
         cell: ({ row: { original: inventory } }) => {
           if (!inventory.location_levels?.length) {
-            return /* @__PURE__ */ jsx4(PlaceholderCell, {});
+            return /* @__PURE__ */ jsx3(PlaceholderCell, {});
           }
           let quantity = 0;
           let locations = 0;
@@ -287,7 +203,7 @@ var useInventoryTableColumns = () => {
             quantity += level.available_quantity;
             locations += 1;
           });
-          return /* @__PURE__ */ jsx4("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx4("span", { className: "truncate", children: t("products.variant.tableItem", {
+          return /* @__PURE__ */ jsx3("div", { className: "flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: t("products.variant.tableItem", {
             availableCount: quantity,
             locationCount: locations,
             count: locations
@@ -296,7 +212,7 @@ var useInventoryTableColumns = () => {
       }),
       columnHelper.display({
         id: "actions",
-        cell: ({ row }) => /* @__PURE__ */ jsx4(InventoryActions, { item: row.original })
+        cell: ({ row }) => /* @__PURE__ */ jsx3(InventoryActions, { item: row.original })
       })
     ],
     [t]
@@ -304,8 +220,21 @@ var useInventoryTableColumns = () => {
 };
 
 // src/pages/product-variants/product-variant-detail/components/variant-inventory-section/variant-inventory-section.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
+function VariantInventorySectionConnected({
+  variant
+}) {
+  if (!variant.manage_inventory) {
+    return /* @__PURE__ */ jsx4(InventorySectionPlaceholder, {});
+  }
+  const inventoryItems = variant.inventory_items?.map((i) => ({
+    ...i.inventory,
+    required_quantity: i.required_quantity,
+    variant
+  })) ?? [];
+  return /* @__PURE__ */ jsx4(VariantInventorySection, { inventoryItems });
+}
 function VariantInventorySection({
   inventoryItems
 }) {
@@ -322,8 +251,8 @@ function VariantInventorySection({
   const hasKit = inventoryItems.length > 1;
   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__ */ jsx5("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx5(Heading2, { level: "h2", children: t("fields.inventoryItems") }) }),
-      /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }) }),
+      /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx4(
         ActionMenu,
         {
           groups: [
@@ -334,7 +263,7 @@ function VariantInventorySection({
                     hasKit ? "products.variant.inventory.manageKit" : "products.variant.inventory.manageItems"
                   ),
                   to: "manage-items",
-                  icon: hasKit ? /* @__PURE__ */ jsx5(Component2, {}) : /* @__PURE__ */ jsx5(Buildings2, {})
+                  icon: hasKit ? /* @__PURE__ */ jsx4(Component2, {}) : /* @__PURE__ */ jsx4(Buildings2, {})
                 }
               ]
             }
@@ -342,7 +271,7 @@ function VariantInventorySection({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx4(
       _DataTable,
       {
         table,
@@ -356,12 +285,12 @@ function VariantInventorySection({
 }
 function InventorySectionPlaceholder() {
   const { t } = useTranslation4();
-  return /* @__PURE__ */ jsx5(Container2, { className: "divide-y p-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+  return /* @__PURE__ */ jsx4(Container2, { className: "divide-y p-0", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
     /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ jsx5(Heading2, { level: "h2", children: t("fields.inventoryItems") }),
-      /* @__PURE__ */ jsx5("span", { className: "txt-small text-ui-fg-subtle", children: t("products.variant.inventory.notManagedDesc") })
+      /* @__PURE__ */ jsx4(Heading2, { level: "h2", children: t("fields.inventoryItems") }),
+      /* @__PURE__ */ jsx4("span", { className: "txt-small text-ui-fg-subtle", children: t("products.variant.inventory.notManagedDesc") })
     ] }),
-    /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx5(LinkButton, { to: "edit", children: t("products.variant.edit.header") }) })
+    /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-x-4", children: /* @__PURE__ */ jsx4(LinkButton, { to: "edit", children: t("products.variant.edit.header") }) })
   ] }) });
 }
 
@@ -370,8 +299,10 @@ import { useState } from "react";
 import { useTranslation as useTranslation5 } from "react-i18next";
 import { CurrencyDollar } from "@medusajs/icons";
 import { Button, Container as Container3, Heading as Heading3 } from "@medusajs/ui";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function VariantPricesSection({ variant }) {
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function VariantPricesSection({
+  variant
+}) {
   const { t } = useTranslation5();
   const prices = variant.prices?.filter((p) => !Object.keys(p.rules || {}).length).sort((p1, p2) => p1.currency_code?.localeCompare(p2.currency_code));
   const hasPrices = !!prices?.length;
@@ -382,8 +313,8 @@ function VariantPricesSection({ variant }) {
   };
   return /* @__PURE__ */ jsxs3(Container3, { className: "flex flex-col divide-y p-0", children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx6(Heading3, { level: "h2", children: t("labels.prices") }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5(Heading3, { level: "h2", children: t("labels.prices") }),
+      /* @__PURE__ */ jsx5(
         ActionMenu,
         {
           groups: [
@@ -392,7 +323,7 @@ function VariantPricesSection({ variant }) {
                 {
                   label: t("actions.edit"),
                   to: `/products/${variant.product_id}/variants/${variant.id}/prices`,
-                  icon: /* @__PURE__ */ jsx6(CurrencyDollar, {})
+                  icon: /* @__PURE__ */ jsx5(CurrencyDollar, {})
                 }
               ]
             }
@@ -400,26 +331,26 @@ function VariantPricesSection({ variant }) {
         }
       )
     ] }),
-    !hasPrices && /* @__PURE__ */ jsx6(NoRecords, { className: "h-60" }),
+    !hasPrices && /* @__PURE__ */ jsx5(NoRecords, { className: "h-60" }),
     displayPrices?.map((price) => {
       return /* @__PURE__ */ jsxs3(
         "div",
         {
           className: "txt-small text-ui-fg-subtle flex justify-between px-6 py-4",
           children: [
-            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: price.currency_code.toUpperCase() }),
-            /* @__PURE__ */ jsx6("span", { children: getLocaleAmount(price.amount, price.currency_code) })
+            /* @__PURE__ */ jsx5("span", { className: "font-medium", children: price.currency_code.toUpperCase() }),
+            /* @__PURE__ */ jsx5("span", { children: getLocaleAmount(price.amount, price.currency_code) })
           ]
         },
         price.id
       );
     }),
     hasPrices && /* @__PURE__ */ jsxs3("div", { className: "txt-small text-ui-fg-subtle flex items-center justify-between px-6 py-4", children: [
-      /* @__PURE__ */ jsx6("span", { className: "font-medium", children: t("products.variant.pricesPagination", {
+      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: t("products.variant.pricesPagination", {
         total: prices.length,
         current: Math.min(pageSize, prices.length)
       }) }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5(
         Button,
         {
           onClick: onShowMore,
@@ -434,8 +365,8 @@ function VariantPricesSection({ variant }) {
 }
 
 // src/pages/product-variants/product-variant-detail/product-variant-detail.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var ProductVariantDetail = () => {
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Root = ({ children }) => {
   const initialData = useLoaderData();
   const { id, variant_id } = useParams();
   const { product } = useProduct(id, {
@@ -450,7 +381,7 @@ var ProductVariantDetail = () => {
     }
   );
   if (isLoading || !variant) {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx6(
       TwoColumnPageSkeleton,
       {
         mainSections: 2,
@@ -463,39 +394,26 @@ var ProductVariantDetail = () => {
   if (isError) {
     throw error;
   }
-  return /* @__PURE__ */ jsxs4(
-    TwoColumnPage,
-    {
-      data: variant,
-      hasOutlet: true,
-      showJSON: true,
-      showMetadata: true,
-      children: [
-        /* @__PURE__ */ jsxs4(TwoColumnPage.Main, { children: [
-          /* @__PURE__ */ jsx7(VariantGeneralSection, { variant }),
-          !variant.manage_inventory ? /* @__PURE__ */ jsx7(InventorySectionPlaceholder, {}) : /* @__PURE__ */ jsx7(
-            VariantInventorySection,
-            {
-              inventoryItems: variant.inventory_items?.map((i) => {
-                return {
-                  ...i.inventory,
-                  required_quantity: i.required_quantity,
-                  variant
-                };
-              }) ?? []
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs4(TwoColumnPage.Sidebar, { children: [
-          /* @__PURE__ */ jsx7(ProductSellerSection, { seller: product?.seller }),
-          /* @__PURE__ */ jsx7(VariantPricesSection, { variant })
-        ] })
-      ]
-    }
-  );
+  return Children.count(children) > 0 ? /* @__PURE__ */ jsx6(TwoColumnPage, { children }) : /* @__PURE__ */ jsxs4(TwoColumnPage, { data: variant, showJSON: true, showMetadata: true, hasOutlet: true, children: [
+    /* @__PURE__ */ jsxs4(TwoColumnPage.Main, { children: [
+      /* @__PURE__ */ jsx6(VariantGeneralSection, { variant }),
+      /* @__PURE__ */ jsx6(VariantInventorySectionConnected, { variant })
+    ] }),
+    /* @__PURE__ */ jsxs4(TwoColumnPage.Sidebar, { children: [
+      /* @__PURE__ */ jsx6(ProductSellerSection, { seller: product?.seller }),
+      /* @__PURE__ */ jsx6(VariantPricesSection, { variant })
+    ] })
+  ] });
 };
+var ProductVariantDetailPage = Object.assign(Root, {
+  Main: TwoColumnPage.Main,
+  Sidebar: TwoColumnPage.Sidebar,
+  MainGeneralSection: VariantGeneralSection,
+  MainInventorySection: VariantInventorySectionConnected,
+  SidebarSellerSection: ProductSellerSection,
+  SidebarPricesSection: VariantPricesSection
+});
+
 export {
-  ProductVariantDetailBreadcrumb as Breadcrumb,
-  ProductVariantDetail as Component,
-  variantLoader as loader
+  ProductVariantDetailPage
 };