@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/commerce/checkout-panel/desktop-cp.cjs

@@ -0,0 +1,235 @@
+'use strict';
+
+var mobxReactLite = require('mobx-react-lite');
+var primitives = require('@hanzo/ui/primitives');
+var react = require('react');
+var ui = require('@hanzo/ui');
+var react$1 = require('@hanzo/iam/react');
+var jsxRuntime = require('react/jsx-runtime');
+var commerce = require('@hanzo/commerce');
+var Link2 = require('next/link');
+var logo = require('@luxfi/logo');
+var navigation = require('next/navigation');
+var lucideReact = require('lucide-react');
+var reactTooltip = require('react-tooltip');
+require('embla-carousel-autoplay');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Link2__default = /*#__PURE__*/_interopDefault(Link2);
+
+// src/site/components/auth/resume.ts
+var KEY = "lux-auth-resume";
+var remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search);
+};
+var Widget = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+  const { isAuthenticated, isLoading, login, logout } = react$1.useIam();
+  const identity = react$1.useIamIdentity();
+  if (isLoading) {
+    return null;
+  }
+  if (!isAuthenticated) {
+    return noLogin ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.Button,
+      {
+        variant: "primary",
+        className: ui.cn("h-8 w-fit !min-w-0", className),
+        onClick: handleLogin ?? (() => {
+          remember();
+          void login();
+        }),
+        children: "Login"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(primitives.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: ui.cn("rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8", className),
+        children: identity?.initials
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverContent, { className: "bg-level-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 truncate", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium leading-none truncate", children: identity?.name }),
+        identity?.email && identity.email !== identity.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm opacity-50 truncate", children: identity.email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { variant: "outline", onClick: () => {
+        logout();
+      }, children: "Logout" })
+    ] }) })
+  ] });
+};
+var AuthWidget = (props) => react.useContext(react$1.IamContext) ? /* @__PURE__ */ jsxRuntime.jsx(Widget, { ...props }) : null;
+var widget_default = AuthWidget;
+var SIZE = {
+  xl: { mark: 40, word: 22, gap: "gap-4" },
+  lg: { mark: 40, word: 22, gap: "gap-4" },
+  md: { mark: 32, word: 18, gap: "gap-3" },
+  sm: { mark: 24, word: 13, gap: "gap-2" },
+  xs: { mark: 16, word: 9, gap: "gap-1.5" }
+};
+var Logo = ({
+  size = "md",
+  href,
+  // no default please!
+  outerClx = "",
+  variant = "full",
+  onClick
+}) => {
+  const s = SIZE[size] ?? SIZE.md;
+  const clx = "flex flex-row items-center " + s.gap + " " + (href ? "hover:opacity-80 cursor-pointer " : "cursor-default ") + outerClx;
+  const art = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href, style: ui.css(clx), onClick, children: art }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: clx, onClick, children: art });
+};
+var BackButton = ({
+  variant = "ghost",
+  size = "default",
+  clx = "",
+  iconClx = "",
+  onBack
+}) => {
+  const router = navigation.useRouter();
+  const back = () => {
+    if (onBack) {
+      onBack();
+    }
+    router.back();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    primitives.Button,
+    {
+      variant,
+      size,
+      onClick: back,
+      className: clx,
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { style: ui.css(iconClx) })
+    }
+  );
+};
+var back_button_default = BackButton;
+var linkClx = ui.cn(primitives.buttonVariants({ variant: "linkMuted" }), "rounded-none");
+var PolicyLinks = ({
+  clx = ""
+}) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("flex flex-col items-center", clx), children: [
+  /* @__PURE__ */ jsxRuntime.jsx(primitives.Separator, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { style: ui.css(linkClx), href: "", children: "refund policy" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { style: ui.css(linkClx), href: "", children: "privacy policy" })
+  ] })
+] });
+var policy_links_default = PolicyLinks;
+var Tooltip = ({
+  select,
+  text,
+  clx = "",
+  position = "bottom",
+  offset = 2
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  reactTooltip.Tooltip,
+  {
+    anchorSelect: select,
+    noArrow: true,
+    opacity: 1,
+    content: text,
+    place: position,
+    offset,
+    delayShow: 100,
+    delayHide: 100,
+    className: "!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating" + clx
+  }
+);
+var tooltip_default = Tooltip;
+var DesktopBagCarousel = mobxReactLite.observer(({
+  constrainTo,
+  className = ""
+}) => {
+  const cmmc = commerce.useCommerce();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    commerce.CarouselItemSelector,
+    {
+      items: cmmc.cartItems,
+      selectedItemRef: cmmc,
+      scrollable: false,
+      selectSku: cmmc.setCurrentItem.bind(cmmc),
+      clx: className,
+      ext: {
+        options: { loop: true },
+        constrainTo,
+        imageOnly: true
+      }
+    }
+  );
+});
+var desktop_bag_carousel_default = DesktopBagCarousel;
+var DesktopCheckoutPanel = mobxReactLite.observer(({
+  step,
+  stepNames,
+  onLeave,
+  clx = "",
+  children
+}) => {
+  const cmmc = commerce.useCommerce();
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("grid grid-cols-2", clx), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full bg-background flex flex-row items-start justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[80px] grow-0 flex flex-row items-center z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Logo, { size: "md", href: "/", onClick: onLeave, variant: "wordmark", outerClx: "logo-outer-tooltip-class" }),
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip_default, { select: ".logo-outer-tooltip-class", text: "home", position: "right", offset: 6 })
+      ] }, 1),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        back_button_default,
+        {
+          size: "sm",
+          clx: "z-10 absolute top-14 left-6 !px-0 aspect-square rounded-full hover:!bg-level-3 back-button-tooltip-class ",
+          onBack: onLeave
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip_default, { select: ".back-button-tooltip-class", text: "back", position: "right", offset: 5 }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn(
+        "w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3",
+        cmmc.cartItems.length > 4 ? "justify-between" : "justify-start gap-10 pt-10"
+      ), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(desktop_bag_carousel_default, { className: "grow-0 h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8", constrainTo: { w: 250, h: 250 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          commerce.CartPanel,
+          {
+            className: "w-full border-none p-0",
+            itemClx: "mb-2",
+            totalClx: "sticky bottom-0 bg-background",
+            listClx: "pr-3",
+            scrollAfter: 4,
+            scrollHeightClx: "min-h-[50vh] grow",
+            showPromoCode: true,
+            showShipping: true,
+            selectItems: true
+          }
+        )
+      ] }, 2)
+    ] }) }, 1),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full flex flex-col bg-level-1 min-h-screen justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.ScrollArea, { className: "w-full flex flex-row items-start justify-start overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(widget_default, { noLogin: true, className: "hidden md:flex absolute top-4 right-4 " }),
+          /* @__PURE__ */ jsxRuntime.jsx(primitives.StepIndicator, { dotSizeRem: 1.35, steps: stepNames, currentStep: step, className: "gap-2 text-base w-pr-70" })
+        ] }, 1),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[550px] mx-auto py-8", children }, 2)
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[550px] mx-auto flex flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsx(policy_links_default, { clx: "w-full" }) }) })
+    ] }, 2)
+  ] });
+});
+var desktop_cp_default = DesktopCheckoutPanel;
+
+module.exports = desktop_cp_default;

