@luxfi/ui 8.0.0 → 8.2.0

package/dist/site/root-layout/index.js

@@ -0,0 +1,1547 @@
+import { buttonVariants, NavigationMenuLink, Drawer, DrawerContent, DrawerHandle, Button, Toaster, Card, NavigationMenu, NavigationMenuList, NavigationMenuItem, navigationMenuTriggerStyle, NavigationMenuTrigger, NavigationMenuContent, Popover, PopoverTrigger, PopoverContent, PopoverClose, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Separator } from '@hanzo/ui/primitives';
+import { Box, cn, MediaStack, Hanzo, css } from '@hanzo/ui';
+import { useCommerce, CarouselBuyCard, formatCurrencyValue, CommerceProvider, CartPanel } from '@hanzo/commerce';
+import localFont from 'next/font/local';
+import * as React7 from 'react';
+import React7__default, { createContext, useRef, useEffect, useContext, useLayoutEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import Script from 'next/script';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { enableStaticRendering, observer } from 'mobx-react-lite';
+import { useDebounceCallback } from 'usehooks-ts';
+import { observable, reaction, runInAction, makeObservable, computed, action, observableRef } from 'mobx';
+import { LuxLogo, Logo as Logo$1, Wordmark } from '@luxfi/logo';
+import Link2 from 'next/link';
+import { IamProvider, IamContext, useIam, Login as Login$1, useIamIdentity } from '@hanzo/iam/react';
+import { X, Plus, ChevronDown, ArrowRight } from 'lucide-react';
+import { BRAND_SERVER_URLS } from '@hanzo/iam/paths';
+import { GoogleAnalytics } from '@next/third-parties/google';
+import 'embla-carousel-autoplay';
+import '@hanzo/ui/theme.css';
+import '@hanzo/ui/styles.css';
+
+// src/site/root-layout/index.tsx
+
+// src/site/next/font/fonts.ts
+var fonts_default = [
+  {
+    fontFamily: ["var(--font-inter)"],
+    // do not provide fall-backs due to next bug
+    cssVar: "--font-inter",
+    name: "sans"
+  },
+  {
+    fontFamily: ["var(--font-inter)"],
+    // do not provide fall-backs due to next bug
+    cssVar: "--font-inter",
+    name: "nav"
+  },
+  {
+    fontFamily: ["var(--font-zen-sans)"],
+    // do not provide fall-backs due to next bug
+    cssVar: "--font-zen-sans",
+    name: "heading"
+  },
+  {
+    name: "serif",
+    fontFamily: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times"]
+  },
+  {
+    name: "mono",
+    fontFamily: [
+      "ui-monospace",
+      "SFMono-Regular",
+      "Menlo",
+      "Monaco",
+      "Consolas",
+      '"Liberation Mono"',
+      '"Courier New"',
+      "monospace"
+    ]
+  }
+];
+
+// src/site/next/font/load-and-return-lux-next-fonts-on-import.ts
+var zen = localFont({
+  src: "./local/Zen-Variable.woff2",
+  weight: "100 900",
+  display: "swap",
+  variable: "--font-zen-sans"
+});
+var inter = localFont({
+  src: "./local/InterVariable.ttf",
+  display: "swap",
+  variable: "--font-inter"
+});
+var load_and_return_lux_next_fonts_on_import_default = [
+  {
+    font: inter,
+    name: "sans"
+  },
+  {
+    font: inter,
+    name: "nav"
+  },
+  {
+    // Zen is one variable face over 100-900, so the display cut is weight and
+    // tracking in CSS rather than a second file: '.font-heading' in style/lux-global.css.
+    font: zen,
+    name: "heading"
+  }
+].map(
+  (el) => {
+    const font = fonts_default.find((f) => el.name === f.name);
+    if (!font) {
+      throw new Error("lux-next-fonts: Next font is not paired to a TW font!");
+    }
+    return {
+      ...font,
+      nextFont: el.font
+    };
+  }
+);
+
+// src/site/next/font/get-app-router-font-classes.ts
+var get_app_router_font_classes_default = () => {
+  const named = load_and_return_lux_next_fonts_on_import_default.map((desc) => desc.nextFont.variable);
+  return [...new Set(named)].join(" ");
+};
+
+// src/site/next/analytics/fpixel.ts
+var FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID || "";
+var pageview = () => {
+  window.fbq("track", "PageView");
+};
+var FacebookPixelHead = () => {
+  return /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      height: "1",
+      width: "1",
+      style: { display: "none" },
+      src: `https://www.facebook.com/tr?id=${FB_PIXEL_ID}&ev=PageView&noscript=1`
+    }
+  ) });
+};
+var FacebookPixel = () => {
+  const [loaded, setLoaded] = useState(false);
+  const pathname = usePathname();
+  useEffect(() => {
+    if (!loaded) return;
+    pageview();
+  }, [pathname, loaded]);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Script,
+    {
+      id: "fb-pixel",
+      strategy: "afterInteractive",
+      onLoad: () => setLoaded(true),
+      dangerouslySetInnerHTML: {
+        __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${FB_PIXEL_ID});
+          `
+      }
+    }
+  ) });
+};
+var log = (s) => {
+  {
+    console.log("COMMERCE_UI " + s);
+  }
+};
+var CommerceUIStore = class {
+  // points to either this._pointsConfig.md or this._pointsConfig.dt 
+  constructor(s, conf) {
+    this._vHeight = 0;
+    this._routeChangedTime = 0;
+    this._currentSkuPath = void 0;
+    this._closedByUser = false;
+    this._checkingOut = void 0;
+    this._ignoreStateChange = false;
+    this._activePoint = null;
+    this._reactionDisposers = [];
+    this.initialize = () => {
+      this._reactionDisposers.push(reaction(
+        () => this.state,
+        (s) => {
+          if (this.ignoreStateChange) {
+            log(`STATE CHANGE to "${s}" (IGNORED)`);
+            this.setIgnoreStateChange(false);
+            return;
+          } else {
+            log(`STATE CHANGE to "${s}" (UI REACTED)`);
+            this._syncUIToState(s);
+          }
+        }
+      ));
+    };
+    this.newRoute = () => {
+      this.setRouteChangedTime((/* @__PURE__ */ new Date()).getTime());
+      this.hideVariants();
+      this.setClosedByUser(false);
+    };
+    this.onActivePointChanged = (newPoint) => {
+      log("ON onActivePointChanged: " + newPoint);
+      if (newPoint === this._points.micro && this.activePoint === this._points.full) {
+        log("ON onActivePointChanged: to MICRO");
+        this.setIgnoreStateChange(true);
+        this.hideVariants();
+      } else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
+        log("ON onActivePointChanged: to FULL");
+        this.setIgnoreStateChange(true);
+        this.showRecentVariants();
+      }
+      this.setActivePoint(newPoint);
+    };
+    this.showVariants = (skuPath) => {
+      this._service.setCurrentItem(void 0);
+      this._currentSkuPath = skuPath;
+      this._closedByUser = false;
+    };
+    this.showRecentVariants = () => {
+      const recentItemInfo = this._service.recentItem;
+      if (recentItemInfo) {
+        this._service.setCurrentItem(void 0);
+        this._currentSkuPath = recentItemInfo.item.sku;
+        this._closedByUser = false;
+      }
+    };
+    this.hideVariants = () => {
+      this._currentSkuPath = void 0;
+    };
+    this.setClosedByUser = (b) => {
+      this._closedByUser = b;
+    };
+    this.setIgnoreStateChange = (b) => {
+      this._ignoreStateChange = b;
+    };
+    this.setCheckingOut = (b) => {
+      this._checkingOut = b;
+    };
+    this.setActivePoint = (pt) => {
+      this._activePoint = pt;
+    };
+    this.setRouteChangedTime = (t) => {
+      this._routeChangedTime = t;
+    };
+    this._syncUIToState = (s) => {
+      log("_syncUIToState: " + s);
+      if (s === "micro") {
+        this.setActivePoint(this.points[0]);
+      } else if (s === "full") {
+        this.setActivePoint(this.points[this.points.length - 1]);
+      } else {
+        this.setActivePoint(null);
+      }
+    };
+    this.setMobile = (b) => {
+      log("setMobile: " + b);
+      this._points = b ? this._pointsConfig.mb : this._pointsConfig.dt;
+    };
+    this.setViewportHeight = (v) => {
+      this._vHeight = v;
+    };
+    this.dispose = () => {
+      this._reactionDisposers.forEach((d) => {
+        d();
+      });
+    };
+    this._service = s;
+    this._pointsConfig = conf;
+    this._points = this._pointsConfig.dt;
+    makeObservable(this, {
+      _currentSkuPath: observable,
+      _closedByUser: observable,
+      _checkingOut: observable,
+      _activePoint: observable,
+      _points: observableRef,
+      _vHeight: observable,
+      _routeChangedTime: observable,
+      showVariants: action,
+      showRecentVariants: action,
+      hideVariants: action,
+      setClosedByUser: action,
+      setCheckingOut: action,
+      setActivePoint: action,
+      setMobile: action,
+      setViewportHeight: action,
+      setRouteChangedTime: action,
+      activePoint: computed,
+      checkingOut: computed,
+      closedByUser: computed,
+      currentSkuPath: computed,
+      microHeight: computed,
+      modal: computed,
+      points: computed,
+      showRecent: computed,
+      showBuy: computed,
+      showCheckout: computed,
+      snapPointPx: computed,
+      state: computed,
+      open: computed
+    });
+  }
+  get currentSkuPath() {
+    return this._currentSkuPath;
+  }
+  get closedByUser() {
+    return this._closedByUser;
+  }
+  get ignoreStateChange() {
+    return this._ignoreStateChange;
+  }
+  get checkingOut() {
+    return this._checkingOut;
+  }
+  get activePoint() {
+    return this._activePoint;
+  }
+  get points() {
+    return [this._points.micro, this._points.full];
+  }
+  get open() {
+    log(
+      "open(): showCheckout: " + this.showCheckout + " showRecent: " + this.showRecent + " showBuy: " + this.showBuy
+    );
+    return this._checkingOut !== void 0 && !this._checkingOut && !this.closedByUser && (this.showCheckout || this.showRecent || this.showBuy);
+  }
+  get state() {
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return "full";
+      } else if (this.showRecent || this.showCheckout) {
+        return "micro";
+      }
+    }
+    return "closed";
+  }
+  get showRecent() {
+    const recentInfo = this._service.recentItem;
+    return !!recentInfo && recentInfo.modified > this._routeChangedTime;
+  }
+  get showBuy() {
+    return !!this.currentSkuPath;
+  }
+  get showCheckout() {
+    return !this._service.cartEmpty;
+  }
+  get modal() {
+    return this.state !== "micro";
+  }
+  get microHeight() {
+    return this._points.micro;
+  }
+  get isMobile() {
+    return this._pointsConfig.mb === this._points;
+  }
+  get snapPointPx() {
+    if (!this._activePoint || this._vHeight === 0) return 0;
+    if (typeof this._activePoint === "string") {
+      return parseInt(this._activePoint);
+    }
+    return this._vHeight * this._activePoint;
+  }
+};
+
+// src/site/commerce/ui/conf.ts
+var conf_default = {
+  mb: {
+    micro: "72px",
+    full: "600px"
+  },
+  dt: {
+    micro: "90px",
+    full: "620px"
+  }
+};
+var DESKTOP_MIN = 768;
+var log2 = (s) => {
+};
+enableStaticRendering(typeof window === "undefined");
+var CommerceUIContext = createContext(void 0);
+var useCommerceDrawer = () => {
+  return useContext(CommerceUIContext);
+};
+var useSelectAndBuy = () => {
+  return useContext(CommerceUIContext);
+};
+var CommerceUIProvider = ({
+  children
+}) => {
+  const cmmc = useCommerce();
+  const pathname = usePathname();
+  const storeRef = useRef(new CommerceUIStore(cmmc, conf_default));
+  const prevPathRef = useRef("initial");
+  const onResize = () => {
+    const width = window.innerWidth;
+    if (width < DESKTOP_MIN) {
+      if (!storeRef.current.isMobile) {
+        storeRef.current.setMobile(true);
+      }
+    } else if (storeRef.current.isMobile) {
+      storeRef.current.setMobile(false);
+    }
+    storeRef.current.setViewportHeight(window.innerHeight);
+  };
+  const onResize_debounced = useDebounceCallback(onResize, 500);
+  useLayoutEffect(() => {
+    storeRef.current.initialize();
+    onResize();
+    window.addEventListener("resize", onResize_debounced);
+    return () => {
+      window.removeEventListener("resize", onResize_debounced);
+      storeRef.current.dispose();
+    };
+  }, []);
+  useEffect(() => {
+    const checkingOut = pathname === "/checkout";
+    log2("useEffect: prev pathname: " + prevPathRef.current);
+    if (storeRef.current.checkingOut === void 0 || storeRef.current._checkingOut !== checkingOut) {
+      storeRef.current.setCheckingOut(checkingOut);
+    }
+    if (prevPathRef.current === "initial") {
+      prevPathRef.current = pathname;
+      storeRef.current.newRoute();
+    } else if (!checkingOut && prevPathRef.current !== pathname) {
+      storeRef.current.newRoute();
+      prevPathRef.current = pathname;
+      log2("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime);
+    }
+  }, [pathname]);
+  return /* @__PURE__ */ jsx(CommerceUIContext.Provider, { value: storeRef.current, children });
+};
+var ChatWidget = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions,
+  buttonClx = ""
+}) => {
+  const [showChatbot, setShowChatbot] = React7__default.useState(false);
+  const onClick = () => {
+    setShowChatbot(!showChatbot);
+  };
+  const searchParams = new URLSearchParams();
+  if (question) {
+    searchParams.append("question", question);
+  }
+  if (suggestedQuestions) {
+    searchParams.append("sQuestions", suggestedQuestions.map(({ message }) => message).join(","));
+    searchParams.append("sHeadings", suggestedQuestions.map(({ heading }) => heading).join(","));
+    searchParams.append("sIcons", suggestedQuestions.map(({ icon }) => icon).join(","));
+  }
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { className: "fixed bottom-0 sm:bottom-16 right-0 w-full h-full sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating " + (showChatbot ? "flex" : "hidden"), children: /* @__PURE__ */ jsxs(Card, { className: "flex flex-col h-full w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex px-4 py-2 h-12 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "font-semibold font-heading", children: [
+          title,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "opacity-60", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick, variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsx(LuxLogo, { variant: "white", size: 24 }) })
+      ] }),
+      /* @__PURE__ */ jsx("iframe", { src: iframeSrc, className: "h-full" })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "span",
+        onClick,
+        className: cn(
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+          "fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer",
+          "hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]",
+          "transition-transform",
+          showChatbot ? "rotate-180" : "",
+          buttonClx
+        ),
+        children: /* @__PURE__ */ jsx(LuxLogo, { variant: "white", size: 28 })
+      }
+    )
+  ] });
+};
+var chat_widget_default = ChatWidget;
+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 });
+};
+
+// 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 Avatar = (props) => /* @__PURE__ */ jsxs("svg", { width: "17", height: "21", viewBox: "0 0 17 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.66112 10.3544C6.14668 10.3544 4.32664 6.91073 4.32664 4.59206C4.32664 2.12213 6.27238 0.115723 8.66112 0.115723C11.0499 0.115723 12.9956 2.12514 12.9956 4.59206C12.9956 6.91398 11.1756 10.3544 8.66112 10.3544ZM8.66112 1.1542C6.82539 1.1542 5.33242 2.69703 5.33242 4.59185C5.33242 6.65402 6.94715 9.31553 8.66112 9.31553C10.3761 9.31553 11.9898 6.65387 11.9898 4.5925C11.9898 2.69668 10.4969 1.15398 8.66112 1.15398V1.1542Z", fill: "white" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.79776 11.3345H10.5242C13.7802 11.3345 16.4302 14.0712 16.4302 17.4338C16.4302 19.0831 15.1297 20.423 13.5356 20.423H3.78923C2.19216 20.423 0.894689 19.0831 0.894689 17.4338C0.893706 14.0712 3.54156 11.3345 6.79776 11.3345ZM3.78819 19.3844H13.5337C14.5749 19.3844 15.4225 18.509 15.4225 17.4338C15.4225 14.6453 13.2253 12.3731 10.5223 12.3731H6.79862C4.0956 12.3731 1.89839 14.6423 1.89839 17.4338C1.89937 18.509 2.74701 19.3844 3.78816 19.3844H3.78819Z", fill: "white" })
+] });
+var avatar_default = Avatar;
+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;
+
+// src/site/next/analytics/google-analytics.ts
+var sendGAEvent = (name, options = {}) => {
+  window.gtag("event", name, options);
+};
+var DesktopBagPopup = ({
+  triggerClx = "",
+  popupClx = "",
+  trigger
+}) => {
+  const cmmc = useCommerce();
+  const [bagOpen, setBagOpen] = useState(false);
+  const router = useRouter();
+  useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent("view_cart", {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: "USD"
+      });
+    }
+  }, [bagOpen]);
+  return /* @__PURE__ */ jsxs(Popover, { open: bagOpen, onOpenChange: setBagOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { className: triggerClx, children: trigger }),
+    /* @__PURE__ */ jsxs(PopoverContent, { sideOffset: 28, className: cn("relative  flex flex-col p-0 px-4 pb-4 pt-2", popupClx), children: [
+      /* @__PURE__ */ jsx(PopoverClose, { className: "absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full", children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) }),
+      /* @__PURE__ */ jsxs(
+        CartPanel,
+        {
+          handleCheckout: () => {
+            router.push("/checkout");
+          },
+          className: "mt-4 mb-4 border-none py-0 px-4",
+          listClx: "rounded-sm pr-3",
+          scrollAfter: 5,
+          scrollHeightClx: "h-[70vh]",
+          itemClx: "mt-3",
+          totalClx: "sticky px-1 pr-2 -bottom-[1px] bg-level-1",
+          buttonClx: "max-w-[220px] flex-none",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+              /* @__PURE__ */ jsx(bag_icon_default, { className: "mr-2 relative w-6 h-7 fill-foreground " }),
+              /* @__PURE__ */ jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var desktop_bag_popup_default = DesktopBagPopup;
+var BagButton = observer(({
+  showIfEmpty = false,
+  animateOnHover = true,
+  animateOnQuantityChange = true,
+  size = "default",
+  className = "",
+  iconClx = "",
+  onClick
+}) => {
+  const c = useCommerce();
+  const wiggleRef = useRef(observable.box("none"));
+  useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange && c ? reaction(
+      () => c.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
+  ), []);
+  if (!c || !showIfEmpty && c.cartEmpty) {
+    return /* @__PURE__ */ jsx("div", {});
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "aria-label": "Bag",
+      role: "button",
+      onClick,
+      className: cn(
+        buttonVariants({ variant: "ghost", size }),
+        "rounded-md",
+        // Overides the bg change on hover --not a "hover effect" 
+        "relative group p-0 aspect-square hover:bg-background",
+        wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : "",
+        className
+      ),
+      children: [
+        !c.cartEmpty && /* @__PURE__ */ jsxs(Box, { className: "z-above-content flex flex-col justify-center items-center  absolute left-0 right-0 top-0 bottom-0 leading-none font-sans font-bold text-primary-fg text-xs ", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-[3px] w-full" }),
+          /* @__PURE__ */ jsx("div", { children: c.cartQuantity })
+        ] }),
+        /* @__PURE__ */ jsx(bag_icon_default, { width: "24", height: "28", className: cn(
+          "relative -top-[3px] fill-primary",
+          iconClx,
+          animateOnHover ? "group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300" : ""
+        ), "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+var bag_button_default = BagButton;
+var DesktopNav = ({ links, isMenuOpened, setIsMenuOpen }) => {
+  React7.useEffect(() => {
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    if (isMenuOpened) {
+      window.addEventListener("wheel", preventScroll, { passive: false });
+      window.addEventListener("touchmove", preventScroll, { passive: false });
+      window.addEventListener("keydown", preventScrollKeys, { passive: false });
+    } else {
+      window.removeEventListener("wheel", preventScroll);
+      window.removeEventListener("touchmove", preventScroll);
+      window.removeEventListener("keydown", preventScrollKeys);
+    }
+    return () => {
+      window.removeEventListener("wheel", preventScroll);
+      window.removeEventListener("touchmove", preventScroll);
+      window.removeEventListener("keydown", preventScrollKeys);
+    };
+  }, [isMenuOpened]);
+  const preventScrollKeys = (e) => {
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleMouseEnter = React7.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+  const handleMouseLeave = React7.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+  const handleContentMouseMove = () => {
+    setIsMenuOpen(false);
+  };
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+  return links.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { children: /* @__PURE__ */ jsx(NavigationMenuList, { children: links.map((el, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { className: "!m-0", children: el.isAIMenu ? /* @__PURE__ */ jsx(Link2, { href: el.href, style: css(cn(navigationMenuTriggerStyle(), " text-muted-1 bg-transparent")), children: el.title }) : el.title === "Cards" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: /* @__PURE__ */ jsx(Link2, { href: el.href, children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavigationMenuContent,
+      {
+        className: cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsx("div", { className: "flex justify-center items-start", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid xl:grid-cols-3 w-full justify-center max-w-[750px]",
+            onMouseLeave: handleContentMouseMove,
+            children: GroupChildMenu({ childs: el.childMenu, isCards: true })
+          }
+        ) })
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: el.href && el.href !== "" ? /* @__PURE__ */ jsx(Link2, { href: el.href, children: el.title }) : /* @__PURE__ */ jsx(Fragment, { children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavigationMenuContent,
+      {
+        className: cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex flex-row w-full justify-center",
+            onMouseLeave: handleContentMouseMove,
+            children: GroupChildMenu({ childs: el.childMenu })
+          }
+        )
+      }
+    )
+  ] }) }, index)) }) }) : null;
+};
+var desktop_nav_menu_default = DesktopNav;
+var ListItem = React7.forwardRef(({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+  Box,
+  {
+    tag: "a",
+    ref,
+    className: cn(
+      "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-none", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-snug text-muted-1", children })
+    ]
+  }
+) }) }, title));
+ListItem.displayName = "ListItem";
+var GroupChildMenu = (params) => {
+  const { childs, isCards = false } = params;
+  if (!childs) {
+    return null;
+  }
+  const groupedChildMenus = childs.reduce((grouped, childLink) => {
+    if (childLink.groupName) {
+      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
+      grouped[childLink.groupName].push(childLink);
+    }
+    return grouped;
+  }, {});
+  const getChildExtraClass = (index) => {
+    if (isCards && (index === 3 || index === 4)) {
+      return "xl:-mt-32";
+    }
+    return "";
+  };
+  return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => /* @__PURE__ */ jsxs(Box, { className: cn("py-4 px-4 ", getChildExtraClass(index)), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-muted-1", children: groupName }),
+    /* @__PURE__ */ jsx("ul", { className: "w-[200px] gap-3 md:w-[250px] lg:w-[250px]", children: childLinks.map((link) => /* @__PURE__ */ jsxs("div", { className: "flex justify-start items-center", children: [
+      link.icon,
+      /* @__PURE__ */ jsx(ListItem, { title: link.title, href: link.href, className: "ml-[14px]", children: link.contents }, link.title)
+    ] }, link.title)) })
+  ] }, groupName));
+};
+var DesktopHeader = ({
+  links,
+  className = "",
+  noAuth = false,
+  noCommerce = false,
+  children,
+  logoVariant = "full"
+}) => {
+  const [isMenuOpened, setIsMenuOpen] = React7__default.useState(false);
+  return /* @__PURE__ */ jsx(Box, { tag: "header", id: "DESKTOP_HEADER", className: cn(
+    "bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0",
+    className,
+    isMenuOpened ? " h-full" : ""
+  ), children: /* @__PURE__ */ jsxs(Box, { className: "flex flex-row h-[80px] items-center justify-between mx-[24px] w-full max-w-screen", children: [
+    /* @__PURE__ */ jsx(Logo, { size: logoVariant === "mark" ? "lg" : "md", href: "/", outerClx: "hidden lg:flex", variant: logoVariant }, "two"),
+    /* @__PURE__ */ jsx(Logo, { size: "sm", href: "/", outerClx: "hidden md:flex lg:hidden", variant: logoVariant }, "one"),
+    /* @__PURE__ */ jsx("div", { className: "flex w-full gap-4 items-center justify-center", children: /* @__PURE__ */ jsx(desktop_nav_menu_default, { links, isMenuOpened, setIsMenuOpen }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      !noCommerce && /* @__PURE__ */ jsx(desktop_bag_popup_default, { popupClx: "w-[340px]", trigger: /* @__PURE__ */ jsx(bag_button_default, { className: "text-primary -mr-[3px] lg:min-w-0" }) }),
+      !noAuth && /* @__PURE__ */ jsx(widget_default, {}),
+      children
+    ] })
+  ] }) });
+};
+var desktop_default = DesktopHeader;
+var Login = ({
+  className,
+  onSuccess
+}) => {
+  const { config } = useIam();
+  const [state] = useState(() => crypto.randomUUID());
+  useEffect(remember, []);
+  return /* @__PURE__ */ jsx(
+    Login$1,
+    {
+      serverUrl: config.serverUrl,
+      clientId: config.clientId,
+      redirectUri: config.redirectUri,
+      organization: config.organization,
+      state,
+      className: cn("hanzo-iam-card", className),
+      onSuccess
+    }
+  );
+};
+var login_default = Login;
+var MobileMenuToggleButton = ({
+  open: open2,
+  setOpen,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "default",
+      className: cn("rounded-full", cn("p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75", className)),
+      onClick: () => {
+        setOpen(!open2);
+      },
+      children: /* @__PURE__ */ jsx(Plus, { width: 28, height: 28, style: css(
+        "block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] " + (open2 ? "rotate-[135deg] scale-110" : "rotate-none")
+      ) })
+    }
+  );
+};
+var mobile_menu_toggle_button_default = MobileMenuToggleButton;
+var MobileBagDrawer = ({
+  open: open2,
+  setOpen,
+  handleCheckout,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(Drawer, { open: open2, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(DrawerContent, { className: cn("rounded-t-xl mt-6 pb-12 h-auto", className), children: /* @__PURE__ */ jsxs(
+    CartPanel,
+    {
+      handleCheckout,
+      className: "mt-4 mb-4 border-none py-0 px-4 w-full ",
+      listClx: "rounded-sm pr-3",
+      scrollAfter: 5,
+      itemClx: "mt-2",
+      totalClx: "sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background",
+      buttonClx: "max-w-[220px] flex-none",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+          /* @__PURE__ */ jsx(
+            bag_button_default,
+            {
+              animateOnHover: false,
+              showIfEmpty: true,
+              className: "mr-2 relative w-6 h-7",
+              iconClx: "fill-foreground "
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+      ]
+    }
+  ) }) });
+};
+var mobile_bag_drawer_default = MobileBagDrawer;
+var MobileNavMenuAI = ({ setMenuOpen }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box, { className: "w-full  text-2xl cursor-pointer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsx(Logo, { variant: "wordmark", size: "md", outerClx: "p-6 h-full" }),
+        /* @__PURE__ */ jsx(Box, { tag: "span", className: cn("grid", "block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 " + (!open ? "rotate-none" : "rotate-[135deg] scale-110")), children: /* @__PURE__ */ jsx(Plus, { width: 28, height: 28, style: css("w-full h-full"), onClick: () => setMenuOpen(false) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6", children: /* @__PURE__ */ jsxs(Box, { className: "text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2", onClick: () => setIsOpen(true), children: [
+        /* @__PURE__ */ jsx("span", { className: "text-base pl-2 font-light", children: "Ask AI a question" }),
+        /* @__PURE__ */ jsx(ArrowRight, {})
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "fixed bottom-0 sm:bottom-16 right-0 w-full h-full sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating " + (isOpen ? "flex" : "hidden"), children: /* @__PURE__ */ jsxs(Card, { className: "flex flex-col h-full w-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex px-4 py-2 h-16 bg-level-0 items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "font-semibold font-heading", children: [
+          "LUX",
+          /* @__PURE__ */ jsx("span", { className: "opacity-60", children: "AI" })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setIsOpen(false), variant: "link", size: "icon", className: "w-fit sm:hidden", children: /* @__PURE__ */ jsx(Plus, { className: "w-6 h-6 flex-none mr-1 rotate-45 transition-transform" }) })
+      ] }),
+      /* @__PURE__ */ jsx("iframe", { src: "https://lux.chat/iframe", className: "h-full" })
+    ] }) })
+  ] });
+};
+var mobile_nav_menu_ai_default = MobileNavMenuAI;
+var MobileNav = ({
+  currentAs,
+  links,
+  setMenuState,
+  className = "",
+  commonItemClx,
+  setChatbotOpen,
+  setMenuOpen
+}) => links.length > 0 ? /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col h-full", className), children: [
+  /* @__PURE__ */ jsx(mobile_nav_menu_ai_default, { setMenuOpen }),
+  /* @__PURE__ */ jsx(Box, { className: "flex flex-col flex-1 overflow-auto", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full h-full", children: links.map((el, index) => {
+    const itemClx = commonItemClx ? typeof commonItemClx === "string" ? commonItemClx : commonItemClx(el) : "";
+    const variant = el.variant ?? "link";
+    let internalClx = variant === "link" ? " text-muted hover:text-foreground active:text-accent rounded-none" : " min-w-0";
+    if (currentAs && currentAs === el.href) {
+      internalClx += " pointer-events-none";
+      if (variant === "link") {
+        internalClx += " text-accent";
+      }
+    }
+    if (!el.isAIMenu) {
+      return /* @__PURE__ */ jsxs(AccordionItem, { value: el.title ? el.title : "", className: "!no-underline !border-0 px-6", children: [
+        /* @__PURE__ */ jsxs(AccordionTrigger, { className: cn(internalClx, itemClx, ""), children: [
+          /* @__PURE__ */ jsx(Box, { className: cn(internalClx, itemClx, "flex items-center justify-between w-full pl-3 text-base font-normal leading-6"), children: el.title }),
+          /* @__PURE__ */ jsx(ChevronDown, { style: css("w-4 h-4 mr-3") })
+        ] }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: el.childMenu && /* @__PURE__ */ jsx(Box, { className: "px-4", children: Object.entries(el.childMenu.reduce((acc, child) => {
+          const group = acc[child.groupName ? child.groupName : ""] || [];
+          group.push(child);
+          acc[child.groupName ? child.groupName : ""] = group;
+          return acc;
+        }, {})).map(([groupName, children]) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Box, { className: "mt-4 mb-4 font-light text-muted-1", children: groupName }),
+          children.map((child, childIndex) => /* @__PURE__ */ jsx(Box, { className: "m-2", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center py-1", children: [
+            /* @__PURE__ */ jsx("span", { children: child.icon && child.icon }),
+            /* @__PURE__ */ jsx(
+              Link2,
+              {
+                href: child.href,
+                target: child.newTab ? "_blank" : "_self",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsx(Box, { tag: "span", className: "text-muted-2 hover:underline ml-5 hover:text-primary", children: child.title })
+              }
+            )
+          ] }) }, childIndex))
+        ] }, groupName)) }) })
+      ] }, index);
+    }
+  }) }) }),
+  /* @__PURE__ */ jsx(widget_default, { className: "text-2xl z-10", handleLogin: () => {
+    setMenuState("login");
+  } })
+] }) : null;
+var mobile_nav_menu_default = MobileNav;
+var bagClx = "mt-4 mb-8 border-none py-0 px-4 w-full sm:min-w-[350px] sm:max-w-[500px] sm:mx-auto min-h-[60vh] max-h-[70vh] sm:animate-in sm:zoom-in-90 ";
+var MobileHeader = ({
+  currentAs,
+  links,
+  className = "",
+  setChatbotOpen,
+  noAuth = false,
+  // :aa TODO
+  noCommerce = false
+  // :aa TODO
+}) => {
+  const cmmc = useCommerce();
+  const [menuState, setMenuState] = useState("closed");
+  const [bagDrawerOpen, setBagDrawerOpen] = useState(false);
+  const router = useRouter();
+  useEffect(() => {
+    if (menuState === "bag" || bagDrawerOpen) {
+      sendGAEvent("view_cart", {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: "USD"
+      });
+    }
+  }, [menuState, bagDrawerOpen]);
+  const menuOpen = () => menuState !== "closed";
+  const onLoginChanged = (token) => {
+    if (!!token) {
+      setMenuState("nav");
+    }
+  };
+  const setMenuOpen = (open2) => {
+    if (!open2) {
+      setMenuState("closed");
+    } else {
+      setMenuState("nav");
+    }
+  };
+  const handleCheckout = () => {
+    setMenuState("closed");
+    setBagDrawerOpen(false);
+    router.push("/checkout");
+  };
+  const openBag = () => {
+    if (menuOpen()) {
+      setMenuState("bag");
+    } else {
+      setBagDrawerOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { tag: "header", id: "MOBILE_HEADER", className: cn(
+      `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? "hidden" : "block"}`,
+      className
+    ), children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-row justify-between items-center font-bold pr-5", children: [
+      /* @__PURE__ */ jsx(Logo, { href: "/", size: "md", outerClx: "p-6 h-full", variant: "wordmark" }),
+      menuOpen() && /* @__PURE__ */ jsx(Box, { className: "absolute left-0 top-0 bottom-0 right-0 pl-8 flex flex-row bg-background animate-mobile-menu-open", children: /* @__PURE__ */ jsx(avatar_default, { className: "self-center " }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-0 flex-row", children: [
+        /* @__PURE__ */ jsx(bag_button_default, { className: "text-primary -mr-[3px]", onClick: openBag }),
+        /* @__PURE__ */ jsx(mobile_menu_toggle_button_default, { className: "text-foreground", open: menuOpen(), setOpen: setMenuOpen })
+      ] })
+    ] }) }),
+    !noCommerce && /* @__PURE__ */ jsx(
+      mobile_bag_drawer_default,
+      {
+        className: "",
+        open: bagDrawerOpen,
+        setOpen: setBagDrawerOpen,
+        handleCheckout
+      }
+    ),
+    menuOpen() && /* @__PURE__ */ jsx(Box, { className: "fixed top-0 left-0 w-full h-full flex flex-column bg-background z-below-header animate-mobile-menu-open", children: !!!noAuth && menuState === "login" ? /* @__PURE__ */ jsx(login_default, { onSuccess: onLoginChanged, className: "sm:animate-in sm:zoom-in-90 m-auto w-full max-w-sm px-8" }) : !!!noCommerce && menuState === "bag" ? /* @__PURE__ */ jsxs(
+      CartPanel,
+      {
+        handleCheckout: () => {
+          router.push("/checkout");
+        },
+        className: bagClx,
+        listClx: "rounded-sm",
+        scrollAfter: 6,
+        scrollHeightClx: "h-[80vh]",
+        itemClx: "mt-2",
+        totalClx: "sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-level-1",
+        buttonClx: "max-w-[220px] flex-none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+            /* @__PURE__ */ jsx(bag_icon_default, { className: "mr-2 relative w-4 h-5 fill-foreground " }),
+            /* @__PURE__ */ jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+        ]
+      }
+    ) : (
+      /* menuState === 'nav' */
+      /* @__PURE__ */ jsx(
+        mobile_nav_menu_default,
+        {
+          currentAs,
+          links,
+          className: "sm:animate-in sm:zoom-in-90 w-full",
+          commonItemClx: "px-0 text-xl h-16 justify-start ",
+          setMenuState,
+          setChatbotOpen,
+          setMenuOpen
+        }
+      )
+    ) })
+  ] });
+};
+var mobile_default = MobileHeader;
+var Header = ({
+  siteDef,
+  className = "",
+  children,
+  logoVariant = "full"
+}) => {
+  const [open2, setOpen] = React7__default.useState(false);
+  const { nav: { common, featured }, currentAs, noAuth, commerce } = siteDef;
+  const links = featured ? [...common, ...featured] : common;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      desktop_default,
+      {
+        className: cn(className, "hidden md:flex"),
+        links,
+        currentAs,
+        noAuth,
+        noCommerce: !!!commerce,
+        logoVariant,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      mobile_default,
+      {
+        className: cn(className, "md:hidden"),
+        links,
+        currentAs,
+        setChatbotOpen: setOpen,
+        noAuth,
+        noCommerce: !!!commerce
+      }
+    )
+  ] });
+};
+var header_default = Header;
+var ORG = "lux";
+var CALLBACK = "/auth/callback";
+var configure = (app) => ({
+  serverUrl: BRAND_SERVER_URLS[ORG],
+  organization: ORG,
+  clientId: `${ORG}-${app}`,
+  /* Read per render rather than at module load: one bundle serves the real
+    host and any preview of it, and each must redeem its code back to itself. */
+  redirectUri: (typeof window === "undefined" ? "" : window.location.origin) + CALLBACK
+});
+var Auth = ({ app, children }) => /* @__PURE__ */ jsx(IamProvider, { config: configure(app), children });
+var provider_default = Auth;
+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 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();
+  const router = useRouter();
+  const handleCheckout = () => {
+    router.push("/checkout");
+  };
+  const handleHandleClicked = () => {
+    if (drawer.state === "full") {
+      buy.hideVariants();
+    } else if (drawer.state === "micro") {
+      buy.showRecentVariants();
+    }
+  };
+  const handleItemClicked = () => {
+    buy.showRecentVariants();
+  };
+  const handleCloseGesture = () => {
+    if (drawer.state === "full") {
+      buy.hideVariants();
+      return true;
+    }
+    return false;
+  };
+  return /* @__PURE__ */ jsxs(
+    shell_default,
+    {
+      handleHandleClicked,
+      handleCloseGesture,
+      drawerClx: "flex flex-col",
+      children: [
+        drawer.state === "full" && /* The actual drawer is larger than the visible area (due to awkward
+        vaul impl.  So we have to ask the drawer for its currect snappoint 
+        and constrain layout to that.  
+        */
+        /* @__PURE__ */ jsx("div", { style: {
+          height: drawer.snapPointPx - 24
+          /* fudge factor for handle area */
+        }, children: /* @__PURE__ */ jsx(
+          CarouselBuyCard,
+          {
+            skuPath: buy.currentSkuPath,
+            checkoutButton: /* @__PURE__ */ jsx(
+              checkout_button_default,
+              {
+                handleCheckout,
+                className: "w-full min-w-[160px] sm:max-w-[320px]"
+              }
+            ),
+            clx: "justify-between h-full pb-3 gap-8",
+            addBtnClx: "w-full min-w-[160px] sm:max-w-[320px]",
+            buttonsAreaClx: "grow-0 shrink-0 mt-0",
+            selectorClx: "max-w-[475px] justify-between grow"
+          }
+        ) }),
+        drawer.state === "micro" && /* @__PURE__ */ jsx(
+          micro_default,
+          {
+            handleCheckout,
+            handleItemClicked,
+            clx: "w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]"
+          }
+        )
+      ]
+    }
+  );
+});
+var drawer_default = CommerceUIComponent;
+var Analytics = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(FacebookPixel, {}),
+  /* @__PURE__ */ jsx(GoogleAnalytics, { gaId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? "" })
+] });
+var viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" }
+  ]
+};
+var bodyClasses = get_app_router_font_classes_default();
+function RootLayout({
+  showHeader = false,
+  chatbot = false,
+  siteDef,
+  children
+}) {
+  const Guts = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    showHeader && /* @__PURE__ */ jsx(header_default, { siteDef }),
+    children,
+    chatbot && /* @__PURE__ */ jsx(
+      chat_widget_default,
+      {
+        title: "LUX",
+        subtitle: "AI",
+        chatbotUrl: "https://lux.chat/iframe",
+        suggestedQuestions: siteDef.chatbot?.suggestedQuestions ?? [],
+        buttonClx: "hidden md:block"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs("html", { lang: "en", suppressHydrationWarning: true, className: "hanzo-ui-dark-theme", style: { backgroundColor: "#000" }, children: [
+    /* @__PURE__ */ jsxs("head", { children: [
+      /* @__PURE__ */ jsx("base", { target: "_blank" }),
+      /* @__PURE__ */ jsx(FacebookPixelHead, {})
+    ] }),
+    /* @__PURE__ */ jsx("body", { suppressHydrationWarning: true, className: bodyClasses, children: /* @__PURE__ */ jsxs(Hanzo, { theme: "dark", children: [
+      /* @__PURE__ */ jsx(Analytics, {}),
+      /* @__PURE__ */ jsx(provider_default, { app: siteDef.app, children: siteDef?.commerce ? /* @__PURE__ */ jsx(CommerceProvider, { config: siteDef.commerce, children: /* @__PURE__ */ jsxs(CommerceUIProvider, { children: [
+        /* @__PURE__ */ jsx(Guts, {}),
+        /* @__PURE__ */ jsx(drawer_default, {})
+      ] }) }) : /* @__PURE__ */ jsx(Guts, {}) }),
+      /* @__PURE__ */ jsx(Toaster, { position: "top-center", duration: 3e3 })
+    ] }) })
+  ] });
+}
+
+export { RootLayout, viewport };