@borisj74/bv-ds 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var React28 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var bvDsIcons = require('@borisj74/bv-ds-icons');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -6117,6 +6118,97 @@ function ButtonUtility({
     ) : null
   ] });
 }
+var dotClasses = {
+  neutral: "bg-utility-neutral-500",
+  brand: "bg-utility-brand-500",
+  emerald: "bg-utility-emerald-500",
+  blue: "bg-utility-blue-500",
+  indigo: "bg-utility-indigo-500",
+  purple: "bg-utility-purple-500",
+  pink: "bg-utility-pink-500",
+  orange: "bg-utility-orange-500",
+  amber: "bg-utility-amber-500"
+};
+var filledClasses = {
+  neutral: "bg-utility-neutral-50 border-utility-neutral-200 text-utility-neutral-700",
+  brand: "bg-utility-brand-50 border-utility-brand-200 text-utility-brand-700",
+  emerald: "bg-utility-emerald-50 border-utility-emerald-200 text-utility-emerald-700",
+  blue: "bg-utility-blue-50 border-utility-blue-200 text-utility-blue-700",
+  indigo: "bg-utility-indigo-50 border-utility-indigo-200 text-utility-indigo-700",
+  purple: "bg-utility-purple-50 border-utility-purple-200 text-utility-purple-700",
+  pink: "bg-utility-pink-50 border-utility-pink-200 text-utility-pink-700",
+  orange: "bg-utility-orange-50 border-utility-orange-200 text-utility-orange-700",
+  amber: "bg-utility-amber-50 border-utility-amber-200 text-utility-amber-700"
+};
+var filledHoverClasses = {
+  neutral: "bg-utility-neutral-100",
+  brand: "bg-utility-brand-100",
+  emerald: "bg-utility-emerald-100",
+  blue: "bg-utility-blue-100",
+  indigo: "bg-utility-indigo-100",
+  purple: "bg-utility-purple-100",
+  pink: "bg-utility-pink-100",
+  orange: "bg-utility-orange-100",
+  amber: "bg-utility-amber-100"
+};
+var timeClasses = {
+  neutral: "text-utility-neutral-600",
+  brand: "text-utility-brand-600",
+  emerald: "text-utility-emerald-600",
+  blue: "text-utility-blue-600",
+  indigo: "text-utility-indigo-600",
+  purple: "text-utility-purple-600",
+  pink: "text-utility-pink-600",
+  orange: "text-utility-orange-600",
+  amber: "text-utility-amber-600"
+};
+function CalendarEvent({
+  title,
+  time: time2,
+  color: color2 = "neutral",
+  filled = false,
+  breakpoint = "desktop",
+  state = "default",
+  className
+}) {
+  if (breakpoint === "mobile") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: clsx_default("inline-block size-2 rounded-full", dotClasses[color2], className),
+        role: "img",
+        "aria-label": time2 ? `${title}, ${time2}` : title
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: clsx_default(
+        "flex w-full items-center gap-md rounded-sm border px-md py-xs font-body text-xs",
+        filled ? clsx_default(filledClasses[color2], state === "hover" && filledHoverClasses[color2]) : clsx_default(
+          "border-border-secondary bg-bg-primary text-text-secondary",
+          state === "hover" && "bg-bg-primary-hover"
+        ),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("size-2 shrink-0 rounded-full", dotClasses[color2]), "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-semibold", children: title }),
+        time2 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx_default(
+              "ml-auto shrink-0 font-normal",
+              filled ? timeClasses[color2] : "text-text-tertiary"
+            ),
+            children: time2
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function PlusIcon2() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -6131,19 +6223,26 @@ function PlusIcon2() {
 }
 function CalendarCell({
   date: date2,
+  events,
   children,
   moreCount,
-  muted = false,
+  isToday,
+  isSelected = false,
+  isDisabled,
   current = false,
+  muted = false,
+  breakpoint = "desktop",
   onAdd,
   className
 }) {
+  const today = isToday ?? current;
+  const disabled = isDisabled ?? muted;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: clsx_default(
         "group relative flex min-h-[120px] flex-col gap-xs bg-bg-primary p-md font-body",
-        muted && "bg-bg-secondary",
+        disabled && "bg-bg-secondary",
         className
       ),
       children: [
@@ -6151,12 +6250,31 @@ function CalendarCell({
           "span",
           {
             className: clsx_default(
-              "text-xs font-semibold",
-              current ? "text-text-brand-secondary" : muted ? "text-text-quaternary" : "text-text-secondary"
+              "flex size-6 items-center justify-center text-xs font-semibold",
+              today ? "rounded-full bg-bg-brand-solid text-white" : isSelected ? "rounded-full bg-bg-secondary text-text-secondary" : disabled ? "text-text-quaternary" : "text-text-secondary"
             ),
             children: date2
           }
         ),
+        events && events.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: clsx_default(
+              breakpoint === "mobile" ? "flex flex-row flex-wrap gap-xxs" : "flex flex-col gap-xs"
+            ),
+            children: events.map((ev, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              CalendarEvent,
+              {
+                title: ev.title,
+                time: ev.time,
+                color: ev.color,
+                filled: true,
+                breakpoint
+              },
+              i
+            ))
+          }
+        ) : null,
         children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-xs", children }) : null,
         moreCount && moreCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-text-tertiary", children: [
           moreCount,
@@ -6176,6 +6294,13 @@ function CalendarCell({
     }
   );
 }
