@otl-core/next-navigation 1.1.19 → 1.1.21

package/dist/index.js

@@ -1,2079 +1,21 @@
-"use client";
-import { usePathname } from 'next/navigation';
-import { createContext, useRef, useEffect, useState, useMemo, useCallback, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { resolveColorToCSS, resolveColorsToCSS, cn, generateResponsiveSpacingCSS, generateToggleIconAnimations, generateMobileMenuAnimations, generateScrollbarStyles, generateDesktopDropdownAnimations, generateSameLayerDropdownAnimations, minifyCSS, resolveBorderToCSS } from '@otl-core/style-utils';
-import { marked } from 'marked';
-import { getBreakpointValue } from '@otl-core/cms-utils';
-import { CSSTransition } from 'react-transition-group';
-import Link from 'next/link';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-
-// src/context/navigation-context.tsx
-var NavigationContext = createContext(
-  void 0
-);
-function NavigationProvider({
-  children
-}) {
-  const [activeDropdown, setActiveDropdown] = useState(null);
-  const headerRef = useRef(null);
-  const pathname = usePathname();
-  const openDropdown = useCallback(
-    (dropdownId) => setActiveDropdown(dropdownId),
-    []
-  );
-  const closeDropdown = useCallback(() => setActiveDropdown(null), []);
-  const toggleDropdown = useCallback(
-    (dropdownId) => setActiveDropdown((prev) => prev === dropdownId ? null : dropdownId),
-    []
-  );
-  const prevPathname = useRef(pathname);
-  if (pathname !== prevPathname.current) {
-    prevPathname.current = pathname;
-    if (activeDropdown) {
-      setActiveDropdown(null);
-    }
-  }
-  useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape" && activeDropdown) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [activeDropdown, closeDropdown]);
-  useEffect(() => {
-    if (!activeDropdown) return;
-    const handleClickOutside = (e) => {
-      const target = e.target;
-      if (target.closest("[data-navigation-internal]")) {
-        return;
-      }
-      if (!headerRef.current?.contains(target)) {
-        closeDropdown();
-      }
-    };
-    document.addEventListener("click", handleClickOutside, true);
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-    };
-  }, [activeDropdown, closeDropdown]);
-  const isDropdownOpen = useMemo(
-    () => activeDropdown !== null,
-    [activeDropdown]
-  );
-  return /* @__PURE__ */ jsx(
-    NavigationContext.Provider,
-    {
-      value: {
-        headerRef,
-        isDropdownOpen,
-        activeDropdown,
-        openDropdown,
-        closeDropdown,
-        toggleDropdown
-      },
-      children
-    }
-  );
-}
-function useNavigation() {
-  const context = useContext(NavigationContext);
-  if (!context) {
-    throw new Error("useNavigation must be used within NavigationProvider");
-  }
-  return context;
-}
-function calculateNavigationWidth(sections, site) {
-  let totalWidth = 150;
-  for (const section of sections) {
-    for (const item of section?.items || []) {
-      if (item.type === "logo") continue;
-      const label = typeof item.label === "string" ? item.label : getLocalizedString(item.label, site) || "";
-      const labelLength = label.length;
-      if (item.type === "button") {
-        totalWidth += labelLength * 8 + 48;
-      } else if (item.type === "link" || item.type === "dropdown" || item.type === "markdown") {
-        totalWidth += labelLength * 8 + 24;
-      } else if (item.type === "image") {
-        const imgConfig = item.config;
-        const imgWidth = imgConfig?.width ? parseInt(imgConfig.width, 10) || 100 : 100;
-        totalWidth += imgWidth + 16;
-      }
-    }
-  }
-  return totalWidth;
-}
-function getBreakpointForWidth(estimatedWidth) {
-  const MAX_USABLE_WIDTH = 1400;
-  if (estimatedWidth > MAX_USABLE_WIDTH) return null;
-  if (estimatedWidth <= 640) return "sm";
-  if (estimatedWidth <= 768) return "md";
-  if (estimatedWidth <= 1024) return "lg";
-  if (estimatedWidth <= 1280) return "xl";
-  return "2xl";
-}
-var RESPONSIVE_BREAKPOINTS = [
-  { key: "sm", minWidth: "640px" },
-  { key: "md", minWidth: "768px" },
-  { key: "lg", minWidth: "1024px" },
-  { key: "xl", minWidth: "1280px" }
-];
-function generateResponsiveCustomProps(className, props) {
-  const css = [];
-  const baseVars = [];
-  const bpVars = {};
-  for (const [prop, value] of Object.entries(props)) {
-    if (!value) continue;
-    if (typeof value === "string") {
-      baseVars.push(`${prop}:${value}`);
-    } else {
-      if (value.base) baseVars.push(`${prop}:${value.base}`);
-      for (const { key } of RESPONSIVE_BREAKPOINTS) {
-        const bpVal = value[key];
-        if (bpVal && typeof bpVal === "string") {
-          if (!bpVars[key]) bpVars[key] = [];
-          bpVars[key].push(`${prop}:${bpVal}`);
-        }
-      }
-    }
-  }
-  const target = `.${className}`;
-  if (baseVars.length > 0) {
-    css.push(`${target}{${baseVars.join(";")}}`);
-  }
-  for (const { key, minWidth } of RESPONSIVE_BREAKPOINTS) {
-    if (bpVars[key]?.length) {
-      css.push(
-        `@media(min-width:${minWidth}){${target}{${bpVars[key].join(";")}}}`
-      );
-    }
-  }
-  return css;
-}
-function generateNavigationCSS(id, navigation, resolvedColors, dropdownIds = []) {
-  const cssBlocks = [];
-  const isSameLayer = navigation.style?.dropdown?.layer === "same";
-  if (navigation.style) {
-    if (isSameLayer) {
-      const wrapperCSS = generateResponsiveSpacingCSS(`navbar-wrapper-${id}`, {
-        border: navigation.style.border,
-        padding: navigation.style.layout?.padding,
-        shadow: navigation.style.shadow
-      });
-      if (wrapperCSS) cssBlocks.push(wrapperCSS);
-    } else {
-      const navbarCSS = generateResponsiveSpacingCSS(`navbar-${id}`, {
-        border: navigation.style.border,
-        padding: navigation.style.layout?.padding,
-        shadow: navigation.style.shadow
-      });
-      if (navbarCSS) cssBlocks.push(navbarCSS);
-    }
-    const navbarInnerCSS = generateResponsiveSpacingCSS(`navbar-inner-${id}`, {
-      gap: navigation.style.layout?.sectionGap,
-      fontSize: navigation.style.fontSize?.navbar
-    });
-    if (navbarInnerCSS) cssBlocks.push(navbarInnerCSS);
-    const btnFontSize = navigation.style.fontSize?.buttonFontSize;
-    if (btnFontSize) {
-      cssBlocks.push(
-        ...generateResponsiveCustomProps(`navbar-inner-${id}`, {
-          "--btn-font-sm": btnFontSize.sm,
-          "--btn-font-md": btnFontSize.md,
-          "--btn-font-lg": btnFontSize.lg
-        })
-      );
-    }
-  }
-  if (navigation.style && dropdownIds.length > 0) {
-    dropdownIds.forEach((dropdownId) => {
-      if (isSameLayer) {
-        const dropdownContentCSS = generateResponsiveSpacingCSS(
-          `dropdown-content-${dropdownId}`,
-          {
-            gap: navigation.style?.dropdown?.sectionGap,
-            fontSize: navigation.style?.fontSize?.dropdown
-          }
-        );
-        if (dropdownContentCSS) cssBlocks.push(dropdownContentCSS);
-      } else {
-        const dropdownCSS = generateResponsiveSpacingCSS(
-          `navigation-dropdown-${dropdownId}`,
-          {
-            padding: navigation.style?.dropdown?.padding,
-            border: navigation.style?.dropdown?.border,
-            shadow: navigation.style?.dropdown?.shadow
-          }
-        );
-        if (dropdownCSS) cssBlocks.push(dropdownCSS);
-        const dropdownContentCSS = generateResponsiveSpacingCSS(
-          `dropdown-content-${dropdownId}`,
-          {
-            gap: navigation.style?.dropdown?.sectionGap,
-            fontSize: navigation.style?.fontSize?.dropdown
-          }
-        );
-        if (dropdownContentCSS) cssBlocks.push(dropdownContentCSS);
-      }
-      const btnFontSize = navigation.style?.fontSize?.buttonFontSize;
-      if (btnFontSize) {
-        cssBlocks.push(
-          ...generateResponsiveCustomProps(`dropdown-content-${dropdownId}`, {
-            "--btn-font-sm": btnFontSize.sm,
-            "--btn-font-md": btnFontSize.md,
-            "--btn-font-lg": btnFontSize.lg
-          })
-        );
-      }
-    });
-  }
-  if (resolvedColors.burgerButtonBackgroundHover) {
-    cssBlocks.push(
-      `.mobile-menu-toggle-${id}:hover{background-color:${resolvedColors.burgerButtonBackgroundHover}!important}`
-    );
-  }
-  if (resolvedColors.dropdownMenuLinkHoverColor || resolvedColors.dropdownMenuLinkHoverBackground) {
-    const hoverStyles = [];
-    if (resolvedColors.dropdownMenuLinkHoverBackground) {
-      hoverStyles.push(
-        `background-color:${resolvedColors.dropdownMenuLinkHoverBackground}!important`
-      );
-    }
-    if (resolvedColors.dropdownMenuLinkHoverColor) {
-      hoverStyles.push(
-        `color:${resolvedColors.dropdownMenuLinkHoverColor}!important`
-      );
-    }
-    cssBlocks.push(
-      `#mobile-menu-dropdown-${id} a:hover{${hoverStyles.join(";")}}`
-    );
-  }
-  cssBlocks.push(...generateToggleIconAnimations());
-  cssBlocks.push(...generateMobileMenuAnimations());
-  cssBlocks.push(...generateScrollbarStyles());
-  cssBlocks.push(...generateDesktopDropdownAnimations());
-  if (isSameLayer) {
-    cssBlocks.push(...generateSameLayerDropdownAnimations());
-  }
-  return minifyCSS(cssBlocks.filter(Boolean).join(""));
-}
-function sectionsToDropdownContent(sections) {
-  const result = [];
-  let lastSectionHadContent = false;
-  sections.forEach((section, index) => {
-    const items = section?.items?.filter((item) => {
-      if (item.type === "logo") return false;
-      if (resolveItemVisibility(item) === "navbar-only") return false;
-      return true;
-    });
-    if (items?.length === 0) {
-      return;
-    }
-    if (lastSectionHadContent && result.length > 0) {
-      result.push({
-        id: `divider-${sections[index - 1].id}`,
-        type: "divider",
-        config: {}
-      });
-    }
-    items?.forEach((item) => {
-      if (item.type === "link") {
-        const config = item.config;
-        const navConfig = {
-          label: item.label || "",
-          href: config.href,
-          icon: config.icon,
-          external: config.external
-        };
-        result.push({
-          id: item.id,
-          type: "navigation-item",
-          config: navConfig
-        });
-      } else if (item.type === "button") {
-        const config = item.config;
-        const btnConfig = {
-          label: item.label || "",
-          href: config.href,
-          icon: config.icon,
-          external: config.external,
-          variant: config.variant,
-          size: config.size
-        };
-        result.push({
-          id: item.id,
-          type: "button",
-          config: btnConfig
-        });
-      } else if (item.type === "dropdown") {
-        const config = item.config;
-        result.push({
-          id: item.id,
-          type: "dropdown",
-          label: item.label || "",
-          config
-        });
-      } else if (item.type === "markdown") {
-        const config = item.config;
-        result.push({
-          id: item.id,
-          type: "markdown",
-          config: { content: config.content || item.label || "" }
-        });
-      } else if (item.type === "image") {
-        const config = item.config;
-        result.push({
-          id: item.id,
-          type: "image",
-          config: {
-            src: config.src,
-            alt: config.alt,
-            width: config.width ? { base: config.width } : { base: "100%" },
-            height: config.height ? { base: config.height } : { base: "auto" },
-            objectFit: config.objectFit,
-            href: config.href
-          }
-        });
-      }
-    });
-    lastSectionHadContent = true;
-  });
-  return result;
-}
-function getBrowserPreferredLocales(options = {}) {
-  const defaultOptions = {
-    languageCodeOnly: false
-  };
-  const opt = {
-    ...defaultOptions,
-    ...options
-  };
-  const browserLocales = navigator.languages === void 0 ? [navigator.language] : navigator.languages;
-  if (!browserLocales) {
-    return void 0;
-  }
-  return browserLocales.map((locale) => {
-    const trimmedLocale = locale.trim();
-    return opt.languageCodeOnly ? trimmedLocale.split(/-|_/)[0] : trimmedLocale;
-  });
-}
-function getLocalizedString(value, options) {
-  if (value === null || value === void 0) return "";
-  if (typeof value === "string") return value;
-  const preferredLocale = options && "preferredLocale" in options ? options.preferredLocale : void 0;
-  function getDefaultLocale() {
-    if (options && "defaultLocale" in options) return options.defaultLocale;
-    if (options && "default_locale" in options) return options.default_locale;
-    return void 0;
-  }
-  function getSupportedLocales() {
-    if (options && "supportedLocales" in options)
-      return options.supportedLocales;
-    if (options && "supported_locales" in options)
-      return options.supported_locales;
-    return void 0;
-  }
-  const defaultLocale = getDefaultLocale();
-  const supportedLocales = getSupportedLocales();
-  if (preferredLocale && preferredLocale in value && value[preferredLocale]) {
-    return value[preferredLocale];
-  }
-  if (!preferredLocale) {
-    const browserLocales = getBrowserPreferredLocales();
-    if (browserLocales) {
-      for (const locale of browserLocales) {
-        if (locale in value && value[locale]) {
-          return value[locale];
-        }
-      }
-    }
-  }
-  if (defaultLocale && defaultLocale in value && value[defaultLocale]) {
-    return value[defaultLocale];
-  }
-  if ("en" in value && value.en) {
-    return value.en;
-  }
-  if (supportedLocales) {
-    for (const locale of supportedLocales) {
-      if (locale in value && value[locale]) {
-        return value[locale];
-      }
-    }
-  }
-  const keys = Object.keys(value);
-  if (keys.length > 0 && value[keys[0]]) {
-    return value[keys[0]];
-  }
-  return "";
-}
-function resolveItemVisibility(item) {
-  if (item.visibility) return item.visibility;
-  const legacy = item.collapse;
-  if (legacy === false) return "navbar-only";
-  return void 0;
-}
-var VISIBILITY_CLASSES = {
-  "navbar-only": "flex",
-  "mobile-only": "hidden",
-  both: "flex"
+import { Header } from "./components/navigation/header";
+import { ChevronIcon } from "./components/icons/chevron-icon";
+import { GridIcon } from "./components/icons/grid-icon";
+import { HamburgerIcon } from "./components/icons/hamburger-icon";
+import { KebabIcon } from "./components/icons/kebab-icon";
+import { MeatballsIcon } from "./components/icons/meatballs-icon";
+import { PlusIcon } from "./components/icons/plus-icon";
+import { ToggleIcon } from "./components/icons/toggle-icon";
+import { toggleIconMap } from "./components/icons/toggle-icon-map";
+export {
+  ChevronIcon,
+  GridIcon,
+  HamburgerIcon,
+  Header,
+  KebabIcon,
+  MeatballsIcon,
+  PlusIcon,
+  ToggleIcon,
+  toggleIconMap
 };
-function getVisibilityClass(item, fallback) {
-  const vis = resolveItemVisibility(item);
-  return vis && VISIBILITY_CLASSES[vis] || fallback || "";
-}
-function parseMarkdownToHTML(markdown) {
-  const html = marked.parse(markdown, { async: false });
-  return html.replace(/<h1>/g, '<div class="h1">').replace(/<\/h1>/g, "</div>").replace(/<h2>/g, '<div class="h2">').replace(/<\/h2>/g, "</div>").replace(/<h3>/g, '<div class="h3">').replace(/<\/h3>/g, "</div>").replace(/<h4>/g, '<div class="h4">').replace(/<\/h4>/g, "</div>").replace(/<h5>/g, '<div class="h5">').replace(/<\/h5>/g, "</div>").replace(/<h6>/g, '<div class="h6">').replace(/<\/h6>/g, "</div>");
-}
-function NavigationHeaderWrapper({
-  children,
-  className,
-  style
-}) {
-  const { headerRef } = useNavigation();
-  return /* @__PURE__ */ jsx("header", { ref: headerRef, className, style, children });
-}
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-surface shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-gray-200 dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-var DropdownContentItem = ({
-  content,
-  resolvedColors,
-  onNavigate,
-  navigation,
-  site
-}) => {
-  if (content.type === "markdown") {
-    const config = content.config;
-    const markdownContent = getLocalizedString(config.content, site);
-    const parsedHTML = parseMarkdownToHTML(markdownContent);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: parsedHTML },
-        style: {
-          color: resolvedColors.text
-        },
-        className: "[&_*]:text-inherit"
-      }
-    );
-  }
-  if (content.type === "image") {
-    const config = content.config;
-    const getBaseValue = (val, fallback) => {
-      if (val === void 0 || val === null) return fallback;
-      if (typeof val === "number") return `${val}px`;
-      if (typeof val === "string") return val;
-      if (typeof val === "object" && "base" in val) return val.base;
-      return fallback;
-    };
-    const width = getBaseValue(config.width, "300px");
-    const height = getBaseValue(config.height, "auto");
-    const objectFit = config.objectFit || "cover";
-    if (!config.src) {
-      return null;
-    }
-    const imgElement = /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: config.src,
-        alt: config.alt || "",
-        style: {
-          display: "block",
-          width,
-          height,
-          objectFit
-        }
-      }
-    );
-    if (config.href) {
-      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Link, { href: config.href, children: imgElement }) });
-    }
-    return /* @__PURE__ */ jsx("div", { children: imgElement });
-  }
-  if (content.type === "navigation-item") {
-    const config = content.config;
-    const label = getLocalizedString(config.label, site);
-    return /* @__PURE__ */ jsxs(
-      Link,
-      {
-        href: config.href,
-        className: "block px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
-        style: {
-          color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,
-          backgroundColor: "transparent"
-        },
-        target: config.external ? "_blank" : void 0,
-        rel: config.external ? "noopener noreferrer" : void 0,
-        children: [
-          config.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: config.icon }),
-          label
-        ]
-      }
-    );
-  }
-  if (content.type === "button") {
-    const config = content.config;
-    const label = getLocalizedString(config.label, site);
-    const variantMap2 = {
-      primary: "default",
-      secondary: "secondary",
-      outline: "outline",
-      ghost: "ghost"
-    };
-    const sizeMap2 = {
-      sm: "sm",
-      md: "default",
-      lg: "lg"
-    };
-    return /* @__PURE__ */ jsx(
-      Button,
-      {
-        asChild: true,
-        variant: config.variant ? variantMap2[config.variant] : "default",
-        size: config.size ? sizeMap2[config.size] : "default",
-        className: "w-full whitespace-nowrap",
-        style: {
-          fontSize: `var(--btn-font-${config.size || "md"})`
-        },
-        children: /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href: config.href,
-            target: config.external ? "_blank" : void 0,
-            rel: config.external ? "noopener noreferrer" : void 0,
-            children: [
-              config.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: config.icon }),
-              label
-            ]
-          }
-        )
-      }
-    );
-  }
-  if (content.type === "dropdown") {
-    const label = content.label ? getLocalizedString(content.label, site) : "Submenu";
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: (e) => {
-          e.preventDefault();
-          onNavigate?.(content.id);
-        },
-        type: "button",
-        "data-navigation-internal": "true",
-        className: "block w-full text-left px-3 py-2 rounded-md text-sm transition-colors whitespace-nowrap",
-        style: {
-          color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor,
-          backgroundColor: "transparent"
-        },
-        children: /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { children: label }),
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              width: "16",
-              height: "16",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
-            }
-          )
-        ] })
-      }
-    );
-  }
-  if (content.type === "section") {
-    const config = content.config;
-    const getLabel = (value) => {
-      if (!value) return "";
-      if (typeof value === "string") return value;
-      return value.en || "";
-    };
-    const title = config.title ? getLabel(config.title) : void 0;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "flex flex-col",
-        style: {
-          gap: config.gap || "0.25rem",
-          justifyContent: config.justify || "flex-start",
-          alignItems: config.align || "flex-start"
-        },
-        children: [
-          title && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "text-sm font-semibold mb-1",
-              style: { color: resolvedColors.text },
-              children: title
-            }
-          ),
-          config.content?.map((item) => /* @__PURE__ */ jsx(
-            DropdownContentItem,
-            {
-              content: item,
-              resolvedColors,
-              onNavigate,
-              navigation,
-              site
-            },
-            item.id
-          ))
-        ]
-      }
-    );
-  }
-  if (content.type === "divider") {
-    const dividerConfig = content.config;
-    const dividerColor = dividerConfig?.color ? resolveColorToCSS(dividerConfig.color) : resolvedColors.border;
-    const thickness = dividerConfig?.thickness || "1px";
-    const margin = dividerConfig?.margin || "0.5rem";
-    const borderStyle = dividerConfig?.style || "solid";
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          borderTopWidth: thickness,
-          borderTopStyle: borderStyle,
-          borderTopColor: dividerColor,
-          marginTop: margin,
-          marginBottom: margin
-        }
-      }
-    );
-  }
-  return null;
-};
-function getDropdownTimeout(isMobileMenu) {
-  return isMobileMenu ? 300 : 200;
-}
-function getDropdownClassNames(isMobileMenu) {
-  return isMobileMenu ? "mobile-menu" : "desktop-dropdown";
-}
-function getDropdownZIndex(isSameLayer, layer) {
-  if (isSameLayer) return void 0;
-  return layer === "above" ? 9999 : void 0;
-}
-function NavigationDropdown({
-  itemId,
-  config,
-  navigation,
-  resolvedColors,
-  dropdownId,
-  site,
-  containerContent = false,
-  isSameLayer = false
-}) {
-  const { activeDropdown } = useNavigation();
-  const [navigationStack, setNavigationStack] = useState([]);
-  const nodeRef = useRef(null);
-  const backButtonRef = useRef(null);
-  const isMobileMenu = useMemo(
-    () => itemId.startsWith("mobile-menu"),
-    [itemId]
-  );
-  const isOpen = useMemo(
-    () => activeDropdown === itemId,
-    [activeDropdown, itemId]
-  );
-  const content = useMemo(
-    () => config.content || [],
-    [config]
-  );
-  const prevIsOpen = useRef(isOpen);
-  if (prevIsOpen.current && !isOpen) {
-    setNavigationStack([]);
-  }
-  prevIsOpen.current = isOpen;
-  useEffect(() => {
-    if (navigationStack.length > 0 && backButtonRef.current) {
-      backButtonRef.current.focus();
-    }
-  }, [navigationStack.length]);
-  const handleNavigate = (contentId) => {
-    setNavigationStack((prev) => [...prev, contentId]);
-  };
-  const handleBack = () => {
-    setNavigationStack((prev) => prev.slice(0, -1));
-  };
-  const findDropdownById = (contentArray, id) => {
-    for (const item of contentArray) {
-      if (item.id === id && item.type === "dropdown") {
-        return item;
-      }
-      if (item.type === "section") {
-        const config2 = item.config;
-        const found = findDropdownById(config2.content, id);
-        if (found) return found;
-      }
-    }
-    return void 0;
-  };
-  const buildNavigationPanels = () => {
-    const panels2 = [];
-    panels2.push({ content, depth: 0 });
-    let currentContent = content;
-    for (let i = 0; i < navigationStack.length; i++) {
-      const contentId = navigationStack[i];
-      const dropdownItem = findDropdownById(currentContent, contentId);
-      if (dropdownItem && dropdownItem.config) {
-        const nestedContent = dropdownItem.config.content;
-        panels2.push({ content: nestedContent, depth: i + 1 });
-        currentContent = nestedContent;
-      } else {
-        break;
-      }
-    }
-    return panels2;
-  };
-  const panels = buildNavigationPanels();
-  const dropdownColors = resolveColorsToCSS({
-    dropdownMenuBackground: navigation.style?.dropdown?.background,
-    dropdownMenuLinkColor: navigation.style?.dropdown?.link?.color,
-    dropdownMenuLinkHoverColor: navigation.style?.dropdown?.link?.hoverColor,
-    dropdownMenuLinkHoverBackground: navigation.style?.dropdown?.link?.hoverBackground,
-    dropdownMenuTextColor: navigation.style?.dropdown?.textColor
-  });
-  const dropdownMenuBackground = dropdownColors.dropdownMenuBackground;
-  const dropdownMenuLinkColor = dropdownColors.dropdownMenuLinkColor;
-  const dropdownMenuLinkHoverColor = dropdownColors.dropdownMenuLinkHoverColor;
-  const dropdownMenuLinkHoverBackground = dropdownColors.dropdownMenuLinkHoverBackground || "transparent";
-  const dropdownMenuTextColor = dropdownColors.dropdownMenuTextColor;
-  const dropdownMenuBorder = useMemo(() => {
-    if (!navigation.style?.dropdown?.border) return void 0;
-    return resolveBorderToCSS(navigation.style.dropdown.border);
-  }, [navigation.style?.dropdown?.border]);
-  if (content.length === 0) return null;
-  const dropdownResolvedColors = {
-    ...resolvedColors,
-    text: dropdownMenuTextColor || resolvedColors.text,
-    dropdownMenuLinkColor
-  };
-  const useSameLayerMode = isSameLayer && !isMobileMenu;
-  const dropdownStyles = {
-    backgroundColor: useSameLayerMode ? void 0 : dropdownMenuBackground,
-    color: dropdownMenuTextColor || dropdownMenuLinkColor,
-    ...useSameLayerMode ? {} : dropdownMenuBorder
-  };
-  const linkHoverStyle = {
-    "--dropdown-link-hover-color": dropdownMenuLinkHoverColor,
-    "--dropdown-link-hover-background": dropdownMenuLinkHoverBackground
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    CSSTransition,
-    {
-      in: isOpen,
-      nodeRef,
-      timeout: useSameLayerMode ? 250 : getDropdownTimeout(isMobileMenu),
-      classNames: useSameLayerMode ? "same-layer-dropdown" : getDropdownClassNames(isMobileMenu),
-      unmountOnExit: !useSameLayerMode,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: nodeRef,
-          className: `relative w-full navigation-dropdown-${dropdownId}`,
-          style: {
-            ...dropdownStyles,
-            ...useSameLayerMode ? { display: "grid", overflow: "hidden" } : { overflow: "hidden" },
-            zIndex: getDropdownZIndex(
-              useSameLayerMode,
-              navigation.style?.dropdown?.layer
-            ),
-            marginTop: navigation.style?.dropdown?.offset?.y ? getBreakpointValue(navigation.style.dropdown.offset.y, "base") : "0",
-            marginLeft: navigation.style?.dropdown?.offset?.left ? getBreakpointValue(
-              navigation.style.dropdown.offset.left,
-              "base"
-            ) : "0",
-            marginRight: navigation.style?.dropdown?.offset?.right ? getBreakpointValue(
-              navigation.style.dropdown.offset.right,
-              "base"
-            ) : "0"
-          },
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: useSameLayerMode ? { overflow: "hidden", minHeight: 0 } : void 0,
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    width: "100%",
-                    transform: `translateX(-${navigationStack.length * 100}%)`,
-                    transition: "transform 300ms ease-in-out"
-                  },
-                  children: panels.map((panel, panelIndex) => {
-                    const isActive = panelIndex === navigationStack.length;
-                    const isToRight = panelIndex > navigationStack.length;
-                    const panelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-                      panel.depth > 0 && /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          ref: panelIndex === navigationStack.length ? backButtonRef : null,
-                          onClick: (e) => {
-                            e.preventDefault();
-                            handleBack();
-                          },
-                          type: "button",
-                          "data-navigation-internal": "true",
-                          className: "flex items-center px-3 py-2 text-sm rounded-md transition-colors mb-2",
-                          style: {
-                            color: resolvedColors.dropdownMenuLinkColor || resolvedColors.linkColor
-                          },
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              "svg",
-                              {
-                                width: "16",
-                                height: "16",
-                                viewBox: "0 0 24 24",
-                                fill: "none",
-                                stroke: "currentColor",
-                                strokeWidth: "2",
-                                className: "mr-2",
-                                children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
-                              }
-                            ),
-                            "Back"
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: panel.content?.map((item) => {
-                        if (item.type === "section") {
-                          return /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-[200px]", children: /* @__PURE__ */ jsx(
-                            DropdownContentItem,
-                            {
-                              content: item,
-                              resolvedColors: dropdownResolvedColors,
-                              onNavigate: handleNavigate,
-                              navigation,
-                              site
-                            }
-                          ) }, item.id);
-                        }
-                        return /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
-                          DropdownContentItem,
-                          {
-                            content: item,
-                            resolvedColors: dropdownResolvedColors,
-                            onNavigate: handleNavigate,
-                            navigation,
-                            site
-                          }
-                        ) }, item.id);
-                      }) })
-                    ] });
-                    return /* @__PURE__ */ jsx(
-                      "nav",
-                      {
-                        className: `flex flex-col p-2 dropdown-content-${dropdownId}`,
-                        style: {
-                          ...linkHoverStyle,
-                          width: "100%",
-                          flexShrink: 0,
-                          transform: isToRight ? "translateX(30px)" : "translateX(0)",
-                          opacity: isActive ? 1 : 0.95,
-                          transition: "transform 300ms ease-in-out, opacity 300ms ease-in-out"
-                        },
-                        inert: !isActive ? true : void 0,
-                        children: containerContent ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: panelContent }) : panelContent
-                      },
-                      panelIndex
-                    );
-                  })
-                }
-              )
-            }
-          )
-        }
-      )
-    }
-  ) });
-}
-function HamburgerIcon({
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration = 300,
-  animationTiming = "ease-in-out"
-}) {
-  const duration = `${animationDuration}ms`;
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    hasMountedRef.current = true;
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        width: size,
-        height: size,
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: "25%",
-              width: size,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translateY(-50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "hamburger-top-open" : "hamburger-top-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: "50%",
-              width: size,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translateY(-50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "hamburger-middle-hide" : "hamburger-middle-show"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              top: "75%",
-              width: size,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translateY(-50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "hamburger-bottom-open" : "hamburger-bottom-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function ChevronIcon({
-  isOpen,
-  className = "",
-  size = 24
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      style: {
-        transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-        transition: "transform 200ms ease-in-out"
-      },
-      children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
-    }
-  );
-}
-function GridIcon({
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration = 300,
-  animationTiming = "ease-in-out"
-}) {
-  const duration = `${animationDuration}ms`;
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    hasMountedRef.current = true;
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        // @ts-expect-error - CSS custom property
-        "--square-size": "40%"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "25%",
-              top: "25%",
-              width: "40%",
-              height: "40%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "grid-tl-open" : "grid-tl-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "75%",
-              top: "25%",
-              width: "40%",
-              height: "40%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "grid-tr-hide" : "grid-tr-show"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "25%",
-              top: "75%",
-              width: "40%",
-              height: "40%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "grid-bl-hide" : "grid-bl-show"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "75%",
-              top: "75%",
-              width: "40%",
-              height: "40%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "grid-br-open" : "grid-br-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function KebabIcon({
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration = 300,
-  animationTiming = "ease-in-out"
-}) {
-  const duration = `${animationDuration}ms`;
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    hasMountedRef.current = true;
-  }, []);
-  const dotSize = size * 0.125;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        // @ts-expect-error - CSS custom property
-        "--dot-width": "12.5%"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "25%",
-              width: "12.5%",
-              height: dotSize,
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "kebab-top-open" : "kebab-top-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              width: "12.5%",
-              height: dotSize,
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "kebab-middle-hide" : "kebab-middle-show"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "75%",
-              width: "12.5%",
-              height: dotSize,
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "kebab-bottom-open" : "kebab-bottom-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function MeatballsIcon({
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration = 300,
-  animationTiming = "ease-in-out"
-}) {
-  const duration = `${animationDuration}ms`;
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    hasMountedRef.current = true;
-  }, []);
-  const dotSize = size * 0.125;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        width: size,
-        height: size,
-        position: "relative",
-        // @ts-expect-error - CSS custom property
-        "--dot-height": "12.5%"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "25%",
-              top: "50%",
-              width: dotSize,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "meatballs-left-open" : "meatballs-left-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              width: dotSize,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "meatballs-middle-hide" : "meatballs-middle-show"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "75%",
-              top: "50%",
-              width: dotSize,
-              height: "12.5%",
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)",
-              animation: hasMountedRef.current ? `${isOpen ? "meatballs-right-open" : "meatballs-right-close"} ${duration} ${animationTiming} forwards` : "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-function PlusIcon({
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration = 300,
-  animationTiming = "ease-in-out"
-}) {
-  const duration = `${animationDuration}ms`;
-  const hasMountedRef = useRef(false);
-  useEffect(() => {
-    hasMountedRef.current = true;
-  }, []);
-  const lineThickness = size * 0.125;
-  const lineLength = size;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        width: size,
-        height: size,
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              width: lineThickness,
-              height: lineLength,
-              backgroundColor: "currentColor",
-              transform: isOpen ? "translate(-50%, -50%) rotate(90deg)" : "translate(-50%, -50%) rotate(0deg)",
-              transition: hasMountedRef.current ? `transform ${duration} ${animationTiming}` : "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              width: lineLength,
-              height: lineThickness,
-              backgroundColor: "currentColor",
-              transform: "translate(-50%, -50%)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/icons/toggle-icon-map.tsx
-var toggleIconMap = /* @__PURE__ */ new Map([
-  ["hamburger", HamburgerIcon],
-  ["kebab", KebabIcon],
-  ["meatballs", MeatballsIcon],
-  ["grid", GridIcon],
-  ["chevron", ChevronIcon],
-  ["plus", PlusIcon]
-]);
-function ToggleIcon({
-  type,
-  isOpen,
-  className = "",
-  size = 24,
-  animationDuration,
-  animationTiming
-}) {
-  const IconComponent = toggleIconMap.get(type);
-  if (!IconComponent) {
-    return /* @__PURE__ */ jsx(
-      HamburgerIcon,
-      {
-        isOpen,
-        className,
-        size,
-        animationDuration,
-        animationTiming
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    IconComponent,
-    {
-      isOpen,
-      className,
-      size,
-      animationDuration,
-      animationTiming
-    }
-  );
-}
-function AnimatedToggleIcon({
-  type,
-  isOpen,
-  className = "",
-  size = 24,
-  iconId = "default",
-  animationDuration,
-  animationTiming
-}) {
-  const containerStyle = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: containerStyle,
-      className: `animated-toggle-icon-${iconId} ${className}`,
-      children: /* @__PURE__ */ jsx(
-        ToggleIcon,
-        {
-          type,
-          isOpen,
-          size,
-          animationDuration,
-          animationTiming
-        }
-      )
-    }
-  );
-}
-function MobileMenuToggle({
-  navigation,
-  resolvedColors,
-  toggleId,
-  mobileMenuId
-}) {
-  const { activeDropdown, toggleDropdown } = useNavigation();
-  const buttonRef = useRef(null);
-  const isMobileMenuOpen = activeDropdown === mobileMenuId;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref: buttonRef,
-      onClick: () => toggleDropdown(mobileMenuId),
-      className: `mobile-menu-toggle-${toggleId} transition-colors group flex items-center justify-center`,
-      style: {
-        backgroundColor: resolvedColors.burgerButtonBackground,
-        color: resolvedColors.burgerIconColor,
-        padding: navigation.style?.burger?.toggleButton?.padding || "0.5rem",
-        borderRadius: navigation.style?.burger?.toggleButton?.borderRadius || "0.375rem",
-        fontSize: 0,
-        lineHeight: 0,
-        font: "0/0 a",
-        // @ts-expect-error - CSS custom properties
-        "--icon-hover": resolvedColors.burgerIconHover
-      },
-      "aria-label": "Toggle navigation menu",
-      "aria-expanded": isMobileMenuOpen,
-      "aria-controls": "mobile-menu-dropdown",
-      children: /* @__PURE__ */ jsx(
-        AnimatedToggleIcon,
-        {
-          type: navigation.style?.burger?.toggleIcon?.type || "hamburger",
-          isOpen: isMobileMenuOpen,
-          size: navigation.style?.burger?.toggleIcon?.size || 24,
-          iconId: toggleId,
-          animationDuration: navigation.style?.burger?.toggleIcon?.animationDuration,
-          animationTiming: navigation.style?.burger?.toggleIcon?.animationTiming,
-          className: "group-hover:text-[var(--icon-hover)]"
-        }
-      )
-    }
-  );
-}
-function LogoContent({ navigation, siteName, logoTextColor }) {
-  if (navigation.logo?.url) {
-    return /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: navigation.logo.url,
-        alt: navigation.logo.alt || siteName,
-        width: navigation.logo.width,
-        height: navigation.logo.height,
-        className: "h-auto w-auto",
-        style: {
-          height: navigation.logo.height ? `${navigation.logo.height}px` : "40px"
-        }
-      }
-    );
-  }
-  const text = navigation.logo?.alt || siteName;
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "text-xl font-bold",
-      style: logoTextColor ? { color: logoTextColor } : void 0,
-      children: text
-    }
-  );
-}
-function Logo({ navigation, siteName, logoTextColor }) {
-  return /* @__PURE__ */ jsx(Link, { href: "/", className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
-    LogoContent,
-    {
-      navigation,
-      siteName,
-      logoTextColor
-    }
-  ) });
-}
-var variantMap = {
-  primary: "default",
-  secondary: "secondary",
-  outline: "outline",
-  ghost: "ghost"
-};
-var sizeMap = {
-  sm: "sm",
-  md: "default",
-  lg: "lg"
-};
-var NavigationItem = ({
-  item,
-  navigation,
-  resolvedColors,
-  itemsShowClass,
-  site
-}) => {
-  const label = getLocalizedString(item.label, site);
-  const visibilityClass = getVisibilityClass(item, itemsShowClass);
-  if (item.type === "logo") {
-    if (!navigation?.logo) return null;
-    return /* @__PURE__ */ jsx(
-      Logo,
-      {
-        navigation,
-        siteName: navigation.logo.alt || "Logo",
-        logoTextColor: resolvedColors.logoText
-      }
-    );
-  }
-  if (item.type === "link") {
-    const config = item.config;
-    const linkStyle = {
-      color: resolvedColors.linkColor
-    };
-    return /* @__PURE__ */ jsxs(
-      Link,
-      {
-        href: config.href,
-        style: linkStyle,
-        target: config.external ? "_blank" : void 0,
-        rel: config.external ? "noopener noreferrer" : void 0,
-        className: `${visibilityClass} items-center whitespace-nowrap`,
-        children: [
-          config.icon && /* @__PURE__ */ jsx("span", { children: config.icon }),
-          label
-        ]
-      }
-    );
-  }
-  if (item.type === "button") {
-    const config = item.config;
-    return /* @__PURE__ */ jsx("div", { className: `${visibilityClass} items-center`, children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        asChild: true,
-        variant: config.variant ? variantMap[config.variant] : "default",
-        size: config.size ? sizeMap[config.size] : "default",
-        className: "whitespace-nowrap",
-        style: {
-          fontSize: `var(--btn-font-${config.size || "md"})`
-        },
-        children: /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href: config.href,
-            target: config.external ? "_blank" : void 0,
-            rel: config.external ? "noopener noreferrer" : void 0,
-            children: [
-              config.icon && /* @__PURE__ */ jsx("span", { children: config.icon }),
-              label
-            ]
-          }
-        )
-      }
-    ) });
-  }
-  if (item.type === "dropdown") {
-    const { toggleDropdown, activeDropdown } = useNavigation();
-    const isOpen = activeDropdown === item.id;
-    const linkStyle = {
-      color: resolvedColors.linkColor
-    };
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => toggleDropdown(item.id),
-        style: linkStyle,
-        "aria-expanded": isOpen,
-        "aria-haspopup": "true",
-        className: `${visibilityClass} items-center gap-1 whitespace-nowrap`,
-        children: [
-          label,
-          /* @__PURE__ */ jsx(ChevronIcon, { isOpen, size: 16 })
-        ]
-      }
-    );
-  }
-  if (item.type === "markdown") {
-    const config = item.config;
-    const content = getLocalizedString(config.content, site);
-    const html = parseMarkdownToHTML(content);
-    const textStyle = {};
-    if (config.color) {
-      if (typeof config.color === "string") {
-        textStyle.color = config.color;
-      } else if (config.color.type === "custom" && config.color.value) {
-        textStyle.color = typeof config.color.value === "string" ? config.color.value : config.color.value.background;
-      } else if (config.color.type === "variable" && config.color.value) {
-        textStyle.color = `var(${config.color.value})`;
-      } else if (config.color.type === "theme" && config.color.value) {
-        textStyle.color = `var(--${config.color.value})`;
-      }
-    } else {
-      textStyle.color = resolvedColors.text;
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        dangerouslySetInnerHTML: { __html: html },
-        className: `${visibilityClass} items-center whitespace-nowrap [&_*]:text-inherit`,
-        style: textStyle
-      }
-    );
-  }
-  if (item.type === "image") {
-    const config = item.config;
-    if (!config.src) return null;
-    const imgElement = /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: config.src,
-        alt: config.alt || "",
-        style: {
-          display: "block",
-          width: config.width || "auto",
-          height: config.height || "auto",
-          objectFit: config.objectFit || "contain"
-        }
-      }
-    );
-    const wrapped = config.href ? /* @__PURE__ */ jsx(
-      Link,
-      {
-        href: config.href,
-        target: config.external ? "_blank" : void 0,
-        rel: config.external ? "noopener noreferrer" : void 0,
-        children: imgElement
-      }
-    ) : imgElement;
-    return /* @__PURE__ */ jsx("div", { className: `${visibilityClass} items-center`, children: wrapped });
-  }
-  return null;
-};
-var NavbarSections = ({
-  section,
-  navigation,
-  resolvedColors,
-  itemsShowClass,
-  togglerHideClass,
-  isTogglerSection,
-  site,
-  mobileMenuId
-}) => {
-  const hasLogo = useMemo(() => {
-    return section?.items?.some(
-      (item) => item.type === "logo"
-    );
-  }, [section.items]);
-  const sectionStyle = useMemo(() => {
-    let flexValue = section.flex;
-    if (flexValue === "0" || flexValue === void 0) {
-      if (hasLogo) {
-        flexValue = "0 0 auto";
-      } else {
-        flexValue = "0 1 auto";
-      }
-    }
-    return {
-      flex: flexValue,
-      justifyContent: section.justify || "flex-start",
-      alignItems: section.align || "center",
-      gap: section.gap || "0",
-      // For non-logo sections, ensure they can shrink below content width
-      ...!hasLogo ? { minWidth: 0 } : {}
-    };
-  }, [section, hasLogo]);
-  const shouldHide = useMemo(() => {
-    if (!section.hideWhenEmpty) return false;
-    const hasLogo2 = section.items?.some(
-      (item) => item.type === "logo"
-    );
-    if (hasLogo2) return false;
-    const hasAlwaysVisibleItems = section.items?.some(
-      (item) => resolveItemVisibility(item) === "navbar-only" || resolveItemVisibility(item) === "both"
-    );
-    if (hasAlwaysVisibleItems) return false;
-    const collapsibleItems = section.items?.filter(
-      (item) => item.type !== "logo" && resolveItemVisibility(item) !== "navbar-only" && resolveItemVisibility(item) !== "both"
-    );
-    if (collapsibleItems && collapsibleItems.length > 0) return false;
-    if (isTogglerSection) return false;
-    return true;
-  }, [section.hideWhenEmpty, section.items, isTogglerSection]);
-  const sectionVisibilityClass = useMemo(() => {
-    if (!section.hideWhenEmpty) return "";
-    const alwaysVisibleItems = section.items?.filter(
-      (item) => item.type === "logo" || resolveItemVisibility(item) === "navbar-only" || resolveItemVisibility(item) === "both"
-    );
-    if (alwaysVisibleItems && alwaysVisibleItems.length > 0) return "";
-    return itemsShowClass;
-  }, [section.hideWhenEmpty, section.items, itemsShowClass]);
-  if (shouldHide) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `flex flex-row ${sectionVisibilityClass}`,
-      style: sectionStyle,
-      "data-section-id": section.id,
-      children: [
-        section.items?.map((item) => {
-          return /* @__PURE__ */ jsx(
-            NavigationItem,
-            {
-              item,
-              navigation,
-              resolvedColors,
-              itemsShowClass,
-              site
-            },
-            item.id
-          );
-        }),
-        isTogglerSection && navigation && mobileMenuId && /* @__PURE__ */ jsx("div", { className: `flex flex-shrink-0 ${togglerHideClass}`, children: /* @__PURE__ */ jsx(
-          MobileMenuToggle,
-          {
-            navigation,
-            resolvedColors,
-            toggleId: `toggler-${section.id}`,
-            mobileMenuId
-          }
-        ) })
-      ]
-    }
-  );
-};
-function Navbar({
-  id,
-  className,
-  headerStyles,
-  sortedSections,
-  navigation,
-  resolvedColors,
-  itemsShowClass,
-  togglerHideClass,
-  togglerSectionId,
-  site,
-  mobileMenuId,
-  containerContent = false,
-  isSameLayer = false
-}) {
-  const dropdownLayer = navigation.style?.dropdown?.layer || "below";
-  function getNavbarZ() {
-    if (isSameLayer) return "";
-    return dropdownLayer === "above" ? "z-[1]" : "z-[9999]";
-  }
-  const navbarZ = getNavbarZ();
-  const sectionsContent = sortedSections.map((section) => /* @__PURE__ */ jsx(
-    NavbarSections,
-    {
-      section,
-      site,
-      navigation,
-      resolvedColors,
-      itemsShowClass,
-      togglerHideClass,
-      isTogglerSection: section.id === togglerSectionId,
-      mobileMenuId
-    },
-    section.id
-  ));
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        `navbar-${id}`,
-        `relative flex items-center justify-between`,
-        navbarZ,
-        !containerContent && `navbar-inner-${id}`,
-        className
-      ),
-      style: isSameLayer ? void 0 : headerStyles,
-      children: containerContent ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "container mx-auto flex items-center justify-between w-full",
-            `navbar-inner-${id}`
-          ),
-          children: sectionsContent
-        }
-      ) : sectionsContent
-    }
-  );
-}
-var SHOW_CLASSES = {
-  sm: "hidden sm:flex",
-  md: "hidden md:flex",
-  lg: "hidden lg:flex",
-  xl: "hidden xl:flex",
-  "2xl": "hidden 2xl:flex"
-};
-var HIDE_CLASSES = {
-  sm: "sm:hidden",
-  md: "md:hidden",
-  lg: "lg:hidden",
-  xl: "xl:hidden",
-  "2xl": "2xl:hidden"
-};
-var Header = ({
-  navigation,
-  site = {
-    default_locale: "en",
-    supported_locales: ["en"]
-  },
-  className = "",
-  siteName: _siteName = "Logo",
-  id = "default"
-}) => {
-  const isFixed = navigation.style?.position === "fixed";
-  const containerBehavior = navigation.style?.container || "edged";
-  const safeZone = navigation.style?.safeZone;
-  const safeZoneHeight = typeof safeZone === "object" && "base" in safeZone ? safeZone.base : safeZone || "0";
-  const estimatedWidth = calculateNavigationWidth(
-    navigation.sections || [],
-    site
-  );
-  const breakpoint = getBreakpointForWidth(estimatedWidth);
-  const styleType = navigation.style?.type || "default";
-  const showClass = breakpoint ? SHOW_CLASSES[breakpoint] : "";
-  const hideClass = breakpoint ? HIDE_CLASSES[breakpoint] : "";
-  const resolvedColors = navigation.style ? {
-    ...resolveColorsToCSS(
-      Object.fromEntries(
-        Object.entries(navigation.style).filter(
-          ([key]) => key !== "type" && key !== "position" && key !== "container" && key !== "safeZone" && key !== "layout" && key !== "border" && key !== "shadow" && key !== "link" && key !== "burger" && key !== "dropdown" && key !== "background" && key !== "text"
-        )
-      )
-    ),
-    // Manually resolve background and text colors
-    background: resolveColorToCSS(navigation.style.background),
-    text: resolveColorToCSS(navigation.style.text),
-    // Manually resolve link colors
-    linkColor: resolveColorToCSS(navigation.style.link?.color),
-    linkHoverColor: resolveColorToCSS(navigation.style.link?.hoverColor),
-    // Manually resolve burger colors
-    burgerButtonBackground: resolveColorToCSS(
-      navigation.style.burger?.button?.background
-    ),
-    burgerButtonBackgroundHover: resolveColorToCSS(
-      navigation.style.burger?.button?.backgroundHover
-    ),
-    burgerIconColor: resolveColorToCSS(
-      navigation.style.burger?.icon?.color
-    ),
-    burgerIconHover: resolveColorToCSS(
-      navigation.style.burger?.icon?.hoverColor
-    )
-  } : {};
-  const headerStyles = {
-    ...resolvedColors.background && {
-      backgroundColor: resolvedColors.background
-    },
-    ...resolvedColors.text && {
-      color: resolvedColors.text
-    }
-  };
-  const linkStyle = {
-    ...resolvedColors.linkColor && { color: resolvedColors.linkColor }
-  };
-  const marginValue = typeof navigation.style?.layout?.margin === "object" && "base" in navigation.style.layout.margin ? navigation.style.layout.margin.base : navigation.style?.layout?.margin || "0";
-  const sortedSections = [...navigation.sections || []].sort(
-    (a, b) => a.order - b.order
-  );
-  let togglerSectionId = navigation.togglerSectionId;
-  if (togglerSectionId === "none") {
-    togglerSectionId = "";
-  } else if (!togglerSectionId) {
-    const hasContent = sortedSections.some(
-      (section) => section.items?.some((item) => item.type !== "logo")
-    );
-    if (hasContent) {
-      const nonLogoSections = sortedSections.filter(
-        (section) => !section.items?.some(
-          (item) => item.type === "logo"
-        )
-      );
-      if (nonLogoSections.length > 0) {
-        togglerSectionId = nonLogoSections[nonLogoSections.length - 1].id;
-      }
-    }
-  }
-  const dropdownItems = [];
-  sortedSections.forEach((section) => {
-    section.items?.forEach((item) => {
-      if (item.type === "dropdown") {
-        dropdownItems.push({
-          item,
-          config: item.config || {}
-        });
-      }
-    });
-  });
-  const dropdownIds = [
-    `mobile-menu-${id}`,
-    ...(dropdownItems || []).map((d) => d.item.id)
-  ];
-  const styles = generateNavigationCSS(
-    id,
-    navigation,
-    resolvedColors,
-    dropdownIds
-  );
-  const isSameLayer = navigation.style?.dropdown?.layer === "same";
-  if (styleType === "minimal") {
-    const navbarAndDropdowns = /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Navbar,
-        {
-          id,
-          className,
-          headerStyles: isSameLayer ? {} : headerStyles,
-          sortedSections,
-          navigation,
-          resolvedColors,
-          togglerSectionId: togglerSectionId || "navbar",
-          itemsShowClass: "hidden",
-          togglerHideClass: "",
-          site,
-          mobileMenuId: `mobile-menu-${id}`,
-          containerContent: containerBehavior === "edged",
-          isSameLayer
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        NavigationDropdown,
-        {
-          itemId: `mobile-menu-${id}`,
-          config: { content: sectionsToDropdownContent(sortedSections) },
-          navigation,
-          resolvedColors,
-          styles: headerStyles,
-          linkStyle,
-          dropdownId: `mobile-menu-${id}`,
-          site,
-          containerContent: containerBehavior === "edged",
-          isSameLayer
-        }
-      ),
-      dropdownItems?.map(({ item, config }) => /* @__PURE__ */ jsx(
-        NavigationDropdown,
-        {
-          itemId: item.id,
-          config,
-          navigation,
-          resolvedColors,
-          styles: headerStyles,
-          linkStyle,
-          dropdownId: item.id,
-          site,
-          containerContent: containerBehavior === "edged",
-          isSameLayer
-        },
-        item.id
-      ))
-    ] });
-    const navbarContent2 = isSameLayer ? /* @__PURE__ */ jsx("div", { className: `navbar-wrapper-${id}`, style: headerStyles, children: navbarAndDropdowns }) : navbarAndDropdowns;
-    const navbarWithContainer2 = containerBehavior === "boxed" ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: navbarContent2 }) : navbarContent2;
-    const headerContent2 = /* @__PURE__ */ jsx(
-      NavigationHeaderWrapper,
-      {
-        className: cn(
-          "relative",
-          isFixed ? "fixed top-0 left-0 right-0 z-50" : "absolute top-0 left-0 right-0 z-50"
-        ),
-        style: { margin: marginValue },
-        "data-container": containerBehavior,
-        children: navbarWithContainer2
-      }
-    );
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      styles && /* @__PURE__ */ jsx("style", { children: styles }),
-      /* @__PURE__ */ jsxs(NavigationProvider, { children: [
-        headerContent2,
-        safeZoneHeight && safeZoneHeight !== "0" && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "header-safe-zone bg-surface",
-            style: { height: safeZoneHeight },
-            "aria-hidden": "true"
-          }
-        )
-      ] })
-    ] });
-  }
-  const defaultNavbarAndDropdowns = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Navbar,
-      {
-        id,
-        className,
-        headerStyles: isSameLayer ? {} : headerStyles,
-        sortedSections,
-        navigation,
-        resolvedColors,
-        togglerSectionId: togglerSectionId || "navbar",
-        itemsShowClass: showClass,
-        togglerHideClass: hideClass,
-        site,
-        mobileMenuId: `mobile-menu-${id}`,
-        containerContent: containerBehavior === "edged",
-        isSameLayer
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      NavigationDropdown,
-      {
-        itemId: `mobile-menu-${id}`,
-        config: { content: sectionsToDropdownContent(sortedSections) },
-        navigation,
-        resolvedColors,
-        styles: headerStyles,
-        linkStyle,
-        dropdownId: `mobile-menu-${id}`,
-        site,
-        containerContent: containerBehavior === "edged",
-        isSameLayer
-      }
-    ),
-    dropdownItems?.map(
-      ({
-        item,
-        config
-      }) => /* @__PURE__ */ jsx(
-        NavigationDropdown,
-        {
-          config,
-          itemId: item.id,
-          navigation,
-          resolvedColors,
-          styles: headerStyles,
-          linkStyle,
-          dropdownId: item.id,
-          site,
-          containerContent: containerBehavior === "edged",
-          isSameLayer
-        },
-        item.id
-      )
-    )
-  ] });
-  const navbarContent = isSameLayer ? /* @__PURE__ */ jsx("div", { className: `navbar-wrapper-${id}`, style: headerStyles, children: defaultNavbarAndDropdowns }) : defaultNavbarAndDropdowns;
-  const navbarWithContainer = containerBehavior === "boxed" ? /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: navbarContent }) : navbarContent;
-  const headerContent = /* @__PURE__ */ jsx(
-    NavigationHeaderWrapper,
-    {
-      className: cn(
-        "relative",
-        isFixed ? "fixed top-0 left-0 right-0 z-50" : "absolute top-0 left-0 right-0 z-50"
-      ),
-      style: { margin: marginValue },
-      "data-container": containerBehavior,
-      children: navbarWithContainer
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    styles && /* @__PURE__ */ jsx("style", { children: styles }),
-    /* @__PURE__ */ jsxs(NavigationProvider, { children: [
-      headerContent,
-      safeZoneHeight && safeZoneHeight !== "0" && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "header-safe-zone bg-surface",
-          style: { height: safeZoneHeight },
-          "aria-hidden": "true"
-        }
-      )
-    ] })
-  ] });
-};
-
-export { ChevronIcon, GridIcon, HamburgerIcon, Header, KebabIcon, MeatballsIcon, PlusIcon, ToggleIcon, toggleIconMap };
-//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map