package/dist/site/components/commerce/checkout-panel/desktop-cp.css

@@ -0,0 +1,132 @@
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}
+
+/* src/site/style/drawer-handle-overrides.css */
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-drawer][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, 100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=top] {
+  transform: translate3d(0, -100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=left] {
+  transform: translate3d(-100%, 0, 0);
+}
+[vaul-drawer][vaul-drawer-direction=right] {
+  transform: translate3d(100%, 0, 0);
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=top] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=bottom] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=left] {
+  overflow-x: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=right] {
+  overflow-x: hidden !important;
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=top] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=left] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=right] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-overlay][vaul-drawer-visible=true] {
+  opacity: 1;
+}
+[vaul-drawer]::after {
+  content: "";
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+[vaul-drawer][vaul-drawer-direction=top]::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=bottom]::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=left]::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=right]::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-handle] {
+  touch-action: pan-y;
+  cursor: grab;
+}
+[vaul-handle]:active {
+  opacity: 1;
+}
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+[vaul-handle]:focus-visible {
+  outline: none;
+}
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  touch-action: inherit;
+}
+[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay=true]):not([data-state=closed]) {
+  opacity: 0;
+}
+[vaul-overlay][vaul-snap-points-overlay=true]:not([vaul-drawer-visible=false]) {
+  opacity: 1;
+}
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}

package/dist/site/components/commerce/checkout-panel/desktop-cp.d.ts

@@ -0,0 +1,5 @@
+import React, { type PropsWithChildren } from 'react';
+import type CheckoutPanelProps from './checkout-panel-props';
+declare const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps>;
+export default DesktopCheckoutPanel;
+//# sourceMappingURL=desktop-cp.d.ts.map

