@otl-core/next-navigation 1.1.19 → 1.1.21

package/dist/components/navigation/navbar.d.ts

@@ -0,0 +1,21 @@
+import { HeaderSection, HeaderConfig, Site } from '@otl-core/cms-types';
+import { ReactNode } from 'react';
+
+interface NavbarProps {
+    id: string;
+    className: string;
+    headerStyles: React.CSSProperties;
+    sortedSections: HeaderSection[];
+    navigation: HeaderConfig;
+    resolvedColors: Record<string, string | undefined>;
+    itemsShowClass: string;
+    togglerHideClass: string;
+    togglerSectionId: string;
+    site: Site;
+    mobileMenuId?: string;
+    containerContent?: boolean;
+    isSameLayer?: boolean;
+}
+declare function Navbar({ id, className, headerStyles, sortedSections, navigation, resolvedColors, itemsShowClass, togglerHideClass, togglerSectionId, site, mobileMenuId, containerContent, isSameLayer, }: NavbarProps): ReactNode;
+
+export { Navbar };

package/dist/components/navigation/navbar.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@otl-core/style-utils";
+import { NavbarSections } from "../sections/navbar-sections";
+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
+    }
+  );
+}
+export {
+  Navbar
+};
+//# sourceMappingURL=navbar.js.map

package/dist/components/navigation/navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/navbar.tsx"],"sourcesContent":["import { Site, HeaderConfig, HeaderSection } from \"@otl-core/cms-types\";\nimport { cn } from \"@otl-core/style-utils\";\nimport { ReactNode } from \"react\";\nimport { NavbarSections } from \"../sections/navbar-sections\";\n\ninterface NavbarProps {\n  id: string;\n  className: string;\n  headerStyles: React.CSSProperties;\n  sortedSections: HeaderSection[];\n  navigation: HeaderConfig;\n  resolvedColors: Record<string, string | undefined>;\n  itemsShowClass: string;\n  togglerHideClass: string;\n  togglerSectionId: string;\n  site: Site;\n  mobileMenuId?: string;\n  containerContent?: boolean;\n  isSameLayer?: boolean;\n}\n\nexport function Navbar({\n  id,\n  className,\n  headerStyles,\n  sortedSections,\n  navigation,\n  resolvedColors,\n  itemsShowClass,\n  togglerHideClass,\n  togglerSectionId,\n  site,\n  mobileMenuId,\n  containerContent = false,\n  isSameLayer = false,\n}: NavbarProps): ReactNode {\n  const dropdownLayer = navigation.style?.dropdown?.layer || \"below\";\n\n  function getNavbarZ(): string {\n    if (isSameLayer) return \"\";\n    return dropdownLayer === \"above\" ? \"z-[1]\" : \"z-[9999]\";\n  }\n  const navbarZ = getNavbarZ();\n\n  const sectionsContent = sortedSections.map((section) => (\n    <NavbarSections\n      key={section.id}\n      section={section}\n      site={site}\n      navigation={navigation}\n      resolvedColors={resolvedColors}\n      itemsShowClass={itemsShowClass}\n      togglerHideClass={togglerHideClass}\n      isTogglerSection={section.id === togglerSectionId}\n      mobileMenuId={mobileMenuId}\n    />\n  ));\n\n  return (\n    <div\n      className={cn(\n        `navbar-${id}`,\n        `relative flex items-center justify-between`,\n        navbarZ,\n        !containerContent && `navbar-inner-${id}`,\n        className,\n      )}\n      style={isSameLayer ? undefined : headerStyles}\n    >\n      {containerContent ? (\n        <div\n          className={cn(\n            \"container mx-auto flex items-center justify-between w-full\",\n            `navbar-inner-${id}`,\n          )}\n        >\n          {sectionsContent}\n        </div>\n      ) : (\n        sectionsContent\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA6CI;AA5CJ,SAAS,UAAU;AAEnB,SAAS,sBAAsB;AAkBxB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,cAAc;AAChB,GAA2B;AACzB,QAAM,gBAAgB,WAAW,OAAO,UAAU,SAAS;AAE3D,WAAS,aAAqB;AAC5B,QAAI,YAAa,QAAO;AACxB,WAAO,kBAAkB,UAAU,UAAU;AAAA,EAC/C;AACA,QAAM,UAAU,WAAW;AAE3B,QAAM,kBAAkB,eAAe,IAAI,CAAC,YAC1C;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB,QAAQ,OAAO;AAAA,MACjC;AAAA;AAAA,IARK,QAAQ;AAAA,EASf,CACD;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,UAAU,EAAE;AAAA,QACZ;AAAA,QACA;AAAA,QACA,CAAC,oBAAoB,gBAAgB,EAAE;AAAA,QACvC;AAAA,MACF;AAAA,MACA,OAAO,cAAc,SAAY;AAAA,MAEhC,6BACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBAAgB,EAAE;AAAA,UACpB;AAAA,UAEC;AAAA;AAAA,MACH,IAEA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/sections/navbar-sections.d.ts

