@snksergio/design-system 0.56.0 → 0.57.0

package/dist-lib/index.mjs

@@ -1,9 +1,9 @@
-import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List$1 } from "./chunks/panel-C3puLY_V.mjs";
-import { t, A, u, B, v, C, w, x, y, D, z, E, G, H, I, J, K, M, N, d, O, Q, R, S, U, F, b, V, c, W, X, P, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, p, al, am, an, ao, ap } from "./chunks/panel-C3puLY_V.mjs";
+import { g as getContrastTextColor, a as FormField, e as Avatar, i as isFilterEntryActive, f as FilterPopover, T as ToolbarToolButton, h as ButtonGroup, j as ToolbarSimpleFilterDrawer, d as FloatingPanel, k as TableToolbar, l as ToolbarActions, m as ToolbarFilterButton, n as ToolbarSearch, o as ToolbarApplied, q as ToolbarTabs, r as columnTypeRegistry, L as ListItem, s as List$1 } from "./chunks/panel-C3puLY_V.mjs";
+import { t, A, u, B, v, C, w, x, y, D, z, E, G, H, I, J, K, M, N, O, Q, R, S, U, F, b, V, c, W, X, P, Y, Z, _, $, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, ak, p, al, am, an, ao, ap } from "./chunks/panel-C3puLY_V.mjs";
 import { C as Chip } from "./chunks/useTheme-caPM-I73.mjs";
-import { A as A2, B as B2, c as c2, a, b as b2, H as H2, d as d2, e, f, g, h, M as M2, S as S2, i, j, k, l, m, n, o, U as U2, p as p2, q, r, s, t as t2, v as v2, w as w2, x as x2, y as y2, z as z2, u as u2 } from "./chunks/useTheme-caPM-I73.mjs";
+import { A as A2, B as B2, c as c2, a, b as b2, H as H2, d, e, f, g, h, M as M2, S as S2, i, j, k, l, m, n, o, U as U2, p as p2, q, r, s, t as t2, v as v2, w as w2, x as x2, y as y2, z as z2, u as u2 } from "./chunks/useTheme-caPM-I73.mjs";
 import { af as tv, c as cn, a0 as Popover, a4 as PopoverTrigger, a3 as PopoverContent, ae as Button, D as Dialog, G as DialogTrigger, v as DialogContent, F as DialogTitle, a1 as PopoverAnchor, u as DialogClose, w as DialogDescription, H as DropdownMenu, V as DropdownMenuTrigger, J as DropdownMenuContent, O as DropdownMenuRadioGroup, P as DropdownMenuRadioItem, M as DropdownMenuLabel, Q as DropdownMenuSeparator, L as DropdownMenuItem } from "./chunks/avatar-CZRLkTxt.mjs";
-import { d as d3, e as e2, f as f2, g as g2, h as h2, i as i2, W as W2, X as X2, Y as Y2, Z as Z2, _ as _2, $ as $2, I as I2, ag as ag2, ad as ad2 } from "./chunks/avatar-CZRLkTxt.mjs";
+import { d as d2, e as e2, f as f2, g as g2, h as h2, i as i2, W as W2, X as X2, Y as Y2, Z as Z2, _ as _2, $ as $2, I as I2, ag as ag2, ad as ad2 } from "./chunks/avatar-CZRLkTxt.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, forwardRef, useContext, useId, useState, Fragment as Fragment$1, isValidElement, useCallback, useMemo, createElement, useRef, useEffect, useLayoutEffect, useImperativeHandle, Children } from "react";
@@ -3863,7 +3863,7 @@ const Icon = forwardRef(
         ...props,
         children: [
           title2 ? /* @__PURE__ */ jsx("title", { children: title2 }) : null,
-          paths.map((d4, i4) => /* @__PURE__ */ jsx("path", { d: d4 }, i4))
+          paths.map((d3, i4) => /* @__PURE__ */ jsx("path", { d: d3 }, i4))
         ]
       }
     );