+var heightClasses = {
+  empty: "h-[48px]",
+  "30min": "h-[48px]",
+  "60min": "h-[96px]",
+  "90min": "h-[144px]",
+  "120min": "h-[192px]"
+};
 function PlusIcon3() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -6189,6 +6314,8 @@ function PlusIcon3() {
   ) });
 }
 function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -6198,8 +6325,9 @@ function CalendarCellDayWeekView({
     "div",
     {
       className: clsx_default(
-        "group relative min-h-[64px] border-b border-border-secondary p-xs font-body",
-        muted ? "bg-bg-secondary" : "bg-bg-primary",
+        "group relative border-b border-border-secondary p-xs font-body transition-colors hover:bg-bg-secondary",
+        type ? heightClasses[type] : "min-h-[64px]",
+        muted ? "bg-bg-secondary" : state === "hover" ? "bg-bg-secondary" : "bg-bg-primary",
         className
       ),
       children: [
@@ -6221,16 +6349,20 @@ function CalendarCellDayWeekView({
 function CalendarColumnHeader({
   weekday,
   date: date2,
+  type,
   current = false,
   orientation = "vertical",
+  breakpoint = "desktop",
   className
 }) {
+  const state = type ?? (current ? "selected" : "default");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: clsx_default(
         "flex items-center justify-center gap-md py-md font-body",
         orientation === "vertical" && "flex-col gap-xs",
+        breakpoint === "desktop" && "w-[160px]",
         className
       ),
       children: [
@@ -6240,9 +6372,11 @@ function CalendarColumnHeader({
           {
             className: clsx_default(
               "flex items-center justify-center text-xs font-semibold",
-              current ? "size-6 rounded-full bg-bg-brand-solid text-white" : "text-text-secondary"
+              state === "selected" && "size-6 rounded-full bg-bg-brand-solid text-white",
+              state === "today" && "border-b-2 border-border-brand pb-xxs text-text-brand-secondary",
+              state === "default" && "text-text-secondary"
             ),
-            "aria-current": current ? "date" : void 0,
+            "aria-current": state !== "default" ? "date" : void 0,
             children: date2
           }
         )
@@ -6265,51 +6399,6 @@ function CalendarDateIcon({ month, day, className }) {
     }
   );
 }
-var dotClasses = {
-  neutral: "bg-utility-neutral-500",
-  brand: "bg-utility-brand-500",
-  emerald: "bg-utility-emerald-500",
-  blue: "bg-utility-blue-500",
-  indigo: "bg-utility-indigo-500",
-  purple: "bg-utility-purple-500",
-  pink: "bg-utility-pink-500",
-  orange: "bg-utility-orange-500",
-  amber: "bg-utility-amber-500"
-};
-var filledClasses = {
-  neutral: "bg-utility-neutral-100 text-utility-neutral-700",
-  brand: "bg-utility-brand-100 text-utility-brand-700",
-  emerald: "bg-utility-emerald-100 text-utility-emerald-700",
-  blue: "bg-utility-blue-100 text-utility-blue-700",
-  indigo: "bg-utility-indigo-100 text-utility-indigo-700",
-  purple: "bg-utility-purple-100 text-utility-purple-700",
-  pink: "bg-utility-pink-100 text-utility-pink-700",
-  orange: "bg-utility-orange-100 text-utility-orange-700",
-  amber: "bg-utility-amber-100 text-utility-amber-700"
-};
-function CalendarEvent({
-  title,
-  time: time2,
-  color: color2 = "neutral",
-  filled = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: clsx_default(
-        "flex w-full items-center gap-md rounded-sm px-md py-xs font-body text-xs",
-        filled ? filledClasses[color2] : "border border-border-secondary bg-bg-primary text-text-secondary",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("size-2 shrink-0 rounded-full", dotClasses[color2]), "aria-hidden": true }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-semibold", children: title }),
-        time2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("ml-auto shrink-0 font-normal", !filled && "text-text-tertiary"), children: time2 }) : null
-      ]
-    }
-  );
-}
 var accentClasses = {
   neutral: "border-l-utility-neutral-500",
   brand: "border-l-utility-brand-500",
@@ -6376,11 +6465,13 @@ function CalendarEventDayWeekView({
 function CalendarHeader({
   title,
   range: range6,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className
 }) {
+  const subtitle = range6 ?? supportingText;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -6396,7 +6487,7 @@ function CalendarHeader({
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-bold text-text-primary", children: title }),
               badge
             ] }),
-            range6 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-tertiary", children: range6 }) : null
+            subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-text-tertiary", children: subtitle }) : null
           ] })
         ] }),
         actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-md", children: actions }) : null