@@ -0,0 +1,23 @@
+import { HeaderSection, HeaderConfig, Site } from '@otl-core/cms-types';
+import React__default from 'react';
+
+interface NavbarSectionProps {
+    section: HeaderSection;
+    logo?: {
+        text?: string;
+        url?: string;
+        alt?: string;
+        width?: number;
+        height?: number;
+    };
+    navigation?: HeaderConfig;
+    resolvedColors: Record<string, string | undefined>;
+    itemsShowClass?: string;
+    togglerHideClass?: string;
+    isTogglerSection?: boolean;
+    site: Site;
+    mobileMenuId?: string;
+}
+declare const NavbarSections: React__default.FC<NavbarSectionProps>;
+
+export { NavbarSections };

package/dist/components/sections/navbar-sections.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { resolveItemVisibility } from "../../lib/navigation.utils";
+import { MobileMenuToggle } from "../mobile/mobile-menu-toggle";
+import { NavigationItem } from "./navigation-item";
+const 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
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  NavbarSections
+};
+//# sourceMappingURL=navbar-sections.js.map

package/dist/components/sections/navbar-sections.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sections/navbar-sections.tsx"],"sourcesContent":["import {\n  Site,\n  HeaderConfig,\n  HeaderNavigationItem,\n  HeaderSection,\n} from \"@otl-core/cms-types\";\nimport React, { useMemo } from \"react\";\nimport { resolveItemVisibility } from \"../../lib/navigation.utils\";\nimport { MobileMenuToggle } from \"../mobile/mobile-menu-toggle\";\nimport { NavigationItem } from \"./navigation-item\";\n\ninterface NavbarSectionProps {\n  section: HeaderSection;\n  logo?: {\n    text?: string;\n    url?: string;\n    alt?: string;\n    width?: number;\n    height?: number;\n  };\n  navigation?: HeaderConfig;\n  resolvedColors: Record<string, string | undefined>;\n  itemsShowClass?: string;\n  togglerHideClass?: string;\n  isTogglerSection?: boolean;\n  site: Site;\n  mobileMenuId?: string;\n}\n\nexport const NavbarSections: React.FC<NavbarSectionProps> = ({\n  section,\n  navigation,\n  resolvedColors,\n  itemsShowClass,\n  togglerHideClass,\n  isTogglerSection,\n  site,\n  mobileMenuId,\n}) => {\n  // Check if this section contains a logo\n  const hasLogo = useMemo(() => {\n    return section?.items?.some(\n      (item: HeaderNavigationItem) => item.type === \"logo\",\n    );\n  }, [section.items]);\n\n  const sectionStyle: React.CSSProperties = useMemo(() => {\n    let flexValue = section.flex;\n\n    // Smart flex handling for better logo and navigation behavior\n    if (flexValue === \"0\" || flexValue === undefined) {\n      if (hasLogo) {\n        // Logo section: Don't shrink, take natural size\n        flexValue = \"0 0 auto\";\n      } else {\n        // Other sections with flex: 0 - allow shrinking if needed\n        flexValue = \"0 1 auto\";\n      }\n    }\n\n    return {\n      flex: flexValue,\n      justifyContent: section.justify || \"flex-start\",\n      alignItems: section.align || \"center\",\n      gap: section.gap || \"0\",\n      // For non-logo sections, ensure they can shrink below content width\n      ...(!hasLogo ? { minWidth: 0 } : {}),\n    };\n  }, [section, hasLogo]);\n\n  // Check if section should be hidden when empty\n  const shouldHide = useMemo(() => {\n    if (!section.hideWhenEmpty) return false;\n\n    // Never hide if there's a logo - logos are always visible\n    const hasLogo = section.items?.some(\n      (item: HeaderNavigationItem) => item.type === \"logo\",\n    );\n    if (hasLogo) return false;\n\n    // Never hide if there are items with visibility: navbar-only or both - they're always visible\n    const hasAlwaysVisibleItems = section.items?.some(\n      (item: HeaderNavigationItem) =>\n        resolveItemVisibility(item) === \"navbar-only\" ||\n        resolveItemVisibility(item) === \"both\",\n    );\n    if (hasAlwaysVisibleItems) return false;\n\n    // Check if there are any collapsible items (responsive or mobile-only)\n    const collapsibleItems = section.items?.filter(\n      (item: HeaderNavigationItem) =>\n        item.type !== \"logo\" &&\n        resolveItemVisibility(item) !== \"navbar-only\" &&\n        resolveItemVisibility(item) !== \"both\",\n    );\n\n    // If there are collapsible items, section is not empty\n    if (collapsibleItems && collapsibleItems.length > 0) return false;\n\n    // Don't hide if this is the toggler section (toggler button should show)\n    if (isTogglerSection) return false;\n\n    return true;\n  }, [section.hideWhenEmpty, section.items, isTogglerSection]);\n\n  // Apply the same visibility class as items if hideWhenEmpty is enabled\n  const sectionVisibilityClass = useMemo(() => {\n    if (!section.hideWhenEmpty) return \"\";\n\n    // Check if there are any items that are always visible (logos or navbar-only/both)\n    const alwaysVisibleItems = section.items?.filter(\n      (item: HeaderNavigationItem) =>\n        item.type === \"logo\" ||\n        resolveItemVisibility(item) === \"navbar-only\" ||\n        resolveItemVisibility(item) === \"both\",\n    );\n\n    // If there are always visible items, don't apply visibility class\n    if (alwaysVisibleItems && alwaysVisibleItems.length > 0) return \"\";\n\n    // If all items collapse, apply the same visibility class\n    return itemsShowClass;\n  }, [section.hideWhenEmpty, section.items, itemsShowClass]);\n\n  if (shouldHide) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`flex flex-row ${sectionVisibilityClass}`}\n      style={sectionStyle}\n      data-section-id={section.id}\n    >\n      {section.items?.map((item: HeaderNavigationItem) => {\n        return (\n          <NavigationItem\n            key={item.id}\n            item={item}\n            navigation={navigation}\n            resolvedColors={resolvedColors}\n            itemsShowClass={itemsShowClass}\n            site={site}\n          />\n        );\n      })}\n      {isTogglerSection && navigation && mobileMenuId && (\n        <div className={`flex flex-shrink-0 ${togglerHideClass}`}>\n          <MobileMenuToggle\n            navigation={navigation}\n            resolvedColors={resolvedColors}\n            toggleId={`toggler-${section.id}`}\n            mobileMenuId={mobileMenuId}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"AAiII,SAOM,KAPN;AA3HJ,SAAgB,eAAe;AAC/B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAoBxB,MAAM,iBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,UAAU,QAAQ,MAAM;AAC5B,WAAO,SAAS,OAAO;AAAA,MACrB,CAAC,SAA+B,KAAK,SAAS;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAM,eAAoC,QAAQ,MAAM;AACtD,QAAI,YAAY,QAAQ;AAGxB,QAAI,cAAc,OAAO,cAAc,QAAW;AAChD,UAAI,SAAS;AAEX,oBAAY;AAAA,MACd,OAAO;AAEL,oBAAY;AAAA,MACd;AAAA,IACF;AAEA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,gBAAgB,QAAQ,WAAW;AAAA,MACnC,YAAY,QAAQ,SAAS;AAAA,MAC7B,KAAK,QAAQ,OAAO;AAAA;AAAA,MAEpB,GAAI,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,CAAC;AAGrB,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC,QAAQ,cAAe,QAAO;AAGnC,UAAMA,WAAU,QAAQ,OAAO;AAAA,MAC7B,CAAC,SAA+B,KAAK,SAAS;AAAA,IAChD;AACA,QAAIA,SAAS,QAAO;AAGpB,UAAM,wBAAwB,QAAQ,OAAO;AAAA,MAC3C,CAAC,SACC,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AACA,QAAI,sBAAuB,QAAO;AAGlC,UAAM,mBAAmB,QAAQ,OAAO;AAAA,MACtC,CAAC,SACC,KAAK,SAAS,UACd,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AAGA,QAAI,oBAAoB,iBAAiB,SAAS,EAAG,QAAO;AAG5D,QAAI,iBAAkB,QAAO;AAE7B,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,gBAAgB,CAAC;AAG3D,QAAM,yBAAyB,QAAQ,MAAM;AAC3C,QAAI,CAAC,QAAQ,cAAe,QAAO;AAGnC,UAAM,qBAAqB,QAAQ,OAAO;AAAA,MACxC,CAAC,SACC,KAAK,SAAS,UACd,sBAAsB,IAAI,MAAM,iBAChC,sBAAsB,IAAI,MAAM;AAAA,IACpC;AAGA,QAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAGhE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,eAAe,QAAQ,OAAO,cAAc,CAAC;AAEzD,MAAI,YAAY;AACd,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iBAAiB,sBAAsB;AAAA,MAClD,OAAO;AAAA,MACP,mBAAiB,QAAQ;AAAA,MAExB;AAAA,gBAAQ,OAAO,IAAI,CAAC,SAA+B;AAClD,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,YALK,KAAK;AAAA,UAMZ;AAAA,QAEJ,CAAC;AAAA,QACA,oBAAoB,cAAc,gBACjC,oBAAC,SAAI,WAAW,sBAAsB,gBAAgB,IACpD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,UAAU,WAAW,QAAQ,EAAE;AAAA,YAC/B;AAAA;AAAA,QACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":["hasLogo"]}