package/dist/site/components/commerce/checkout-panel/desktop-cp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-cp.d.ts","sourceRoot":"","sources":["../../../../../src/site/components/commerce/checkout-panel/desktop-cp.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAUrD,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAA;AAE5D,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,kBAAkB,CAkEzE,CAAA;eAEa,oBAAoB"}

package/dist/site/components/commerce/checkout-panel/desktop-cp.js

@@ -0,0 +1,229 @@
+import { observer } from 'mobx-react-lite';
+import { buttonVariants, ScrollArea, StepIndicator, Button, Separator, Popover, PopoverTrigger, PopoverContent } from '@hanzo/ui/primitives';
+import { useContext } from 'react';
+import { cn, Box, css } from '@hanzo/ui';
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useCommerce, CarouselItemSelector, CartPanel } from '@hanzo/commerce';
+import Link2 from 'next/link';
+import { Logo as Logo$1, Wordmark } from '@luxfi/logo';
+import { useRouter } from 'next/navigation';
+import { ChevronLeft } from 'lucide-react';
+import { Tooltip as Tooltip$1 } from 'react-tooltip';
+import 'embla-carousel-autoplay';
+
+// src/site/components/auth/resume.ts
+var KEY = "lux-auth-resume";
+var remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search);
+};
+var Widget = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+  const { isAuthenticated, isLoading, login, logout } = useIam();
+  const identity = useIamIdentity();
+  if (isLoading) {
+    return null;
+  }
+  if (!isAuthenticated) {
+    return noLogin ? null : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        className: cn("h-8 w-fit !min-w-0", className),
+        onClick: handleLogin ?? (() => {
+          remember();
+          void login();
+        }),
+        children: "Login"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: cn("rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8", className),
+        children: identity?.initials
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "bg-level-0", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 truncate", children: [
+        /* @__PURE__ */ jsx("h4", { className: "font-medium leading-none truncate", children: identity?.name }),
+        identity?.email && identity.email !== identity.name && /* @__PURE__ */ jsx("p", { className: "text-sm opacity-50 truncate", children: identity.email })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => {
+        logout();
+      }, children: "Logout" })
+    ] }) })
+  ] });
+};
+var AuthWidget = (props) => useContext(IamContext) ? /* @__PURE__ */ jsx(Widget, { ...props }) : null;
+var widget_default = AuthWidget;
+var SIZE = {
+  xl: { mark: 40, word: 22, gap: "gap-4" },
+  lg: { mark: 40, word: 22, gap: "gap-4" },
+  md: { mark: 32, word: 18, gap: "gap-3" },
+  sm: { mark: 24, word: 13, gap: "gap-2" },
+  xs: { mark: 16, word: 9, gap: "gap-1.5" }
+};
+var Logo = ({
+  size = "md",
+  href,
+  // no default please!
+  outerClx = "",
+  variant = "full",
+  onClick
+}) => {
+  const s = SIZE[size] ?? SIZE.md;
+  const clx = "flex flex-row items-center " + s.gap + " " + (href ? "hover:opacity-80 cursor-pointer " : "cursor-default ") + outerClx;
+  const art = /* @__PURE__ */ jsxs(Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsx(Logo$1, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsx(Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsx(Link2, { href, style: css(clx), onClick, children: art }) : /* @__PURE__ */ jsx(Box, { tag: "span", className: clx, onClick, children: art });
+};
+var BackButton = ({
+  variant = "ghost",
+  size = "default",
+  clx = "",
+  iconClx = "",
+  onBack
+}) => {
+  const router = useRouter();
+  const back = () => {
+    if (onBack) {
+      onBack();
+    }
+    router.back();
+  };
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      size,
+      onClick: back,
+      className: clx,
+      children: /* @__PURE__ */ jsx(ChevronLeft, { style: css(iconClx) })
+    }
+  );
+};
+var back_button_default = BackButton;
+var linkClx = cn(buttonVariants({ variant: "linkMuted" }), "rounded-none");
+var PolicyLinks = ({
+  clx = ""
+}) => /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col items-center", clx), children: [
+  /* @__PURE__ */ jsx(Separator, {}),
+  /* @__PURE__ */ jsxs("div", { className: "flex gap-4 py-2 text-sm", children: [
+    /* @__PURE__ */ jsx(Link2, { style: css(linkClx), href: "", children: "refund policy" }),
+    /* @__PURE__ */ jsx(Link2, { style: css(linkClx), href: "", children: "privacy policy" })
+  ] })
+] });
+var policy_links_default = PolicyLinks;
+var Tooltip = ({
+  select,
+  text,
+  clx = "",
+  position = "bottom",
+  offset = 2
+}) => /* @__PURE__ */ jsx(
+  Tooltip$1,
+  {
+    anchorSelect: select,
+    noArrow: true,
+    opacity: 1,
+    content: text,
+    place: position,
+    offset,
+    delayShow: 100,
+    delayHide: 100,
+    className: "!opacity-100 !bg-level-2 border rounded-[3px] !px-1.5 !py-1 z-floating" + clx
+  }
+);
+var tooltip_default = Tooltip;
+var DesktopBagCarousel = observer(({
+  constrainTo,
+  className = ""
+}) => {
+  const cmmc = useCommerce();
+  return /* @__PURE__ */ jsx(
+    CarouselItemSelector,
+    {
+      items: cmmc.cartItems,
+      selectedItemRef: cmmc,
+      scrollable: false,
+      selectSku: cmmc.setCurrentItem.bind(cmmc),
+      clx: className,
+      ext: {
+        options: { loop: true },
+        constrainTo,
+        imageOnly: true
+      }
+    }
+  );
+});
+var desktop_bag_carousel_default = DesktopBagCarousel;
+var DesktopCheckoutPanel = observer(({
+  step,
+  stepNames,
+  onLeave,
+  clx = "",
+  children
+}) => {
+  const cmmc = useCommerce();
+  return /* @__PURE__ */ jsxs(Box, { className: cn("grid grid-cols-2", clx), children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full h-full bg-background flex flex-row items-start justify-end", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "h-[80px] grow-0 flex flex-row items-center z-10", children: [
+        /* @__PURE__ */ jsx(Logo, { size: "md", href: "/", onClick: onLeave, variant: "wordmark", outerClx: "logo-outer-tooltip-class" }),
+        /* @__PURE__ */ jsx(tooltip_default, { select: ".logo-outer-tooltip-class", text: "home", position: "right", offset: 6 })
+      ] }, 1),
+      /* @__PURE__ */ jsx(
+        back_button_default,
+        {
+          size: "sm",
+          clx: "z-10 absolute top-14 left-6 !px-0 aspect-square rounded-full hover:!bg-level-3 back-button-tooltip-class ",
+          onBack: onLeave
+        }
+      ),
+      /* @__PURE__ */ jsx(tooltip_default, { select: ".back-button-tooltip-class", text: "back", position: "right", offset: 5 }),
+      /* @__PURE__ */ jsxs(Box, { className: cn(
+        "w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3",
+        cmmc.cartItems.length > 4 ? "justify-between" : "justify-start gap-10 pt-10"
+      ), children: [
+        /* @__PURE__ */ jsx(desktop_bag_carousel_default, { className: "grow-0 h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8", constrainTo: { w: 250, h: 250 } }),
+        /* @__PURE__ */ jsx(
+          CartPanel,
+          {
+            className: "w-full border-none p-0",
+            itemClx: "mb-2",
+            totalClx: "sticky bottom-0 bg-background",
+            listClx: "pr-3",
+            scrollAfter: 4,
+            scrollHeightClx: "min-h-[50vh] grow",
+            showPromoCode: true,
+            showShipping: true,
+            selectItems: true
+          }
+        )
+      ] }, 2)
+    ] }) }, 1),
+    /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col bg-level-1 min-h-screen justify-between", children: [
+      /* @__PURE__ */ jsx(ScrollArea, { className: "w-full flex flex-row items-start justify-start overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end", children: [
+          /* @__PURE__ */ jsx(widget_default, { noLogin: true, className: "hidden md:flex absolute top-4 right-4 " }),
+          /* @__PURE__ */ jsx(StepIndicator, { dotSizeRem: 1.35, steps: stepNames, currentStep: step, className: "gap-2 text-base w-pr-70" })
+        ] }, 1),
+        /* @__PURE__ */ jsx("div", { className: "w-full max-w-[550px] mx-auto py-8", children }, 2)
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-[550px] mx-auto flex flex-col items-center", children: /* @__PURE__ */ jsx(policy_links_default, { clx: "w-full" }) }) })
+    ] }, 2)
+  ] });
+});
+var desktop_cp_default = DesktopCheckoutPanel;
+
+export { desktop_cp_default as default };