npm - @nurix/ui-component-library - Versions diffs - 1.1.7-stage.136 → 1.1.7-stage.138 - Mend

@nurix/ui-component-library 1.1.7-stage.136 → 1.1.7-stage.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.js CHANGED Viewed

@@ -6501,6 +6501,7 @@ __export(index_exports, {
   ChatBubbleUser: () => ChatBubbleUser,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
+  CircularBadge: () => CircularBadge,
   ColumnWidth: () => ColumnWidth,
   CompoundFilterSelect: () => CompoundFilterSelect,
   DEFAULT_DATE_PRESETS: () => DEFAULT_DATE_PRESETS2,
@@ -7177,6 +7178,8 @@ var BUTTON_TOKENS = {
     primary: "bg-token-brand-primary text-fg-white disabled:bg-token-grey disabled:text-fg-grey-secondary disabled:opacity-100",
     secondary: "bg-token-grey text-fg-black border-token-light disabled:bg-token-grey disabled:text-fg-grey-secondary disabled:opacity-100",
     destructive: "bg-token-destructive-primary text-fg-white disabled:bg-token-grey disabled:text-fg-grey-secondary disabled:opacity-100",
+    // Light amber bg + dark amber text/icon (Figma: 177:13177).
+    warning: "bg-token-warning-secondary text-fg-warning [&>svg]:text-icon-warning disabled:bg-token-grey disabled:text-fg-grey-secondary disabled:opacity-100",
     // Outline / link — `hover:` then `active:` so Tailwind emits active-last,
     // and the pressed bg (10% black) beats the hover bg (5% black).
     outline: "border-token-light bg-transparent text-fg-black hover:bg-token-dark/5 active:bg-interaction-pressed-opacity-secondary disabled:border-token-grey disabled:text-fg-grey-secondary disabled:opacity-100",
@@ -7229,7 +7232,7 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 var withHoverOverlay = (variant) => {
-  return variant === "primary" || variant === "secondary" || variant === "destructive" || variant === "outline" || variant === "link" || variant === "iconPrimary" || variant === "iconSecondary" || variant === "iconOutline" || variant === "iconLink";
+  return variant === "primary" || variant === "secondary" || variant === "destructive" || variant === "warning" || variant === "outline" || variant === "link" || variant === "iconPrimary" || variant === "iconSecondary" || variant === "iconOutline" || variant === "iconLink";
 };
 // src/button/button.tsx
@@ -8518,36 +8521,120 @@ var DialogHeaderNavigation = React12.forwardRef(
 DialogHeaderNavigation.displayName = "DialogHeaderNavigation";
 // src/navigation/tabs.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
-// src/navigation/useTabs.ts
+// src/tooltip/tooltip.tsx
 var React13 = __toESM(require("react"));
-var TabsContext = React13.createContext(null);
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+// src/tooltip/variables.ts
+var TOOLTIP_TOKENS = {
+  content: {
+    base: "z-50 overflow-hidden rounded-xl px-2 py-2 text-xs leading-4 font-normal",
+    bg: "bg-token-brand-primary text-fg-white"
+  },
+  arrow: "fill-primary",
+  shortcut: {
+    base: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs leading-4 font-normal",
+    bg: "bg-token-grey",
+    text: "text-fg-grey-secondary"
+  }
+};
+// src/tooltip/tooltip.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var useTooltipContainer = (anchorRef) => {
+  const [container, setContainer] = React13.useState(
+    void 0
+  );
+  React13.useEffect(() => {
+    var _a5;
+    if (typeof document === "undefined") return;
+    const anchor = anchorRef.current;
+    const el = (_a5 = anchor == null ? void 0 : anchor.closest(".lego-land")) != null ? _a5 : document.querySelector(".lego-land");
+    setContainer(el != null ? el : void 0);
+  }, [anchorRef]);
+  return container;
+};
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React13.forwardRef(({ className, sideOffset = 6, shortcut, children, ...props }, ref) => {
+  const anchorRef = React13.useRef(null);
+  const container = useTooltipContainer(anchorRef);
+  const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        TOOLTIP_TOKENS.content.base,
+        TOOLTIP_TOKENS.content.bg,
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center", children: [
+          children,
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                TOOLTIP_TOKENS.shortcut.base,
+                TOOLTIP_TOKENS.shortcut.bg,
+                TOOLTIP_TOKENS.shortcut.text
+              ),
+              children: shortcut
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          TooltipPrimitive.Arrow,
+          {
+            className: TOOLTIP_TOKENS.arrow,
+            style: { fill: "hsl(var(--bg-brand-primary))" }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { ref: anchorRef, style: { display: "none" } }),
+    container ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipPrimitive.Portal, { container, children: content }) : content
+  ] });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+// src/navigation/useTabs.ts
+var React14 = __toESM(require("react"));
+var TabsContext = React14.createContext(null);
 function useTabs(props) {
   if (props) {
     const {
       value: valueProp,
       defaultValue,
       onValueChange,
-      variant = "top"
+      variant = "top",
+      size = "default"
     } = props;
-    const [uncontrolledValue, setUncontrolledValue] = React13.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = React14.useState(defaultValue);
     const isControlled = valueProp !== void 0;
     const value = isControlled ? valueProp : uncontrolledValue;
-    const setValue = React13.useCallback(
+    const setValue = React14.useCallback(
       (next) => {
         if (!isControlled) setUncontrolledValue(next);
         onValueChange == null ? void 0 : onValueChange(next);
       },
       [isControlled, onValueChange]
     );
-    const ctx2 = React13.useMemo(
-      () => ({ value, setValue, variant }),
-      [value, setValue, variant]
+    const ctx2 = React14.useMemo(
+      () => ({ value, setValue, variant, size }),
+      [value, setValue, variant, size]
     );
     return ctx2;
   }
-  const ctx = React13.useContext(TabsContext);
+  const ctx = React14.useContext(TabsContext);
   if (!ctx) {
     throw new Error("Tabs components must be used within <Tabs />");
   }
@@ -8555,24 +8642,25 @@ function useTabs(props) {
 }
 // src/navigation/tabs.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Tabs({
   className,
   value,
   defaultValue,
   onValueChange,
   variant,
+  size,
   ...props
 }) {
-  const ctx = useTabs({ value, defaultValue, onValueChange, variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("w-full", className), ...props }) });
+  const ctx = useTabs({ value, defaultValue, onValueChange, variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("w-full", className), ...props }) });
 }
