@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/mega-menu-universal/desktop-panel.mjs

@@ -0,0 +1,408 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@thorprovider/blocks";
+import { useEffect, useId, useRef, useState } from "react";
+import { formatLabel } from "./labels.mjs";
+import { isInSafeTriangle } from "./intent.mjs";
+import { hasChildren, sortNodes } from "./taxonomy.mjs";
+import { buildColumnGroups } from "./presentation.mjs";
+import { ArrowIcon, ChevronIcon } from "./icons.mjs";
+import {
+  CategoryImage,
+  CategoryLink,
+  CommercialBadge,
+  CountText,
+  ImageFallback,
+  ViewAllLink,
+  hoverSurface
+} from "./category-parts.mjs";
+const CASCADE_COLUMNS = 3;
+const GRID_BY_COUNT = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-2 @2xl:grid-cols-3",
+  4: "grid-cols-2 @2xl:grid-cols-4"
+};
+const gridClass = (count) => GRID_BY_COUNT[Math.min(Math.max(count, 1), 4)];
+function PanelHeader({
+  active,
+  config,
+  labels,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-border bg-popover px-4 py-2.5", children: [
+    /* @__PURE__ */ jsx("h3", { className: "min-w-0 break-words text-sm font-semibold text-foreground", children: active.label }),
+    /* @__PURE__ */ jsx(ViewAllLink, { node: active, config, labels, onNavigate })
+  ] });
+}
+function CategoryRow({
+  node,
+  level,
+  config,
+  labels,
+  onNavigate,
+  selected = false,
+  trailing,
+  allowNested = true,
+  showBadge = true,
+  showCount = false,
+  onPointerEnter,
+  onPointerLeave
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const contentId = useId();
+  const expandable = allowNested && hasChildren(node) && level < config.deepLevelLimit;
+  return /* @__PURE__ */ jsxs("li", { onPointerEnter, onPointerLeave, children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-1 rounded-md", selected && "bg-secondary"), children: [
+      /* @__PURE__ */ jsx(
+        CategoryLink,
+        {
+          node,
+          onNavigate,
+          className: cn(
+            "min-w-0 flex-1 px-2 py-2 text-sm",
+            selected ? "text-primary" : "text-foreground"
+          )
+        }
+      ),
+      showBadge ? /* @__PURE__ */ jsx(CommercialBadge, { node, config, labels }) : null,
+      showCount ? /* @__PURE__ */ jsx(CountText, { node, config, labels, className: "px-1 py-2" }) : null,
+      trailing,
+      expandable ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-xs",
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          "aria-label": formatLabel(labels.openSubmenu, { name: node.label }),
+          onClick: () => setExpanded((current) => !current),
+          className: cn("shrink-0 text-muted-foreground", hoverSurface),
+          children: /* @__PURE__ */ jsx(
+            ChevronIcon,
+            {
+              className: cn(
+                "h-4 w-4 transition-transform motion-reduce:transition-none",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        }
+      ) : null
+    ] }),
+    expandable ? /* @__PURE__ */ jsx("div", { id: contentId, hidden: !expanded, children: expanded ? /* @__PURE__ */ jsx("ul", { className: "mt-0.5 space-y-0.5 border-s border-border ps-3", children: sortNodes(node.children ?? []).map((child) => /* @__PURE__ */ jsx(
+      CategoryRow,
+      {
+        node: child,
+        level: level + 1,
+        config,
+        labels,
+        onNavigate,
+        showBadge,
+        showCount
+      },
+      child.id
+    )) }) : null }) : null
+  ] });
+}
+function Column({
+  group,
+  config,
+  labels,
+  onNavigate,
+  divide = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", divide && "border-s border-border ps-4"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+      /* @__PURE__ */ jsx(
+        CategoryLink,
+        {
+          node: group.node,
+          onNavigate,
+          className: "min-w-0 flex-1 text-sm font-semibold text-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(CommercialBadge, { node: group.node, config, labels })
+    ] }),
+    /* @__PURE__ */ jsx(CountText, { node: group.node, config, labels, className: "mt-0.5 block px-2" }),
+    group.links.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-1 space-y-0.5", children: group.links.map((link) => /* @__PURE__ */ jsx(
+      CategoryRow,
+      {
+        node: link,
+        level: 3,
+        config,
+        labels,
+        onNavigate
+      },
+      link.id
+    )) }) : null,
+    group.viewAll ? /* @__PURE__ */ jsx(ViewAllLink, { node: group.node, config, labels, onNavigate, className: "mt-1" }) : null
+  ] });
+}
+function ColumnsPanel({ active, config, labels, onNavigate }) {
+  const groups = buildColumnGroups(active, config);
+  const hidden = (active.children?.length ?? 0) > groups.length;
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+    /* @__PURE__ */ jsx(PanelHeader, { active, config, labels, onNavigate }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("grid gap-x-4 gap-y-4", gridClass(groups.length)), children: groups.map((group, index) => /* @__PURE__ */ jsx(
+        Column,
+        {
+          group,
+          config,
+          labels,
+          onNavigate,
+          divide: index > 0
+        },
+        group.node.id
+      )) }),
+      hidden ? /* @__PURE__ */ jsx(ViewAllLink, { node: active, config, labels, onNavigate, className: "mt-3" }) : null
+    ] })
+  ] });
+}
+function buildCascadeLevels(active, trail) {
+  const levels = [];
+  let parent = active;
+  let nodes = sortNodes(active.children ?? []);
+  let index = 0;
+  while (nodes.length > 0 && levels.length < CASCADE_COLUMNS) {
+    levels.push({ parent, nodes });
+    const selected = nodes.find((node) => node.id === trail[index]);
+    if (!selected || !hasChildren(selected)) break;
+    parent = selected;
+    nodes = sortNodes(selected.children ?? []);
+    index += 1;
+  }
+  return levels;
+}
+function CascadePanel({ active, config, labels, onNavigate }) {
+  const [trail, setTrail] = useState([]);
+  const columnRefs = useRef([]);
+  const originRef = useRef(null);
+  const timerRef = useRef(null);
+  const focusColumn = useRef(null);
+  const switchDelay = Math.min(300, Math.max(80, Math.round(config.openDelayMs / 2)));
+  useEffect(() => {
+    return () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    };
+  }, []);
+  useEffect(() => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    timerRef.current = null;
+    setTrail([]);
+  }, [active.id]);
+  useEffect(() => {
+    const index = focusColumn.current;
+    if (index === null) return;
+    focusColumn.current = null;
+    columnRefs.current[index]?.querySelector("a[href], button")?.focus();
+  }, [trail]);
+  const select = (index, node) => {
+    setTrail((current) => [...current.slice(0, index), node.id]);
+  };
+  const handleEnter = (index, node, point) => {
+    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    if (!hasChildren(node)) {
+      setTrail((current) => current.slice(0, index));
+      return;
+    }
+    const nextColumn = columnRefs.current[index + 1];
+    if (nextColumn && originRef.current) {
+      const rect = nextColumn.getBoundingClientRect();
+      if (isInSafeTriangle(point, originRef.current, rect)) return;
+    }
+    timerRef.current = window.setTimeout(() => select(index, node), switchDelay);
+  };
+  const levels = buildCascadeLevels(active, trail);
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+    /* @__PURE__ */ jsx(PanelHeader, { active, config, labels, onNavigate }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4 px-4 pt-3", children: levels.map((level, index) => {
+      const isLast = index === levels.length - 1;
+      const levelNumber = index + 2;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            columnRefs.current[index] = element;
+          },
+          className: cn("min-w-0 w-56 shrink", index > 0 && "border-s border-border ps-4"),
+          children: [
+            index > 0 ? /* @__PURE__ */ jsx("p", { className: "px-2 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: level.parent?.label }) : null,
+            /* @__PURE__ */ jsx("ul", { className: cn("space-y-0.5", index === 0 && "pt-1"), children: level.nodes.map((node) => {
+              const selected = trail[index] === node.id;
+              return /* @__PURE__ */ jsx(
+                CategoryRow,
+                {
+                  node,
+                  level: levelNumber,
+                  config,
+                  labels,
+                  onNavigate,
+                  selected,
+                  allowNested: index === CASCADE_COLUMNS - 1,
+                  showBadge: false,
+                  showCount: true,
+                  onPointerEnter: (event) => handleEnter(index, node, { x: event.clientX, y: event.clientY }),
+                  onPointerLeave: (event) => {
+                    originRef.current = { x: event.clientX, y: event.clientY };
+                  },
+                  trailing: hasChildren(node) && index < CASCADE_COLUMNS - 1 ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-xs",
+                      "aria-expanded": selected,
+                      "aria-label": formatLabel(labels.openSubmenu, { name: node.label }),
+                      onClick: () => {
+                        select(index, node);
+                        focusColumn.current = index + 1;
+                      },
+                      className: cn("shrink-0 text-muted-foreground", hoverSurface),
+                      children: /* @__PURE__ */ jsx(ArrowIcon, { className: "h-4 w-4 rtl:rotate-180" })
+                    }
+                  ) : void 0
+                },
+                node.id
+              );
+            }) }),
+            index > 0 ? /* @__PURE__ */ jsx(
+              ViewAllLink,
+              {
+                node: level.parent ?? active,
+                config,
+                labels,
+                onNavigate,
+                className: "mt-2 px-2"
+              }
+            ) : null
+          ]
+        },
+        level.parent?.id ?? active.id
+      );
+    }) })
+  ] });
+}
+function VisualPanel({ active, config, labels, onNavigate }) {
+  const groups = buildColumnGroups(active, config);
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+    /* @__PURE__ */ jsx(PanelHeader, { active, config, labels, onNavigate }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 pt-3", children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", gridClass(groups.length)), children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs(
+        CategoryLink,
+        {
+          node: group.node,
+          onNavigate,
+          className: "flex w-full flex-col items-stretch overflow-hidden rounded-lg border border-border p-0 hover:border-primary hover:bg-transparent",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "block aspect-video overflow-hidden bg-muted", children: /* @__PURE__ */ jsx(CategoryImage, { node: group.node, config }) }),
+            /* @__PURE__ */ jsxs("span", { className: "block p-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-sm font-semibold text-foreground", children: group.node.label }),
+              /* @__PURE__ */ jsx(CountText, { node: group.node, config, labels, className: "mt-0.5 block" })
+            ] })
+          ]
+        }
+      ),
+      group.links.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-1 space-y-0.5", children: group.links.map((link) => /* @__PURE__ */ jsx(
+        CategoryRow,
+        {
+          node: link,
+          level: 3,
+          config,
+          labels,
+          onNavigate
+        },
+        link.id
+      )) }) : null,
+      group.viewAll ? /* @__PURE__ */ jsx(
+        ViewAllLink,
+        {
+          node: group.node,
+          config,
+          labels,
+          onNavigate,
+          className: "mt-1"
+        }
+      ) : null
+    ] }, group.node.id)) }) })
+  ] });
+}
+function PromoCard({ promotion, labels }) {
+  const alt = promotion.imageAlt ?? promotion.title;
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 rounded-lg bg-secondary p-3 text-secondary-foreground", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide", children: promotion.eyebrow ?? labels.promotionsTitle }),
+    /* @__PURE__ */ jsx("span", { className: "mt-2 block aspect-video overflow-hidden rounded-md bg-muted", children: promotion.image ? /* @__PURE__ */ jsx("img", { src: promotion.image, alt, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(ImageFallback, { label: alt }) }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm font-semibold", children: promotion.title }),
+    promotion.body ? /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 text-xs", children: promotion.body }) : null,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        asChild: true,
+        variant: "link",
+        size: "sm",
+        className: "mt-2 h-auto min-h-8 shrink-0 justify-start px-0 text-sm font-semibold",
+        children: /* @__PURE__ */ jsxs("a", { href: promotion.href, children: [
+          promotion.ctaLabel,
+          /* @__PURE__ */ jsx(ArrowIcon, { className: "h-3.5 w-3.5 rtl:rotate-180" })
+        ] })
+      }
+    )
+  ] });
+}
+function HybridPanel({
+  active,
+  config,
+  labels,
+  promotions,
+  onNavigate
+}) {
+  const promotion = config.showPromotions ? promotions[0] : void 0;
+  if (!promotion) {
+    return /* @__PURE__ */ jsx(ColumnsPanel, { active, config, labels, onNavigate });
+  }
+  const groups = buildColumnGroups(active, config);
+  const visible = groups.slice(0, Math.max(1, config.maxColumns - 1));
+  const rest = groups.slice(visible.length);
+  return /* @__PURE__ */ jsxs("div", { className: "pb-4", children: [
+    /* @__PURE__ */ jsx(PanelHeader, { active, config, labels, onNavigate }),
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("grid gap-x-4 gap-y-4", gridClass(visible.length + 1)), children: [
+        visible.map((group, index) => /* @__PURE__ */ jsx(
+          Column,
+          {
+            group,
+            config,
+            labels,
+            onNavigate,
+            divide: index > 0
+          },
+          group.node.id
+        )),
+        /* @__PURE__ */ jsx(PromoCard, { promotion, labels })
+      ] }),
+      rest.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 border-t border-border pt-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: formatLabel(labels.moreIn, { name: active.label }) }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-wrap gap-x-4 gap-y-1", children: rest.map((group) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(CategoryLink, { node: group.node, onNavigate, className: "text-sm" }) }, group.node.id)) })
+      ] }) : null
+    ] })
+  ] });
+}
+function DesktopPanel(props) {
+  switch (props.presentation) {
+    case "cascade":
+      return /* @__PURE__ */ jsx(CascadePanel, { ...props });
+    case "visual":
+      return /* @__PURE__ */ jsx(VisualPanel, { ...props });
+    case "hybrid":
+      return /* @__PURE__ */ jsx(HybridPanel, { ...props });
+    case "columns":
+    default:
+      return /* @__PURE__ */ jsx(ColumnsPanel, { ...props });
+  }
+}
+export {
+  DesktopPanel
+};
+//# sourceMappingURL=desktop-panel.mjs.map