package/dist/components/sections/navigation-item.d.ts

@@ -0,0 +1,13 @@
+import { HeaderNavigationItem, HeaderConfig, Site } from '@otl-core/cms-types';
+import React__default from 'react';
+
+interface NavigationItemProps {
+    item: HeaderNavigationItem;
+    navigation?: HeaderConfig;
+    resolvedColors: Record<string, string | undefined>;
+    itemsShowClass?: string;
+    site: Site;
+}
+declare const NavigationItem: React__default.FC<NavigationItemProps>;
+
+export { NavigationItem };

package/dist/components/sections/navigation-item.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useNavigation } from "../../context/navigation-context";
+import {
+  getLocalizedString,
+  getVisibilityClass,
+  parseMarkdownToHTML
+} from "../../lib/navigation.utils";
+import { ChevronIcon } from "../icons/chevron-icon";
+import { Logo } from "../items/logo";
+import { Button } from "../ui/button";
+const variantMap = {
+  primary: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost"
+};
+const sizeMap = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+const 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;
+};
+export {
+  NavigationItem
+};
+//# sourceMappingURL=navigation-item.js.map

package/dist/components/sections/navigation-item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/sections/navigation-item.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Site,\n  HeaderConfig,\n  HeaderNavigationItem,\n  HeaderNavigationItemButtonConfig,\n  HeaderNavigationItemImageConfig,\n  HeaderNavigationItemLinkConfig,\n  HeaderNavigationItemMarkdownConfig,\n} from \"@otl-core/cms-types\";\nimport Link from \"next/link\";\nimport React from \"react\";\nimport { useNavigation } from \"../../context/navigation-context\";\nimport {\n  getLocalizedString,\n  getVisibilityClass,\n  parseMarkdownToHTML,\n} from \"../../lib/navigation.utils\";\nimport { ChevronIcon } from \"../icons/chevron-icon\";\nimport { Logo } from \"../items/logo\";\nimport { Button } from \"../ui/button\";\n\ninterface NavigationItemProps {\n  item: HeaderNavigationItem;\n  navigation?: HeaderConfig;\n  resolvedColors: Record<string, string | undefined>;\n  itemsShowClass?: string;\n  site: Site;\n}\n\n// Map button variants to Button component variants\nconst variantMap: Record<\n  string,\n  \"default\" | \"secondary\" | \"outline\" | \"ghost\"\n> = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n};\n\n// Map button sizes to Button component sizes\nconst sizeMap: Record<string, \"default\" | \"sm\" | \"lg\"> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n};\n\nexport const NavigationItem: React.FC<NavigationItemProps> = ({\n  item,\n  navigation,\n  resolvedColors,\n  itemsShowClass,\n  site,\n}) => {\n  const label = getLocalizedString(item.label, site);\n\n  const visibilityClass = getVisibilityClass(item, itemsShowClass);\n\n  // Render logo\n  if (item.type === \"logo\") {\n    if (!navigation?.logo) return null;\n    return (\n      <Logo\n        navigation={navigation}\n        siteName={navigation.logo.alt || \"Logo\"}\n        logoTextColor={resolvedColors.logoText}\n      />\n    );\n  }\n\n  if (item.type === \"link\") {\n    const config = item.config as HeaderNavigationItemLinkConfig;\n    const linkStyle: React.CSSProperties = {\n      color: resolvedColors.linkColor,\n    };\n\n    return (\n      <Link\n        href={config.href}\n        style={linkStyle}\n        target={config.external ? \"_blank\" : undefined}\n        rel={config.external ? \"noopener noreferrer\" : undefined}\n        className={`${visibilityClass} items-center whitespace-nowrap`}\n      >\n        {config.icon && <span>{config.icon}</span>}\n        {label}\n      </Link>\n    );\n  }\n\n  // Render button — wrapped in a div to avoid CSS specificity conflict\n  // between Button's base `inline-flex` and visibility `hidden` classes\n  if (item.type === \"button\") {\n    const config = item.config as HeaderNavigationItemButtonConfig;\n\n    return (\n      <div className={`${visibilityClass} items-center`}>\n        <Button\n          asChild\n          variant={config.variant ? variantMap[config.variant] : \"default\"}\n          size={config.size ? sizeMap[config.size] : \"default\"}\n          className=\"whitespace-nowrap\"\n          style={{\n            fontSize: `var(--btn-font-${config.size || \"md\"})`,\n          }}\n        >\n          <Link\n            href={config.href}\n            target={config.external ? \"_blank\" : undefined}\n            rel={config.external ? \"noopener noreferrer\" : undefined}\n          >\n            {config.icon && <span>{config.icon}</span>}\n            {label}\n          </Link>\n        </Button>\n      </div>\n    );\n  }\n\n  // Render dropdown trigger\n  if (item.type === \"dropdown\") {\n    const { toggleDropdown, activeDropdown } = useNavigation();\n    const isOpen = activeDropdown === item.id;\n\n    const linkStyle: React.CSSProperties = {\n      color: resolvedColors.linkColor,\n    };\n\n    return (\n      <button\n        onClick={() => toggleDropdown(item.id)}\n        style={linkStyle}\n        aria-expanded={isOpen}\n        aria-haspopup=\"true\"\n        className={`${visibilityClass} items-center gap-1 whitespace-nowrap`}\n      >\n        {label}\n        <ChevronIcon isOpen={isOpen} size={16} />\n      </button>\n    );\n  }\n\n  // Render markdown\n  if (item.type === \"markdown\") {\n    const config = item.config as HeaderNavigationItemMarkdownConfig;\n    const content = getLocalizedString(config.content, site);\n    const html = parseMarkdownToHTML(content);\n\n    const textStyle: React.CSSProperties = {};\n    if (config.color) {\n      if (typeof config.color === \"string\") {\n        textStyle.color = config.color;\n      } else if (config.color.type === \"custom\" && config.color.value) {\n        textStyle.color =\n          typeof config.color.value === \"string\"\n            ? config.color.value\n            : config.color.value.background;\n      } else if (config.color.type === \"variable\" && config.color.value) {\n        textStyle.color = `var(${config.color.value})`;\n      } else if (config.color.type === \"theme\" && config.color.value) {\n        textStyle.color = `var(--${config.color.value})`;\n      }\n    } else {\n      textStyle.color = resolvedColors.text;\n    }\n\n    return (\n      <div\n        dangerouslySetInnerHTML={{ __html: html }}\n        className={`${visibilityClass} items-center whitespace-nowrap [&_*]:text-inherit`}\n        style={textStyle}\n      />\n    );\n  }\n\n  // Render image\n  if (item.type === \"image\") {\n    const config = item.config as HeaderNavigationItemImageConfig;\n    if (!config.src) return null;\n\n    const imgElement = (\n      <img\n        src={config.src}\n        alt={config.alt || \"\"}\n        style={{\n          display: \"block\",\n          width: config.width || \"auto\",\n          height: config.height || \"auto\",\n          objectFit: config.objectFit || \"contain\",\n        }}\n      />\n    );\n\n    const wrapped = config.href ? (\n      <Link\n        href={config.href}\n        target={config.external ? \"_blank\" : undefined}\n        rel={config.external ? \"noopener noreferrer\" : undefined}\n      >\n        {imgElement}\n      </Link>\n    ) : (\n      imgElement\n    );\n\n    return <div className={`${visibilityClass} items-center`}>{wrapped}</div>;\n  }\n\n  return null;\n};\n"],"mappings":"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","names":[]}