-var TabsList = React14.forwardRef(
+var TabsList = React15.forwardRef(
   ({ className, variant, ...props }, ref) => {
     var _a5;
     const ctx = useTabs();
     const v2 = (_a5 = variant != null ? variant : ctx.variant) != null ? _a5 : "top";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -8586,19 +8674,24 @@ var TabsList = React14.forwardRef(
   }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React14.forwardRef(
-  ({ className, value, variant, iconLeft, disabled, children, "data-testid": dataTestId, ...props }, ref) => {
-    var _a5;
+var TabsTrigger = React15.forwardRef(
+  ({ className, value, variant, size, iconLeft, disabled, children, "data-testid": dataTestId, ...props }, ref) => {
+    var _a5, _b5;
     const ctx = useTabs();
     const v2 = (_a5 = variant != null ? variant : ctx.variant) != null ? _a5 : "top";
+    const s = (_b5 = size != null ? size : ctx.size) != null ? _b5 : "default";
     const selected = ctx.value === value;
     const baseClass = v2 === "side" ? NAVIGATION_TOKENS.tab.sideBase : v2 === "section" ? NAVIGATION_TOKENS.tab.sectionBase : selected ? NAVIGATION_TOKENS.tab.topBaseSelected : NAVIGATION_TOKENS.tab.topBase;
     const selectedClass = v2 === "side" ? NAVIGATION_TOKENS.tab.sideSelected : v2 === "section" ? NAVIGATION_TOKENS.tab.sectionSelected : "";
-    const labelClass = v2 === "side" ? selected ? NAVIGATION_TOKENS.tab.sideLabelSelected : NAVIGATION_TOKENS.tab.sideLabelUnselected : v2 === "section" ? selected ? NAVIGATION_TOKENS.tab.sectionLabelSelected : NAVIGATION_TOKENS.tab.sectionLabelUnselected : selected ? NAVIGATION_TOKENS.tab.topLabelSelected : NAVIGATION_TOKENS.tab.topLabelUnselected;
+    const topSizeOverride = v2 === "top" && s === "sm" ? "text-sm leading-5" : "";
+    const labelClass = cn(
+      v2 === "side" ? selected ? NAVIGATION_TOKENS.tab.sideLabelSelected : NAVIGATION_TOKENS.tab.sideLabelUnselected : v2 === "section" ? selected ? NAVIGATION_TOKENS.tab.sectionLabelSelected : NAVIGATION_TOKENS.tab.sectionLabelUnselected : selected ? NAVIGATION_TOKENS.tab.topLabelSelected : NAVIGATION_TOKENS.tab.topLabelUnselected,
+      topSizeOverride
+    );
     const iconColor = v2 === "section" ? selected ? "text-icon-link" : "text-icon-grey-secondary" : v2 === "side" ? selected ? "text-icon-black" : "text-icon-grey-secondary" : selected ? "text-icon-link" : "text-icon-grey-primary";
     const hoverClass = v2 === "side" ? selected ? NAVIGATION_TOKENS.tab.sideHoverSelected : NAVIGATION_TOKENS.tab.sideHoverUnselected : v2 === "section" ? selected ? NAVIGATION_TOKENS.tab.sectionHoverSelected : NAVIGATION_TOKENS.tab.sectionHoverUnselected : selected ? NAVIGATION_TOKENS.tab.topHoverSelected : NAVIGATION_TOKENS.tab.topHoverUnselected;
     const pressedClass = v2 === "side" ? selected ? NAVIGATION_TOKENS.tab.sidePressedSelected : NAVIGATION_TOKENS.tab.sidePressedUnselected : v2 === "section" ? selected ? NAVIGATION_TOKENS.tab.sectionPressedSelected : NAVIGATION_TOKENS.tab.sectionPressedUnselected : selected ? NAVIGATION_TOKENS.tab.topPressedSelected : NAVIGATION_TOKENS.tab.topPressedUnselected;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         ref,
@@ -8619,9 +8712,9 @@ var TabsTrigger = React14.forwardRef(
         onClick: () => ctx.setValue(value),
         ...props,
         children: [
-          iconLeft ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.iconWrap, iconColor), children: iconLeft }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.labelBase, labelClass), children }),
-          v2 === "top" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          iconLeft ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.iconWrap, iconColor), children: iconLeft }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.labelBase, labelClass), children }),
+          v2 === "top" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "span",
             {
               className: cn(
@@ -8647,7 +8740,7 @@ function TabsContent({
   const ctx = useTabs();
   const isActive = ctx.value === value;
   if (!forceMount && !isActive) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: cn(className),
@@ -8658,8 +8751,37 @@ function TabsContent({
     }
   );
 }
-var ListNavigation = React14.forwardRef(({ items, selectedId, onSelect, className, "data-testid": dataTestId, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var ListNavigation = React15.forwardRef(({
+  items,
+  selectedId,
+  onSelect,
+  truncate = false,
+  maxTitleChars,
+  maxSubtitleChars,
+  className,
+  "data-testid": dataTestId,
+  ...props
+}, ref) => {
+  const clamp = (s, max) => typeof max === "number" && s.length > max ? `${s.slice(0, max)}\u2026` : s;
+  const renderTitle = (item, renderedTitle) => {
+    const wasClamped = renderedTitle !== item.title;
+    const titleNode = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "p",
+      {
+        className: cn(
+          NAVIGATION_TOKENS.listNav.title,
+          truncate && "truncate"
+        ),
+        children: renderedTitle
+      }
+    );
+    if (!truncate) return titleNode;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipTrigger, { asChild: true, children: titleNode }),
+      wasClamped && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipContent, { side: "top", className: "max-w-xs", children: item.title })
+    ] });
+  };
+  const listBody = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
@@ -8668,7 +8790,9 @@ var ListNavigation = React14.forwardRef(({ items, selectedId, onSelect, classNam
       ...props,
       children: items.map((item) => {
         const isSelected = item.id === selectedId;
-        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        const renderedTitle = clamp(item.title, maxTitleChars);
+        const renderedSubtitle = item.subtitle ? clamp(item.subtitle, maxSubtitleChars) : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             className: cn(
@@ -8680,12 +8804,42 @@ var ListNavigation = React14.forwardRef(({ items, selectedId, onSelect, classNam
             "data-state": isSelected ? "selected" : "default",
             "data-testid": `nav-item-${item.id}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: NAVIGATION_TOKENS.listNav.content, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: NAVIGATION_TOKENS.listNav.info, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: NAVIGATION_TOKENS.listNav.title, children: item.title }),
-                item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: NAVIGATION_TOKENS.listNav.subtitle, children: item.subtitle })
-              ] }) }),
-              item.trailing && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: NAVIGATION_TOKENS.listNav.trailing, children: item.trailing }),
-              isSelected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: NAVIGATION_TOKENS.listNav.indicator })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "div",
+                {
+                  className: cn(
+                    NAVIGATION_TOKENS.listNav.content,
+                    // In truncate mode the content column must be allowed to
+                    // shrink — default `shrink-0` would let the title push
+                    // past the trailing badge.
+                    truncate && "min-w-0 flex-1 shrink"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                    "div",
+                    {
+                      className: cn(
+                        NAVIGATION_TOKENS.listNav.info,
+                        truncate && "min-w-0 w-full"
+                      ),
+                      children: [
+                        renderTitle(item, renderedTitle),
+                        renderedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "p",
+                          {
+                            className: cn(
+                              NAVIGATION_TOKENS.listNav.subtitle,
+                              truncate && "truncate"
+                            ),
+                            children: renderedSubtitle
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              item.trailing && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: NAVIGATION_TOKENS.listNav.trailing, children: item.trailing }),
+              isSelected && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: NAVIGATION_TOKENS.listNav.indicator })
             ]
           },
           item.id
@@ -8693,11 +8847,12 @@ var ListNavigation = React14.forwardRef(({ items, selectedId, onSelect, classNam
       })
     }
   );
+  return truncate ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipProvider, { delayDuration: 200, children: listBody }) : listBody;
 });
 ListNavigation.displayName = "ListNavigation";
 // src/accordion/accordion.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
 var import_lucide_react4 = require("lucide-react");
@@ -8759,7 +8914,7 @@ var ACCORDION_TOKENS = {
 };
 // src/accordion/useAccordion.ts
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 function normalizeToArray(type, value) {
   if (type === "multiple") {
     return Array.isArray(value) ? value : [];
@@ -8781,13 +8936,13 @@ function useAccordion({
   disabled
 }) {
   const isControlled = value !== void 0;
-  const [uncontrolled, setUncontrolled] = React15.useState(
+  const [uncontrolled, setUncontrolled] = React16.useState(
     () => normalizeToArray(type, defaultValue)
   );
-  const openValues = React15.useMemo(() => {
+  const openValues = React16.useMemo(() => {
     return isControlled ? normalizeToArray(type, value) : uncontrolled;
   }, [isControlled, type, value, uncontrolled]);
-  const commit = React15.useCallback(
+  const commit = React16.useCallback(
     (next) => {
       var _a5;
       if (!isControlled) setUncontrolled(next);
@@ -8801,12 +8956,12 @@ function useAccordion({
     },
     [isControlled, onValueChange, type]
   );
-  const radixValue = React15.useMemo(() => {
+  const radixValue = React16.useMemo(() => {
     var _a5;
     if (type === "multiple") return openValues;
     return (_a5 = openValues[0]) != null ? _a5 : "";
   }, [openValues, type]);
-  const onRadixValueChange = React15.useCallback(
+  const onRadixValueChange = React16.useCallback(
     (next) => {
       if (disabled) return;
       if (type === "multiple") {
@@ -8823,7 +8978,7 @@ function useAccordion({
     },
     [collapsible, commit, disabled, type]
   );
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (isControlled) return;
     const next = normalizeToArray(type, defaultValue);
     setUncontrolled((prev) => arraysEqual(prev, next) ? prev : next);
@@ -8838,7 +8993,7 @@ function useAccordion({
 }
 // src/accordion/accordion.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Accordion({
   className,
   type,
@@ -8859,7 +9014,7 @@ function Accordion({
     onValueChange,
     disabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     AccordionPrimitive.Root,
     {
       className: cn(ACCORDION_TOKENS.root, className),
@@ -8872,7 +9027,7 @@ function Accordion({
     }
   );
 }
-var AccordionItem = React16.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var AccordionItem = React17.forwardRef(({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   AccordionPrimitive.Item,
   {
     ref,
@@ -8884,7 +9039,7 @@ var AccordionItem = React16.forwardRef(({ className, variant = "default", ...pro
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React16.forwardRef(
+var AccordionTrigger = React17.forwardRef(
   ({
     className,
     children,
@@ -8897,14 +9052,14 @@ var AccordionTrigger = React16.forwardRef(
     ...props
   }, ref) => {
     const isSurface = variant === "surface";
-    const titleNode = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    const titleNode = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       {
         className: size === "sm" ? ACCORDION_TOKENS.titleSm : ACCORDION_TOKENS.title,
         children
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       AccordionPrimitive.Trigger,
       {
         ref,
@@ -8916,8 +9071,8 @@ var AccordionTrigger = React16.forwardRef(
         "data-testid": dataTestId != null ? dataTestId : "accordion",
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: ACCORDION_TOKENS.textWrap, children: [
-            isSurface ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: ACCORDION_TOKENS.textWrap, children: [
+            isSurface ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
@@ -8926,10 +9081,10 @@ var AccordionTrigger = React16.forwardRef(
                 children: titleNode
               }
             ) : titleNode,
-            description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: ACCORDION_TOKENS.description, children: description }) : null
+            description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: ACCORDION_TOKENS.description, children: description }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: ACCORDION_TOKENS.rightWrap, children: [
-            action ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: ACCORDION_TOKENS.rightWrap, children: [
+            action ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
@@ -8937,7 +9092,7 @@ var AccordionTrigger = React16.forwardRef(
                 children: action
               }
             ) : null,
-            !hideChevron ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            !hideChevron ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               import_lucide_react4.ChevronDown,
               {
                 className: size === "sm" || isSurface ? ACCORDION_TOKENS.chevronSm : ACCORDION_TOKENS.chevron,
@@ -8951,7 +9106,7 @@ var AccordionTrigger = React16.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionSectionTrigger = React16.forwardRef(({ className, children, label, "data-testid": dataTestId, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var AccordionSectionTrigger = React17.forwardRef(({ className, children, label, "data-testid": dataTestId, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -8959,8 +9114,8 @@ var AccordionSectionTrigger = React16.forwardRef(({ className, children, label,
     "data-testid": dataTestId != null ? dataTestId : "accordion",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "whitespace-nowrap", children: children != null ? children : label }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "whitespace-nowrap", children: children != null ? children : label }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_lucide_react4.ChevronDown,
         {
           className: ACCORDION_TOKENS.sectionTriggerChevron,
@@ -8971,13 +9126,13 @@ var AccordionSectionTrigger = React16.forwardRef(({ className, children, label,
   }
 ) }));
 AccordionSectionTrigger.displayName = "AccordionSectionTrigger";
-var AccordionContent = React16.forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var AccordionContent = React17.forwardRef(({ className, children, variant = "default", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   AccordionPrimitive.Content,
   {
     ref,
     className: cn(ACCORDION_TOKENS.contentWrap, className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       {
         className: variant === "surface" ? ACCORDION_TOKENS.contentSurfaceInner : ACCORDION_TOKENS.contentInner,
@@ -8991,11 +9146,11 @@ function AccordionContentPlaceholder({
   className,
   children = "Content Placeholder"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn(ACCORDION_TOKENS.contentCard, className), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: ACCORDION_TOKENS.contentCardText, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn(ACCORDION_TOKENS.contentCard, className), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: ACCORDION_TOKENS.contentCardText, children }) });
 }
 // src/avatar/avatar.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 // src/avatar/variables.ts
@@ -9034,8 +9189,8 @@ var AVATAR_TOKENS = {
 };
 // src/avatar/avatar.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Avatar = React17.forwardRef(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Avatar = React18.forwardRef(
   ({
     src,
     alt,
@@ -9046,7 +9201,7 @@ var Avatar = React17.forwardRef(
     style,
     "data-testid": dataTestId
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       AvatarPrimitive.Root,
       {
         ref,
@@ -9059,7 +9214,7 @@ var Avatar = React17.forwardRef(
         style,
         "data-testid": dataTestId != null ? dataTestId : "avatar",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             AvatarPrimitive.Image,
             {
               src,
@@ -9067,7 +9222,7 @@ var Avatar = React17.forwardRef(
               className: cn(AVATAR_TOKENS.image, AVATAR_TOKENS.shape[shape])
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             AvatarPrimitive.Fallback,
             {
               className: cn(
@@ -9085,7 +9240,7 @@ var Avatar = React17.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React17.forwardRef(
+var AvatarGroup = React18.forwardRef(
   ({
     max = 3,
     size = "default",
@@ -9095,10 +9250,10 @@ var AvatarGroup = React17.forwardRef(
     style,
     "data-testid": dataTestId
   }, ref) => {
-    const childArray = React17.Children.toArray(children);
+    const childArray = React18.Children.toArray(children);
     const visibleChildren = childArray.slice(0, max);
     const overflowCount = childArray.length - max;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref,
@@ -9108,8 +9263,8 @@ var AvatarGroup = React17.forwardRef(
         children: [
           visibleChildren.map((child, index2) => {
             var _a5, _b5;
-            if (React17.isValidElement(child)) {
-              return React17.cloneElement(child, {
+            if (React18.isValidElement(child)) {
+              return React18.cloneElement(child, {
                 key: index2,
                 size: (_a5 = child.props.size) != null ? _a5 : size,
                 shape: (_b5 = child.props.shape) != null ? _b5 : shape,
@@ -9118,7 +9273,7 @@ var AvatarGroup = React17.forwardRef(
             }
             return child;
           }),
-          overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "div",
             {
               className: cn(
@@ -9142,7 +9297,7 @@ var AvatarGroup = React17.forwardRef(
 AvatarGroup.displayName = "AvatarGroup";
 // src/badge/badge.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react5 = require("lucide-react");
@@ -9182,10 +9337,10 @@ var BADGE_TOKENS = {
 };
 // src/theme/theme-context.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 // src/theme/lego-land-wrapper.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var LegoLandWrapper = ({
   children,
   theme,
@@ -9196,7 +9351,7 @@ var LegoLandWrapper = ({
   const themeClass = theme === "dark" ? "dark" : "light";
   const baseClass = `lego-land ${themeClass}`;
   const mergedClassName = className ? `${baseClass} ${className}` : baseClass;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: mergedClassName,
@@ -9425,13 +9580,13 @@ function buildDefaultThemeCssText() {
 }
 // src/theme/theme-context.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ThemeContext = React18.createContext(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ThemeContext = React19.createContext(
   void 0
 );
 var ThemeProvider = ({ children, defaultTheme = "light", fill }) => {
-  const [theme, setTheme] = React18.useState(defaultTheme);
-  React18.useEffect(() => {
+  const [theme, setTheme] = React19.useState(defaultTheme);
+  React19.useEffect(() => {
     if (typeof document === "undefined") return;
     const STYLE_ID = "nurix-default-theme-vars";
     const existing = document.getElementById(STYLE_ID);
@@ -9442,14 +9597,14 @@ var ThemeProvider = ({ children, defaultTheme = "light", fill }) => {
       document.head.appendChild(styleEl);
     }
   }, []);
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     setTheme(defaultTheme);
   }, [defaultTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(LegoLandWrapper, { theme, fill, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeContext.Provider, { value: { theme, setTheme }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LegoLandWrapper, { theme, fill, children }) });
 };
 var NurixThemeProvider = ThemeProvider;
 var useTheme = () => {
-  const context = React18.useContext(ThemeContext);
+  const context = React19.useContext(ThemeContext);
   if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
@@ -9457,8 +9612,13 @@ var useTheme = () => {
 };
 // src/badge/badge.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var Badge = React19.forwardRef(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CIRCULAR_BADGE_SIZE_CLASS = {
+  sm: "size-4 [&>svg]:size-2.5",
+  md: "size-5 [&>svg]:size-3",
+  lg: "size-6 [&>svg]:size-3.5"
+};
+var Badge = React20.forwardRef(
   ({
     variant = "default",
     label,
@@ -9484,13 +9644,13 @@ var Badge = React19.forwardRef(
       interactive && onClick && "cursor-pointer",
       className
     );
-    const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    const content = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
       showLeadingIcon && leadingIcon,
       children != null ? children : label,
       showTrailingIcon && trailingIcon
     ] });
     if (onClick && interactive) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           ref,
@@ -9503,7 +9663,7 @@ var Badge = React19.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref,
@@ -9516,7 +9676,7 @@ var Badge = React19.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var NumberBadge = React19.forwardRef(
+var NumberBadge = React20.forwardRef(
   ({
     count,
     max = 99,
@@ -9530,7 +9690,7 @@ var NumberBadge = React19.forwardRef(
       return null;
     }
     const displayValue = count > max ? `${max}+` : count.toString();
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
       {
         ref,
@@ -9548,7 +9708,51 @@ var NumberBadge = React19.forwardRef(
   }
 );
 NumberBadge.displayName = "NumberBadge";
-var TagBadge = React19.forwardRef(
+var CircularBadge = React20.forwardRef(
+  ({
+    variant = "default",
+    size = "md",
+    onClick,
+    children,
+    className,
+    style,
+    "data-testid": dataTestId
+  }, ref) => {
+    const classes = cn(
+      "inline-flex items-center justify-center rounded-full shrink-0",
+      CIRCULAR_BADGE_SIZE_CLASS[size],
+      BADGE_TOKENS.variant[variant],
+      onClick && "cursor-pointer",
+      className
+    );
+    if (onClick) {
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "button",
+        {
+          ref,
+          type: "button",
+          className: classes,
+          style,
+          onClick,
+          "data-testid": dataTestId != null ? dataTestId : "badge",
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "span",
+      {
+        ref,
+        className: classes,
+        style,
+        "data-testid": dataTestId != null ? dataTestId : "badge",
+        children
+      }
+    );
+  }
+);
+CircularBadge.displayName = "CircularBadge";
+var TagBadge = React20.forwardRef(
   ({
     value,
     onValueChange,
@@ -9563,7 +9767,7 @@ var TagBadge = React19.forwardRef(
     var _a5, _b5;
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const [open, setOpen] = React19.useState(false);
+    const [open, setOpen] = React20.useState(false);
     const selectedOption = options.find((opt) => opt.value === value);
     const displayLabel = (_a5 = selectedOption == null ? void 0 : selectedOption.label) != null ? _a5 : placeholder;
     const displayVariant = (_b5 = selectedOption == null ? void 0 : selectedOption.variant) != null ? _b5 : defaultVariant;
@@ -9572,11 +9776,11 @@ var TagBadge = React19.forwardRef(
       ...(selectedOption == null ? void 0 : selectedOption.background) ? { backgroundColor: selectedOption.background } : {},
       ...(selectedOption == null ? void 0 : selectedOption.color) ? { color: selectedOption.color } : {}
     };
-    const sentinelRef = React19.useRef(null);
-    const [container, setContainer] = React19.useState(
+    const sentinelRef = React20.useRef(null);
+    const [container, setContainer] = React20.useState(
       void 0
     );
-    React19.useEffect(() => {
+    React20.useEffect(() => {
       var _a6, _b6;
       const el = (_a6 = sentinelRef.current) == null ? void 0 : _a6.closest(".lego-land");
       setContainer(
@@ -9584,7 +9788,7 @@ var TagBadge = React19.forwardRef(
       );
     }, []);
     if (viewOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         Badge,
         {
           ref,
@@ -9597,10 +9801,10 @@ var TagBadge = React19.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref, className: "inline-block", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ref: sentinelRef, className: "hidden", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { ref, className: "inline-block", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { ref: sentinelRef, className: "hidden", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "button",
           {
             type: "button",
@@ -9619,7 +9823,7 @@ var TagBadge = React19.forwardRef(
             "data-testid": dataTestId != null ? dataTestId : "badge",
             children: [
               displayLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 import_lucide_react5.ChevronDown,
                 {
                   className: cn(
@@ -9631,14 +9835,14 @@ var TagBadge = React19.forwardRef(
             ]
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DropdownMenuPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             className: cn(
               !container && "lego-land",
               !container && themeClass
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               DropdownMenuPrimitive.Content,
               {
                 className: cn(
@@ -9654,7 +9858,7 @@ var TagBadge = React19.forwardRef(
                 children: options.map((option) => {
                   var _a6;
                   const isSelected = option.value === value;
-                  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                     DropdownMenuPrimitive.Item,
                     {
                       className: cn(
@@ -9664,7 +9868,7 @@ var TagBadge = React19.forwardRef(
                       ),
                       onSelect: () => onValueChange == null ? void 0 : onValueChange(option.value),
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                           Badge,
                           {
                             variant: (_a6 = option.variant) != null ? _a6 : defaultVariant,
@@ -9676,7 +9880,7 @@ var TagBadge = React19.forwardRef(
                             } : void 0
                           }
                         ),
-                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react5.Check, { className: "size-3 shrink-0 text-border-token-brand ml-auto" })
+                        isSelected && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react5.Check, { className: "size-3 shrink-0 text-border-token-brand ml-auto" })
                       ]
                     },
                     option.value
@@ -9693,7 +9897,7 @@ var TagBadge = React19.forwardRef(
 TagBadge.displayName = "TagBadge";
 // src/select/select.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
 var import_lucide_react6 = require("lucide-react");
@@ -9854,7 +10058,7 @@ var SELECT_TOKENS = {
 };
 // src/typography/typography.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react_slot2 = require("@radix-ui/react-slot");
 // src/typography/variables.ts
@@ -9971,7 +10175,7 @@ var TYPOGRAPHY_TOKENS = {
 };
 // src/typography/typography.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var DEFAULT_TAG_BY_VARIANT = {
   h1: "h1",
   h2: "h2",
@@ -9993,7 +10197,7 @@ var DEFAULT_TAG_BY_VARIANT = {
   "label-md": "label",
   "label-lg": "label"
 };
-var Typography = React20.forwardRef(
+var Typography = React21.forwardRef(
   ({
     variant,
     size,
@@ -10016,7 +10220,7 @@ var Typography = React20.forwardRef(
       TYPOGRAPHY_TOKENS.variant[variantOrDefault],
       weight ? TYPOGRAPHY_TOKENS.weight[weight] : void 0
     ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Comp,
       {
         ref,
@@ -10036,9 +10240,9 @@ var Typography = React20.forwardRef(
 Typography.displayName = "Typography";
 // src/select/select.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Select = SelectPrimitive.Root;
-var SelectGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectGroup = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   SelectPrimitive.Group,
   {
     ref,
@@ -10047,7 +10251,7 @@ var SelectGroup = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectGroup.displayName = SelectPrimitive.Group.displayName;
-var SelectValue = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectValue = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   "span",
   {
     className: cn(
@@ -10062,11 +10266,11 @@ var SelectValue = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
       "block w-full min-w-0 max-w-full truncate text-left",
       className
     ),
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Value, { ref, ...props })
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPrimitive.Value, { ref, ...props })
   }
 ));
 SelectValue.displayName = "SelectValue";
-var SelectTrigger = React21.forwardRef(
+var SelectTrigger = React22.forwardRef(
   ({
     className,
     children,
@@ -10077,7 +10281,7 @@ var SelectTrigger = React21.forwardRef(
     bg = "default",
     "data-testid": dataTestId,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -10101,7 +10305,7 @@ var SelectTrigger = React21.forwardRef(
       "data-testid": dataTestId != null ? dataTestId : "select",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             className: cn(
@@ -10109,7 +10313,7 @@ var SelectTrigger = React21.forwardRef(
               SELECT_TOKENS.contentWrap.default
             ),
             children: [
-              showLead && leadIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              showLead && leadIcon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   className: cn(
@@ -10119,7 +10323,7 @@ var SelectTrigger = React21.forwardRef(
                   children: leadIcon
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 Typography,
                 {
                   as: "span",
@@ -10137,7 +10341,7 @@ var SelectTrigger = React21.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           import_lucide_react6.ChevronDown,
           {
             className: cn(
@@ -10152,7 +10356,7 @@ var SelectTrigger = React21.forwardRef(
   )
 );
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectScrollUpButton = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -10161,11 +10365,11 @@ var SelectScrollUpButton = React21.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4 rotate-180" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4 rotate-180" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectScrollDownButton = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -10174,7 +10378,7 @@ var SelectScrollDownButton = React21.forwardRef(({ className, ...props }, ref) =
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react6.ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -10199,7 +10403,7 @@ function filterSectionsBySearch(sections, query) {
 function isSectionArray(items) {
   return items.length > 0 && typeof items[0] === "object" && items[0] !== null && "sectionLabel" in items[0] && "items" in items[0];
 }
-var SelectContent = React21.forwardRef(
+var SelectContent = React22.forwardRef(
   ({
     className,
     children,
@@ -10214,30 +10418,30 @@ var SelectContent = React21.forwardRef(
   }, ref) => {
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const [searchQuery, setSearchQuery] = React21.useState("");
-    const sentinelRef = React21.useRef(null);
-    const [container, setContainer] = React21.useState(
+    const [searchQuery, setSearchQuery] = React22.useState("");
+    const sentinelRef = React22.useRef(null);
+    const [container, setContainer] = React22.useState(
       void 0
     );
-    React21.useEffect(() => {
+    React22.useEffect(() => {
       var _a5, _b5;
       const el = (_a5 = sentinelRef.current) == null ? void 0 : _a5.closest(".lego-land");
       setContainer(
         el != null ? el : typeof document !== "undefined" ? (_b5 = document.querySelector(".lego-land")) != null ? _b5 : void 0 : void 0
       );
     }, []);
-    const filteredItems = React21.useMemo(() => {
+    const filteredItems = React22.useMemo(() => {
       if (!items) return [];
       if (isSectionArray(items)) {
         return filterSectionsBySearch(items, searchQuery);
       }
       return filterItemsBySearch(items, searchQuery);
     }, [items, searchQuery]);
-    const handleSearchKeyDown = React21.useCallback((e) => {
+    const handleSearchKeyDown = React22.useCallback((e) => {
       e.stopPropagation();
     }, []);
-    const searchInputRef = React21.useRef(null);
-    const handleSearchBlur = React21.useCallback(
+    const searchInputRef = React22.useRef(null);
+    const handleSearchBlur = React22.useCallback(
       (e) => {
         const next = e.relatedTarget;
         const isSelectItem = (next == null ? void 0 : next.getAttribute("role")) === "option";
@@ -10249,7 +10453,7 @@ var SelectContent = React21.forwardRef(
       },
       []
     );
-    React21.useEffect(() => {
+    React22.useEffect(() => {
       if (!searchInputRef.current) return;
       const id = requestAnimationFrame(() => {
         var _a5;
@@ -10259,12 +10463,12 @@ var SelectContent = React21.forwardRef(
       });
       return () => cancelAnimationFrame(id);
     }, [searchQuery]);
-    const content = items ? isSectionArray(items) ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: filteredItems.map(
-      (section, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(SelectGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectLabel, { children: section.sectionLabel }),
+    const content = items ? isSectionArray(items) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: filteredItems.map(
+      (section, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SelectGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectLabel, { children: section.sectionLabel }),
         section.items.map((item) => {
           var _a5;
-          return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             SelectItem,
             {
               value: item.value,
@@ -10279,9 +10483,9 @@ var SelectContent = React21.forwardRef(
           );
         })
       ] }, sectionIdx)
-    ) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectGroup, { children: filteredItems.map((item) => {
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectGroup, { children: filteredItems.map((item) => {
       var _a5;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         SelectItem,
         {
           value: item.value,
@@ -10295,13 +10499,13 @@ var SelectContent = React21.forwardRef(
         item.value
       );
     }) }) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ref: sentinelRef, className: "hidden", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { ref: sentinelRef, className: "hidden", "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "div",
         {
           className: cn(!container && "lego-land", !container && themeClass),
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             SelectPrimitive.Content,
             {
               ref,
@@ -10317,14 +10521,14 @@ var SelectContent = React21.forwardRef(
               position,
               ...props,
               children: [
-                showSearch && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                showSearch && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                   "div",
                   {
                     className: SELECT_TOKENS.search.container,
                     style: { paddingLeft: 11, paddingRight: 11 },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.Search, { className: SELECT_TOKENS.search.icon }),
-                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react6.Search, { className: SELECT_TOKENS.search.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                         "input",
                         {
                           ref: searchInputRef,
@@ -10343,7 +10547,7 @@ var SelectContent = React21.forwardRef(
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   SelectPrimitive.Viewport,
                   {
                     ref: viewportRef,
@@ -10360,14 +10564,14 @@ var SelectContent = React21.forwardRef(
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectLabel = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   SelectPrimitive.Label,
   {
     ref,
     className: cn(SELECT_TOKENS.menu.sectionLabel, className),
     ...props,
     style: { ...props.style, paddingLeft: 12, paddingRight: 12 },
-    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Typography,
       {
         as: "span",
@@ -10380,7 +10584,7 @@ var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React21.forwardRef(
+var SelectItem = React22.forwardRef(
   ({
     className,
     children,
@@ -10391,7 +10595,7 @@ var SelectItem = React21.forwardRef(
     trailing,
     "data-testid": dataTestId,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     SelectPrimitive.Item,
     {
       ref,
@@ -10409,8 +10613,8 @@ var SelectItem = React21.forwardRef(
       ...props,
       style: { ...props.style, paddingLeft: 12, paddingRight: 12 },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(SELECT_TOKENS.menu.itemContent.base), children: [
-          leadIcon ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(SELECT_TOKENS.menu.itemContent.base), children: [
+          leadIcon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
               className: cn(
@@ -10420,7 +10624,7 @@ var SelectItem = React21.forwardRef(
               children: leadIcon
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
             "div",
             {
               className: cn(
@@ -10429,20 +10633,20 @@ var SelectItem = React21.forwardRef(
                 "min-w-0 flex-1"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: SELECT_TOKENS.menu.itemText, children }) }),
-                subtext && type === "double" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: SELECT_TOKENS.menu.itemSubtext, children: subtext })
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPrimitive.ItemText, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: SELECT_TOKENS.menu.itemText, children }) }),
+                subtext && type === "double" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: SELECT_TOKENS.menu.itemSubtext, children: subtext })
               ]
             }
           )
         ] }),
-        trailing ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "flex items-center gap-1 shrink-0 ml-2", children: trailing }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SelectPrimitive.ItemIndicator, { className: SELECT_TOKENS.menu.checkIcon.wrap, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react6.Check, { className: SELECT_TOKENS.menu.checkIcon.iconSelected }) })
+        trailing ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex items-center gap-1 shrink-0 ml-2", children: trailing }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectPrimitive.ItemIndicator, { className: SELECT_TOKENS.menu.checkIcon.wrap, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react6.Check, { className: SELECT_TOKENS.menu.checkIcon.iconSelected }) })
       ]
     }
   )
 );
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var SelectSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   SelectPrimitive.Separator,
   {
     ref,
@@ -10456,18 +10660,18 @@ function SelectFormLabel({
   label = "Title",
   mandatory = true
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(SELECT_TOKENS.label.container, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: SELECT_TOKENS.label.text, children: label }),
-    mandatory && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: SELECT_TOKENS.label.asterisk, children: "*" })
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn(SELECT_TOKENS.label.container, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: SELECT_TOKENS.label.text, children: label }),
+    mandatory && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: SELECT_TOKENS.label.asterisk, children: "*" })
   ] });
 }
 // src/select/play-select.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_lucide_react7 = require("lucide-react");
 // src/select/use-play-select.ts
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 function usePlaySelect({
   value,
   defaultValue,
@@ -10476,23 +10680,23 @@ function usePlaySelect({
   onSelectValue,
   onCloseDropdown
 }) {
-  const [internalValue, setInternalValue] = React22.useState(
+  const [internalValue, setInternalValue] = React23.useState(
     defaultValue
   );
-  const [playingUrl, setPlayingUrl] = React22.useState(null);
-  const audioRef = React22.useRef(null);
+  const [playingUrl, setPlayingUrl] = React23.useState(null);
+  const audioRef = React23.useRef(null);
   const currentValue = value !== void 0 ? value : internalValue;
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     if (value === void 0 && defaultValue !== void 0) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, value]);
-  const pauseAudio = React22.useCallback(() => {
+  const pauseAudio = React23.useCallback(() => {
     var _a5;
     (_a5 = audioRef.current) == null ? void 0 : _a5.pause();
     setPlayingUrl(null);
   }, []);
-  const handleValueChange = React22.useCallback(
+  const handleValueChange = React23.useCallback(
     (newValue) => {
       if (value === void 0) {
         setInternalValue(newValue);
@@ -10502,7 +10706,7 @@ function usePlaySelect({
     },
     [value, onValueChange, onSelectValue]
   );
-  const handleOpenChange = React22.useCallback(
+  const handleOpenChange = React23.useCallback(
     (open) => {
       if (!open) {
         pauseAudio();
@@ -10511,7 +10715,7 @@ function usePlaySelect({
     },
     [pauseAudio, onCloseDropdown]
   );
-  const handlePlay = React22.useCallback(
+  const handlePlay = React23.useCallback(
     (url, item) => {
       const audio = audioRef.current;
       if (!audio) return;
@@ -10527,14 +10731,14 @@ function usePlaySelect({
     },
     [playingUrl, onPlayClick]
   );
-  const stopEvent = React22.useCallback(
+  const stopEvent = React23.useCallback(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
     },
     []
   );
-  const createPlayHandler = React22.useCallback(
+  const createPlayHandler = React23.useCallback(
     (item) => (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -10542,7 +10746,7 @@ function usePlaySelect({
     },
     [handlePlay]
   );
-  React22.useEffect(() => {
+  React23.useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const onEnded = () => setPlayingUrl(null);
@@ -10563,8 +10767,8 @@ function usePlaySelect({
 }
 // src/select/play-select.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var PlaySelect = React23.forwardRef(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var PlaySelect = React24.forwardRef(
   ({
     dropdownListItems,
     label = "Title",
@@ -10603,7 +10807,7 @@ var PlaySelect = React23.forwardRef(
       onSelectValue,
       onCloseDropdown
     });
-    const items = React23.useMemo(
+    const items = React24.useMemo(
       () => dropdownListItems.map((item) => {
         const hasPreview = Boolean(item.url);
         const isPlaying = hasPreview && playingUrl === item.url;
@@ -10618,7 +10822,7 @@ var PlaySelect = React23.forwardRef(
           // overflowing a smaller container — otherwise it visually drifts
           // out of vertical center next to the label.
           leadIconSize: "md",
-          leadIcon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          leadIcon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             "button",
             {
               type: "button",
@@ -10632,7 +10836,7 @@ var PlaySelect = React23.forwardRef(
               onMouseDown: stopEvent,
               onClick: stopEvent,
               "aria-label": !hasPreview ? `${item.label} \u2014 no preview available` : isPlaying ? `Pause ${item.label}` : `Play ${item.label}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon2, { className: cn(!isPlaying && "ml-px") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon2, { className: cn(!isPlaying && "ml-px") })
             }
           )
         };
@@ -10642,26 +10846,26 @@ var PlaySelect = React23.forwardRef(
     const selectedItem = dropdownListItems.find((it) => it.value === value);
     const isSelectedPlaying = selectedItem && selectedItem.url && playingUrl === selectedItem.url;
     const TriggerIcon = isSelectedPlaying ? import_lucide_react7.Pause : import_lucide_react7.Play;
-    const resolvedTriggerLeadIcon = triggerLeadIcon != null ? triggerLeadIcon : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    const resolvedTriggerLeadIcon = triggerLeadIcon != null ? triggerLeadIcon : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "span",
       {
         className: cn(
           SELECT_TOKENS.playIconCircle,
           "-translate-y-px text-fg-grey-secondary [&>svg]:fill-current"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TriggerIcon, { className: cn(!isSelectedPlaying && "ml-px") })
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TriggerIcon, { className: cn(!isSelectedPlaying && "ml-px") })
       }
     );
     const defaultTriggerClassName = "!h-8 !rounded-xl !px-3 !py-0 !gap-2";
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       {
         className: cn("flex flex-col gap-2", className),
         style: minWidth ? { minWidth } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("audio", { ref: audioRef, className: "sr-only" }),
-          showLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectFormLabel, { label, mandatory }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("audio", { ref: audioRef, className: "sr-only" }),
+          showLabel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectFormLabel, { label, mandatory }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             Select,
             {
               value,
@@ -10669,7 +10873,7 @@ var PlaySelect = React23.forwardRef(
               onOpenChange: handleOpenChange,
               disabled,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   SelectTrigger,
                   {
                     ref,
@@ -10678,10 +10882,10 @@ var PlaySelect = React23.forwardRef(
                     leadIconSize: "md",
                     size,
                     className: cn(defaultTriggerClassName, triggerClassName),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SelectValue, { placeholder })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectValue, { placeholder })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   SelectContent,
                   {
                     items,
@@ -10701,13 +10905,13 @@ var PlaySelect = React23.forwardRef(
 PlaySelect.displayName = "PlaySelect";
 // src/select/playback-control.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var PlaybackControl = React24.forwardRef(({ state: state2, playing, ...props }, ref) => {
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var PlaybackControl = React25.forwardRef(({ state: state2, playing, ...props }, ref) => {
   const showPause = state2 ? state2 === "pause" : !!playing;
   const Icon2 = showPause ? import_lucide_react8.Pause : import_lucide_react8.Play;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Button,
     {
       ref,
@@ -10718,29 +10922,29 @@ var PlaybackControl = React24.forwardRef(({ state: state2, playing, ...props },
       showLeadingIcon: false,
       showTrailingIcon: false,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon2, { className: cn("size-5", !showPause && "ml-0.5") })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { className: cn("size-5", !showPause && "ml-0.5") })
     }
   );
 });
 PlaybackControl.displayName = "PlaybackControl";
 // src/select/use-select.ts
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 function useSelect({
   value,
   defaultValue,
   onValueChange
 }) {
-  const [internalValue, setInternalValue] = React25.useState(
+  const [internalValue, setInternalValue] = React26.useState(
     defaultValue
   );
   const currentValue = value !== void 0 ? value : internalValue;
-  React25.useEffect(() => {
+  React26.useEffect(() => {
     if (value === void 0 && defaultValue !== void 0) {
       setInternalValue(defaultValue);
     }
   }, [defaultValue, value]);
-  const handleValueChange = React25.useCallback(
+  const handleValueChange = React26.useCallback(
     (newValue) => {
       if (value === void 0) {
         setInternalValue(newValue);
@@ -10757,7 +10961,7 @@ function useSelect({
 }
 // src/empty-state/empty-state.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 // src/empty-state/variables.ts
 var EMPTY_STATE_TOKENS = {
@@ -10780,12 +10984,12 @@ var EMPTY_STATE_TOKENS = {
 };
 // src/empty-state/empty-state.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ILLUSTRATION_SIZE_CLASS = {
   small: EMPTY_STATE_TOKENS.illustrationSmall,
   banner: EMPTY_STATE_TOKENS.illustrationBanner
 };
-var EmptyState = React26.forwardRef(
+var EmptyState = React27.forwardRef(
   ({
     className,
     illustration,
@@ -10804,7 +11008,7 @@ var EmptyState = React26.forwardRef(
       width: illustrationWidth != null ? typeof illustrationWidth === "number" ? `${illustrationWidth}px` : illustrationWidth : void 0,
       height: illustrationHeight != null ? typeof illustrationHeight === "number" ? `${illustrationHeight}px` : illustrationHeight : void 0
     } : void 0;
-    const illustrationWrapper = illustration ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    const illustrationWrapper = illustration ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: cn(
@@ -10815,26 +11019,26 @@ var EmptyState = React26.forwardRef(
         children: illustration
       }
     ) : null;
-    const textBlock = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: EMPTY_STATE_TOKENS.textWrap, children: [
-      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: EMPTY_STATE_TOKENS.title, children: title }) : title,
-      description != null && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: EMPTY_STATE_TOKENS.description, children: description }) : description)
+    const textBlock = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: EMPTY_STATE_TOKENS.textWrap, children: [
+      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: EMPTY_STATE_TOKENS.title, children: title }) : title,
+      description != null && (typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: EMPTY_STATE_TOKENS.description, children: description }) : description)
     ] });
     const actionsArray = action == null ? [] : Array.isArray(action) ? action : [action];
-    const actionsEl = actionsArray.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: EMPTY_STATE_TOKENS.actions, children: actionsArray.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(React26.Fragment, { children: a }, i)) }) : null;
-    const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    const actionsEl = actionsArray.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: EMPTY_STATE_TOKENS.actions, children: actionsArray.map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(React27.Fragment, { children: a }, i)) }) : null;
+    const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
       illustrationPosition === "top" && illustrationWrapper,
       textBlock,
       actionsEl,
       illustrationPosition === "bottom" && illustrationWrapper
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         ref,
         className: cn(EMPTY_STATE_TOKENS.container, className),
         "data-testid": dataTestId != null ? dataTestId : "empty-state",
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: EMPTY_STATE_TOKENS.content, children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: EMPTY_STATE_TOKENS.content, children: content })
       }
     );
   }
@@ -10842,7 +11046,7 @@ var EmptyState = React26.forwardRef(
 EmptyState.displayName = "EmptyState";
 // src/list-card/list-card.tsx
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 // src/list-card/variables.ts
 var LIST_TOKENS = {
@@ -10881,8 +11085,8 @@ var LIST_TOKENS = {
 };
 // src/list-card/list-card.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var List = React27.forwardRef(
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var List = React28.forwardRef(
   ({
     type = "card",
     variant = "default",
@@ -10894,7 +11098,7 @@ var List = React27.forwardRef(
     ...props
   }, ref) => {
     const list_border_radius = list_border_radiusProp != null ? list_border_radiusProp : type === "card" ? "rounded" : "soft";
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref,
@@ -10918,7 +11122,7 @@ var List = React27.forwardRef(
 List.displayName = "List";
 // src/surface/surface.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 // src/surface/variables.ts
 var SURFACE_TOKENS = {
@@ -10939,7 +11143,7 @@ var SURFACE_TOKENS = {
 };
 // src/surface/surface.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var GRADIENT_ANGLE = {
   top: "180deg",
   bottom: "0deg",
@@ -10953,7 +11157,7 @@ function buildGradient({
 }) {
   return `linear-gradient(${GRADIENT_ANGLE[position]}, ${color} 0%, white ${coverage})`;
 }
-var Surface = React28.forwardRef(
+var Surface = React29.forwardRef(
   ({
     background = "white",
     padded = true,
@@ -10964,7 +11168,7 @@ var Surface = React28.forwardRef(
     ...props
   }, ref) => {
     const mergedStyle = gradient ? { background: buildGradient(gradient), ...style } : style;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         ref,
@@ -10982,17 +11186,17 @@ var Surface = React28.forwardRef(
   }
 );
 Surface.displayName = "Surface";
-var SurfaceHeader = React28.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn(SURFACE_TOKENS.header, className), ...props, children }));
+var SurfaceHeader = React29.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn(SURFACE_TOKENS.header, className), ...props, children }));
 SurfaceHeader.displayName = "SurfaceHeader";
-var SurfaceBody = React28.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn(SURFACE_TOKENS.body, className), ...props, children })
+var SurfaceBody = React29.forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn(SURFACE_TOKENS.body, className), ...props, children })
 );
 SurfaceBody.displayName = "SurfaceBody";
-var SurfaceFooter = React28.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn(SURFACE_TOKENS.footer, className), ...props, children }));
+var SurfaceFooter = React29.forwardRef(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn(SURFACE_TOKENS.footer, className), ...props, children }));
 SurfaceFooter.displayName = "SurfaceFooter";
 // src/side-panel/side-panel.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 // src/side-panel/variables.ts
 var SIDE_PANEL_TOKENS = {
@@ -11012,10 +11216,10 @@ var SIDE_PANEL_TOKENS = {
 };
 // src/side-panel/side-panel.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var SidePanel = React29.forwardRef(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SidePanel = React30.forwardRef(
   ({ size = "sm", side = "right", className, children, "data-testid": dataTestId, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         ref,
@@ -11034,89 +11238,6 @@ var SidePanel = React29.forwardRef(
 );
 SidePanel.displayName = "SidePanel";
-// src/tooltip/tooltip.tsx
-var React30 = __toESM(require("react"));
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-// src/tooltip/variables.ts
-var TOOLTIP_TOKENS = {
-  content: {
-    base: "z-50 overflow-hidden rounded-xl px-2 py-2 text-xs leading-4 font-normal",
-    bg: "bg-token-brand-primary text-fg-white"
-  },
-  arrow: "fill-primary",
-  shortcut: {
-    base: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs leading-4 font-normal",
-    bg: "bg-token-grey",
-    text: "text-fg-grey-secondary"
-  }
-};
-// src/tooltip/tooltip.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var useTooltipContainer = (anchorRef) => {
-  const [container, setContainer] = React30.useState(
-    void 0
-  );
-  React30.useEffect(() => {
-    var _a5;
-    if (typeof document === "undefined") return;
-    const anchor = anchorRef.current;
-    const el = (_a5 = anchor == null ? void 0 : anchor.closest(".lego-land")) != null ? _a5 : document.querySelector(".lego-land");
-    setContainer(el != null ? el : void 0);
-  }, [anchorRef]);
-  return container;
-};
-var TooltipProvider = TooltipPrimitive.Provider;
-var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React30.forwardRef(({ className, sideOffset = 6, shortcut, children, ...props }, ref) => {
-  const anchorRef = React30.useRef(null);
-  const container = useTooltipContainer(anchorRef);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-    TooltipPrimitive.Content,
-    {
-      ref,
-      sideOffset,
-      className: cn(
-        TOOLTIP_TOKENS.content.base,
-        TOOLTIP_TOKENS.content.bg,
-        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center", children: [
-          children,
-          shortcut && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            "span",
-            {
-              className: cn(
-                TOOLTIP_TOKENS.shortcut.base,
-                TOOLTIP_TOKENS.shortcut.bg,
-                TOOLTIP_TOKENS.shortcut.text
-              ),
-              children: shortcut
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          TooltipPrimitive.Arrow,
-          {
-            className: TOOLTIP_TOKENS.arrow,
-            style: { fill: "hsl(var(--bg-brand-primary))" }
-          }
-        )
-      ]
-    }
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { ref: anchorRef, style: { display: "none" } }),
-    container ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipPrimitive.Portal, { container, children: content }) : content
-  ] });
-});
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 // src/dialog/dialog.tsx
 var React31 = __toESM(require("react"));
 var import_lucide_react9 = require("lucide-react");