package/dist/blocks/designs/mega-menu-universal/desktop-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/mega-menu-universal/desktop-panel.tsx"],"sourcesContent":["'use client'\n\nimport { Button, cn } from '@thorprovider/blocks'\nimport { useEffect, useId, useRef, useState, type PointerEvent, type ReactNode } from 'react'\n\nimport type {\n  CategoryNode,\n  MenuConfig,\n  MenuLabels,\n  Promotion,\n  ResolvedPresentation,\n} from './contracts'\nimport { formatLabel } from './labels'\nimport { isInSafeTriangle, type Point } from './intent'\nimport { hasChildren, sortNodes } from './taxonomy'\nimport { buildColumnGroups, type ColumnGroup } from './presentation'\nimport { ArrowIcon, ChevronIcon } from './icons'\nimport {\n  CategoryImage,\n  CategoryLink,\n  CommercialBadge,\n  CountText,\n  ImageFallback,\n  ViewAllLink,\n  hoverSurface,\n  type NavigateHandler,\n} from './category-parts'\n\n/** Columns rendered side by side before nesting the rest (L2 → L3 → L4). */\nconst CASCADE_COLUMNS = 3\n\n/** Static classes so Tailwind emits every balanced grid the menu can use. */\nconst GRID_BY_COUNT: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid-cols-2',\n  3: 'grid-cols-2 @2xl:grid-cols-3',\n  4: 'grid-cols-2 @2xl:grid-cols-4',\n}\n\nconst gridClass = (count: number) => GRID_BY_COUNT[Math.min(Math.max(count, 1), 4)]\n\nexport type DesktopPanelProps = {\n  active: CategoryNode\n  presentation: ResolvedPresentation\n  config: MenuConfig\n  labels: MenuLabels\n  promotions: Promotion[]\n  onNavigate: NavigateHandler\n}\n\n/**\n * The panel has one title: the active category. «Ver todo» is the visit action,\n * so the panel never repeats the category name in a breadcrumb and a column\n * heading at the same time.\n */\nfunction PanelHeader({\n  active,\n  config,\n  labels,\n  onNavigate,\n}: {\n  active: CategoryNode\n  config: MenuConfig\n  labels: MenuLabels\n  onNavigate: NavigateHandler\n}) {\n  return (\n    <div className=\"sticky top-0 z-10 flex items-center justify-between gap-3 border-b border-border bg-popover px-4 py-2.5\">\n      <h3 className=\"min-w-0 break-words text-sm font-semibold text-foreground\">{active.label}</h3>\n      <ViewAllLink node={active} config={config} labels={labels} onNavigate={onNavigate} />\n    </div>\n  )\n}\n\n/**\n * One category line: link, commercial badge, count, an optional trailing\n * control (the cascade arrow) and an optional nested disclosure. The nested\n * list lives *below* the flex line, never inside it, so a long label or a\n * three-digit count can never push the disclosure onto its own line.\n */\nfunction CategoryRow({\n  node,\n  level,\n  config,\n  labels,\n  onNavigate,\n  selected = false,\n  trailing,\n  allowNested = true,\n  showBadge = true,\n  showCount = false,\n  onPointerEnter,\n  onPointerLeave,\n}: {\n  node: CategoryNode\n  level: number\n  config: MenuConfig\n  labels: MenuLabels\n  onNavigate: NavigateHandler\n  selected?: boolean\n  trailing?: ReactNode\n  allowNested?: boolean\n  showBadge?: boolean\n  showCount?: boolean\n  onPointerEnter?: (event: PointerEvent<HTMLLIElement>) => void\n  onPointerLeave?: (event: PointerEvent<HTMLLIElement>) => void\n}) {\n  const [expanded, setExpanded] = useState(false)\n  const contentId = useId()\n  const expandable = allowNested && hasChildren(node) && level < config.deepLevelLimit\n\n  return (\n    <li onPointerEnter={onPointerEnter} onPointerLeave={onPointerLeave}>\n      <div className={cn('flex items-start gap-1 rounded-md', selected && 'bg-secondary')}>\n        <CategoryLink\n          node={node}\n          onNavigate={onNavigate}\n          className={cn(\n            'min-w-0 flex-1 px-2 py-2 text-sm',\n            selected ? 'text-primary' : 'text-foreground',\n          )}\n        />\n        {showBadge ? <CommercialBadge node={node} config={config} labels={labels} /> : null}\n        {showCount ? (\n          <CountText node={node} config={config} labels={labels} className=\"px-1 py-2\" />\n        ) : null}\n        {trailing}\n        {expandable ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-xs\"\n            aria-expanded={expanded}\n            aria-controls={contentId}\n            aria-label={formatLabel(labels.openSubmenu, { name: node.label })}\n            onClick={() => setExpanded((current) => !current)}\n            className={cn('shrink-0 text-muted-foreground', hoverSurface)}\n          >\n            <ChevronIcon\n              className={cn(\n                'h-4 w-4 transition-transform motion-reduce:transition-none',\n                expanded && 'rotate-180',\n              )}\n            />\n          </Button>\n        ) : null}\n      </div>\n      {expandable ? (\n        <div id={contentId} hidden={!expanded}>\n          {expanded ? (\n            <ul className=\"mt-0.5 space-y-0.5 border-s border-border ps-3\">\n              {sortNodes(node.children ?? []).map((child) => (\n                <CategoryRow\n                  key={child.id}\n                  node={child}\n                  level={level + 1}\n                  config={config}\n                  labels={labels}\n                  onNavigate={onNavigate}\n                  showBadge={showBadge}\n                  showCount={showCount}\n                />\n              ))}\n            </ul>\n          ) : null}\n        </div>\n      ) : null}\n    </li>\n  )\n}\n\nfunction Column({\n  group,\n  config,\n  labels,\n  onNavigate,\n  divide = false,\n}: {\n  group: ColumnGroup\n  config: MenuConfig\n  labels: MenuLabels\n  onNavigate: NavigateHandler\n  divide?: boolean\n}) {\n  return (\n    <div className={cn('min-w-0', divide && 'border-s border-border ps-4')}>\n      <div className=\"flex items-start gap-1\">\n        <CategoryLink\n          node={group.node}\n          onNavigate={onNavigate}\n          className=\"min-w-0 flex-1 text-sm font-semibold text-foreground\"\n        />\n        <CommercialBadge node={group.node} config={config} labels={labels} />\n      </div>\n      <CountText node={group.node} config={config} labels={labels} className=\"mt-0.5 block px-2\" />\n      {group.links.length > 0 ? (\n        <ul className=\"mt-1 space-y-0.5\">\n          {group.links.map((link) => (\n            <CategoryRow\n              key={link.id}\n              node={link}\n              level={3}\n              config={config}\n              labels={labels}\n              onNavigate={onNavigate}\n            />\n          ))}\n        </ul>\n      ) : null}\n      {group.viewAll ? (\n        <ViewAllLink node={group.node} config={config} labels={labels} onNavigate={onNavigate} className=\"mt-1\" />\n      ) : null}\n    </div>\n  )\n}\n\nfunction ColumnsPanel({ active, config, labels, onNavigate }: Omit<DesktopPanelProps, 'presentation' | 'promotions'>) {\n  const groups = buildColumnGroups(active, config)\n  const hidden = (active.children?.length ?? 0) > groups.length\n\n  return (\n    <div className=\"pb-4\">\n      <PanelHeader active={active} config={config} labels={labels} onNavigate={onNavigate} />\n      <div className=\"px-4 pt-3\">\n        <div className={cn('grid gap-x-4 gap-y-4', gridClass(groups.length))}>\n          {groups.map((group, index) => (\n            <Column\n              key={group.node.id}\n              group={group}\n              config={config}\n              labels={labels}\n              onNavigate={onNavigate}\n              divide={index > 0}\n            />\n          ))}\n        </div>\n        {hidden ? (\n          <ViewAllLink node={active} config={config} labels={labels} onNavigate={onNavigate} className=\"mt-3\" />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\ntype CascadeLevel = { parent: CategoryNode | null; nodes: CategoryNode[] }\n\nfunction buildCascadeLevels(active: CategoryNode, trail: string[]): CascadeLevel[] {\n  const levels: CascadeLevel[] = []\n  let parent: CategoryNode | null = active\n  let nodes = sortNodes(active.children ?? [])\n  let index = 0\n\n  while (nodes.length > 0 && levels.length < CASCADE_COLUMNS) {\n    levels.push({ parent, nodes })\n    const selected = nodes.find((node) => node.id === trail[index])\n    if (!selected || !hasChildren(selected)) break\n    parent = selected\n    nodes = sortNodes(selected.children ?? [])\n    index += 1\n  }\n\n  return levels\n}\n\nfunction CascadePanel({ active, config, labels, onNavigate }: Omit<DesktopPanelProps, 'presentation' | 'promotions'>) {\n  const [trail, setTrail] = useState<string[]>([])\n  const columnRefs = useRef<Array<HTMLDivElement | null>>([])\n  const originRef = useRef<Point | null>(null)\n  const timerRef = useRef<number | null>(null)\n  const focusColumn = useRef<number | null>(null)\n  const switchDelay = Math.min(300, Math.max(80, Math.round(config.openDelayMs / 2)))\n\n  useEffect(() => {\n    return () => {\n      if (timerRef.current !== null) window.clearTimeout(timerRef.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (timerRef.current !== null) window.clearTimeout(timerRef.current)\n    timerRef.current = null\n    setTrail([])\n  }, [active.id])\n\n  useEffect(() => {\n    const index = focusColumn.current\n    if (index === null) return\n    focusColumn.current = null\n    columnRefs.current[index]?.querySelector<HTMLElement>('a[href], button')?.focus()\n  }, [trail])\n\n  const select = (index: number, node: CategoryNode) => {\n    setTrail((current) => [...current.slice(0, index), node.id])\n  }\n\n  const handleEnter = (index: number, node: CategoryNode, point: Point) => {\n    if (timerRef.current !== null) window.clearTimeout(timerRef.current)\n    if (!hasChildren(node)) {\n      setTrail((current) => current.slice(0, index))\n      return\n    }\n    const nextColumn = columnRefs.current[index + 1]\n    if (nextColumn && originRef.current) {\n      const rect = nextColumn.getBoundingClientRect()\n      if (isInSafeTriangle(point, originRef.current, rect)) return\n    }\n    timerRef.current = window.setTimeout(() => select(index, node), switchDelay)\n  }\n\n  const levels = buildCascadeLevels(active, trail)\n\n  return (\n    <div className=\"pb-4\">\n      <PanelHeader active={active} config={config} labels={labels} onNavigate={onNavigate} />\n      <div className=\"flex gap-4 px-4 pt-3\">\n        {levels.map((level, index) => {\n          const isLast = index === levels.length - 1\n          const levelNumber = index + 2\n          return (\n            <div\n              key={level.parent?.id ?? active.id}\n              ref={(element) => {\n                columnRefs.current[index] = element\n              }}\n              className={cn('min-w-0 w-56 shrink', index > 0 && 'border-s border-border ps-4')}\n            >\n              {index > 0 ? (\n                <p className=\"px-2 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n                  {level.parent?.label}\n                </p>\n              ) : null}\n              <ul className={cn('space-y-0.5', index === 0 && 'pt-1')}>\n                {level.nodes.map((node) => {\n                  const selected = trail[index] === node.id\n                  return (\n                    <CategoryRow\n                      key={node.id}\n                      node={node}\n                      level={levelNumber}\n                      config={config}\n                      labels={labels}\n                      onNavigate={onNavigate}\n                      selected={selected}\n                      allowNested={index === CASCADE_COLUMNS - 1}\n                      showBadge={false}\n                      showCount\n                      onPointerEnter={(event) =>\n                        handleEnter(index, node, { x: event.clientX, y: event.clientY })\n                      }\n                      onPointerLeave={(event) => {\n                        originRef.current = { x: event.clientX, y: event.clientY }\n                      }}\n                      trailing={\n                        hasChildren(node) && index < CASCADE_COLUMNS - 1 ? (\n                          <Button\n                            type=\"button\"\n                            variant=\"ghost\"\n                            size=\"icon-xs\"\n                            aria-expanded={selected}\n                            aria-label={formatLabel(labels.openSubmenu, { name: node.label })}\n                            onClick={() => {\n                              select(index, node)\n                              focusColumn.current = index + 1\n                            }}\n                            className={cn('shrink-0 text-muted-foreground', hoverSurface)}\n                          >\n                            <ArrowIcon className=\"h-4 w-4 rtl:rotate-180\" />\n                          </Button>\n                        ) : undefined\n                      }\n                    />\n                  )\n                })}\n              </ul>\n              {index > 0 ? (\n                <ViewAllLink\n                  node={level.parent ?? active}\n                  config={config}\n                  labels={labels}\n                  onNavigate={onNavigate}\n                  className=\"mt-2 px-2\"\n                />\n              ) : null}\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n\nfunction VisualPanel({ active, config, labels, onNavigate }: Omit<DesktopPanelProps, 'presentation' | 'promotions'>) {\n  const groups = buildColumnGroups(active, config)\n\n  return (\n    <div className=\"pb-4\">\n      <PanelHeader active={active} config={config} labels={labels} onNavigate={onNavigate} />\n      <div className=\"px-4 pt-3\">\n        <div className={cn('grid gap-3', gridClass(groups.length))}>\n          {groups.map((group) => (\n            <div key={group.node.id} className=\"min-w-0\">\n              <CategoryLink\n                node={group.node}\n                onNavigate={onNavigate}\n                className=\"flex w-full flex-col items-stretch overflow-hidden rounded-lg border border-border p-0 hover:border-primary hover:bg-transparent\"\n              >\n                <span className=\"block aspect-video overflow-hidden bg-muted\">\n                  <CategoryImage node={group.node} config={config} />\n                </span>\n                <span className=\"block p-2\">\n                  <span className=\"block text-sm font-semibold text-foreground\">{group.node.label}</span>\n                  <CountText node={group.node} config={config} labels={labels} className=\"mt-0.5 block\" />\n                </span>\n              </CategoryLink>\n              {group.links.length > 0 ? (\n                <ul className=\"mt-1 space-y-0.5\">\n                  {group.links.map((link) => (\n                    <CategoryRow\n                      key={link.id}\n                      node={link}\n                      level={3}\n                      config={config}\n                      labels={labels}\n                      onNavigate={onNavigate}\n                    />\n                  ))}\n                </ul>\n              ) : null}\n              {group.viewAll ? (\n                <ViewAllLink\n                  node={group.node}\n                  config={config}\n                  labels={labels}\n                  onNavigate={onNavigate}\n                  className=\"mt-1\"\n                />\n              ) : null}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction PromoCard({ promotion, labels }: { promotion: Promotion; labels: MenuLabels }) {\n  const alt = promotion.imageAlt ?? promotion.title\n  return (\n    <div className=\"min-w-0 rounded-lg bg-secondary p-3 text-secondary-foreground\">\n      <p className=\"text-xs font-semibold uppercase tracking-wide\">\n        {promotion.eyebrow ?? labels.promotionsTitle}\n      </p>\n      <span className=\"mt-2 block aspect-video overflow-hidden rounded-md bg-muted\">\n        {promotion.image ? (\n          <img src={promotion.image} alt={alt} loading=\"lazy\" decoding=\"async\" className=\"h-full w-full object-cover\" />\n        ) : (\n          <ImageFallback label={alt} />\n        )}\n      </span>\n      <p className=\"mt-2 text-sm font-semibold\">{promotion.title}</p>\n      {promotion.body ? <p className=\"mt-1 line-clamp-2 text-xs\">{promotion.body}</p> : null}\n      <Button\n        asChild\n        variant=\"link\"\n        size=\"sm\"\n        className=\"mt-2 h-auto min-h-8 shrink-0 justify-start px-0 text-sm font-semibold\"\n      >\n        <a href={promotion.href}>\n          {promotion.ctaLabel}\n          <ArrowIcon className=\"h-3.5 w-3.5 rtl:rotate-180\" />\n        </a>\n      </Button>\n    </div>\n  )\n}\n\nfunction HybridPanel({\n  active,\n  config,\n  labels,\n  promotions,\n  onNavigate,\n}: Omit<DesktopPanelProps, 'presentation'>) {\n  const promotion = config.showPromotions ? promotions[0] : undefined\n  if (!promotion) {\n    return <ColumnsPanel active={active} config={config} labels={labels} onNavigate={onNavigate} />\n  }\n\n  const groups = buildColumnGroups(active, config)\n  const visible = groups.slice(0, Math.max(1, config.maxColumns - 1))\n  const rest = groups.slice(visible.length)\n\n  return (\n    <div className=\"pb-4\">\n      <PanelHeader active={active} config={config} labels={labels} onNavigate={onNavigate} />\n      <div className=\"px-4 pt-3\">\n        <div className={cn('grid gap-x-4 gap-y-4', gridClass(visible.length + 1))}>\n          {visible.map((group, index) => (\n            <Column\n              key={group.node.id}\n              group={group}\n              config={config}\n              labels={labels}\n              onNavigate={onNavigate}\n              divide={index > 0}\n            />\n          ))}\n          <PromoCard promotion={promotion} labels={labels} />\n        </div>\n        {rest.length > 0 ? (\n          <div className=\"mt-3 border-t border-border pt-2\">\n            <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n              {formatLabel(labels.moreIn, { name: active.label })}\n            </p>\n            <ul className=\"mt-1 flex flex-wrap gap-x-4 gap-y-1\">\n              {rest.map((group) => (\n                <li key={group.node.id}>\n                  <CategoryLink node={group.node} onNavigate={onNavigate} className=\"text-sm\" />\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport function DesktopPanel(props: DesktopPanelProps) {\n  switch (props.presentation) {\n    case 'cascade':\n      return <CascadePanel {...props} />\n    case 'visual':\n      return <VisualPanel {...props} />\n    case 'hybrid':\n      return <HybridPanel {...props} />\n    case 'columns':\n    default:\n      return <ColumnsPanel {...props} />\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/mega-menu-universal/drilldown.d.ts