@@ -6404,7 +6495,7 @@ function CalendarHeader({
     }
   );
 }
-function CalendarRowLabel({ label, className }) {
+function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -6412,7 +6503,7 @@ function CalendarRowLabel({ label, className }) {
         "pr-md text-right text-xs font-medium text-text-quaternary font-body",
         className
       ),
-      children: label
+      children: time2 ?? label
     }
   );
 }
@@ -6422,15 +6513,17 @@ var Label = ({ time: time2 }) => /* @__PURE__ */ jsxRuntime.jsx("span", { classN
 function CalendarTimemarker({
   time: time2,
   align = "left",
+  breakpoint = "desktop",
   className
 }) {
+  const showLabel = breakpoint === "desktop";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx_default("flex w-full items-center gap-xs font-body", className), children: align === "center" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Dot, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Line, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { time: time2 }),
+    showLabel ? /* @__PURE__ */ jsxRuntime.jsx(Label, { time: time2 }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Line, {})
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { time: time2 }),
+    showLabel ? /* @__PURE__ */ jsxRuntime.jsx(Label, { time: time2 }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Dot, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Line, {})
   ] }) });
@@ -6455,10 +6548,19 @@ function Chevron2() {
 function CalendarViewDropdown({
   value,
   onChange,
+  onSelect,
+  open: openProp,
+  onOpenChange,
   options = DEFAULT_OPTIONS,
   className
 }) {
-  const [open, setOpen] = React28.useState(false);
+  const [internalOpen, setInternalOpen] = React28.useState(false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
   const selected = options.find((o) => o.value === value) ?? options[0];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("relative inline-block font-body", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6467,7 +6569,7 @@ function CalendarViewDropdown({
         type: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": open,
-        onClick: () => setOpen((v) => !v),
+        onClick: () => setOpen(!open),
         className: "inline-flex items-center gap-md rounded-md border border-border-primary bg-bg-primary px-lg py-md text-sm font-semibold text-text-secondary shadow-skeuomorphic transition-colors hover:bg-bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
         children: [
           selected.label,
@@ -6488,6 +6590,7 @@ function CalendarViewDropdown({
               type: "button",
               onClick: () => {
                 onChange?.(opt.value);
+                onSelect?.(opt.value);
                 setOpen(false);
               },
               className: "flex w-full items-center gap-md rounded-sm px-md py-xs text-sm font-medium text-text-secondary transition-colors hover:bg-bg-primary-hover",
@@ -31854,17 +31957,7 @@ function MultiSelect({
     hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("text-sm", invalid ? "text-text-error-primary" : "text-text-tertiary"), children: hint })
   ] });
 }
-var ChevronSelector = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 6l3-3 3 3M5 10l3 3 3-3", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var LogOut = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-  "path",
-  {
-    d: "M10.67 11.33 14 8m0 0-3.33-3.33M14 8H6M6 2H4.67c-.93 0-1.4 0-1.76.18-.31.16-.57.42-.73.73C2 3.27 2 3.73 2 4.67v6.66c0 .94 0 1.4.18 1.76.16.31.42.57.73.73.36.18.83.18 1.76.18H6",
-    stroke: "currentColor",
-    strokeWidth: "1.33",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
+var IconBox16 = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children });
 var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
   online !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -31920,7 +32013,7 @@ function NavAccountCard({
               onClick: onSignOut,
               "aria-label": "Sign out",
               className: "absolute right-0 top-[15px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary transition-colors hover:text-fg-quaternary-hover",
-              children: /* @__PURE__ */ jsxRuntime.jsx(LogOut, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.LogOut01, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -31943,7 +32036,7 @@ function NavAccountCard({
                 "absolute right-[7px] top-[7px] flex items-center justify-center rounded-sm p-sm text-fg-quaternary",
                 open && "bg-bg-primary-hover"
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronSelector, {})
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconBox16, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronSelectorVertical, { className: "w-full h-full" }) })
             }
           )
         ]
@@ -32084,7 +32177,6 @@ function NavFeaturedCard({
     }
   );
 }
-var ChevronDown2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemBase({
   current = false,
   icon,
@@ -32119,14 +32211,13 @@ function NavItemBase({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
             ] }),
             badge != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 rounded-full border border-utility-neutral-200 bg-utility-neutral-50 px-md py-xxs text-xs font-medium text-utility-neutral-700", children: badge }),
-            trailingChevron && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown2, {}) })
+            trailingChevron && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.ChevronDown, { className: "w-full h-full" }) }) })
           ]
         }
       )
     }
   );
 }