@@ -15125,9 +15246,16 @@ function CompoundFilterSelect({
   leftLabel,
   children,
   disabled = false,
+  inputValue,
+  onInputValueChange,
+  inputPlaceholder,
+  inputType = "text",
+  inputWidth = 220,
+  "data-testid-input": dataTestIdInput,
   className,
   ...props
 }) {
+  const useInputMode = inputValue !== void 0;
   const { theme } = useTheme();
   const themeClass = theme === "dark" ? "dark" : "light";
   const [open, setOpen] = React40.useState(false);
@@ -15144,7 +15272,13 @@ function CompoundFilterSelect({
     "div",
     {
       className: cn(
-        "inline-flex items-start pr-px font-sans",
+        // `group/compound` lets the left pill react to focus anywhere inside
+        // the compound — when the user clicks into the built-in input mode's
+        // <input> (or any focusable child in the children path), `:focus-within`
+        // fires on this wrapper, and the left pill flips to `border-token-brand`
+        // alongside the right input. Without this, only the focused side
+        // looked active and the merged pill read as half-active.
+        "group/compound inline-flex items-start pr-px font-sans",
         disabled && "opacity-60 pointer-events-none",
         className
       ),
@@ -15163,6 +15297,11 @@ function CompoundFilterSelect({
                 "outline-none transition-colors cursor-pointer",
                 "hover:bg-interaction-hov-opacity-primary",
                 "active:bg-interaction-pressed-opacity-primary",
+                // Paint brand-blue when focus lives anywhere in the compound
+                // (e.g. the user is typing in the built-in input). Pair with
+                // `z-10` so the merged border stays continuous with the right
+                // pill's own focused state.
+                "group-focus-within/compound:border-token-brand group-focus-within/compound:z-10",
                 "data-[state=open]:border-token-brand data-[state=open]:z-10",
                 "disabled:opacity-50 disabled:pointer-events-none",
                 "relative"
@@ -15239,7 +15378,27 @@ function CompoundFilterSelect({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        useInputMode ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          "input",
+          {
+            type: inputType,
+            value: inputValue,
+            onChange: (e) => onInputValueChange == null ? void 0 : onInputValueChange(e.target.value),
+            placeholder: inputPlaceholder,
+            disabled,
+            "data-testid": dataTestIdInput,
+            style: { width: typeof inputWidth === "number" ? `${inputWidth}px` : inputWidth },
+            className: cn(
+              "border border-solid border-token-light bg-token-white",
+              "rounded-r-[16px] shrink-0",
+              "px-3 py-2 outline-none transition-colors",
+              "font-sans text-xs font-normal leading-4 text-fg-black",
+              "placeholder:text-fg-placeholder",
+              "focus:border-token-brand focus:z-10",
+              "disabled:opacity-50 disabled:pointer-events-none"
+            )
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "div",
           {
             className: cn(
@@ -17139,15 +17298,27 @@ var Popover = React46.forwardRef(
       };
       const onScroll = (e) => {
         var _a6;
-        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(e.target)) return;
+        const target = e.target;
+        if ((_a6 = popoverRef.current) == null ? void 0 : _a6.contains(target)) return;
+        if (target && typeof target.closest === "function" && target.closest(
+          '[data-lego-popover][data-state="open"], [data-radix-popper-content-wrapper]'
+        )) {
+          return;
+        }
         update();
       };
       update();
       window.addEventListener("resize", update);
       window.addEventListener("scroll", onScroll, true);
+      let ro;
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => update());
+        ro.observe(p);
+      }
       return () => {
         window.removeEventListener("resize", update);
         window.removeEventListener("scroll", onScroll, true);
+        ro == null ? void 0 : ro.disconnect();
       };
     }, [open, side, align, sideOffset]);
     React46.useEffect(() => {
@@ -17674,6 +17845,10 @@ var TimeRangeInput = React49.forwardRef(
     const parsed = React49.useMemo(() => parse24To12(value), [value]);
     const [hour, setHour] = React49.useState(parsed.hour);
     const [minute, setMinute] = React49.useState(parsed.minute);
+    const hourValueRef = React49.useRef(hour);
+    const minuteValueRef = React49.useRef(minute);
+    hourValueRef.current = hour;
+    minuteValueRef.current = minute;
     React49.useEffect(() => {
       setHour(parsed.hour);
       setMinute(parsed.minute);
@@ -17683,8 +17858,8 @@ var TimeRangeInput = React49.forwardRef(
     const commit = (next) => {
       var _a5, _b5, _c;
       const merged = {
-        hour: (_a5 = next.hour) != null ? _a5 : hour,
-        minute: (_b5 = next.minute) != null ? _b5 : minute,
+        hour: (_a5 = next.hour) != null ? _a5 : hourValueRef.current,
+        minute: (_b5 = next.minute) != null ? _b5 : minuteValueRef.current,
         period: (_c = next.period) != null ? _c : parsed.period
       };
       onChange(format12To24(merged));
@@ -17693,26 +17868,32 @@ var TimeRangeInput = React49.forwardRef(
       var _a5;
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setHour(digits);
+      hourValueRef.current = digits;
       const n = Number.parseInt(digits) || 0;
       if (digits.length === 2 && n >= 1 && n <= 12) {
         (_a5 = minuteRef.current) == null ? void 0 : _a5.focus();
       }
     };
     const handleHourBlur = () => {
-      const n = Number.parseInt(hour);
-      const clamped = !hour || n < 1 || n > 12 ? "12" : String(n);
+      const current = hourValueRef.current;
+      const n = Number.parseInt(current);
+      const clamped = !current || n < 1 || n > 12 ? "12" : String(n);
       setHour(clamped);
-      commit({ hour: clamped, minute: minute.padStart(2, "0") });
+      hourValueRef.current = clamped;
+      commit({ hour: clamped, minute: minuteValueRef.current.padStart(2, "0") });
     };
     const handleMinuteChange = (raw) => {
       const digits = raw.replace(/\D/g, "").slice(0, 2);
       setMinute(digits);
+      minuteValueRef.current = digits;
     };
     const handleMinuteBlur = () => {
-      const n = Number.parseInt(minute) || 0;
+      const current = minuteValueRef.current;
+      const n = Number.parseInt(current) || 0;
       const clamped = n > 59 ? "00" : String(n).padStart(2, "0");
       setMinute(clamped);
-      commit({ hour, minute: clamped });
+      minuteValueRef.current = clamped;
+      commit({ hour: hourValueRef.current, minute: clamped });
     };
     const handlePeriodChange = (next) => {
       if (next === "AM" || next === "PM") commit({ period: next });
@@ -19357,6 +19538,7 @@ RuleBuilderAddCondition.displayName = "RuleBuilderAddCondition";
   ChatBubbleUser,
   Checkbox,
   Chip,
+  CircularBadge,
   ColumnWidth,
   CompoundFilterSelect,
   DEFAULT_DATE_PRESETS,