@salesmind-ai/design-system 0.3.4 → 0.3.6

package/dist/chunk-KDLH35OI.cjs

@@ -0,0 +1,1042 @@
+'use strict';
+
+var chunkLJADZITX_cjs = require('./chunk-LJADZITX.cjs');
+var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
+var react = require('react');
+var clsx3 = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx3__default = /*#__PURE__*/_interopDefault(clsx3);
+
+var NavbarMobileNavItem = react.forwardRef(
+  ({ as: Component = "a", className, active, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: clsx3__default.default(
+        "ds-navbar__mobile-nav-item",
+        active && "ds-navbar__mobile-nav-item--active",
+        className
+      ),
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children
+    }
+  )
+);
+NavbarMobileNavItem.displayName = "NavbarMobileNavItem";
+function NavbarMobileSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("ds-navbar__mobile-separator", className), role: "separator" });
+}
+NavbarMobileSeparator.displayName = "NavbarMobileSeparator";
+var NavbarMobileActions = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx3__default.default("ds-navbar__mobile-actions", className), ...props, children })
+);
+NavbarMobileActions.displayName = "NavbarMobileActions";
+var ChevronDown = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M4 6L8 10L12 6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var NavbarMegaMenu = react.forwardRef(
+  ({ trigger, children, className, isOpen: controlledOpen, onOpenChange, variant = "fullWidth" }, ref) => {
+    const [internalOpen, setInternalOpen] = react.useState(false);
+    const isControlled = controlledOpen !== void 0;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const containerRef = react.useRef(null);
+    const triggerRef = react.useRef(null);
+    const timeoutRef = react.useRef(null);
+    const handleOpen = react.useCallback(() => {
+      const newState = true;
+      if (isOpen !== newState) {
+        if (!isControlled) setInternalOpen(newState);
+        onOpenChange?.(newState);
+      }
+    }, [isOpen, isControlled, onOpenChange]);
+    const handleClose = react.useCallback(() => {
+      const newState = false;
+      if (isOpen !== newState) {
+        if (!isControlled) setInternalOpen(newState);
+        onOpenChange?.(newState);
+      }
+    }, [isOpen, isControlled, onOpenChange]);
+    const handleToggle = react.useCallback(() => {
+      if (isOpen) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
+    }, [isOpen, handleClose, handleOpen]);
+    const handleMouseEnter = react.useCallback(() => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      handleOpen();
+    }, [handleOpen]);
+    const handleMouseLeave = react.useCallback(() => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
+        handleClose();
+      }, 150);
+    }, [handleClose]);
+    react.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    react.useEffect(() => {
+      if (!isOpen) return;
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          handleClose();
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleClose]);
+    react.useEffect(() => {
+      if (!isOpen) return;
+      const handleEscape = (e) => {
+        if (e.key === "Escape") handleClose();
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, handleClose]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx3__default.default("ds-navbar-mega-menu", `ds-navbar-mega-menu--${variant}`, className),
+        ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              className: "ds-navbar-mega-menu__trigger",
+              onClick: handleToggle,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "true",
+              children: [
+                trigger,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "ds-navbar-mega-menu__chevron",
+                    "data-state": isOpen ? "open" : "closed",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: clsx3__default.default(
+                "ds-navbar-mega-menu__content",
+                `ds-navbar-mega-menu__content--${variant}`
+              ),
+              "data-state": isOpen ? "open" : "closed",
+              children: variant === "fullWidth" ? /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Container, { children }) : children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+NavbarMegaMenu.displayName = "NavbarMegaMenu";
+function NavbarMegaMenuSection({ heading, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("ds-navbar-mega-menu__section", className), children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-navbar-mega-menu__section-heading", children: heading }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-mega-menu__section-items", children })
+  ] });
+}
+NavbarMegaMenuSection.displayName = "NavbarMegaMenuSection";
+var NavbarMegaMenuItem = react.forwardRef(
+  ({ icon, label, description, className, as: Comp = "a", ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-mega-menu__item-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Comp,
+      {
+        ref,
+        className: clsx3__default.default("ds-navbar-mega-menu__item", className),
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-mega-menu__item-icon", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-navbar-mega-menu__item-text", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-mega-menu__item-label", children: label }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-mega-menu__item-description", children: description })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+NavbarMegaMenuItem.displayName = "NavbarMegaMenuItem";
+var ChevronDown2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "8", height: "8", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+  "path",
+  {
+    d: "M4 6L8 10L12 6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var ScrollContext = react.createContext({ scrolled: false });
+var TabsContext = react.createContext({
+  activeMenuId: null,
+  openMenu: () => {
+  },
+  closeMenu: () => {
+  }
+});
+function useFocusTrap(containerRef, active) {
+  react.useEffect(() => {
+    if (!active || !containerRef.current) return;
+    const container = containerRef.current;
+    const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const focusable2 = Array.from(container.querySelectorAll(FOCUSABLE));
+      if (focusable2.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusable2[0];
+      const last = focusable2[focusable2.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    const focusable = container.querySelectorAll(FOCUSABLE);
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+    container.addEventListener("keydown", handleKeyDown);
+    return () => container.removeEventListener("keydown", handleKeyDown);
+  }, [active, containerRef]);
+}
+var HYSTERESIS_RATIO = 0.25;
+var NavbarV2 = react.forwardRef(
+  ({
+    className,
+    mobileContent,
+    mobileToggleLabels,
+    isMenuOpen,
+    onMenuOpenChange,
+    scrollBorder = true,
+    scrollThreshold = 32,
+    children,
+    ...props
+  }, ref) => {
+    const [internalMenuOpen, setInternalMenuOpen] = react.useState(false);
+    const isMobileMenuOpen = isMenuOpen !== void 0 ? isMenuOpen : internalMenuOpen;
+    const navRef = react.useRef(null);
+    const overlayRef = react.useRef(null);
+    const [navHeight, setNavHeight] = react.useState(64);
+    const openLabel = mobileToggleLabels?.open ?? "Open menu";
+    const closeLabel = mobileToggleLabels?.close ?? "Close menu";
+    const [scrolled, setScrolled] = react.useState(() => {
+      if (typeof window !== "undefined") {
+        return window.scrollY > scrollThreshold;
+      }
+      return false;
+    });
+    react.useEffect(() => {
+      if (!scrollBorder) return;
+      const lowerBound = scrollThreshold * HYSTERESIS_RATIO;
+      const handleScroll = () => {
+        const y = window.scrollY;
+        setScrolled((prev) => {
+          if (!prev && y > scrollThreshold) return true;
+          if (prev && y < lowerBound) return false;
+          return prev;
+        });
+      };
+      handleScroll();
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      return () => window.removeEventListener("scroll", handleScroll);
+    }, [scrollBorder, scrollThreshold]);
+    const isScrolled = scrollBorder && scrolled;
+    const scrollCtx = react.useMemo(
+      () => ({ scrolled: isScrolled }),
+      [isScrolled]
+    );
+    const handleToggle = () => {
+      const newState = !isMobileMenuOpen;
+      setInternalMenuOpen(newState);
+      onMenuOpenChange?.(newState);
+    };
+    react.useEffect(() => {
+      const el = navRef.current;
+      if (!el) return;
+      const observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const h = entry.contentRect.height;
+          setNavHeight(h);
+          el.style.setProperty("--navbar-overlap", `${h}px`);
+        }
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    react.useEffect(() => {
+      if (isMobileMenuOpen) {
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = "";
+        };
+      }
+    }, [isMobileMenuOpen]);
+    react.useEffect(() => {
+      if (!isMobileMenuOpen) return;
+      const handleEscape = (e) => {
+        if (e.key === "Escape") {
+          setInternalMenuOpen(false);
+          onMenuOpenChange?.(false);
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isMobileMenuOpen, onMenuOpenChange]);
+    useFocusTrap(overlayRef, isMobileMenuOpen);
+    const mergedRef = useMergedRef(ref, navRef);
+    return /* @__PURE__ */ jsxRuntime.jsx(ScrollContext.Provider, { value: scrollCtx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        ref: mergedRef,
+        className: clsx3__default.default(
+          "ds-navbar-v2",
+          isScrolled && "ds-navbar-v2--scrolled",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-navbar-v2__container", children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "ds-navbar-v2__toggle",
+                onClick: handleToggle,
+                "aria-label": isMobileMenuOpen ? closeLabel : openLabel,
+                "aria-expanded": isMobileMenuOpen,
+                children: isMobileMenuOpen ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: overlayRef,
+              className: "ds-navbar-v2__mobile-overlay",
+              style: { top: navHeight },
+              "data-state": isMobileMenuOpen ? "open" : "closed",
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": closeLabel,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-navbar-v2__mobile-content", children: mobileContent })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+NavbarV2.displayName = "NavbarV2";
+var NavbarV2Brand = react.forwardRef(
+  ({ as: Component = "a", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: clsx3__default.default("ds-navbar-v2__brand", className), ...props, children })
+);
+NavbarV2Brand.displayName = "NavbarV2Brand";
+var NavbarV2Tabs = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const [activeMenuId, setActiveMenuId] = react.useState(null);
+    const { scrolled } = react.useContext(ScrollContext);
+    const ctxValue = react.useMemo(
+      () => ({
+        activeMenuId,
+        openMenu: (id) => setActiveMenuId(id),
+        closeMenu: (id) => setActiveMenuId((prev) => prev === id ? null : prev)
+      }),
+      [activeMenuId]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx3__default.default(
+          "ds-navbar-v2__tabs",
+          scrolled && "ds-navbar-v2__tabs--demoted",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+NavbarV2Tabs.displayName = "NavbarV2Tabs";
+var NavbarV2Tab = react.forwardRef(
+  ({ as: Component = "button", active, icon, label, className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    Component,
+    {
+      ref,
+      className: clsx3__default.default("ds-navbar-v2__tab", active && "ds-navbar-v2__tab--active", className),
+      "aria-current": active ? "page" : void 0,
+      ...Component === "button" ? { type: "button" } : {},
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-v2__tab-icon", children: icon }),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-v2__tab-label", children: label }),
+        children
+      ]
+    }
+  )
+);
+NavbarV2Tab.displayName = "NavbarV2Tab";
+var NavbarV2TabMenu = react.forwardRef(
+  ({
+    icon,
+    label,
+    active,
+    children,
+    className,
+    isOpen: controlledOpen,
+    onOpenChange
+  }, ref) => {
+    const instanceId = react.useId();
+    const panelId = `navbar-v2-panel-${instanceId}`;
+    const { activeMenuId, openMenu, closeMenu } = react.useContext(TabsContext);
+    const isControlled = controlledOpen !== void 0;
+    const isOpen = isControlled ? controlledOpen : activeMenuId === instanceId;
+    const containerRef = react.useRef(null);
+    const triggerRef = react.useRef(null);
+    const panelRef = react.useRef(null);
+    const timeoutRef = react.useRef(null);
+    const handleOpen = react.useCallback(() => {
+      if (!isOpen) {
+        if (!isControlled) openMenu(instanceId);
+        onOpenChange?.(true);
+      }
+    }, [isOpen, isControlled, openMenu, instanceId, onOpenChange]);
+    const handleClose = react.useCallback(() => {
+      if (isOpen) {
+        if (!isControlled) closeMenu(instanceId);
+        onOpenChange?.(false);
+      }
+    }, [isOpen, isControlled, closeMenu, instanceId, onOpenChange]);
+    const handleToggle = react.useCallback(() => {
+      if (isOpen) handleClose();
+      else handleOpen();
+    }, [isOpen, handleClose, handleOpen]);
+    const handleMouseEnter = react.useCallback(() => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      handleOpen();
+    }, [handleOpen]);
+    const handleMouseLeave = react.useCallback(() => {
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = window.setTimeout(handleClose, 150);
+    }, [handleClose]);
+    react.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    react.useEffect(() => {
+      if (!isOpen) return;
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+          handleClose();
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleClose]);
+    react.useEffect(() => {
+      if (!isOpen) return;
+      const handleEscape = (e) => {
+        if (e.key === "Escape") {
+          handleClose();
+          triggerRef.current?.focus();
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, handleClose]);
+    react.useEffect(() => {
+      if (!isOpen || !panelRef.current) return;
+      const clampToViewport = () => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        panel.style.setProperty("--panel-nudge", "0px");
+        const rect = panel.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const EDGE_PADDING = 16;
+        if (rect.right > viewportWidth - EDGE_PADDING) {
+          const overflow = rect.right - (viewportWidth - EDGE_PADDING);
+          panel.style.setProperty("--panel-nudge", `${-overflow}px`);
+        } else if (rect.left < EDGE_PADDING) {
+          const overflow = EDGE_PADDING - rect.left;
+          panel.style.setProperty("--panel-nudge", `${overflow}px`);
+        }
+      };
+      requestAnimationFrame(clampToViewport);
+      window.addEventListener("resize", clampToViewport);
+      return () => window.removeEventListener("resize", clampToViewport);
+    }, [isOpen]);
+    const panelRefCallback = react.useCallback((node) => {
+      containerRef.current = node;
+      panelRef.current = node;
+    }, []);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx3__default.default("ds-navbar-v2__tab-menu", className),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              className: clsx3__default.default(
+                "ds-navbar-v2__tab",
+                (active || isOpen) && "ds-navbar-v2__tab--active"
+              ),
+              onClick: handleToggle,
+              "aria-expanded": isOpen,
+              "aria-haspopup": "true",
+              "aria-controls": isOpen ? panelId : void 0,
+              type: "button",
+              children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-v2__tab-icon", children: icon }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-navbar-v2__tab-label-row", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-navbar-v2__tab-label", children: label }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: "ds-navbar-v2__tab-chevron",
+                      "data-state": isOpen ? "open" : "closed",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, {})
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          isOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: panelRefCallback,
+              id: panelId,
+              className: "ds-navbar-v2__mega-panel",
+              "data-state": "open",
+              role: "region",
+              "aria-label": `${label} menu`,
+              children
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+NavbarV2TabMenu.displayName = "NavbarV2TabMenu";
+var NavbarV2Actions = react.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx3__default.default("ds-navbar-v2__actions", className), ...props, children })
+);
+NavbarV2Actions.displayName = "NavbarV2Actions";
+function useMergedRef(...refs) {
+  return react.useCallback(
+    (value) => {
+      for (const ref of refs) {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref && typeof ref === "object") {
+          ref.current = value;
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
+  );
+}
+function FooterAccordionItem({ section, LinkComponent }) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx3__default.default(
+        "ds-footer__accordion-item",
+        isOpen && "ds-footer__accordion-item--open"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ds-footer__accordion-trigger",
+            "aria-expanded": isOpen,
+            onClick: () => setIsOpen((prev) => !prev),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: section.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "ds-footer__accordion-chevron",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__accordion-panel", hidden: !isOpen, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ds-footer__links", children: section.links.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href: link.href, className: "ds-footer__link", children: [
+          link.label,
+          link.isNew && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-footer__badge", children: "NEW" })
+        ] }) }, idx)) }) })
+      ]
+    }
+  );
+}
+var SiteFooter = react.forwardRef(
+  ({
+    cta,
+    sections = [],
+    orientationLine,
+    linkAs,
+    brand,
+    tagline,
+    socials,
+    trustBadges,
+    controls,
+    legalLinks = [],
+    copyright,
+    companyInfo,
+    bottomExtra,
+    bottomActions,
+    className,
+    ...props
+  }, ref) => {
+    const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    const defaultCopyright = copyright || `\xA9 ${currentYear}. All rights reserved.`;
+    const resolvedControls = controls || bottomActions;
+    const LinkComponent = linkAs || "a";
+    return /* @__PURE__ */ jsxRuntime.jsxs("footer", { ref, className: clsx3__default.default("ds-footer", className), ...props, children: [
+      cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__cta", "data-footer-zone": "cta", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__cta-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-footer__cta-headline", children: cta.headline }),
+        cta.subtext && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__cta-subtext", children: cta.subtext }),
+        (cta.primaryCta || cta.secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__cta-actions", children: [
+          cta.primaryCta,
+          cta.secondaryCta
+        ] }),
+        cta.trustLine && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__cta-trust", children: cta.trustLine })
+      ] }) }) }),
+      sections.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__nav", "data-footer-zone": "navigation", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkMDB2WCRQ_cjs.Container, { children: [
+        orientationLine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__orientation", children: orientationLine }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "nav",
+          {
+            className: "ds-footer__grid",
+            "aria-label": "Footer navigation",
+            children: sections.map((section, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "ds-footer__column",
+                "data-footer-section": section.title.toLowerCase().replace(/\s+/g, "-"),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__heading", children: section.title }),
+                  /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ds-footer__links", children: section.links.map((link, linkIdx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    LinkComponent,
+                    {
+                      href: link.href,
+                      className: "ds-footer__link",
+                      children: [
+                        link.label,
+                        link.isNew && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-footer__badge", children: "NEW" })
+                      ]
+                    }
+                  ) }, linkIdx)) })
+                ]
+              },
+              idx
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "nav",
+          {
+            className: "ds-footer__mobile-nav",
+            "aria-label": "Footer navigation",
+            children: sections.map((section, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              FooterAccordionItem,
+              {
+                section,
+                LinkComponent
+              },
+              idx
+            ))
+          }
+        )
+      ] }) }),
+      (brand || socials || trustBadges) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__authority", "data-footer-zone": "authority", children: /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Container, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__authority-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__brand", children: [
+          brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__logo", children: brand }),
+          tagline && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__tagline", children: tagline }),
+          socials && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__socials", children: socials })
+        ] }),
+        trustBadges && trustBadges.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__trust-badges", children: trustBadges.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-footer__trust-badge", children: badge.label }, idx)) })
+      ] }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__bottom", "data-footer-zone": "legal", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkMDB2WCRQ_cjs.Container, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-footer__bottom-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__copyright", children: copyright || defaultCopyright }),
+          resolvedControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__controls", children: resolvedControls }),
+          legalLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__legal", children: legalLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            LinkComponent,
+            {
+              href: link.href,
+              className: "ds-footer__legal-link",
+              children: link.label
+            },
+            idx
+          )) })
+        ] }),
+        bottomExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-footer__bottom-extra", children: bottomExtra }),
+        companyInfo && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-footer__company-info", children: companyInfo })
+      ] }) })
+    ] });
+  }
+);
+SiteFooter.displayName = "SiteFooter";
+var GlobeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h20" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+    ]
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6" })
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+var LocaleDropdown = react.forwardRef(
+  ({
+    locales,
+    activeLocale,
+    onLocaleChange,
+    optionAs: OptionComponent = "button",
+    getHref,
+    className,
+    direction = "down",
+    align = "right"
+  }, ref) => {
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [focusIndex, setFocusIndex] = react.useState(-1);
+    const containerRef = react.useRef(null);
+    const triggerRef = react.useRef(null);
+    const listRef = react.useRef(null);
+    const instanceId = react.useId();
+    const listboxId = `locale-dropdown-${instanceId}`;
+    const currentLocale = locales.find((l) => l.code === activeLocale) ?? locales[0];
+    const handleToggle = react.useCallback(() => {
+      setIsOpen((prev) => {
+        if (!prev) setFocusIndex(-1);
+        return !prev;
+      });
+    }, []);
+    const handleClose = react.useCallback(() => {
+      setIsOpen(false);
+      setFocusIndex(-1);
+      triggerRef.current?.focus();
+    }, []);
+    const handleSelect = react.useCallback(
+      (code) => {
+        onLocaleChange?.(code);
+        handleClose();
+      },
+      [onLocaleChange, handleClose]
+    );
+    react.useEffect(() => {
+      if (!isOpen) return;
+      const handleClickOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) {
+          handleClose();
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [isOpen, handleClose]);
+    const handleKeyDown = react.useCallback(
+      (e) => {
+        if (!isOpen) {
+          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setIsOpen(true);
+            setFocusIndex(0);
+          }
+          return;
+        }
+        switch (e.key) {
+          case "Escape":
+            e.preventDefault();
+            handleClose();
+            break;
+          case "ArrowDown":
+            e.preventDefault();
+            setFocusIndex((prev) => (prev + 1) % locales.length);
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setFocusIndex((prev) => (prev - 1 + locales.length) % locales.length);
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault();
+            if (focusIndex >= 0 && focusIndex < locales.length) {
+              handleSelect(locales[focusIndex].code);
+            }
+            break;
+          case "Home":
+            e.preventDefault();
+            setFocusIndex(0);
+            break;
+          case "End":
+            e.preventDefault();
+            setFocusIndex(locales.length - 1);
+            break;
+          case "Tab":
+            handleClose();
+            break;
+        }
+      },
+      [isOpen, focusIndex, locales, handleClose, handleSelect]
+    );
+    react.useEffect(() => {
+      if (!isOpen || focusIndex < 0 || !listRef.current) return;
+      const items = listRef.current.querySelectorAll('[role="option"]');
+      items[focusIndex]?.scrollIntoView({ block: "nearest" });
+    }, [isOpen, focusIndex]);
+    const activeDescendantId = isOpen && focusIndex >= 0 ? `${listboxId}-option-${focusIndex}` : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx3__default.default(
+          "ds-locale-dropdown",
+          direction === "up" && "ds-locale-dropdown--up",
+          align === "left" && "ds-locale-dropdown--align-left",
+          align === "center" && "ds-locale-dropdown--align-center",
+          className
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "ds-locale-dropdown__wrapper", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: triggerRef,
+              type: "button",
+              className: "ds-locale-dropdown__trigger",
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              "aria-haspopup": "listbox",
+              "aria-expanded": isOpen,
+              "aria-controls": isOpen ? listboxId : void 0,
+              "aria-activedescendant": activeDescendantId,
+              "aria-label": `Language: ${currentLocale.label}. Change language.`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__trigger-icon", children: /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, {}) }),
+                currentLocale.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__trigger-flag", "aria-hidden": "true", children: currentLocale.flag }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "ds-locale-dropdown__trigger-chevron",
+                    "data-state": isOpen ? "open" : "closed",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: listRef,
+              id: listboxId,
+              className: "ds-locale-dropdown__panel",
+              role: "listbox",
+              "aria-label": "Select language",
+              "data-state": isOpen ? "open" : "closed",
+              onKeyDown: handleKeyDown,
+              children: locales.map((locale, index) => {
+                const isActive = locale.code === activeLocale;
+                const isFocused = index === focusIndex;
+                const optionId = `${listboxId}-option-${index}`;
+                const optionProps = {
+                  id: optionId,
+                  role: "option",
+                  "aria-selected": isActive,
+                  className: clsx3__default.default(
+                    "ds-locale-dropdown__option",
+                    isActive && "ds-locale-dropdown__option--active",
+                    isFocused && "ds-locale-dropdown__option--focused"
+                  ),
+                  onClick: () => handleSelect(locale.code),
+                  ...OptionComponent !== "button" && getHref ? { href: getHref(locale.code) } : { type: "button" }
+                };
+                return /* @__PURE__ */ jsxRuntime.jsxs(OptionComponent, { ...optionProps, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-locale-dropdown__option-content", children: [
+                    locale.flag && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-flag", "aria-hidden": "true", children: locale.flag }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-label", children: locale.label })
+                  ] }),
+                  isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-locale-dropdown__option-check", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) })
+                ] }, locale.code);
+              })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+LocaleDropdown.displayName = "LocaleDropdown";
+var MDXOutboundLink = ({
+  href,
+  children,
+  ...props
+}) => {
+  if (!href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...props, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkLJADZITX_cjs.OutboundLink,
+    {
+      href,
+      context: "cms_markdown",
+      preserveExistingUTM: true,
+      openInNewTab: true,
+      ...props,
+      children
+    }
+  );
+};
+
+exports.LocaleDropdown = LocaleDropdown;
+exports.MDXOutboundLink = MDXOutboundLink;
+exports.NavbarMegaMenu = NavbarMegaMenu;
+exports.NavbarMegaMenuItem = NavbarMegaMenuItem;
+exports.NavbarMegaMenuSection = NavbarMegaMenuSection;
+exports.NavbarMobileActions = NavbarMobileActions;
+exports.NavbarMobileNavItem = NavbarMobileNavItem;
+exports.NavbarMobileSeparator = NavbarMobileSeparator;
+exports.NavbarV2 = NavbarV2;
+exports.NavbarV2Actions = NavbarV2Actions;
+exports.NavbarV2Brand = NavbarV2Brand;
+exports.NavbarV2Tab = NavbarV2Tab;
+exports.NavbarV2TabMenu = NavbarV2TabMenu;
+exports.NavbarV2Tabs = NavbarV2Tabs;
+exports.SiteFooter = SiteFooter;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-KDLH35OI.cjs.map