@nurix/ui-component-library 1.1.4-stage.115 → 1.1.4-stage.117

package/dist/index.js

@@ -7306,13 +7306,14 @@ var INPUT_TOKENS = {
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
   // Base border + focus-within treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldOverlay) to avoid layout shift.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
+  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
+  // a static surface; only focus changes the border colour).
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
   fieldBaseBorderless: "border border-transparent focus-within:border-token-brand disabled:pointer-events-none [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Leading/trailing icon slots (Figma: 16px, text-fg-grey-secondary)
   slotIcon: "shrink-0 size-4 [&>svg]:size-4 text-fg-grey-secondary",
@@ -8072,14 +8073,25 @@ var NAVIGATION_TOKENS = {
     // Shared base — focus ring uses design system pattern.
     base: "inline-flex items-center cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline outline-token-brand focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
     // ----- Page Top Tab -----
-    // Figma 5229:66149 — px-12 py-8, rounded-12, 1.5px underline when selected.
-    // Same padding across states to prevent layout shift on selection.
+    // Figma 5229:66149 — px-12 py-8, rounded-12 (all corners), 1.5px
+    // underline rendered just outside the rounded pill. Same padding
+    // across states to prevent layout shift on selection. The pill itself
+    // does NOT visually merge with the underline; the underline sits
+    // below the pill as a separate horizontal bar that is brand-coloured
+    // for selected, 5% black on hover-unselected, and transparent at rest.
     topBase: "justify-center gap-2 px-3 py-2 rounded-xl relative",
     topBaseSelected: "justify-center gap-2 px-3 py-2 rounded-xl relative",
-    topLabelSelected: "text-base font-semibold leading-6 text-fg-brand",
-    topLabelUnselected: "text-base font-semibold leading-6 text-fg-grey-primary",
-    // 1.5px brand underline (selected).
-    topHighlight: "pointer-events-none absolute bottom-0 left-0 right-0 h-[1.5px] rounded-sm bg-token-brand-primary",
+    topLabelSelected: "text-base font-semibold leading-6 text-fg-brand shrink-0",
+    topLabelUnselected: "text-base font-semibold leading-6 text-fg-grey-primary shrink-0",
+    // 1.5px underline anchored ~6px BELOW the rounded pill (Figma 5229:66149
+    // places the bar at `top-[46px]` for a 40px pill — a 6px breathing gap
+    // between pill bottom and bar). Coloured per state via the *Selected /
+    // *Hover / *Default modifiers.
+    topHighlight: "pointer-events-none absolute -bottom-1.5 left-0 right-0 h-[1.5px] rounded-sm transition-colors",
+    topHighlightSelected: "bg-token-brand-primary",
+    // Faint 5% black bar on hover of unselected — matches Figma 5229:66155.
+    topHighlightHover: "bg-transparent group-hover/tab:bg-interaction-hov-opacity-primary",
+    topHighlightDefault: "bg-transparent",
     // Interaction layers specific to top tab.
     topHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     topHoverSelected: "hover:bg-interaction-hov-solid-primary",
@@ -8090,8 +8102,8 @@ var NAVIGATION_TOKENS = {
     // Reserved 1.5px transparent border prevents layout shift on selection.
     sideBase: "w-full justify-start gap-2 px-2.5 py-2 rounded-full border-[1.5px] border-transparent",
     sideSelected: "bg-token-white border-token-xlight shadow-sm",
-    sideLabelSelected: "text-sm font-semibold leading-5 text-fg-black",
-    sideLabelUnselected: "text-sm font-semibold leading-5 text-fg-grey-secondary",
+    sideLabelSelected: "text-sm font-semibold leading-5 text-fg-black truncate text-left",
+    sideLabelUnselected: "text-sm font-semibold leading-5 text-fg-grey-secondary truncate text-left",
     sideHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     sideHoverSelected: "hover:bg-interaction-hov-solid-primary",
     sidePressedUnselected: "active:bg-interaction-pressed-solid",
@@ -8100,8 +8112,8 @@ var NAVIGATION_TOKENS = {
     // Figma: brand-secondary bg for active, xs/medium label.
     sectionBase: "w-full justify-start gap-2 px-2.5 py-2 rounded-full",
     sectionSelected: "bg-token-brand-secondary",
-    sectionLabelSelected: "text-xs font-medium leading-4 text-fg-brand",
-    sectionLabelUnselected: "text-xs font-medium leading-4 text-fg-grey-secondary",
+    sectionLabelSelected: "text-xs font-medium leading-4 text-fg-brand truncate text-left",
+    sectionLabelUnselected: "text-xs font-medium leading-4 text-fg-grey-secondary truncate text-left",
     sectionHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     sectionHoverSelected: "hover:bg-interaction-hov-solid-primary",
     sectionPressedUnselected: "active:bg-interaction-pressed-solid",
@@ -8116,7 +8128,7 @@ var NAVIGATION_TOKENS = {
     // narrow pill, the longer labels clipped past their neighbours).
     groupSide: "flex w-full flex-col items-stretch gap-1",
     groupSection: "flex w-full flex-col items-stretch gap-1",
-    labelBase: "shrink-0"
+    labelBase: "min-w-0"
   },
   // --- ListNavigation ---
   listNav: {
@@ -8269,6 +8281,7 @@ var TabsTrigger = React12.forwardRef(
           selected ? selectedClass : NAVIGATION_TOKENS.tab.unselected,
           hoverClass,
           pressedClass,
+          v2 === "top" && "group/tab",
           className
         ),
         disabled,
@@ -8279,7 +8292,16 @@ var TabsTrigger = React12.forwardRef(
         children: [
           iconLeft ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.iconWrap, iconColor), children: iconLeft }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(NAVIGATION_TOKENS.tab.labelBase, labelClass), children }),
-          v2 === "top" && selected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: NAVIGATION_TOKENS.tab.topHighlight })
+          v2 === "top" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "span",
+            {
+              className: cn(
+                NAVIGATION_TOKENS.tab.topHighlight,
+                selected ? NAVIGATION_TOKENS.tab.topHighlightSelected : NAVIGATION_TOKENS.tab.topHighlightHover
+              ),
+              "aria-hidden": "true"
+            }
+          )
         ]
       }
     );