@@ -0,0 +1,21 @@
+import type { CategoryNode } from './contracts';
+export type DrillState = {
+    trail: string[];
+};
+export type DrillEvent = {
+    type: 'push';
+    id: string;
+} | {
+    type: 'pop';
+} | {
+    type: 'reset';
+} | {
+    type: 'jump';
+    index: number;
+};
+export declare const EMPTY_DRILL: DrillState;
+export declare function drillReducer(state: DrillState, event: DrillEvent): DrillState;
+/** Resolves a trail of ids to nodes, stopping at the first unknown id. */
+export declare function trailNodes(categories: readonly CategoryNode[], trail: readonly string[]): CategoryNode[];
+export declare function currentNode(categories: readonly CategoryNode[], trail: readonly string[]): CategoryNode | null;
+//# sourceMappingURL=drilldown.d.ts.map

package/dist/blocks/designs/mega-menu-universal/drilldown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drilldown.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/mega-menu-universal/drilldown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE/C,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAA;CAAE,CAAA;AAC5C,MAAM,MAAM,UAAU,GAClB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,KAAK,CAAA;CAAE,GACf;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnC,eAAO,MAAM,WAAW,EAAE,UAA0B,CAAA;AAEpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,GAAG,UAAU,CAe7E;AAED,0EAA0E;AAC1E,wBAAgB,UAAU,CAAC,UAAU,EAAE,SAAS,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,YAAY,EAAE,CAUxG;AAED,wBAAgB,WAAW,CACzB,UAAU,EAAE,SAAS,YAAY,EAAE,EACnC,KAAK,EAAE,SAAS,MAAM,EAAE,GACvB,YAAY,GAAG,IAAI,CAErB"}