package/dist/components/ui/button.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@otl-core/style-utils";
+const 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
+    }
+  );
+}
+export {
+  Button,
+  buttonVariants
+};
+//# sourceMappingURL=button.js.map

package/dist/components/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@otl-core/style-utils\";\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"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\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":"AAkDI;AAjDJ,SAAS,YAAY;AACrB,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,aACE;AAAA,QACF,SACE;AAAA,QACF,WACE;AAAA,QACF,OACE;AAAA,QACF,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGK;AACH,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/context/navigation-context.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface NavigationContextType {
+    headerRef: React__default.RefObject<HTMLElement | null>;
+    isDropdownOpen: boolean;
+    activeDropdown: string | null;
+    openDropdown: (dropdownId: string) => void;
+    closeDropdown: () => void;
+    toggleDropdown: (dropdownId: string) => void;
+}
+declare function NavigationProvider({ children, }: {
+    children: React__default.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useNavigation(): NavigationContextType;
+
+export { NavigationProvider, useNavigation };

package/dist/context/navigation-context.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+const 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;
+}
+export {
+  NavigationProvider,
+  useNavigation
+};
+//# sourceMappingURL=navigation-context.js.map

package/dist/context/navigation-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/navigation-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { usePathname } from \"next/navigation\";\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\ninterface NavigationContextType {\n  headerRef: React.RefObject<HTMLElement | null>;\n  isDropdownOpen: boolean;\n  activeDropdown: string | null;\n  openDropdown: (dropdownId: string) => void;\n  closeDropdown: () => void;\n  toggleDropdown: (dropdownId: string) => void;\n}\n\nconst NavigationContext = createContext<NavigationContextType | undefined>(\n  undefined,\n);\n\nexport function NavigationProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);\n  const headerRef = useRef<HTMLElement | null>(null);\n  const pathname = usePathname();\n\n  const openDropdown = useCallback(\n    (dropdownId: string) => setActiveDropdown(dropdownId),\n    [],\n  );\n  const closeDropdown = useCallback(() => setActiveDropdown(null), []);\n  const toggleDropdown = useCallback(\n    (dropdownId: string) =>\n      setActiveDropdown((prev) => (prev === dropdownId ? null : dropdownId)),\n    [],\n  );\n\n  // Close dropdown on route change (render-time derivation, not an effect)\n  const prevPathname = useRef(pathname);\n  if (pathname !== prevPathname.current) {\n    prevPathname.current = pathname;\n    if (activeDropdown) {\n      setActiveDropdown(null);\n    }\n  }\n\n  useEffect(() => {\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\" && activeDropdown) {\n        closeDropdown();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [activeDropdown, closeDropdown]);\n\n  useEffect(() => {\n    if (!activeDropdown) return;\n\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as HTMLElement;\n\n      // Check if click is on an internal navigation element (back button, nested dropdown triggers)\n      if (target.closest(\"[data-navigation-internal]\")) {\n        return;\n      }\n\n      // Check if click is outside the header\n      if (!headerRef.current?.contains(target)) {\n        closeDropdown();\n      }\n    };\n\n    // Use capture phase to handle clicks before they bubble\n    document.addEventListener(\"click\", handleClickOutside, true);\n\n    return () => {\n      document.removeEventListener(\"click\", handleClickOutside, true);\n    };\n  }, [activeDropdown, closeDropdown]);\n\n  const isDropdownOpen = useMemo(\n    () => activeDropdown !== null,\n    [activeDropdown],\n  );\n\n  return (\n    <NavigationContext.Provider\n      value={{\n        headerRef,\n        isDropdownOpen,\n        activeDropdown,\n        openDropdown,\n        closeDropdown,\n        toggleDropdown,\n      }}\n    >\n      {children}\n    </NavigationContext.Provider>\n  );\n}\n\nexport function useNavigation() {\n  const context = useContext(NavigationContext);\n  if (!context) {\n    throw new Error(\"useNavigation must be used within NavigationProvider\");\n  }\n  return context;\n}\n"],"mappings":";AAiGI;AA/FJ,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWP,MAAM,oBAAoB;AAAA,EACxB;AACF;AAEO,SAAS,mBAAmB;AAAA,EACjC;AACF,GAEG;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,YAAY,OAA2B,IAAI;AACjD,QAAM,WAAW,YAAY;AAE7B,QAAM,eAAe;AAAA,IACnB,CAAC,eAAuB,kBAAkB,UAAU;AAAA,IACpD,CAAC;AAAA,EACH;AACA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,IAAI,GAAG,CAAC,CAAC;AACnE,QAAM,iBAAiB;AAAA,IACrB,CAAC,eACC,kBAAkB,CAAC,SAAU,SAAS,aAAa,OAAO,UAAW;AAAA,IACvE,CAAC;AAAA,EACH;AAGA,QAAM,eAAe,OAAO,QAAQ;AACpC,MAAI,aAAa,aAAa,SAAS;AACrC,iBAAa,UAAU;AACvB,QAAI,gBAAgB;AAClB,wBAAkB,IAAI;AAAA,IACxB;AAAA,EACF;AAEA,YAAU,MAAM;AACd,UAAM,eAAe,CAAC,MAAqB;AACzC,UAAI,EAAE,QAAQ,YAAY,gBAAgB;AACxC,sBAAc;AAAA,MAChB;AAAA,IACF;AAEA,aAAS,iBAAiB,WAAW,YAAY;AACjD,WAAO,MAAM,SAAS,oBAAoB,WAAW,YAAY;AAAA,EACnE,GAAG,CAAC,gBAAgB,aAAa,CAAC;AAElC,YAAU,MAAM;AACd,QAAI,CAAC,eAAgB;AAErB,UAAM,qBAAqB,CAAC,MAAkB;AAC5C,YAAM,SAAS,EAAE;AAGjB,UAAI,OAAO,QAAQ,4BAA4B,GAAG;AAChD;AAAA,MACF;AAGA,UAAI,CAAC,UAAU,SAAS,SAAS,MAAM,GAAG;AACxC,sBAAc;AAAA,MAChB;AAAA,IACF;AAGA,aAAS,iBAAiB,SAAS,oBAAoB,IAAI;AAE3D,WAAO,MAAM;AACX,eAAS,oBAAoB,SAAS,oBAAoB,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,gBAAgB,aAAa,CAAC;AAElC,QAAM,iBAAiB;AAAA,IACrB,MAAM,mBAAmB;AAAA,IACzB,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB;AAC9B,QAAM,UAAU,WAAW,iBAAiB;AAC5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,sDAAsD;AAAA,EACxE;AACA,SAAO;AACT;","names":[]}