@@ -10705,13 +10727,13 @@ var import_lucide_react10 = require("lucide-react");
 // src/toast/variables.ts
 var TOAST_TOKENS = {
   // Outer container — Figma: bg-white, border-light, rounded-16, min-w-400, max-w-800
-  root: "relative bg-token-white border border-token-light rounded-[16px] overflow-hidden flex flex-col items-start min-w-[400px] max-w-[800px]",
+  root: "relative bg-token-white border border-token-light rounded-[16px] overflow-hidden flex flex-col items-start min-w-[320px] max-w-[600px]",
   // Inner content row — Figma: px-16 py-12, gap-12, items-center, full width
   innerRow: "flex gap-3 items-center px-4 py-3 w-full",
   icon: {
-    success: "text-fg-success shrink-0 [&>svg]:size-4",
-    error: "text-fg-destructive shrink-0 [&>svg]:size-4",
-    default: "text-fg-black shrink-0 [&>svg]:size-4"
+    success: "text-fg-success shrink-0 size-4",
+    error: "text-fg-destructive shrink-0 size-4",
+    default: "text-fg-black shrink-0 size-4"
   },
   // Title + subtext column — Figma: flex-1, flex-col, gap-0
   content: "flex flex-col flex-1 min-w-0",
@@ -10749,7 +10771,7 @@ var Toaster = ({
   import_sonner.Toaster,
   {
     position,
-    toastOptions: { unstyled: true, classNames: { toast: "w-[600px]" } },
+    toastOptions: { unstyled: true, classNames: { toast: "w-fit" } },
     ...props
   }
 );
@@ -11446,7 +11468,24 @@ var TABLE_TOKENS = {
    *  element itself and stays visible through the scroll.
    *  A second outer shadow extends to the right so users can tell the column
    *  is pinned even when the bordering unpinned column is visually similar. */
-  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-xlight)),6px_0_8px_-4px_rgba(0,0,0,0.08)]",
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • `inset` shadow draws a 1px hairline at the cell's right edge.
+  //   • `before:` pseudo paints the elevation gradient INSIDE the cell at
+  //     its right edge. CSS `border-collapse: collapse` plus the cell's
+  //     own `overflow-hidden` (needed for text truncation) blocks an
+  //     outer drop-shadow from rendering, so we simulate the shadow with
+  //     an absolutely-positioned gradient that fades from transparent to
+  //     ~10% black across the last 8px of the cell. The pinned column
+  //     reads as elevated above the scrolling content beside it without
+  //     us having to drop overflow-hidden everywhere.
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • Inset 1px hairline (border-light) so the column always has a clear
+  //     boundary line.
+  //   • Outer drop-shadow extending right INTO the unpinned area below it.
+  //     Using strong x-offset / -spread so the shadow only paints to the
+  //     right (not on top/bottom). Sticky cell sits at z-20, unpinned cells
+  //     at z-0, so the shadow is always painted above the scrolling content.
+  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-light)),12px_0_12px_-8px_rgba(0,0,0,0.18)]",
   // ── Checkbox column — Figma: w-40, px-12 py-8
   checkboxCell: "w-10 px-3 py-2",
   // ── Actions column ──
@@ -12038,8 +12077,10 @@ var FILTER_SELECT_TOKENS = {
     // Disabled
     disabled: "disabled:opacity-50 disabled:pointer-events-none"
   },
-  // Left icon — Figma: icon/black, 16px
-  icon: "shrink-0 size-4 text-fg-black",
+  // Left icon — Figma: icon/black, 16px. Force `stroke-width: 1.5` on inner
+  // SVG so lucide icons (which default to 2) read at the same visual weight
+  // as the lighter HugeiconsIcon strokes used elsewhere in the bar.
+  icon: "shrink-0 size-4 text-fg-black [&]:[stroke-width:1.5]",
   // Label — Label/sm: Nunito medium 12/16 black.
   // The "Without Label" variant (used as right pill inside CompoundFilterSelect — Figma
   // 5427:32334) shows the selected value as the label itself in text/brand, Subtext/xs
@@ -12067,7 +12108,7 @@ var FILTER_SELECT_TOKENS = {
       // Symmetric 4px padding on all sides — prevents the extra whitespace
       // below the last list item / footer that used to come from `pb-2`.
       "p-1 rounded-[16px] shadow-sm",
-      "min-w-[196px] font-sans",
+      "min-w-[196px] min-h-[144px] font-sans",
       "outline-none"
     ].join(" "),
     // Date dropdown — tight 4px padding on all sides so the calendar / presets
