@borisj74/bv-ds 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -5094,7 +5094,7 @@ function AdvancedFilterBar({
 }
 var hierarchyClasses = {
   Primary: "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-brand-solid-hover",
-  Secondary: "bg-bg-primary text-text-secondary border border-border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
+  Secondary: "bg-bg-primary text-text-secondary border border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
   Tertiary: "bg-transparent text-text-tertiary border-0 hover:bg-bg-secondary",
   "Link color": "bg-transparent text-text-brand-secondary border-0 p-0 hover:text-text-brand-secondary-hover",
   "Link gray": "bg-transparent text-text-tertiary border-0 p-0 hover:text-text-tertiary-hover"
@@ -5982,7 +5982,7 @@ function ButtonCloseX({
 }
 var hierarchyClasses2 = {
   Primary: "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
-  Secondary: "bg-bg-primary text-text-error-primary border border-border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
+  Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
   Tertiary: "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
   Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary"
 };
@@ -6117,6 +6117,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 +6222,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 +6249,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 +6293,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 +6313,8 @@ function PlusIcon3() {
   ) });
 }
 function CalendarCellDayWeekView({
+  type,
+  state = "default",
   children,
   onAdd,
   muted = false,
@@ -6198,8 +6324,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 +6348,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 +6371,11 @@ function CalendarColumnHeader({
           {
             className: clsx_default(
               "flex items-center justify-center text-xs font-semibold",
-              current ? "size-6 rounded-full 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 +6398,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 +6464,13 @@ function CalendarEventDayWeekView({
 function CalendarHeader({
   title,
   range: range6,
+  supportingText,
   badge,
   dateIcon,
   actions,
   className
 }) {
+  const subtitle = range6 ?? supportingText;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -6396,7 +6486,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 +6494,7 @@ function CalendarHeader({
     }
   );
 }
-function CalendarRowLabel({ label, className }) {
+function CalendarRowLabel({ label, time: time2, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -6412,7 +6502,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 +6512,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 +6547,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 +6568,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 +6589,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",
@@ -6499,7 +6601,7 @@ function CalendarViewDropdown({
                       "flex size-4 shrink-0 items-center justify-center rounded-full border",
                       isSelected ? "border-border-brand" : "border-border-primary"
                     ),
-                    children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-brand-solid" }) : null
+                    children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-2 rounded-full bg-bg-brand-solid" }) : null
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left", children: opt.label }),
@@ -28870,7 +28972,7 @@ function CheckControlVisual({
         "peer-focus-visible:ring-2 peer-focus-visible:ring-border-brand peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-primary",
         type === "radio" ? "rounded-full" : "rounded-sm",
         boxSize[size],
-        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-brand-solid bg-brand-solid" : "border-border-primary bg-bg-primary"
+        disabled ? "border-border-primary bg-bg-tertiary" : active ? "border-bg-brand-solid bg-bg-brand-solid" : "border-border-primary bg-bg-primary"
       ),
       children: [
         type === "checkbox" && checked && !indeterminate ? /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", className: glyphSize[size], "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -29319,7 +29421,7 @@ function ContentDivider({
   );
 }
 var sizeConfig = {
-  sm: { box: "p-3xl rounded-xl", heading: "text-lg", body: "text-md" },
+  sm: { box: "p-3xl rounded-2xl", heading: "text-lg", body: "text-md" },
   md: { box: "p-4xl rounded-2xl", heading: "text-xl", body: "text-lg" }
 };
 function ContentFeatureText({
@@ -29970,6 +30072,100 @@ function EmptyState({
     }
   );
 }
+var boxSize2 = {
+  sm: "size-8",
+  // 32px
+  md: "size-10",
+  // 40px
+  lg: "size-12",
+  // 48px
+  xl: "size-14"
+  // 56px
+};
+var iconPx = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+function radiusFor(theme) {
+  if (theme === "light") return "rounded-full";
+  if (theme === "modern-neue") return "rounded-lg";
+  return "rounded-xl";
+}
+var lightBg = {
+  brand: "bg-bg-brand-secondary",
+  gray: "bg-bg-secondary",
+  error: "bg-bg-error-secondary",
+  warning: "bg-bg-warning-secondary",
+  success: "bg-bg-success-secondary"
+};
+var lightFg = {
+  brand: "text-fg-brand-primary",
+  gray: "text-fg-secondary",
+  error: "text-fg-error-primary",
+  warning: "text-fg-warning-primary",
+  success: "text-fg-success-primary"
+};
+var darkBg = {
+  brand: "bg-bg-brand-solid",
+  gray: "bg-bg-secondary-solid",
+  error: "bg-bg-error-solid",
+  warning: "bg-bg-warning-solid",
+  success: "bg-bg-success-solid"
+};
+var gradientFill = {
+  brand: "bg-gradient-to-br from-utility-brand-50 to-utility-brand-200",
+  gray: "bg-gradient-to-br from-utility-neutral-50 to-utility-neutral-200",
+  error: "bg-gradient-to-br from-utility-red-50 to-utility-red-200",
+  warning: "bg-gradient-to-br from-utility-amber-50 to-utility-amber-200",
+  success: "bg-gradient-to-br from-utility-green-50 to-utility-green-200"
+};
+function FeaturedIcon({
+  icon,
+  color: color2 = "brand",
+  theme = "light",
+  size = "md",
+  className,
+  ...rest
+}) {
+  const px = iconPx[size];
+  const themeClasses = clsx_default(
+    theme === "light" && [lightBg[color2], lightFg[color2]],
+    theme === "dark" && [
+      darkBg[color2],
+      "text-fg-white border-2 border-[rgba(255,255,255,0.12)] shadow-skeuomorphic"
+    ],
+    theme === "gradient" && [gradientFill[color2], "text-fg-white"],
+    theme === "modern" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-skeuomorphic"
+    ],
+    theme === "modern-neue" && [
+      "bg-bg-primary text-fg-secondary border border-border-primary shadow-xs"
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: clsx_default(
+        "inline-flex shrink-0 items-center justify-center",
+        boxSize2[size],
+        radiusFor(theme),
+        themeClasses,
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          style: { width: px, height: px, display: "inline-flex" },
+          children: icon
+        }
+      )
+    }
+  );
+}
 var avatarSize2 = {
   sm: "size-8",
   // 32px
@@ -31420,7 +31616,7 @@ function MetricItem({
     }
   );
 }
-var FeaturedIcon = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
+var FeaturedIcon2 = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
 var XClose2 = () => /* @__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" }) });
 function ModalHeader({
   title,
@@ -31454,7 +31650,7 @@ function ModalHeader({
               isCenter && "items-center"
             ),
             children: [
-              icon && /* @__PURE__ */ jsxRuntime.jsx(FeaturedIcon, { children: icon }),
+              icon && /* @__PURE__ */ jsxRuntime.jsx(FeaturedIcon2, { children: icon }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -32112,7 +32308,7 @@ var GLYPH = {
   error: "M10 6.67V10m0 3.33h.01M18.33 10a8.33 8.33 0 1 1-16.66 0 8.33 8.33 0 0 1 16.66 0Z"
 };
 var XClose5 = () => /* @__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 FeaturedIcon2 = ({ variant }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
+var FeaturedIcon3 = ({ variant }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx_default("relative inline-flex size-5 shrink-0 items-center justify-center", RING[variant].split(" ")[1]), children: [
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("absolute inset-[-20%] rounded-full border-2 opacity-30", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx_default("absolute inset-[-45%] rounded-full border-2 opacity-10", RING[variant].split(" ")[0]) }),
   /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "relative size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: GLYPH[variant], stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -32137,7 +32333,7 @@ function Notification({
       ),
       ...rest,
       children: [
-        leadingMedia ?? /* @__PURE__ */ jsxRuntime.jsx(FeaturedIcon2, { variant }),
+        leadingMedia ?? /* @__PURE__ */ jsxRuntime.jsx(FeaturedIcon3, { variant }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-lg pr-8", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-fg-primary", children: title }),
@@ -33937,6 +34133,7 @@ exports.DropdownMenuHeader = DropdownMenuHeader;
 exports.DropdownMenuItemInsetIcon = DropdownMenuItemInsetIcon;
 exports.DropdownMenuListItem = DropdownMenuListItem;
 exports.EmptyState = EmptyState;
+exports.FeaturedIcon = FeaturedIcon;
 exports.FeedItemBase = FeedItemBase;
 exports.FileUpload = FileUpload;
 exports.FileUploadBase = FileUploadBase;