@luxfi/ui 8.2.7 → 8.2.8

package/dist/site/components/commerce/drawer/index.cjs

@@ -4,295 +4,21 @@
 var navigation = require('next/navigation');
 var mobxReactLite = require('mobx-react-lite');
 var commerce = require('@hanzo/commerce');
-var react = require('react');
-require('usehooks-ts');
+var context_js = require('../../../commerce/ui/context.js');
+var CommerceDrawer = require('./shell.js');
+var CheckoutButton = require('../checkout-button.js');
+var Micro = require('./micro.js');
 var jsxRuntime = require('react/jsx-runtime');
-var primitives = require('@hanzo/ui/primitives');
-var ui = require('@hanzo/ui');
-var mobx = require('mobx');
 
-mobxReactLite.enableStaticRendering(typeof window === "undefined");
-var CommerceUIContext = react.createContext(void 0);
-var useCommerceDrawer = () => {
-  return react.useContext(CommerceUIContext);
-};
-var useSelectAndBuy = () => {
-  return react.useContext(CommerceUIContext);
-};
-var CommerceDrawer = mobxReactLite.observer(({
-  children,
-  handleHandleClicked,
-  drawerClx = "",
-  ...rest
-}) => {
-  const drawer = useCommerceDrawer();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    primitives.Drawer,
-    {
-      open: drawer.open,
-      onOpenChange: () => {
-      },
-      modal: drawer.modal,
-      snapPoints: drawer.points,
-      activeSnapPoint: drawer.activePoint,
-      setActiveSnapPoint: drawer.onActivePointChanged.bind(drawer),
-      fastDragSkipsToEnd: false,
-      dragHandleOnly: true,
-      handleHandleClicked,
-      extendHandleDragRegion: false,
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        primitives.DrawerContent,
-        {
-          defaultHandle: false,
-          className: ui.cn(
-            "border-0",
-            drawer.isMobile ? "pt-5" : "pt-6",
-            "w-full h-full"
-          ),
-          onOpenAutoFocus: (e) => {
-            e.preventDefault();
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              primitives.DrawerHandle,
-              {
-                className: ui.cn(
-                  "absolute top-0 left-0 right-0 mx-auto z-10",
-                  "flex justify-center items-start",
-                  "border-t rounded-t-lg border-muted-3",
-                  drawer.isMobile ? "h-5 touch-pan-y" : "h-6"
-                ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(
-                  // pseudo-handle
-                  "rounded-[3px] bg-level-3",
-                  drawer.isMobile ? "w-[155px] mt-[5px] h-1.5" : "w-[180px] mt-[3px] h-2.5 hover:bg-level-4",
-                  !drawer.isMobile ? "cursor-grab active:cursor-grabbing" : ""
-                ) })
-              }
-            ),
-            children
-          ]
-        }
-      )
-    }
-  );
-});
-var shell_default = CommerceDrawer;
-var BagIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", viewBox: "0 0 1019 1281", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z", fill: "currentColor" }) });
-var bag_icon_default = BagIcon;
-var IconAndQuantity = mobxReactLite.observer(({
-  animateOnQuantityChange = false,
-  showArrow = true,
-  showQuantity = true,
-  clx = "",
-  iconClx = "",
-  digitClx = ""
-}) => {
-  const cmmc = commerce.useCommerce();
-  const wiggleRef = react.useRef(mobx.observable.box("none"));
-  react.useEffect(() => (
-    // return IReactionDisposer
-    animateOnQuantityChange ? mobx.reaction(
-      () => cmmc.cartQuantity,
-      (curr, prev) => {
-        if (curr > prev) {
-          mobx.runInAction(() => {
-            wiggleRef.current.set("more");
-          });
-        } else {
-          mobx.runInAction(() => {
-            wiggleRef.current.set("less");
-          });
-        }
-        setTimeout(() => {
-          mobx.runInAction(() => {
-            wiggleRef.current.set("none");
-          });
-        }, 800);
-      }
-    ) : void 0
-  ), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("flex items-center justify-center", clx), children: [
-    showQuantity && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
-      "relative flex items-center justify-center mr-1",
-      wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : ""
-    ), children: [
-      cmmc.cartQuantity > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { className: ui.cn(
-        "z-above-content flex flex-col justify-center items-center",
-        "absolute left-0 right-0 top-0 bottom-0",
-        digitClx
-      ), children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        /* color: 'white'  tailwind bug? ,*/
-        fontSize: "11px",
-        position: "relative",
-        top: "1px"
-      }, children: cmmc.cartQuantity }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(bag_icon_default, { width: "19", height: "24", className: ui.cn("relative -top-[3px] opacity-70", iconClx), "aria-hidden": "true" })
-    ] }),
-    showArrow && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "17px" }, children: "\u203A" })
-  ] });
-});
-var CheckoutButton = ({
-  handleCheckout,
-  variant = "primary",
-  rounded = "lg",
-  className,
-  showQuantity = true,
-  showArrow = true,
-  animateOnQuantityChange = true,
-  centerText = true,
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    primitives.Button,
-    {
-      ...rest,
-      onClick: handleCheckout,
-      variant,
-      className: ui.cn(`rounded-${rounded}`, ui.cn(
-        "flex justify-between items-stretch group",
-        showQuantity ? centerText ? "px-1.5" : "pl-2.5 pr-1.5" : "",
-        className
-      )),
-      children: [
-        centerText && // must scale this one too, as it effects layout
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconAndQuantity,
-          {
-            showArrow,
-            showQuantity,
-            clx: "invisible group-hover:scale-105 transition-scale transition-duration-300"
-          }
-        ),
-        children ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center", children: "Checkout" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          IconAndQuantity,
-          {
-            clx: "group-hover:scale-105 transition-scale transition-duration-300",
-            animateOnQuantityChange,
-            showArrow,
-            showQuantity,
-            iconClx: "fill-background",
-            digitClx: "text-foreground group-hover:opacity-80 leading-none font-bold font-sans"
-          }
-        )
-      ]
-    }
-  );
-};
-var checkout_button_default = CheckoutButton;
-var CN = {
-  // h: mind padding!
-  mobile: { w: 36, h: 32 },
-  sm: { w: 60, h: 34 },
-  desktop: { w: 60, h: 32 }
-};
-var Info = ({
-  item,
-  clx = ""
-}) => {
-  const cmmc = commerce.useCommerce();
-  const family = cmmc.getFamilyById(item.familyId);
-  let topLine = family.title;
-  if (item.sku.startsWith("LXM-AG") || item.sku.startsWith("LXM-AU")) {
-    topLine = family.parentTitle + ", " + family.title;
-  }
-  const optionLabel = item.optionLabelShort ?? item.optionLabel;
-  const priceStr = commerce.formatCurrencyValue(item.price);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ", clx), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-left text-xs", children: topLine }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xxs", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2.5", children: priceStr })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs", clx), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-left", children: topLine }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: optionLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-2.5", children: priceStr })
-      ] })
-    ] })
-  ] });
-};
-var PROMPT_COMMON_CLX = "block absolute top-0 left-0 bg-transparent duration-400 transition-opacity";
-var Micro = mobxReactLite.observer(({
-  clx = "",
-  handleCheckout,
-  handleItemClicked
-}) => {
-  const drawer = useCommerceDrawer();
-  const cmmc = commerce.useCommerce();
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
-    drawer.showRecent ? "grid grid-cols-2" : "flex justify-center items-center ",
-    drawer.showRecent ? drawer.isMobile ? "-mt-3" : "-mt-3" : "",
-    "gap-2 md:gap-3 relative",
-    clx
-  ), children: [
-    drawer.showRecent && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex flex-col items-stretch " + (drawer.isMobile ? "justify-start" : "group"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { tag: "p", className: "relative text-muted text-xxs md:text-xs leading-none pl-1 self-start " + (drawer.isMobile ? "top-[3px]" : "top-[1px]"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "invisible", children: "scrictly for layout" }),
-        drawer.isMobile ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX, children: "tap for options:" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX + " group-hover:opacity-0", children: "recent item:" }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: PROMPT_COMMON_CLX + " opacity-0 group-hover:opacity-100", children: "view options:" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        primitives.Button,
-        {
-          variant: "ghost",
-          className: ui.cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, ui.cn(
-            "box-content",
-            "flex flex-row justify-between items-center gap-1",
-            "-ml-1.5",
-            "overflow-hidden ",
-            "px-1 md:px-2 py-[2px]",
-            "border border-transparent group-hover:border-muted-3",
-            "group-hover:!bg-transparent",
-            "!min-w-0"
-          )),
-          size: drawer.isMobile ? "sm" : "default",
-          onClick: handleItemClicked,
-          children: [
-            cmmc.recentItem?.item.img && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.mobile, className: "sm:hidden grow-0 shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.sm, className: "hidden sm:block md:hidden grow-0 shrink-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.desktop, className: "hidden md:block grow-0 shrink-0" })
-            ] }),
-            cmmc.recentItem && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grow w-full", children: /* @__PURE__ */ jsxRuntime.jsx(Info, { item: cmmc.recentItem.item, clx: "w-full" }) })
-          ]
-        }
-      )
-    ] }),
-    drawer.showCheckout && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
-      "flex flex-col w-full",
-      drawer.showRecent ? "items-stretch" : "items-center",
-      drawer.isMobile ? "justify-start" : "justify-center"
-    ), children: [
-      drawer.showRecent && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start", children: "for layout" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        checkout_button_default,
-        {
-          handleCheckout,
-          variant: "primary",
-          size: drawer.isMobile ? "sm" : "lg",
-          className: ui.cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, ui.cn(
-            drawer.isMobile ? drawer.showRecent ? "pl-3.5 pr-2.5" : "min-w-[320px]" : drawer.showRecent ? "" : "w-[320px]",
-            "text-sm font-semibold"
-          )),
-          centerText: drawer.isMobile ? !drawer.showRecent : true
-        }
-      )
-    ] })
-  ] });
-});
-var micro_default = Micro;
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var CommerceDrawer__default = /*#__PURE__*/_interopDefault(CommerceDrawer);
+var CheckoutButton__default = /*#__PURE__*/_interopDefault(CheckoutButton);
+var Micro__default = /*#__PURE__*/_interopDefault(Micro);
+
 var CommerceUIComponent = mobxReactLite.observer(() => {
-  const buy = useSelectAndBuy();
-  const drawer = useCommerceDrawer();
+  const buy = context_js.useSelectAndBuy();
+  const drawer = context_js.useCommerceDrawer();
   const router = navigation.useRouter();
   const handleCheckout = () => {
     router.push("/checkout");
@@ -315,7 +41,7 @@ var CommerceUIComponent = mobxReactLite.observer(() => {
     return false;
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    shell_default,
+    CommerceDrawer__default.default,
     {
       handleHandleClicked,
       handleCloseGesture,
@@ -333,7 +59,7 @@ var CommerceUIComponent = mobxReactLite.observer(() => {
           {
             skuPath: buy.currentSkuPath,
             checkoutButton: /* @__PURE__ */ jsxRuntime.jsx(
-              checkout_button_default,
+              CheckoutButton__default.default,
               {
                 handleCheckout,
                 className: "w-full min-w-[160px] sm:max-w-[320px]"
@@ -346,7 +72,7 @@ var CommerceUIComponent = mobxReactLite.observer(() => {
           }
         ) }),
         drawer.state === "micro" && /* @__PURE__ */ jsxRuntime.jsx(
-          micro_default,
+          Micro__default.default,
           {
             handleCheckout,
             handleItemClicked,

package/dist/site/components/commerce/drawer/index.js

@@ -1,293 +1,13 @@
 'use client';
 import { useRouter } from 'next/navigation';
-import { enableStaticRendering, observer } from 'mobx-react-lite';
-import { useCommerce, CarouselBuyCard, formatCurrencyValue } from '@hanzo/commerce';
-import { createContext, useRef, useEffect, useContext } from 'react';
-import 'usehooks-ts';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Drawer, DrawerContent, DrawerHandle, Button } from '@hanzo/ui/primitives';
-import { cn, Box, MediaStack } from '@hanzo/ui';
-import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { CarouselBuyCard } from '@hanzo/commerce';
+import { useSelectAndBuy, useCommerceDrawer } from '../../../commerce/ui/context.js';
+import CommerceDrawer from './shell.js';
+import CheckoutButton from '../checkout-button.js';
+import Micro from './micro.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-enableStaticRendering(typeof window === "undefined");
-var CommerceUIContext = createContext(void 0);
-var useCommerceDrawer = () => {
-  return useContext(CommerceUIContext);
-};
-var useSelectAndBuy = () => {
-  return useContext(CommerceUIContext);
-};
-var CommerceDrawer = observer(({
-  children,
-  handleHandleClicked,
-  drawerClx = "",
-  ...rest
-}) => {
-  const drawer = useCommerceDrawer();
-  return /* @__PURE__ */ jsx(
-    Drawer,
-    {
-      open: drawer.open,
-      onOpenChange: () => {
-      },
-      modal: drawer.modal,
-      snapPoints: drawer.points,
-      activeSnapPoint: drawer.activePoint,
-      setActiveSnapPoint: drawer.onActivePointChanged.bind(drawer),
-      fastDragSkipsToEnd: false,
-      dragHandleOnly: true,
-      handleHandleClicked,
-      extendHandleDragRegion: false,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(
-        DrawerContent,
-        {
-          defaultHandle: false,
-          className: cn(
-            "border-0",
-            drawer.isMobile ? "pt-5" : "pt-6",
-            "w-full h-full"
-          ),
-          onOpenAutoFocus: (e) => {
-            e.preventDefault();
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              DrawerHandle,
-              {
-                className: cn(
-                  "absolute top-0 left-0 right-0 mx-auto z-10",
-                  "flex justify-center items-start",
-                  "border-t rounded-t-lg border-muted-3",
-                  drawer.isMobile ? "h-5 touch-pan-y" : "h-6"
-                ),
-                children: /* @__PURE__ */ jsx(Box, { className: cn(
-                  // pseudo-handle
-                  "rounded-[3px] bg-level-3",
-                  drawer.isMobile ? "w-[155px] mt-[5px] h-1.5" : "w-[180px] mt-[3px] h-2.5 hover:bg-level-4",
-                  !drawer.isMobile ? "cursor-grab active:cursor-grabbing" : ""
-                ) })
-              }
-            ),
-            children
-          ]
-        }
-      )
-    }
-  );
-});
-var shell_default = CommerceDrawer;
-var BagIcon = (props) => /* @__PURE__ */ jsx("svg", { fill: "none", viewBox: "0 0 1019 1281", ...props, children: /* @__PURE__ */ jsx("path", { d: "m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z", fill: "currentColor" }) });
-var bag_icon_default = BagIcon;
-var IconAndQuantity = observer(({
-  animateOnQuantityChange = false,
-  showArrow = true,
-  showQuantity = true,
-  clx = "",
-  iconClx = "",
-  digitClx = ""
-}) => {
-  const cmmc = useCommerce();
-  const wiggleRef = useRef(observable.box("none"));
-  useEffect(() => (
-    // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => cmmc.cartQuantity,
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {
-            wiggleRef.current.set("more");
-          });
-        } else {
-          runInAction(() => {
-            wiggleRef.current.set("less");
-          });
-        }
-        setTimeout(() => {
-          runInAction(() => {
-            wiggleRef.current.set("none");
-          });
-        }, 800);
-      }
-    ) : void 0
-  ), []);
-  return /* @__PURE__ */ jsxs(Box, { className: cn("flex items-center justify-center", clx), children: [
-    showQuantity && /* @__PURE__ */ jsxs(Box, { className: cn(
-      "relative flex items-center justify-center mr-1",
-      wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : ""
-    ), children: [
-      cmmc.cartQuantity > 0 && /* @__PURE__ */ jsx(Box, { className: cn(
-        "z-above-content flex flex-col justify-center items-center",
-        "absolute left-0 right-0 top-0 bottom-0",
-        digitClx
-      ), children: /* @__PURE__ */ jsx("div", { style: {
-        /* color: 'white'  tailwind bug? ,*/
-        fontSize: "11px",
-        position: "relative",
-        top: "1px"
-      }, children: cmmc.cartQuantity }) }),
-      /* @__PURE__ */ jsx(bag_icon_default, { width: "19", height: "24", className: cn("relative -top-[3px] opacity-70", iconClx), "aria-hidden": "true" })
-    ] }),
-    showArrow && /* @__PURE__ */ jsx("span", { style: { fontSize: "17px" }, children: "\u203A" })
-  ] });
-});
-var CheckoutButton = ({
-  handleCheckout,
-  variant = "primary",
-  rounded = "lg",
-  className,
-  showQuantity = true,
-  showArrow = true,
-  animateOnQuantityChange = true,
-  centerText = true,
-  children,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      ...rest,
-      onClick: handleCheckout,
-      variant,
-      className: cn(`rounded-${rounded}`, cn(
-        "flex justify-between items-stretch group",
-        showQuantity ? centerText ? "px-1.5" : "pl-2.5 pr-1.5" : "",
-        className
-      )),
-      children: [
-        centerText && // must scale this one too, as it effects layout
-        /* @__PURE__ */ jsx(
-          IconAndQuantity,
-          {
-            showArrow,
-            showQuantity,
-            clx: "invisible group-hover:scale-105 transition-scale transition-duration-300"
-          }
-        ),
-        children ?? /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: "Checkout" }),
-        /* @__PURE__ */ jsx(
-          IconAndQuantity,
-          {
-            clx: "group-hover:scale-105 transition-scale transition-duration-300",
-            animateOnQuantityChange,
-            showArrow,
-            showQuantity,
-            iconClx: "fill-background",
-            digitClx: "text-foreground group-hover:opacity-80 leading-none font-bold font-sans"
-          }
-        )
-      ]
-    }
-  );
-};
-var checkout_button_default = CheckoutButton;
-var CN = {
-  // h: mind padding!
-  mobile: { w: 36, h: 32 },
-  sm: { w: 60, h: 34 },
-  desktop: { w: 60, h: 32 }
-};
-var Info = ({
-  item,
-  clx = ""
-}) => {
-  const cmmc = useCommerce();
-  const family = cmmc.getFamilyById(item.familyId);
-  let topLine = family.title;
-  if (item.sku.startsWith("LXM-AG") || item.sku.startsWith("LXM-AU")) {
-    topLine = family.parentTitle + ", " + family.title;
-  }
-  const optionLabel = item.optionLabelShort ?? item.optionLabel;
-  const priceStr = formatCurrencyValue(item.price);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(Box, { className: cn("sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ", clx), children: [
-      /* @__PURE__ */ jsx("p", { className: "text-left text-xs", children: topLine }),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xxs", children: [
-        /* @__PURE__ */ jsx("div", { children: optionLabel }),
-        /* @__PURE__ */ jsx("div", { className: "pl-2.5", children: priceStr })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(Box, { className: cn("hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs", clx), children: [
-      /* @__PURE__ */ jsx("p", { className: "text-left", children: topLine }),
-      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsx("div", { children: optionLabel }),
-        /* @__PURE__ */ jsx("div", { className: "pl-2.5", children: priceStr })
-      ] })
-    ] })
-  ] });
-};
-var PROMPT_COMMON_CLX = "block absolute top-0 left-0 bg-transparent duration-400 transition-opacity";
-var Micro = observer(({
-  clx = "",
-  handleCheckout,
-  handleItemClicked
-}) => {
-  const drawer = useCommerceDrawer();
-  const cmmc = useCommerce();
-  return /* @__PURE__ */ jsxs(Box, { className: cn(
-    drawer.showRecent ? "grid grid-cols-2" : "flex justify-center items-center ",
-    drawer.showRecent ? drawer.isMobile ? "-mt-3" : "-mt-3" : "",
-    "gap-2 md:gap-3 relative",
-    clx
-  ), children: [
-    drawer.showRecent && /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-stretch " + (drawer.isMobile ? "justify-start" : "group"), children: [
-      /* @__PURE__ */ jsxs(Box, { tag: "p", className: "relative text-muted text-xxs md:text-xs leading-none pl-1 self-start " + (drawer.isMobile ? "top-[3px]" : "top-[1px]"), children: [
-        /* @__PURE__ */ jsx("span", { className: "invisible", children: "scrictly for layout" }),
-        drawer.isMobile ? /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX, children: "tap for options:" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX + " group-hover:opacity-0", children: "recent item:" }),
-          /* @__PURE__ */ jsx(Box, { tag: "span", className: PROMPT_COMMON_CLX + " opacity-0 group-hover:opacity-100", children: "view options:" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "ghost",
-          className: cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, cn(
-            "box-content",
-            "flex flex-row justify-between items-center gap-1",
-            "-ml-1.5",
-            "overflow-hidden ",
-            "px-1 md:px-2 py-[2px]",
-            "border border-transparent group-hover:border-muted-3",
-            "group-hover:!bg-transparent",
-            "!min-w-0"
-          )),
-          size: drawer.isMobile ? "sm" : "default",
-          onClick: handleItemClicked,
-          children: [
-            cmmc.recentItem?.item.img && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.mobile, className: "sm:hidden grow-0 shrink-0" }),
-              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.sm, className: "hidden sm:block md:hidden grow-0 shrink-0" }),
-              /* @__PURE__ */ jsx(MediaStack, { media: { img: cmmc.recentItem.item.img }, constrainTo: CN.desktop, className: "hidden md:block grow-0 shrink-0" })
-            ] }),
-            cmmc.recentItem && /* @__PURE__ */ jsx("div", { className: "grow w-full", children: /* @__PURE__ */ jsx(Info, { item: cmmc.recentItem.item, clx: "w-full" }) })
-          ]
-        }
-      )
-    ] }),
-    drawer.showCheckout && /* @__PURE__ */ jsxs(Box, { className: cn(
-      "flex flex-col w-full",
-      drawer.showRecent ? "items-stretch" : "items-center",
-      drawer.isMobile ? "justify-start" : "justify-center"
-    ), children: [
-      drawer.showRecent && /* @__PURE__ */ jsx("p", { className: "invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start", children: "for layout" }),
-      /* @__PURE__ */ jsx(
-        checkout_button_default,
-        {
-          handleCheckout,
-          variant: "primary",
-          size: drawer.isMobile ? "sm" : "lg",
-          className: cn(`rounded-${drawer.isMobile ? "md" : "lg"}`, cn(
-            drawer.isMobile ? drawer.showRecent ? "pl-3.5 pr-2.5" : "min-w-[320px]" : drawer.showRecent ? "" : "w-[320px]",
-            "text-sm font-semibold"
-          )),
-          centerText: drawer.isMobile ? !drawer.showRecent : true
-        }
-      )
-    ] })
-  ] });
-});
-var micro_default = Micro;
 var CommerceUIComponent = observer(() => {
   const buy = useSelectAndBuy();
   const drawer = useCommerceDrawer();
@@ -313,7 +33,7 @@ var CommerceUIComponent = observer(() => {
     return false;
   };
   return /* @__PURE__ */ jsxs(
-    shell_default,
+    CommerceDrawer,
     {
       handleHandleClicked,
       handleCloseGesture,
@@ -331,7 +51,7 @@ var CommerceUIComponent = observer(() => {
           {
             skuPath: buy.currentSkuPath,
             checkoutButton: /* @__PURE__ */ jsx(
-              checkout_button_default,
+              CheckoutButton,
               {
                 handleCheckout,
                 className: "w-full min-w-[160px] sm:max-w-[320px]"
@@ -344,7 +64,7 @@ var CommerceUIComponent = observer(() => {
           }
         ) }),
         drawer.state === "micro" && /* @__PURE__ */ jsx(
-          micro_default,
+          Micro,
           {
             handleCheckout,
             handleItemClicked,