package/dist/blocks/designs/mega-menu-universal/drilldown.js

@@ -0,0 +1,65 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var drilldown_exports = {};
+__export(drilldown_exports, {
+  EMPTY_DRILL: () => EMPTY_DRILL,
+  currentNode: () => currentNode,
+  drillReducer: () => drillReducer,
+  trailNodes: () => trailNodes
+});
+module.exports = __toCommonJS(drilldown_exports);
+const EMPTY_DRILL = { trail: [] };
+function drillReducer(state, event) {
+  switch (event.type) {
+    case "push": {
+      if (state.trail.at(-1) === event.id) return state;
+      return { trail: [...state.trail, event.id] };
+    }
+    case "pop":
+      return { trail: state.trail.slice(0, -1) };
+    case "reset":
+      return { trail: [] };
+    case "jump":
+      return { trail: state.trail.slice(0, Math.max(0, Math.floor(event.index) + 1)) };
+    default:
+      return state;
+  }
+}
+function trailNodes(categories, trail) {
+  const nodes = [];
+  let level = categories;
+  for (const id of trail) {
+    const node = level.find((candidate) => candidate.id === id);
+    if (!node) break;
+    nodes.push(node);
+    level = node.children ?? [];
+  }
+  return nodes;
+}
+function currentNode(categories, trail) {
+  return trailNodes(categories, trail).at(-1) ?? null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EMPTY_DRILL,
+  currentNode,
+  drillReducer,
+  trailNodes
+});
+//# sourceMappingURL=drilldown.js.map

