@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/header/mobile.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/header/mobile.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { LinkDef } from '@hanzo/ui/types';
+declare const MobileHeader: React.FC<{
+    currentAs: string | undefined;
+    links: LinkDef[];
+    className?: string;
+    setChatbotOpen: (open: boolean) => void;
+    noAuth?: boolean;
+    noCommerce?: boolean;
+}>;
+export default MobileHeader;
+//# sourceMappingURL=mobile.d.ts.map

package/dist/site/components/header/mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/mobile.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAkB9C,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAyIE,CAAA;eAEY,YAAY"}

package/dist/site/components/header/mobile.js

@@ -0,0 +1,441 @@
+import { useRef, useEffect, useState, useContext } from 'react';
+import { useRouter } from 'next/navigation';
+import { Box, cn, css } from '@hanzo/ui';
+import { useCommerce, CartPanel } from '@hanzo/commerce';
+import { useIam, Login as Login$1, IamContext, useIamIdentity } from '@hanzo/iam/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { Logo as Logo$1, Wordmark } from '@luxfi/logo';
+import { buttonVariants, Button, Drawer, DrawerContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Card, Popover, PopoverTrigger, PopoverContent, Separator } from '@hanzo/ui/primitives';
+import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import 'embla-carousel-autoplay';
+import { Plus, ChevronDown, ArrowRight } from 'lucide-react';
+
+// src/site/components/auth/resume.ts
+var KEY = "lux-auth-resume";
+var remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search);
+};
+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;
+
+// src/site/next/analytics/google-analytics.ts
+var sendGAEvent = (name, options = {}) => {
+  window.gtag("event", name, options);
+};
+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;
+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(Link, { href, style: css(clx), onClick, children: art }) : /* @__PURE__ */ jsx(Box, { tag: "span", className: clx, onClick, children: art });
+};
+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 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 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(
+              Link,
+              {
+                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;
+
+export { mobile_default as default };

package/dist/site/components/header/theme-toggle.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var lucideReact = require('lucide-react');
+var nextThemes = require('next-themes');
+var primitives = require('@hanzo/ui/primitives');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ThemeToggle = () => {
+  const { setTheme, theme } = nextThemes.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    primitives.Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: () => {
+        setTheme(theme === "light" ? "dark" : "light");
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-[1.5rem] w-[1.3rem] dark:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "hidden h-5 w-5 dark:block" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle theme" })
+      ]
+    }
+  );
+};
+var theme_toggle_default = ThemeToggle;
+
+module.exports = theme_toggle_default;

package/dist/site/components/header/theme-toggle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const ThemeToggle: React.FC;
+export default ThemeToggle;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/site/components/header/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/theme-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAexB,CAAA;eAEc,WAAW"}

package/dist/site/components/header/theme-toggle.js

@@ -0,0 +1,26 @@
+import { Sun, Moon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { Button } from '@hanzo/ui/primitives';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ThemeToggle = () => {
+  const { setTheme, theme } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: () => {
+        setTheme(theme === "light" ? "dark" : "light");
+      },
+      children: [
+        /* @__PURE__ */ jsx(Sun, { className: "h-[1.5rem] w-[1.3rem] dark:hidden" }),
+        /* @__PURE__ */ jsx(Moon, { className: "hidden h-5 w-5 dark:block" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle theme" })
+      ]
+    }
+  );
+};
+var theme_toggle_default = ThemeToggle;
+
+export { theme_toggle_default as default };

package/dist/site/components/icons/avatar.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/site/components/icons/avatar.tsx
+var Avatar = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "17", height: "21", viewBox: "0 0 17 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
+
+module.exports = avatar_default;

package/dist/site/components/icons/avatar.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type LucideProps } from 'lucide-react';
+declare const Avatar: React.FC<LucideProps>;
+export default Avatar;
+//# sourceMappingURL=avatar.d.ts.map