-var Chevron5 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: up ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function NavItemDropdownBase({
   current = false,
   open = false,
@@ -32158,7 +32249,12 @@ function NavItemDropdownBase({
                 icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center text-fg-quaternary [&>svg]:size-5", children: icon }),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-semibold text-text-secondary", children: label })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron5, { up: open }) })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-fg-quaternary", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[16px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                bvDsIcons.ChevronDown,
+                {
+                  className: clsx_default("w-full h-full transition-transform", open && "rotate-180")
+                }
+              ) }) })
             ]
           }
         )
@@ -32167,8 +32263,7 @@ function NavItemDropdownBase({
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col pb-xs", children })
   ] });
 }
-var Menu = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2.5 10h15M2.5 5h15M2.5 15h15", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var XClose4 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var IconBox = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "overflow-clip relative shrink-0 size-[20px] flex items-center justify-center", children });
 function NavMenuButton({
   opened = false,
   className,
@@ -32187,7 +32282,7 @@ function NavMenuButton({
         className
       ),
       ...rest,
-      children: opened ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(XClose4, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(Menu, {})
+      children: opened ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.XClose, { className: "w-full h-full" }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(IconBox, { children: /* @__PURE__ */ jsxRuntime.jsx(bvDsIcons.Menu02, { className: "w-full h-full" }) })
     }
   );
 }
@@ -32275,7 +32370,7 @@ function NumberInput({
   const inc = () => set2(value + step);
   const Minus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
   const Plus = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4.167v11.666M4.167 10h11.666", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round" }) });
-  const Chevron6 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  const Chevron5 = ({ up }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 12 12", fill: "none", className: clsx_default("size-3", up && "rotate-180"), "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 4.5 6 7.5 9 4.5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const numberEl = /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -32301,9 +32396,9 @@ function NumberInput({
   ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default(boxClasses(destructive), "gap-0 overflow-hidden p-0"), children: [
     numberEl,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col self-stretch border-l border-border-primary", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron6, { up: true }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: inc, disabled, "aria-label": "Increase", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron5, { up: true }) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-px w-full bg-border-primary" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron6, { up: false }) })
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: dec, disabled, "aria-label": "Decrease", className: "flex flex-1 items-center justify-center px-md text-fg-quaternary hover:bg-bg-primary-hover disabled:opacity-60", children: /* @__PURE__ */ jsxRuntime.jsx(Chevron5, { up: false }) })
     ] })
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(FieldWrapper, { label, required, hint, destructive, className, children: box });