package/dist/blocks/designs/mega-menu-universal/drilldown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/mega-menu-universal/drilldown.ts"],"sourcesContent":["import type { CategoryNode } from './contracts'\n\nexport type DrillState = { trail: string[] }\nexport type DrillEvent =\n  | { type: 'push'; id: string }\n  | { type: 'pop' }\n  | { type: 'reset' }\n  | { type: 'jump'; index: number }\n\nexport const EMPTY_DRILL: DrillState = { trail: [] }\n\nexport function drillReducer(state: DrillState, event: DrillEvent): DrillState {\n  switch (event.type) {\n    case 'push': {\n      if (state.trail.at(-1) === event.id) return state\n      return { trail: [...state.trail, event.id] }\n    }\n    case 'pop':\n      return { trail: state.trail.slice(0, -1) }\n    case 'reset':\n      return { trail: [] }\n    case 'jump':\n      return { trail: state.trail.slice(0, Math.max(0, Math.floor(event.index) + 1)) }\n    default:\n      return state\n  }\n}\n\n/** Resolves a trail of ids to nodes, stopping at the first unknown id. */\nexport function trailNodes(categories: readonly CategoryNode[], trail: readonly string[]): CategoryNode[] {\n  const nodes: CategoryNode[] = []\n  let level: readonly CategoryNode[] = categories\n  for (const id of trail) {\n    const node = level.find((candidate) => candidate.id === id)\n    if (!node) break\n    nodes.push(node)\n    level = node.children ?? []\n  }\n  return nodes\n}\n\nexport function currentNode(\n  categories: readonly CategoryNode[],\n  trail: readonly string[],\n): CategoryNode | null {\n  return trailNodes(categories, trail).at(-1) ?? null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASO,MAAM,cAA0B,EAAE,OAAO,CAAC,EAAE;AAE5C,SAAS,aAAa,OAAmB,OAA+B;AAC7E,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK,QAAQ;AACX,UAAI,MAAM,MAAM,GAAG,EAAE,MAAM,MAAM,GAAI,QAAO;AAC5C,aAAO,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,MAAM,EAAE,EAAE;AAAA,IAC7C;AAAA,IACA,KAAK;AACH,aAAO,EAAE,OAAO,MAAM,MAAM,MAAM,GAAG,EAAE,EAAE;AAAA,IAC3C,KAAK;AACH,aAAO,EAAE,OAAO,CAAC,EAAE;AAAA,IACrB,KAAK;AACH,aAAO,EAAE,OAAO,MAAM,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,KAAK,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AACE,aAAO;AAAA,EACX;AACF;AAGO,SAAS,WAAW,YAAqC,OAA0C;AACxG,QAAM,QAAwB,CAAC;AAC/B,MAAI,QAAiC;AACrC,aAAW,MAAM,OAAO;AACtB,UAAM,OAAO,MAAM,KAAK,CAAC,cAAc,UAAU,OAAO,EAAE;AAC1D,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,IAAI;AACf,YAAQ,KAAK,YAAY,CAAC;AAAA,EAC5B;AACA,SAAO;AACT;AAEO,SAAS,YACd,YACA,OACqB;AACrB,SAAO,WAAW,YAAY,KAAK,EAAE,GAAG,EAAE,KAAK;AACjD;","names":[]}

package/dist/blocks/designs/mega-menu-universal/drilldown.mjs

@@ -0,0 +1,38 @@
+const EMPTY_DRILL = { trail: [] };
+function drillReducer(state, event) {
+  switch (event.type) {
+    case "push": {
+      if (state.trail.at(-1) === event.id) return state;
+      return { trail: [...state.trail, event.id] };
+    }
+    case "pop":
+      return { trail: state.trail.slice(0, -1) };
+    case "reset":
+      return { trail: [] };
+    case "jump":
+      return { trail: state.trail.slice(0, Math.max(0, Math.floor(event.index) + 1)) };
+    default:
+      return state;
+  }
+}
+function trailNodes(categories, trail) {
+  const nodes = [];
+  let level = categories;
+  for (const id of trail) {
+    const node = level.find((candidate) => candidate.id === id);
+    if (!node) break;
+    nodes.push(node);
+    level = node.children ?? [];
+  }
+  return nodes;
+}
+function currentNode(categories, trail) {
+  return trailNodes(categories, trail).at(-1) ?? null;
+}
+export {
+  EMPTY_DRILL,
+  currentNode,
+  drillReducer,
+  trailNodes
+};
+//# sourceMappingURL=drilldown.mjs.map

package/dist/blocks/designs/mega-menu-universal/drilldown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/mega-menu-universal/drilldown.ts"],"sourcesContent":["import type { CategoryNode } from './contracts'\n\nexport type DrillState = { trail: string[] }\nexport type DrillEvent =\n  | { type: 'push'; id: string }\n  | { type: 'pop' }\n  | { type: 'reset' }\n  | { type: 'jump'; index: number }\n\nexport const EMPTY_DRILL: DrillState = { trail: [] }\n\nexport function drillReducer(state: DrillState, event: DrillEvent): DrillState {\n  switch (event.type) {\n    case 'push': {\n      if (state.trail.at(-1) === event.id) return state\n      return { trail: [...state.trail, event.id] }\n    }\n    case 'pop':\n      return { trail: state.trail.slice(0, -1) }\n    case 'reset':\n      return { trail: [] }\n    case 'jump':\n      return { trail: state.trail.slice(0, Math.max(0, Math.floor(event.index) + 1)) }\n    default:\n      return state\n  }\n}\n\n/** Resolves a trail of ids to nodes, stopping at the first unknown id. */\nexport function trailNodes(categories: readonly CategoryNode[], trail: readonly string[]): CategoryNode[] {\n  const nodes: CategoryNode[] = []\n  let level: readonly CategoryNode[] = categories\n  for (const id of trail) {\n    const node = level.find((candidate) => candidate.id === id)\n    if (!node) break\n    nodes.push(node)\n    level = node.children ?? []\n  }\n  return nodes\n}\n\nexport function currentNode(\n  categories: readonly CategoryNode[],\n  trail: readonly string[],\n): CategoryNode | null {\n  return trailNodes(categories, trail).at(-1) ?? null\n}\n"],"mappings":"AASO,MAAM,cAA0B,EAAE,OAAO,CAAC,EAAE;AAE5C,SAAS,aAAa,OAAmB,OAA+B;AAC7E,UAAQ,MAAM,MAAM;AAAA,IAClB,KAAK,QAAQ;AACX,UAAI,MAAM,MAAM,GAAG,EAAE,MAAM,MAAM,GAAI,QAAO;AAC5C,aAAO,EAAE,OAAO,CAAC,GAAG,MAAM,OAAO,MAAM,EAAE,EAAE;AAAA,IAC7C;AAAA,IACA,KAAK;AACH,aAAO,EAAE,OAAO,MAAM,MAAM,MAAM,GAAG,EAAE,EAAE;AAAA,IAC3C,KAAK;AACH,aAAO,EAAE,OAAO,CAAC,EAAE;AAAA,IACrB,KAAK;AACH,aAAO,EAAE,OAAO,MAAM,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,KAAK,MAAM,MAAM,KAAK,IAAI,CAAC,CAAC,EAAE;AAAA,IACjF;AACE,aAAO;AAAA,EACX;AACF;AAGO,SAAS,WAAW,YAAqC,OAA0C;AACxG,QAAM,QAAwB,CAAC;AAC/B,MAAI,QAAiC;AACrC,aAAW,MAAM,OAAO;AACtB,UAAM,OAAO,MAAM,KAAK,CAAC,cAAc,UAAU,OAAO,EAAE;AAC1D,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,IAAI;AACf,YAAQ,KAAK,YAAY,CAAC;AAAA,EAC5B;AACA,SAAO;AACT;AAEO,SAAS,YACd,YACA,OACqB;AACrB,SAAO,WAAW,YAAY,KAAK,EAAE,GAAG,EAAE,KAAK;AACjD;","names":[]}

package/dist/blocks/designs/mega-menu-universal/icons.d.ts

@@ -0,0 +1,11 @@
+type IconProps = {
+    className?: string;
+};
+export declare function ChevronIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function ArrowIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function BackIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function CloseIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function MenuIcon({ className }: IconProps): import("react").JSX.Element;
+export declare function ImageIcon({ className }: IconProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/blocks/designs/mega-menu-universal/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/mega-menu-universal/icons.tsx"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAavC,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAMnD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAOjD;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAOhD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAOjD;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAQhD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,SAAS,+BAQjD"}