@@ -12271,8 +12312,10 @@ var FILTER_SELECT_TOKENS = {
       "w-full resize-none",
       "min-h-[114px] px-2 py-1",
       "rounded-[12px] bg-token-white",
-      // Figma shows brand/primary border on the focused textarea. Reserve 1px.
-      "border border-solid border-token-brand",
+      // Reserve 1px border so focus state doesn't shift layout. The brand
+      // colour only paints while the textarea actually has focus.
+      "border border-solid border-token-light",
+      "focus:border-token-brand",
       "font-sans text-xs font-normal leading-4 text-fg-black",
       "placeholder:text-fg-placeholder",
       "outline-none transition-colors"
@@ -12289,10 +12332,11 @@ var FILTER_SELECT_TOKENS = {
       "focus-within:border-token-brand"
     ].join(" "),
     // Compact variant — used by the duration filter so the dropdown doesn't
-    // stretch edge-to-edge. Matches Figma numeric field for duration (~96px).
+    // stretch edge-to-edge. Sized to roughly match a single field of the
+    // range layout so single/range modes feel visually consistent.
     wrapperCompact: [
       "flex items-center gap-2",
-      "w-24 px-3 h-8 min-h-[32px]",
+      "w-[88px] px-3 h-8 min-h-[32px]",
       "rounded-[12px] bg-token-white",
       "border border-solid border-token-light",
       "transition-colors",
@@ -12947,8 +12991,9 @@ var CalendarMonthCaption = ({
       onDateChange == null ? void 0 : onDateChange({ start: date == null ? void 0 : date.start, end: d });
     }
   };
+  const phantomSlotClass = "size-8 shrink-0";
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-1 w-full px-0 py-1", children: [
-    isFirst && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isFirst ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -12958,8 +13003,8 @@ var CalendarMonthCaption = ({
         disabled: !previousMonth,
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronLeft, { className: "size-4" })
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-start", children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: phantomSlotClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MonthSelectPill,
         {
@@ -12991,7 +13036,7 @@ var CalendarMonthCaption = ({
         }
       )
     ] }),
-    isLast && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    isLast ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -13001,7 +13046,7 @@ var CalendarMonthCaption = ({
         disabled: !nextMonth,
         children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronRight, { className: "size-4" })
       }
-    )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: phantomSlotClass, "aria-hidden": "true" })
   ] });
 };
 var DEFAULT_DURATION_UNITS = [
@@ -13066,7 +13111,20 @@ var FilterSelect = React37.forwardRef(
     const open = controlledOpen != null ? controlledOpen : internalOpen;
     const [searchQuery, setSearchQuery] = React37.useState("");
     const triggerRef = React37.useRef(null);
+    const searchInputRef = React37.useRef(null);
+    const numericInputRef = React37.useRef(null);
+    const rangeMinInputRef = React37.useRef(null);
     const [triggerWidth, setTriggerWidth] = React37.useState(null);
+    const focusActiveBodyInput = React37.useCallback(() => {
+      requestAnimationFrame(() => {
+        var _a5, _b5;
+        if (isRangeMode) {
+          (_a5 = rangeMinInputRef.current) == null ? void 0 : _a5.focus();
+        } else {
+          (_b5 = numericInputRef.current) == null ? void 0 : _b5.focus();
+        }
+      });
+    }, [isRangeMode]);
     const [focusedMonth, setFocusedMonth] = React37.useState(
       () => {
         var _a5;
@@ -13393,8 +13451,13 @@ var FilterSelect = React37.forwardRef(
       setDraggedValue(null);
       setDragOverValue(null);
     }, []);
-    const isCompactBody = type === "duration" || type === "numeric_with_operands" && !isRangeMode;
-    const bodyMinWidth = isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const isCompactBody = type === "duration";
+    const supportsRangeOperand = type === "numeric_with_operands" && operands.some(
+      (op) => op.value === "Is between" || op.label === "Is between" || /between/i.test(op.value) || /between/i.test(op.label)
+    );
+    const numericWithOperandsWidth = 224;
+    const bodyMinWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const bodyMaxWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : void 0;
     const renderFooterClear = (onClick, labelText, ariaLabel) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
@@ -13521,7 +13584,7 @@ var FilterSelect = React37.forwardRef(
                 maxHeight: type === "date" ? void 0 : dropdownMaxHeight,
                 minHeight: loading ? dropdownMaxHeight : void 0,
                 minWidth: bodyMinWidth,
-                maxWidth: type === "date" ? void 0 : void 0
+                maxWidth: bodyMaxWidth
               },
               side: "bottom",
               align: "start",
@@ -13551,7 +13614,7 @@ var FilterSelect = React37.forwardRef(
                     autoFocus: true
                   }
                 ) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
               ] }) : type === "text_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -13576,7 +13639,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   handleTextClear,
                   footerActionLabel,
                   `${footerActionLabel} filter`
@@ -13596,25 +13659,29 @@ var FilterSelect = React37.forwardRef(
                   ),
                   unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
               ] }) : type === "numeric_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
-                      onChange: (v2) => onOperandChange == null ? void 0 : onOperandChange(v2),
+                      onChange: (v2) => {
+                        onOperandChange == null ? void 0 : onOperandChange(v2);
+                        focusActiveBodyInput();
+                      },
                       options: operands,
                       placeholder: operandPlaceholder,
                       container,
                       themeClass
                     }
                   ),
-                  isRangeMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                  isRangeMode ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         {
+                          ref: rangeMinInputRef,
                           type: "text",
                           inputMode: "numeric",
                           pattern: "[0-9]*",
@@ -13638,7 +13705,7 @@ var FilterSelect = React37.forwardRef(
                       )
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         {
@@ -13668,6 +13735,7 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
+                        ref: numericInputRef,
                         type: "number",
                         value: text != null ? text : "",
                         onChange: (e) => onTextChange == null ? void 0 : onTextChange(e.target.value),
@@ -13679,7 +13747,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onOperandChange == null ? void 0 : onOperandChange("");
@@ -13735,7 +13803,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onRangeMinChange == null ? void 0 : onRangeMinChange("");
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
@@ -13769,7 +13837,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onDurationUnitChange == null ? void 0 : onDurationUnitChange("");
@@ -13812,7 +13880,7 @@ var FilterSelect = React37.forwardRef(
                             preset.value
                           );
                         }) }),
-                        (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                        showClearBtn && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           "div",
                           {
                             className: FILTER_SELECT_TOKENS.datePresetSidebarAction.wrapper,
@@ -13895,7 +13963,7 @@ var FilterSelect = React37.forwardRef(
                                 // inside our custom MonthCaption on the outer edges.
                                 Nav: () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {})
                               },
-                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px]"
+                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px] [&_.rdp-months]:gap-3"
                             }
                           )
                         }
@@ -13903,7 +13971,7 @@ var FilterSelect = React37.forwardRef(
                     ]
                   }
                 ),
-                datePresets === false && (showClearBtn || hasContentToClear) && renderFooterClear(
+                datePresets === false && showClearBtn && renderFooterClear(
                   handleDateClear,
                   footerActionLabel,
                   `${footerActionLabel} date range`
@@ -13918,11 +13986,13 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
+                        ref: searchInputRef,
                         type: "text",
                         value: searchQuery,
                         onChange: (e) => setSearchQuery(e.target.value),
                         placeholder: searchPlaceholder || "Search...",
                         "aria-label": "Search options",
+                        autoFocus: true,
                         className: FILTER_SELECT_TOKENS.searchBar.input
                       }
                     ),
@@ -13999,7 +14069,7 @@ var FilterSelect = React37.forwardRef(
                       String(item.value)
                     );
                   }) }),