@@ -5264,11 +5264,25 @@ const schedulerRoot = tv({
 });
 const schedulerToolbar = tv({
   base: [
-    "flex flex-wrap items-center justify-between gap-gp-xl"
+    "flex flex-col gap-gp-xl",
+    "lg:flex-row lg:flex-wrap lg:items-center lg:justify-between"
   ]
 });
 const schedulerToolbarSide = tv({
-  base: "flex min-w-0 flex-wrap items-center gap-gp-md"
+  base: "flex min-w-0 items-center gap-gp-md",
+  variants: {
+    /**
+     * `leading` = título + navegação. Empilhado, ocupa a linha inteira e
+     * separa os dois extremos — é o que joga `‹ Hoje ›` pro fim.
+     * `trailing` = busca + controles. A busca é quem estica (`flex-1` nela),
+     * então aqui basta ocupar a linha.
+     */
+    slot: {
+      leading: "w-full justify-between lg:w-auto lg:flex-wrap lg:justify-start",
+      trailing: "w-full lg:w-auto lg:flex-wrap"
+    }
+  },
+  defaultVariants: { slot: "trailing" }
 });
 const schedulerTitle = tv({
   base: [
@@ -5308,15 +5322,15 @@ const schedulerSearch = tv({
     "border border-border-subtle dark:border-border-input",
     "shadow-sh-sm dark:shadow-sh-none",
     "text-fg-default",
-    "min-w-0 flex-1 md:flex-initial",
-    "md:w-[200px] md:focus-within:w-[300px]",
+    "min-w-0 flex-1 lg:flex-initial",
+    "lg:w-[200px] lg:focus-within:w-[300px]",
     "transition-[width,border-color,background-color,box-shadow] duration-200",
     "focus-within:border-border-brand focus-within:shadow-sh-ring",
     "[&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-fg-muted"
   ],
   variants: {
     /** Mantém expandido mesmo sem foco quando já há termo digitado. */
-    expanded: { true: "md:w-[300px]", false: "" }
+    expanded: { true: "lg:w-[300px]", false: "" }
   },
   defaultVariants: { expanded: false }
 });
@@ -5379,13 +5393,32 @@ const schedulerMain = tv({
 });
 const schedulerFilterAside = tv({
   base: [
-    "flex w-[280px] min-h-0 shrink-0 flex-col overflow-y-auto",
+    "flex min-h-0 flex-col overflow-y-auto",
     // `scrollbar-thin` é a barra do DS (26 usos no repo contra 2 do
     // `scrollbar-default`) — trilho transparente + thumb tokenizado.
     // ⚠️ É `@utility` do tema GERADO, não do globals.css: existe nos 4 canais.
-    "scrollbar-thin",
-    "rounded-radius-xl border border-border-default bg-bg-surface"
-  ]
+    "scrollbar-thin"
+  ],
+  variants: {
+    /**
+     * `embedded` = o painel vive DENTRO de outro contêiner que já é a
+     * superfície — hoje o `FloatingPanel` do modo drawer (<1024px).
+     *
+     * Como coluna (`false`, o default) ele É o card: largura própria, borda,
+     * radius e fundo. Embutido, os quatro viram defeito — largura fixa deixa
+     * uma faixa morta à direita do drawer, e borda+radius+fundo repetem a
+     * superfície do painel que já o embrulha (card dentro de card, a mesma
+     * classe de erro da L-050).
+     */
+    embedded: {
+      false: [
+        "w-[280px] shrink-0",
+        "rounded-radius-xl border border-border-default bg-bg-surface"
+      ],
+      true: "w-full"
+    }
+  },
+  defaultVariants: { embedded: false }
 });
 const schedulerAsideSection = tv({
   base: [
@@ -5855,7 +5888,6 @@ function SchedulerToolbar({
   appliedCount,
   filterPanelOpen,
   onToggleFilterPanel,
-  filterPanelAvailable,
   toolbarActions,
   primaryAction
 }) {
@@ -5867,7 +5899,7 @@ function SchedulerToolbar({
   );
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-gp-xl", children: [
     /* @__PURE__ */ jsxs("div", { className: schedulerToolbar(), children: [
-      /* @__PURE__ */ jsxs("div", { className: schedulerToolbarSide(), children: [
+      /* @__PURE__ */ jsxs("div", { className: schedulerToolbarSide({ slot: "leading" }), children: [
         /* @__PURE__ */ jsx("span", { className: schedulerTitle(), children: title2 }),
         /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": "Navegação de período", className: schedulerNavGroup(), children: [
           /* @__PURE__ */ jsx(
@@ -5895,7 +5927,7 @@ function SchedulerToolbar({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: schedulerToolbarSide(), children: [
+      /* @__PURE__ */ jsxs("div", { className: schedulerToolbarSide({ slot: "trailing" }), children: [
         searchable ? /* @__PURE__ */ jsxs("label", { className: schedulerSearch({ expanded: search !== "" }), children: [
           /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx(
@@ -5919,10 +5951,10 @@ function SchedulerToolbar({
               color: "secondary",
               size: "sm",
               iconLeft: activeView.icon,
-              iconRight: /* @__PURE__ */ jsx(ChevronDown, {}),
+              iconRight: /* @__PURE__ */ jsx(ChevronDown, { className: "hidden lg:block" }),
               "aria-label": `Visualização: ${activeView.label}`,
-              className: "shrink-0",
-              children: activeView.label
+              className: "shrink-0 max-lg:size-form-xl max-lg:p-0",
+              children: /* @__PURE__ */ jsx("span", { className: "hidden lg:inline", children: activeView.label })
             }
           ) }),
           /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[168px]", children: /* @__PURE__ */ jsx(
@@ -5946,13 +5978,13 @@ function SchedulerToolbar({
                 size: "sm",
                 iconLeft: /* @__PURE__ */ jsx(ListFilter, {}),
                 onClick: onToggleFilterPanel,
-                disabled: !filterPanelAvailable,
                 "aria-expanded": filterPanelOpen,
                 className: cn(
+                  "max-lg:size-form-xl max-lg:p-0",
                   filterEngaged && "border-border-brand hover:border-border-brand"
                 ),
-                title: filterPanelAvailable ? void 0 : "O painel de filtros precisa de uma tela mais larga (1024px+)",
-                children: "Filtro"
+                "aria-label": "Filtro",
+                children: /* @__PURE__ */ jsx("span", { className: "hidden lg:inline", children: "Filtro" })
               }
             ),
             appliedCount > 0 ? /* @__PURE__ */ jsx("span", { className: schedulerFilterDot(), "aria-hidden": "true" }) : null
@@ -6250,6 +6282,7 @@ function SchedulerFilterPanel({
   onClearAll,
   appliedCount,
   onClose,
+  embedded = false,
   counts,
   date,
   now,
@@ -6265,8 +6298,8 @@ function SchedulerFilterPanel({
     else next.add(id);
     return next;
   });
-  return /* @__PURE__ */ jsxs("aside", { className: schedulerFilterAside(), "aria-label": "Filtros do calendário", children: [
-    /* @__PURE__ */ jsx("div", { className: schedulerAsideSection({ compact: true, sticky: true }), children: /* @__PURE__ */ jsxs("div", { className: schedulerAsideHead(), children: [
+  return /* @__PURE__ */ jsxs("aside", { className: schedulerFilterAside({ embedded }), "aria-label": "Filtros do calendário", children: [
+    embedded ? null : /* @__PURE__ */ jsx("div", { className: schedulerAsideSection({ compact: true, sticky: true }), children: /* @__PURE__ */ jsxs("div", { className: schedulerAsideHead(), children: [
       /* @__PURE__ */ jsx("span", { className: schedulerAsideTitle(), children: "Filtros" }),
       /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-gp-sm", children: [
         appliedCount > 0 ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onClearAll, className: schedulerClearLink(), children: "Limpar" }) : null,
@@ -6860,7 +6893,7 @@ function SchedulerMonthView({
     /* @__PURE__ */ jsx("div", { ref: gridRef, role: "grid", className: schedulerMonthGrid(), children: weeks.map(
       (week, weekIndex) => week.map((day) => {
         const dayEvents = byDay.get(day.getTime()) ?? [];
-        const todos = dayEvents.map((d4) => d4.event);
+        const todos = dayEvents.map((d3) => d3.event);
         const { visible, overflowCount } = maxPerCell !== void 0 ? {
           visible: todos.slice(
             0,
@@ -6908,7 +6941,7 @@ function SchedulerMonthView({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: schedulerCellEvents(), children: [
                 visible.map((event) => {
-                  const meta = dayEvents.find((d4) => d4.event.id === event.id);
+                  const meta = dayEvents.find((d3) => d3.event.id === event.id);
                   return /* @__PURE__ */ jsx(
                     DraggableEvent,
                     {
@@ -6937,16 +6970,16 @@ function SchedulerMonthView({
                   ] }) }),
                   /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: schedulerOverflowPanel(), children: [
                     /* @__PURE__ */ jsx("span", { className: schedulerOverflowPanelTitle(), children: format(day, "EEEE, d 'de' MMMM", { locale }) }),
-                    dayEvents.map((d4) => /* @__PURE__ */ jsx(
+                    dayEvents.map((d3) => /* @__PURE__ */ jsx(
                       SchedulerEventItem,
                       {
-                        event: d4.event,
+                        event: d3.event,
                         view: "month",
                         variant: "row",
-                        timeLabel: timeLabelOf(d4.event),
-                        onClick: (evt) => onEventClick?.(d4.event, evt)
+                        timeLabel: timeLabelOf(d3.event),
+                        onClick: (evt) => onEventClick?.(d3.event, evt)
                       },
-                      `overflow-${d4.event.id}`
+                      `overflow-${d3.event.id}`
                     ))
                   ] }) })
                 ] }) : null
@@ -7013,10 +7046,10 @@ function SchedulerTimeGrid({
     el.scrollTop = Math.max(0, target);
   }, [scrollToHour, rangeStart]);
   const fmtHour = (hour) => {
-    const d4 = new Date(2e3, 0, 1, hour % 24, 0);
-    return format(d4, hourFormat === "12h" ? "h a" : "HH:mm", { locale });
+    const d3 = new Date(2e3, 0, 1, hour % 24, 0);
+    return format(d3, hourFormat === "12h" ? "h a" : "HH:mm", { locale });
   };
-  const fmtTime = (d4) => format(d4, hourFormat === "12h" ? "h:mm a" : "HH:mm", { locale });
+  const fmtTime = (d3) => format(d3, hourFormat === "12h" ? "h:mm a" : "HH:mm", { locale });
   const allDayByDay = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const day of days) map.set(day.getTime(), []);
@@ -7080,14 +7113,14 @@ function SchedulerTimeGrid({
   }, [events, days, dayRange, rangeStart, rangeEnd, snapMinutes, hourFormat, locale]);
   const nowOffset = useMemo(() => {
     if (!nowIndicator) return null;
-    const visivel = days.some((d4) => isSameDay(d4, now));
+    const visivel = days.some((d3) => isSameDay(d3, now));
     if (!visivel) return null;
     const offset = minutesToOffset(now, dayRange, HOUR_HEIGHT_PX);
     const total = hours.length * HOUR_HEIGHT_PX;
     if (offset < 0 || offset > total) return null;
     return offset;
   }, [nowIndicator, days, now, dayRange, hours.length]);
-  const isWeekend = (d4) => d4.getDay() === 0 || d4.getDay() === 6;
+  const isWeekend = (d3) => d3.getDay() === 0 || d3.getDay() === 6;
   return /* @__PURE__ */ jsxs("div", { className: schedulerTimeFrame(), children: [
     /* @__PURE__ */ jsxs("div", { className: schedulerTimeHead(), children: [
       /* @__PURE__ */ jsx("div", { className: schedulerTimeGutter() }),
@@ -7240,7 +7273,7 @@ function SchedulerListView({
       })
     }));
   }, [events, date]);
-  const fmtTime = (d4) => format(d4, hourFormat === "12h" ? "h:mm a" : "HH:mm", { locale });
+  const fmtTime = (d3) => format(d3, hourFormat === "12h" ? "h:mm a" : "HH:mm", { locale });
   const rotuloHorario = (ev) => {
     if (ev.allDay) return "Dia inteiro";
     if (ev.start.getTime() === ev.end.getTime()) return fmtTime(ev.start);
@@ -7596,9 +7629,11 @@ const Scheduler = forwardRef(
       return;
     }, [draggable, resizable, onEventMove, onEventResize]);
     const eventoArrastado = dnd.dragAtivo?.kind === "move" ? filter.filteredEvents.find((e3) => e3.id === dnd.dragAtivo?.eventId) ?? null : null;
-    const filterPanelAvailable = useMediaQuery("(min-width: 1024px)");
+    const wideLayout = useMediaQuery("(min-width: 1024px)");
     const [filterPanelOpen, setFilterPanelOpen] = useState(defaultFilterPanelOpen);
-    const showFilterPanel = filterPanelOpen && filterPanelAvailable && (filterFields?.length ?? 0) > 0;
+    const hasFilterFields = (filterFields?.length ?? 0) > 0;
+    const showFilterPanel = filterPanelOpen && wideLayout && hasFilterFields;
+    const showFilterDrawer = filterPanelOpen && !wideLayout && hasFilterFields;
     useImperativeHandle(
       ref,
       () => ({
@@ -7665,9 +7700,8 @@ const Scheduler = forwardRef(
                     onClearField: filter.clearField,
                     onClearAll: filter.clearAll,
                     appliedCount: filter.appliedCount,
-                    filterPanelOpen: showFilterPanel,
+                    filterPanelOpen: showFilterPanel || showFilterDrawer,
                     onToggleFilterPanel: () => setFilterPanelOpen((o2) => !o2),
-                    filterPanelAvailable,
                     toolbarActions,
                     primaryAction
                   }
@@ -7744,6 +7778,52 @@ const Scheduler = forwardRef(
                     }
                   ) : null
                 ] }),
+                showFilterDrawer && filterFields ? /* @__PURE__ */ jsx(
+                  FloatingPanel,
+                  {
+                    open: true,
+                    onOpenChange: (aberto) => setFilterPanelOpen(aberto),
+                    side: "right",
+                    size: "sm",
+                    bodyPadded: false,
+                    title: "Filtros",
+                    titleIcon: ListFilter,
+                    description: filter.appliedCount === 1 ? "1 filtro ativo" : `${filter.appliedCount} filtros ativos`,
+                    footer: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        color: "secondary",
+                        size: "sm",
+                        onClick: filter.clearAll,
+                        disabled: filter.appliedCount === 0,
+                        children: "Limpar tudo"
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      SchedulerFilterPanel,
+                      {
+                        embedded: true,
+                        filterFields,
+                        filterModel: filter.filterModel,
+                        onToggleValue: filter.toggleValue,
+                        onClearAll: filter.clearAll,
+                        appliedCount: filter.appliedCount,
+                        onClose: () => setFilterPanelOpen(false),
+                        counts: filter.optionCounts,
+                        date: state.date,
+                        now,
+                        locale,
+                        weekStartsOn,
+                        events: filter.filteredEvents,
+                        onDateSelect: (d3) => {
+                          state.goToDate(d3);
+                          setFilterPanelOpen(false);
+                        }
+                      }
+                    )
+                  }
+                ) : null,
                 /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: eventoArrastado ? /* @__PURE__ */ jsx(
                   SchedulerEventItem,
                   {
@@ -8680,9 +8760,9 @@ function cartesianAddInPlace(a11, b4) {
 function cartesianScale(vector, k2) {
   return [vector[0] * k2, vector[1] * k2, vector[2] * k2];
 }
-function cartesianNormalizeInPlace(d4) {
-  var l2 = sqrt(d4[0] * d4[0] + d4[1] * d4[1] + d4[2] * d4[2]);
-  d4[0] /= l2, d4[1] /= l2, d4[2] /= l2;
+function cartesianNormalizeInPlace(d3) {
+  var l2 = sqrt(d3[0] * d3[0] + d3[1] * d3[1] + d3[2] * d3[2]);
+  d3[0] /= l2, d3[1] /= l2, d3[2] /= l2;
 }
 function compose(a11, b4) {
   function compose2(x3, y3) {
@@ -9581,12 +9661,12 @@ function append(strings) {
   }
 }
 function appendRound(digits) {
-  const d4 = Math.floor(digits);
-  if (!(d4 >= 0)) throw new RangeError(`invalid digits: ${digits}`);
-  if (d4 > 15) return append;
-  if (d4 !== cacheDigits) {
-    const k2 = 10 ** d4;
-    cacheDigits = d4;
+  const d3 = Math.floor(digits);
+  if (!(d3 >= 0)) throw new RangeError(`invalid digits: ${digits}`);
+  if (d3 > 15) return append;
+  if (d3 !== cacheDigits) {
+    const k2 = 10 ** d3;
+    cacheDigits = d3;
     cacheAppend = function append2(strings) {
       let i4 = 1;
       this._ += strings[0];
@@ -9642,9 +9722,9 @@ function geoPath(projection2, context) {
     if (!arguments.length) return digits;
     if (_3 == null) digits = null;
     else {
-      const d4 = Math.floor(_3);
-      if (!(d4 >= 0)) throw new RangeError(`invalid digits: ${_3}`);
-      digits = d4;
+      const d3 = Math.floor(_3);
+      if (!(d3 >= 0)) throw new RangeError(`invalid digits: ${_3}`);
+      digits = d3;
     }
     if (context === null) contextStream = new PathString(digits);
     return path;
@@ -10181,18 +10261,18 @@ const ChoroplethMap = forwardRef(
               });
             },
             children: [
-              geometry.map(({ feature: feature2, d: d4 }, index) => {
+              geometry.map(({ feature: feature2, d: d3 }, index) => {
                 const id = getId(feature2);
                 const value = values[id];
                 return /* @__PURE__ */ jsx(
                   "path",
                   {
-                    d: d4,
+                    d: d3,
                     fill: fillFor(value),
                     strokeWidth,
                     className: styles2.path(),
                     style: onFeatureClick ? { cursor: "pointer" } : void 0,
-                    onMouseEnter: () => setHover({ id, name: getName(feature2), value, feature: feature2, d: d4 }),
+                    onMouseEnter: () => setHover({ id, name: getName(feature2), value, feature: feature2, d: d3 }),
                     onClick: onFeatureClick ? () => onFeatureClick({
                       id,
                       name: getName(feature2),
@@ -11423,7 +11503,7 @@ export {
   BRANDS,
   B3 as Badge,
   B2 as Breadcrumb,
-  d3 as BreadcrumbEllipsis,
+  d2 as BreadcrumbEllipsis,
   e2 as BreadcrumbItem,
   f2 as BreadcrumbLink,
   g2 as BreadcrumbList,
@@ -11471,7 +11551,7 @@ export {
   FileUploadField,
   N as FilterPanel,
   FilterPopover,
-  d as FloatingPanel,
+  FloatingPanel,
   O as FloatingPanelField,
   Q as FloatingPanelSection,
   R as FooterTable,
@@ -11483,7 +11563,7 @@ export {
   V as FormFieldSwitch,
   c as FormFieldTextarea,
   H2 as Header,
-  d2 as HeaderBreadcrumb,
+  d as HeaderBreadcrumb,
   e as HeaderMessages,
   f as HeaderNotifications,
   g as HeaderSearch,