@luxfi/ui 8.1.0 → 8.2.0

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

@@ -0,0 +1,693 @@
+import * as React4 from 'react';
+import React4__default, { useRef, useEffect, useState, useContext } from 'react';
+import { Box, cn, css } from '@hanzo/ui';
+import { buttonVariants, NavigationMenuLink, NavigationMenu, NavigationMenuList, NavigationMenuItem, navigationMenuTriggerStyle, NavigationMenuTrigger, NavigationMenuContent, Popover, PopoverTrigger, PopoverContent, PopoverClose, Button, Drawer, DrawerContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Separator, Card } from '@hanzo/ui/primitives';
+import { IamContext, useIam, Login as Login$1, useIamIdentity } from '@hanzo/iam/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Link2 from 'next/link';
+import { Logo as Logo$1, Wordmark } from '@luxfi/logo';
+import { useRouter } from 'next/navigation';
+import { X, Plus, ChevronDown, ArrowRight } from 'lucide-react';
+import { useCommerce, CartPanel } from '@hanzo/commerce';
+import { observable, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+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 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 }) => {
+  React4.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 = React4.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+  const handleMouseLeave = React4.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 = React4.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] = React4__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] = React4__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;
+
+export { header_default as default };