-                  showClearBtn && selectedItems.length > 0 && renderFooterClear(
+                  showClearBtn && renderFooterClear(
                     handleClearAll,
                     footerActionLabel,
                     `${footerActionLabel} all selected items`
@@ -14156,8 +14226,12 @@ function CompoundFilterSelect({
               // Force children's rounded corners to be right-only and remove left border to overlap
               "[&>*]:!rounded-none [&>*]:!rounded-r-[16px]",
               "[&_button[data-state]]:!rounded-none [&_button[data-state]]:!rounded-r-[16px]",
-              // Paint the FilterSelect label in brand blue, regular weight (Figma 5427:32334).
-              "[&_[data-filter-label]]:!text-fg-brand",
+              // Paint the FilterSelect label in brand blue when it carries a value
+              // (Figma 5427:32334). When the right pill is empty / showing a
+              // placeholder, render the label in placeholder grey instead so it
+              // reads as a hint rather than a real selection.
+              "[&_button[data-has-value]_[data-filter-label]]:!text-fg-brand",
+              "[&_button:not([data-has-value])_[data-filter-label]]:!text-fg-placeholder",
               "[&_[data-filter-label]]:!font-normal",
               // In a compound pill, the right-side label IS the value — there is no
               // separate label/value split to divide. Hide the internal separator
@@ -15729,8 +15803,10 @@ var CHAT_BUBBLE_TOKENS = {
     timestampRow: "flex items-center justify-end gap-2 pr-5"
   },
   user: {
-    // Row: avatar first, then text (no bubble).
-    row: "flex items-end gap-1 w-full",
+    // Row: avatar first, then text (no bubble). `pr-5` mirrors the
+    // 16px avatar + 4px gap on the left so message text doesn't run flush
+    // to the container's right edge.
+    row: "flex items-end gap-1 w-full pr-5",
     // 16px grey circle holding the user icon.
     avatar: "shrink-0 size-4 rounded-full bg-token-grey flex items-center justify-center text-fg-grey-secondary [&>svg]:size-3",
     // Message text — per Figma: 14px regular, grey-secondary.
@@ -16100,7 +16176,6 @@ var Popover = React44.forwardRef(
         {
           ref: triggerRef,
           onClick: () => setOpen(!open),
-          className: "inline-block",
           children: trigger
         }
       ),

package/dist/index.mjs

@@ -7202,13 +7202,14 @@ var INPUT_TOKENS = {
   // border at rest. Focus reveals the brand border. No hover/pressed overlay.
   fieldBgBorderless: "bg-transparent",
   // Base border + focus-within treatment.
-  // Hover/pressed are painted via a pseudo-element overlay (see fieldOverlay) to avoid layout shift.
-  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none before:pointer-events-none before:absolute before:inset-0 before:content-[''] before:[border-radius:inherit] before:transition-colors before:bg-transparent hover:before:bg-interaction-hov-opacity-primary active:before:bg-interaction-pressed-opacity-primary [&>*]:relative [&>*]:z-10",
+  // Inputs do NOT paint a fill on hover (matches Figma — the field reads as
+  // a static surface; only focus changes the border colour).
+  fieldBase: "border border-token-input focus-within:border-token-brand disabled:pointer-events-none transition-colors",
   // Borderless base — transparent resting border, brand border only on focus.
   // No hover/pressed overlay (these cells sit inside a larger interactive row).
   // Layout-shift safe: border width stays 1px across states (color-only swap).
   fieldBaseBorderless: "border border-transparent focus-within:border-token-brand disabled:pointer-events-none [&>*]:relative [&>*]:z-10",
-  fieldDisabled: "border-token-xlight hover:before:bg-transparent active:before:bg-transparent",
+  fieldDisabled: "border-token-xlight",
   fieldInvalid: "border-token-destructive focus-within:border-token-destructive",
   // Leading/trailing icon slots (Figma: 16px, text-fg-grey-secondary)
   slotIcon: "shrink-0 size-4 [&>svg]:size-4 text-fg-grey-secondary",
@@ -7968,14 +7969,25 @@ var NAVIGATION_TOKENS = {
     // Shared base — focus ring uses design system pattern.
     base: "inline-flex items-center cursor-pointer transition-colors focus-visible:outline-2 focus-visible:outline outline-token-brand focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
     // ----- Page Top Tab -----
-    // Figma 5229:66149 — px-12 py-8, rounded-12, 1.5px underline when selected.
-    // Same padding across states to prevent layout shift on selection.
+    // Figma 5229:66149 — px-12 py-8, rounded-12 (all corners), 1.5px
+    // underline rendered just outside the rounded pill. Same padding
+    // across states to prevent layout shift on selection. The pill itself
+    // does NOT visually merge with the underline; the underline sits
+    // below the pill as a separate horizontal bar that is brand-coloured
+    // for selected, 5% black on hover-unselected, and transparent at rest.
     topBase: "justify-center gap-2 px-3 py-2 rounded-xl relative",
     topBaseSelected: "justify-center gap-2 px-3 py-2 rounded-xl relative",
-    topLabelSelected: "text-base font-semibold leading-6 text-fg-brand",
-    topLabelUnselected: "text-base font-semibold leading-6 text-fg-grey-primary",
-    // 1.5px brand underline (selected).
-    topHighlight: "pointer-events-none absolute bottom-0 left-0 right-0 h-[1.5px] rounded-sm bg-token-brand-primary",
+    topLabelSelected: "text-base font-semibold leading-6 text-fg-brand shrink-0",
+    topLabelUnselected: "text-base font-semibold leading-6 text-fg-grey-primary shrink-0",
+    // 1.5px underline anchored ~6px BELOW the rounded pill (Figma 5229:66149
+    // places the bar at `top-[46px]` for a 40px pill — a 6px breathing gap
+    // between pill bottom and bar). Coloured per state via the *Selected /
+    // *Hover / *Default modifiers.
+    topHighlight: "pointer-events-none absolute -bottom-1.5 left-0 right-0 h-[1.5px] rounded-sm transition-colors",
+    topHighlightSelected: "bg-token-brand-primary",
+    // Faint 5% black bar on hover of unselected — matches Figma 5229:66155.
+    topHighlightHover: "bg-transparent group-hover/tab:bg-interaction-hov-opacity-primary",
+    topHighlightDefault: "bg-transparent",
     // Interaction layers specific to top tab.
     topHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     topHoverSelected: "hover:bg-interaction-hov-solid-primary",
@@ -7986,8 +7998,8 @@ var NAVIGATION_TOKENS = {
     // Reserved 1.5px transparent border prevents layout shift on selection.
     sideBase: "w-full justify-start gap-2 px-2.5 py-2 rounded-full border-[1.5px] border-transparent",
     sideSelected: "bg-token-white border-token-xlight shadow-sm",
-    sideLabelSelected: "text-sm font-semibold leading-5 text-fg-black",
-    sideLabelUnselected: "text-sm font-semibold leading-5 text-fg-grey-secondary",
+    sideLabelSelected: "text-sm font-semibold leading-5 text-fg-black truncate text-left",
+    sideLabelUnselected: "text-sm font-semibold leading-5 text-fg-grey-secondary truncate text-left",
     sideHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     sideHoverSelected: "hover:bg-interaction-hov-solid-primary",
     sidePressedUnselected: "active:bg-interaction-pressed-solid",
@@ -7996,8 +8008,8 @@ var NAVIGATION_TOKENS = {
     // Figma: brand-secondary bg for active, xs/medium label.
     sectionBase: "w-full justify-start gap-2 px-2.5 py-2 rounded-full",
     sectionSelected: "bg-token-brand-secondary",
-    sectionLabelSelected: "text-xs font-medium leading-4 text-fg-brand",
-    sectionLabelUnselected: "text-xs font-medium leading-4 text-fg-grey-secondary",
+    sectionLabelSelected: "text-xs font-medium leading-4 text-fg-brand truncate text-left",
+    sectionLabelUnselected: "text-xs font-medium leading-4 text-fg-grey-secondary truncate text-left",
     sectionHoverUnselected: "hover:bg-interaction-hov-solid-primary",
     sectionHoverSelected: "hover:bg-interaction-hov-solid-primary",
     sectionPressedUnselected: "active:bg-interaction-pressed-solid",
@@ -8012,7 +8024,7 @@ var NAVIGATION_TOKENS = {
     // narrow pill, the longer labels clipped past their neighbours).
     groupSide: "flex w-full flex-col items-stretch gap-1",
     groupSection: "flex w-full flex-col items-stretch gap-1",
-    labelBase: "shrink-0"
+    labelBase: "min-w-0"
   },
   // --- ListNavigation ---
   listNav: {
@@ -8165,6 +8177,7 @@ var TabsTrigger = React12.forwardRef(
           selected ? selectedClass : NAVIGATION_TOKENS.tab.unselected,
           hoverClass,
           pressedClass,
+          v2 === "top" && "group/tab",
           className
         ),
         disabled,
@@ -8175,7 +8188,16 @@ var TabsTrigger = React12.forwardRef(
         children: [
           iconLeft ? /* @__PURE__ */ jsx10("span", { className: cn(NAVIGATION_TOKENS.tab.iconWrap, iconColor), children: iconLeft }) : null,
           /* @__PURE__ */ jsx10("span", { className: cn(NAVIGATION_TOKENS.tab.labelBase, labelClass), children }),
-          v2 === "top" && selected && /* @__PURE__ */ jsx10("span", { className: NAVIGATION_TOKENS.tab.topHighlight })
+          v2 === "top" && /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: cn(
+                NAVIGATION_TOKENS.tab.topHighlight,
+                selected ? NAVIGATION_TOKENS.tab.topHighlightSelected : NAVIGATION_TOKENS.tab.topHighlightHover
+              ),
+              "aria-hidden": "true"
+            }
+          )
         ]
       }
     );
@@ -10601,13 +10623,13 @@ import { ChevronRight, CircleCheck, CircleAlert, ThumbsUp } from "lucide-react";
 // src/toast/variables.ts
 var TOAST_TOKENS = {
   // Outer container — Figma: bg-white, border-light, rounded-16, min-w-400, max-w-800
-  root: "relative bg-token-white border border-token-light rounded-[16px] overflow-hidden flex flex-col items-start min-w-[400px] max-w-[800px]",
+  root: "relative bg-token-white border border-token-light rounded-[16px] overflow-hidden flex flex-col items-start min-w-[320px] max-w-[600px]",
   // Inner content row — Figma: px-16 py-12, gap-12, items-center, full width
   innerRow: "flex gap-3 items-center px-4 py-3 w-full",
   icon: {
-    success: "text-fg-success shrink-0 [&>svg]:size-4",
-    error: "text-fg-destructive shrink-0 [&>svg]:size-4",
-    default: "text-fg-black shrink-0 [&>svg]:size-4"
+    success: "text-fg-success shrink-0 size-4",
+    error: "text-fg-destructive shrink-0 size-4",
+    default: "text-fg-black shrink-0 size-4"
   },
   // Title + subtext column — Figma: flex-1, flex-col, gap-0
   content: "flex flex-col flex-1 min-w-0",
@@ -10645,7 +10667,7 @@ var Toaster = ({
   SonnerToaster,
   {
     position,
-    toastOptions: { unstyled: true, classNames: { toast: "w-[600px]" } },
+    toastOptions: { unstyled: true, classNames: { toast: "w-fit" } },
     ...props
   }
 );
@@ -11350,7 +11372,24 @@ var TABLE_TOKENS = {
    *  element itself and stays visible through the scroll.
    *  A second outer shadow extends to the right so users can tell the column
    *  is pinned even when the bordering unpinned column is visually similar. */
-  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-xlight)),6px_0_8px_-4px_rgba(0,0,0,0.08)]",
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • `inset` shadow draws a 1px hairline at the cell's right edge.
+  //   • `before:` pseudo paints the elevation gradient INSIDE the cell at
+  //     its right edge. CSS `border-collapse: collapse` plus the cell's
+  //     own `overflow-hidden` (needed for text truncation) blocks an
+  //     outer drop-shadow from rendering, so we simulate the shadow with
+  //     an absolutely-positioned gradient that fades from transparent to
+  //     ~10% black across the last 8px of the cell. The pinned column
+  //     reads as elevated above the scrolling content beside it without
+  //     us having to drop overflow-hidden everywhere.
+  // Pinned-column right edge — Figma 5087:54840.
+  //   • Inset 1px hairline (border-light) so the column always has a clear
+  //     boundary line.
+  //   • Outer drop-shadow extending right INTO the unpinned area below it.
+  //     Using strong x-offset / -spread so the shadow only paints to the
+  //     right (not on top/bottom). Sticky cell sits at z-20, unpinned cells
+  //     at z-0, so the shadow is always painted above the scrolling content.
+  pinnedLastBorder: "shadow-[inset_-1px_0_0_0_hsl(var(--border-light)),12px_0_12px_-8px_rgba(0,0,0,0.18)]",
   // ── Checkbox column — Figma: w-40, px-12 py-8
   checkboxCell: "w-10 px-3 py-2",
   // ── Actions column ──
@@ -11950,8 +11989,10 @@ var FILTER_SELECT_TOKENS = {
     // Disabled
     disabled: "disabled:opacity-50 disabled:pointer-events-none"
   },
-  // Left icon — Figma: icon/black, 16px
-  icon: "shrink-0 size-4 text-fg-black",
+  // Left icon — Figma: icon/black, 16px. Force `stroke-width: 1.5` on inner
+  // SVG so lucide icons (which default to 2) read at the same visual weight
+  // as the lighter HugeiconsIcon strokes used elsewhere in the bar.
+  icon: "shrink-0 size-4 text-fg-black [&]:[stroke-width:1.5]",
   // Label — Label/sm: Nunito medium 12/16 black.
   // The "Without Label" variant (used as right pill inside CompoundFilterSelect — Figma
   // 5427:32334) shows the selected value as the label itself in text/brand, Subtext/xs
@@ -11979,7 +12020,7 @@ var FILTER_SELECT_TOKENS = {
       // Symmetric 4px padding on all sides — prevents the extra whitespace
       // below the last list item / footer that used to come from `pb-2`.
       "p-1 rounded-[16px] shadow-sm",
-      "min-w-[196px] font-sans",
+      "min-w-[196px] min-h-[144px] font-sans",
       "outline-none"
     ].join(" "),
     // Date dropdown — tight 4px padding on all sides so the calendar / presets
@@ -12183,8 +12224,10 @@ var FILTER_SELECT_TOKENS = {
       "w-full resize-none",
       "min-h-[114px] px-2 py-1",
       "rounded-[12px] bg-token-white",
-      // Figma shows brand/primary border on the focused textarea. Reserve 1px.
-      "border border-solid border-token-brand",
+      // Reserve 1px border so focus state doesn't shift layout. The brand
+      // colour only paints while the textarea actually has focus.
+      "border border-solid border-token-light",
+      "focus:border-token-brand",
       "font-sans text-xs font-normal leading-4 text-fg-black",
       "placeholder:text-fg-placeholder",
       "outline-none transition-colors"
@@ -12201,10 +12244,11 @@ var FILTER_SELECT_TOKENS = {
       "focus-within:border-token-brand"
     ].join(" "),
     // Compact variant — used by the duration filter so the dropdown doesn't
-    // stretch edge-to-edge. Matches Figma numeric field for duration (~96px).
+    // stretch edge-to-edge. Sized to roughly match a single field of the
+    // range layout so single/range modes feel visually consistent.
     wrapperCompact: [
       "flex items-center gap-2",
-      "w-24 px-3 h-8 min-h-[32px]",
+      "w-[88px] px-3 h-8 min-h-[32px]",
       "rounded-[12px] bg-token-white",
       "border border-solid border-token-light",
       "transition-colors",
@@ -12859,8 +12903,9 @@ var CalendarMonthCaption = ({
       onDateChange == null ? void 0 : onDateChange({ start: date == null ? void 0 : date.start, end: d });
     }
   };
+  const phantomSlotClass = "size-8 shrink-0";
   return /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between gap-1 w-full px-0 py-1", children: [
-    isFirst && /* @__PURE__ */ jsx33(
+    isFirst ? /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -12870,8 +12915,8 @@ var CalendarMonthCaption = ({
         disabled: !previousMonth,
         children: /* @__PURE__ */ jsx33(ChevronLeft2, { className: "size-4" })
       }
-    ),
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 flex-1 justify-start", children: [
+    ) : /* @__PURE__ */ jsx33("span", { className: phantomSlotClass, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 flex-1 justify-center", children: [
       /* @__PURE__ */ jsx33(
         MonthSelectPill,
         {
@@ -12903,7 +12948,7 @@ var CalendarMonthCaption = ({
         }
       )
     ] }),
-    isLast && /* @__PURE__ */ jsx33(
+    isLast ? /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -12913,7 +12958,7 @@ var CalendarMonthCaption = ({
         disabled: !nextMonth,
         children: /* @__PURE__ */ jsx33(ChevronRight3, { className: "size-4" })
       }
-    )
+    ) : /* @__PURE__ */ jsx33("span", { className: phantomSlotClass, "aria-hidden": "true" })
   ] });
 };
 var DEFAULT_DURATION_UNITS = [
@@ -12978,7 +13023,20 @@ var FilterSelect = React37.forwardRef(
     const open = controlledOpen != null ? controlledOpen : internalOpen;
     const [searchQuery, setSearchQuery] = React37.useState("");
     const triggerRef = React37.useRef(null);
+    const searchInputRef = React37.useRef(null);
+    const numericInputRef = React37.useRef(null);
+    const rangeMinInputRef = React37.useRef(null);
     const [triggerWidth, setTriggerWidth] = React37.useState(null);
+    const focusActiveBodyInput = React37.useCallback(() => {
+      requestAnimationFrame(() => {
+        var _a5, _b5;
+        if (isRangeMode) {
+          (_a5 = rangeMinInputRef.current) == null ? void 0 : _a5.focus();
+        } else {
+          (_b5 = numericInputRef.current) == null ? void 0 : _b5.focus();
+        }
+      });
+    }, [isRangeMode]);
     const [focusedMonth, setFocusedMonth] = React37.useState(
       () => {
         var _a5;
@@ -13305,8 +13363,13 @@ var FilterSelect = React37.forwardRef(
       setDraggedValue(null);
       setDragOverValue(null);
     }, []);
-    const isCompactBody = type === "duration" || type === "numeric_with_operands" && !isRangeMode;
-    const bodyMinWidth = isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const isCompactBody = type === "duration";
+    const supportsRangeOperand = type === "numeric_with_operands" && operands.some(
+      (op) => op.value === "Is between" || op.label === "Is between" || /between/i.test(op.value) || /between/i.test(op.label)
+    );
+    const numericWithOperandsWidth = 224;
+    const bodyMinWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : isCompactBody ? Math.max(160, triggerWidth != null ? triggerWidth : 0) : Math.max(196, triggerWidth != null ? triggerWidth : 0);
+    const bodyMaxWidth = supportsRangeOperand ? Math.max(numericWithOperandsWidth, triggerWidth != null ? triggerWidth : 0) : void 0;
     const renderFooterClear = (onClick, labelText, ariaLabel) => /* @__PURE__ */ jsx33("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ jsxs23(
       "button",
       {
@@ -13433,7 +13496,7 @@ var FilterSelect = React37.forwardRef(
                 maxHeight: type === "date" ? void 0 : dropdownMaxHeight,
                 minHeight: loading ? dropdownMaxHeight : void 0,
                 minWidth: bodyMinWidth,
-                maxWidth: type === "date" ? void 0 : void 0
+                maxWidth: bodyMaxWidth
               },
               side: "bottom",
               align: "start",
@@ -13463,7 +13526,7 @@ var FilterSelect = React37.forwardRef(
                     autoFocus: true
                   }
                 ) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
               ] }) : type === "text_with_operands" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
                 /* @__PURE__ */ jsxs23("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ jsx33(
@@ -13488,7 +13551,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   handleTextClear,
                   footerActionLabel,
                   `${footerActionLabel} filter`
@@ -13508,25 +13571,29 @@ var FilterSelect = React37.forwardRef(
                   ),
                   unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
+                showClearBtn && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
               ] }) : type === "numeric_with_operands" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
                 /* @__PURE__ */ jsxs23("div", { className: "p-1 flex flex-col gap-2", children: [
                   /* @__PURE__ */ jsx33(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
-                      onChange: (v2) => onOperandChange == null ? void 0 : onOperandChange(v2),
+                      onChange: (v2) => {
+                        onOperandChange == null ? void 0 : onOperandChange(v2);
+                        focusActiveBodyInput();
+                      },
                       options: operands,
                       placeholder: operandPlaceholder,
                       container,
                       themeClass
                     }
                   ),
-                  isRangeMode ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 w-full", children: [
-                    /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                  isRangeMode ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ jsx33(
                         "input",
                         {
+                          ref: rangeMinInputRef,
                           type: "text",
                           inputMode: "numeric",
                           pattern: "[0-9]*",
@@ -13550,7 +13617,7 @@ var FilterSelect = React37.forwardRef(
                       )
                     ] }),
                     /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
-                    /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                    /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
                       /* @__PURE__ */ jsx33(
                         "input",
                         {
@@ -13580,6 +13647,7 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ jsx33(
                       "input",
                       {
+                        ref: numericInputRef,
                         type: "number",
                         value: text != null ? text : "",
                         onChange: (e) => onTextChange == null ? void 0 : onTextChange(e.target.value),
@@ -13591,7 +13659,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onOperandChange == null ? void 0 : onOperandChange("");
@@ -13647,7 +13715,7 @@ var FilterSelect = React37.forwardRef(
                     unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onRangeMinChange == null ? void 0 : onRangeMinChange("");
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
@@ -13681,7 +13749,7 @@ var FilterSelect = React37.forwardRef(
                     }
                   )
                 ] }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                showClearBtn && renderFooterClear(
                   () => {
                     onTextChange == null ? void 0 : onTextChange("");
                     onDurationUnitChange == null ? void 0 : onDurationUnitChange("");
@@ -13724,7 +13792,7 @@ var FilterSelect = React37.forwardRef(
                             preset.value
                           );
                         }) }),
-                        (showClearBtn || hasContentToClear) && /* @__PURE__ */ jsx33(
+                        showClearBtn && /* @__PURE__ */ jsx33(
                           "div",
                           {
                             className: FILTER_SELECT_TOKENS.datePresetSidebarAction.wrapper,
@@ -13807,7 +13875,7 @@ var FilterSelect = React37.forwardRef(
                                 // inside our custom MonthCaption on the outer edges.
                                 Nav: () => /* @__PURE__ */ jsx33(Fragment11, {})
                               },
-                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px]"
+                              className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px] [&_.rdp-months]:gap-3"
                             }
                           )
                         }
@@ -13815,7 +13883,7 @@ var FilterSelect = React37.forwardRef(
                     ]
                   }
                 ),
-                datePresets === false && (showClearBtn || hasContentToClear) && renderFooterClear(
+                datePresets === false && showClearBtn && renderFooterClear(
                   handleDateClear,
                   footerActionLabel,
                   `${footerActionLabel} date range`
@@ -13830,11 +13898,13 @@ var FilterSelect = React37.forwardRef(
                     /* @__PURE__ */ jsx33(
                       "input",
                       {
+                        ref: searchInputRef,
                         type: "text",
                         value: searchQuery,
                         onChange: (e) => setSearchQuery(e.target.value),
                         placeholder: searchPlaceholder || "Search...",
                         "aria-label": "Search options",
+                        autoFocus: true,
                         className: FILTER_SELECT_TOKENS.searchBar.input
                       }
                     ),
@@ -13911,7 +13981,7 @@ var FilterSelect = React37.forwardRef(
                       String(item.value)
                     );
                   }) }),
-                  showClearBtn && selectedItems.length > 0 && renderFooterClear(
+                  showClearBtn && renderFooterClear(
                     handleClearAll,
                     footerActionLabel,
                     `${footerActionLabel} all selected items`
@@ -14068,8 +14138,12 @@ function CompoundFilterSelect({
               // Force children's rounded corners to be right-only and remove left border to overlap
               "[&>*]:!rounded-none [&>*]:!rounded-r-[16px]",
               "[&_button[data-state]]:!rounded-none [&_button[data-state]]:!rounded-r-[16px]",
-              // Paint the FilterSelect label in brand blue, regular weight (Figma 5427:32334).
-              "[&_[data-filter-label]]:!text-fg-brand",
+              // Paint the FilterSelect label in brand blue when it carries a value
+              // (Figma 5427:32334). When the right pill is empty / showing a
+              // placeholder, render the label in placeholder grey instead so it
+              // reads as a hint rather than a real selection.
+              "[&_button[data-has-value]_[data-filter-label]]:!text-fg-brand",
+              "[&_button:not([data-has-value])_[data-filter-label]]:!text-fg-placeholder",
               "[&_[data-filter-label]]:!font-normal",
               // In a compound pill, the right-side label IS the value — there is no
               // separate label/value split to divide. Hide the internal separator
@@ -15641,8 +15715,10 @@ var CHAT_BUBBLE_TOKENS = {
     timestampRow: "flex items-center justify-end gap-2 pr-5"
   },
   user: {
-    // Row: avatar first, then text (no bubble).
-    row: "flex items-end gap-1 w-full",
+    // Row: avatar first, then text (no bubble). `pr-5` mirrors the
+    // 16px avatar + 4px gap on the left so message text doesn't run flush
+    // to the container's right edge.
+    row: "flex items-end gap-1 w-full pr-5",
     // 16px grey circle holding the user icon.
     avatar: "shrink-0 size-4 rounded-full bg-token-grey flex items-center justify-center text-fg-grey-secondary [&>svg]:size-3",
     // Message text — per Figma: 14px regular, grey-secondary.
@@ -16012,7 +16088,6 @@ var Popover = React44.forwardRef(
         {
           ref: triggerRef,
           onClick: () => setOpen(!open),
-          className: "inline-block",
           children: trigger
         }
       ),

package/dist/styles.css

@@ -265,12 +265,18 @@
   .lego-land .top-2 {
     top: calc(var(--spacing) * 2);
   }
+  .lego-land .top-\[46px\] {
+    top: 46px;
+  }
   .lego-land .top-px {
     top: 1px;
   }
   .lego-land .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .lego-land .-bottom-1\.5 {
+    bottom: calc(var(--spacing) * -1.5);
+  }
   .lego-land .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -638,6 +644,9 @@
   .lego-land .min-h-\[114px\] {
     min-height: 114px;
   }
+  .lego-land .min-h-\[144px\] {
+    min-height: 144px;
+  }
   .lego-land .min-h-\[200px\] {
     min-height: 200px;
   }
@@ -713,6 +722,9 @@
   .lego-land .w-\[85vw\] {
     width: 85vw;
   }
+  .lego-land .w-\[88px\] {
+    width: 88px;
+  }
   .lego-land .w-\[116px\] {
     width: 116px;
   }
@@ -752,9 +764,6 @@
   .lego-land .w-\[520px\] {
     width: 520px;
   }
-  .lego-land .w-\[600px\] {
-    width: 600px;
-  }
   .lego-land .w-\[620px\] {
     width: 620px;
   }
@@ -803,8 +812,8 @@
   .lego-land .max-w-\[472px\] {
     max-width: 472px;
   }
-  .lego-land .max-w-\[800px\] {
-    max-width: 800px;
+  .lego-land .max-w-\[600px\] {
+    max-width: 600px;
   }
   .lego-land .max-w-full {
     max-width: 100%;
@@ -851,8 +860,8 @@
   .lego-land .min-w-\[196px\] {
     min-width: 196px;
   }
-  .lego-land .min-w-\[400px\] {
-    min-width: 400px;
+  .lego-land .min-w-\[320px\] {
+    min-width: 320px;
   }
   .lego-land .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
@@ -872,9 +881,6 @@
   .lego-land .shrink-0 {
     flex-shrink: 0;
   }
-  .lego-land .grow {
-    flex-grow: 1;
-  }
   .lego-land .table-fixed {
     table-layout: fixed;
   }
@@ -1908,8 +1914,8 @@
     --tw-shadow: 0px 4px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1)), 0px 10px 15px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .lego-land .shadow-\[inset_-1px_0_0_0_hsl\(var\(--border-xlight\)\)\,6px_0_8px_-4px_rgba\(0\,0\,0\,0\.08\)\] {
-    --tw-shadow: inset -1px 0 0 0 var(--tw-shadow-color, hsl(var(--border-xlight))), 6px 0 8px -4px var(--tw-shadow-color, rgba(0,0,0,0.08));
+  .lego-land .shadow-\[inset_-1px_0_0_0_hsl\(var\(--border-light\)\)\,12px_0_12px_-8px_rgba\(0\,0\,0\,0\.18\)\] {
+    --tw-shadow: inset -1px 0 0 0 var(--tw-shadow-color, hsl(var(--border-light))), 12px 0 12px -8px var(--tw-shadow-color, rgba(0,0,0,0.18));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .lego-land .shadow-lg {
@@ -1956,6 +1962,11 @@
   .lego-land .outline-token-brand {
     outline-color: hsl(var(--border-brand));
   }
+  .lego-land .drop-shadow {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
+    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .lego-land .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -2044,6 +2055,13 @@
       }
     }
   }
+  .lego-land .group-hover\/tab\:bg-interaction-hov-opacity-primary {
+    .lego-land &:is(:where(.group\/tab):hover *) {
+      @media (hover: hover) {
+        background-color: hsl(var(--hov-opacity-primary));
+      }
+    }
+  }
   .lego-land .group-active\:w-5 {
     .lego-land &:is(:where(.group):active *) {
       width: calc(var(--spacing) * 5);
@@ -2762,27 +2780,40 @@
       background-color: hsl(var(--bg-dark-grey));
     }
   }
+  .lego-land .\[\&\]\:\[stroke-width\:1\.5\] {
+    stroke-width: 1.5;
+  }
   .lego-land .\[\&_\.rdp-day_button\]\:rounded-\[8px\] {
     .lego-land & .rdp-day button {
       border-radius: 8px;
     }
   }
+  .lego-land .\[\&_\.rdp-months\]\:gap-3 {
+    .lego-land & .rdp-months {
+      gap: calc(var(--spacing) * 3);
+    }
+  }
   .lego-land .\[\&_\[data-filter-label\]\]\:\!font-normal {
     .lego-land & [data-filter-label] {
       --tw-font-weight: var(--font-weight-normal) !important;
       font-weight: var(--font-weight-normal) !important;
     }
   }
-  .lego-land .\[\&_\[data-filter-label\]\]\:\!text-fg-brand {
-    .lego-land & [data-filter-label] {
-      color: hsl(var(--text-brand)) !important;
-    }
-  }
   .lego-land .\[\&_\[data-filter-separator\]\]\:\!hidden {
     .lego-land & [data-filter-separator] {
       display: none !important;
     }
   }
+  .lego-land .\[\&_button\:not\(\[data-has-value\]\)_\[data-filter-label\]\]\:\!text-fg-placeholder {
+    .lego-land & button:not([data-has-value]) [data-filter-label] {
+      color: hsl(var(--text-placeholder)) !important;
+    }
+  }
+  .lego-land .\[\&_button\[data-has-value\]_\[data-filter-label\]\]\:\!text-fg-brand {
+    .lego-land & button[data-has-value] [data-filter-label] {
+      color: hsl(var(--text-brand)) !important;
+    }
+  }
   .lego-land .\[\&_button\[data-state\]\]\:\!rounded-none {
     .lego-land & button[data-state] {
       border-radius: 0 !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.4-stage.115",
+  "version": "1.1.4-stage.117",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",