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

package/dist/index.js

@@ -6548,6 +6548,7 @@ __export(index_exports, {
   SelectTrigger: () => SelectTrigger,
   SelectValue: () => SelectValue,
   ShadowDOMWrapper: () => ShadowDOMWrapper,
+  SidePanel: () => SidePanel,
   Spinner: () => Spinner,
   Stepper: () => Stepper,
   StepperBar: () => StepperBar,
@@ -8109,8 +8110,12 @@ var NAVIGATION_TOKENS = {
     unselected: "bg-transparent",
     iconWrap: "shrink-0 [&>svg]:h-4 [&>svg]:w-4",
     groupTop: "flex items-center gap-0",
-    groupSide: "flex w-full flex-col items-start gap-1",
-    groupSection: "flex w-full flex-col items-start gap-1",
+    // `items-stretch` so every tab fills the full cross-axis width of the
+    // list. With `items-start` each tab shrank to its own text width, so
+    // hover / selected surfaces looked ragged (the shorter labels got a
+    // 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"
   },
   // --- ListNavigation ---
@@ -9314,9 +9319,12 @@ var SELECT_TOKENS = {
     text: "text-fg-black shrink-0",
     asterisk: "text-fg-destructive shrink-0"
   },
-  // Select group (label + select)
+  // Select group (label + select). No `p-1` here — the outer `dropdown.base`
+  // already paints 4px padding around the viewport, so adding it again on the
+  // group produced 8px of whitespace on every edge (visible as extra space
+  // below the last item).
   group: {
-    container: "flex flex-col gap-1 p-1 items-start"
+    container: "flex flex-col gap-1 items-start"
   },
   // Spec card (for storybook)
   specCard: "border border-token-light flex flex-col gap-10 items-start p-14 rounded-3xl size-full",
@@ -10204,27 +10212,37 @@ var React25 = __toESM(require("react"));
 
 // src/list-card/variables.ts
 var LIST_TOKENS = {
-  base: "cursor-pointer transition-colors hover:bg-interaction-hov-solid-primary",
+  base: "transition-all duration-150 cursor-pointer",
   type: {
-    card: "flex flex-col gap-4 items-start p-6",
+    // Card: vertical stack, 20px padding, 16px gap
+    card: "flex flex-col gap-4 items-start p-5",
+    // List: horizontal row, 16px gap, 16px / 24px padding
     list: "flex gap-4 items-center py-4 px-6"
   },
   variant: {
     card: {
-      default: "bg-token-white",
-      outline: "bg-token-white border border-token-light px-6",
-      muted: "bg-token-grey"
+      // Figma 6249:35274 — default rest state: white bg, 1px xlight border,
+      // shadow-sm. On hover we darken the border to `light` and deepen the
+      // shadow to `shadow-lg`; on press we scale down to 0.955 to mimic a
+      // button press without shifting surrounding layout.
+      default: "bg-token-white border border-token-xlight shadow-sm hover:border-token-light hover:shadow-lg active:scale-[0.955] active:shadow-sm",
+      // Outline drops the shadow, keeps the border emphasis.
+      outline: "bg-token-white border border-token-light hover:bg-interaction-hov-solid-primary active:scale-[0.955]",
+      // Muted fill variant — unchanged interactive behaviour.
+      muted: "bg-token-grey hover:bg-interaction-hov-solid-primary active:scale-[0.955]"
     },
     list: {
-      default: "",
-      outline: "border border-token-light px-4",
-      muted: "bg-token-grey"
+      default: "hover:bg-interaction-hov-solid-primary",
+      outline: "border border-token-light px-4 hover:bg-interaction-hov-solid-primary",
+      muted: "bg-token-grey hover:bg-interaction-hov-solid-primary"
     }
   },
   radius: {
     none: `${DEFAULT_THEME.radius.mode1.roundedNone}px`,
     soft: `${DEFAULT_THEME.radius.mode1.roundedMd}px`,
-    rounded: `${DEFAULT_THEME.radius.mode1.rounded2xl}px`
+    // Figma 6249:35274 specifies 20px corner radius on cards. The mode-1
+    // `rounded2xl` token is 16px, so we pin the card-default to 20px here.
+    rounded: "20px"
   }
 };
 
@@ -10279,8 +10297,8 @@ var SURFACE_TOKENS = {
    * the system (Dialog uses 24px as well).
    */
   padded: "p-6 gap-4",
-  header: "flex items-center gap-[10px] text-lg font-semibold leading-7 text-fg-black",
-  body: "flex flex-col gap-2 text-sm font-normal leading-5 text-fg-black",
+  header: "flex items-center gap-[10px] text-lg font-semibold leading-7 text-fg-black min-w-0 break-words",
+  body: "flex flex-col gap-2 text-sm font-normal leading-5 text-fg-black min-w-0 break-words",
   footer: "flex items-center justify-end gap-2"
 };
 
@@ -10332,8 +10350,55 @@ var SurfaceFooter = React26.forwardRef(
 );
 SurfaceFooter.displayName = "SurfaceFooter";
 
-// src/tooltip/tooltip.tsx
+// src/side-panel/side-panel.tsx
 var React27 = __toESM(require("react"));
+
+// src/side-panel/variables.ts
+var SIDE_PANEL_TOKENS = {
+  base: "bg-token-white h-full overflow-hidden flex flex-col",
+  size: {
+    sm: "w-[420px]",
+    md: "w-[620px]"
+  },
+  side: {
+    // Panel anchored to the RIGHT edge of the viewport — its LEFT edge is
+    // the inward-facing one, so only left corners are rounded.
+    right: "rounded-l-2xl",
+    // Panel anchored to the LEFT edge of the viewport — mirror.
+    left: "rounded-r-2xl"
+  }
+};
+
+// src/side-panel/side-panel.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SidePanel = React27.forwardRef(
+  ({
+    size = "sm",
+    side = "right",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          SIDE_PANEL_TOKENS.base,
+          SIDE_PANEL_TOKENS.size[size],
+          SIDE_PANEL_TOKENS.side[side],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SidePanel.displayName = "SidePanel";
+
+// src/tooltip/tooltip.tsx
+var React28 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 
 // src/tooltip/variables.ts
@@ -10351,10 +10416,10 @@ var TOOLTIP_TOKENS = {
 };
 
 // src/tooltip/tooltip.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var useTooltipContainer = (anchorRef) => {
-  const [container, setContainer] = React27.useState(void 0);
-  React27.useEffect(() => {
+  const [container, setContainer] = React28.useState(void 0);
+  React28.useEffect(() => {
     var _a5;
     if (typeof document === "undefined") return;
     const anchor = anchorRef.current;
@@ -10366,10 +10431,10 @@ var useTooltipContainer = (anchorRef) => {
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut, children, ...props }, ref) => {
-  const anchorRef = React27.useRef(null);
+var TooltipContent = React28.forwardRef(({ className, sideOffset = 6, shortcut, children, ...props }, ref) => {
+  const anchorRef = React28.useRef(null);
   const container = useTooltipContainer(anchorRef);
-  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -10382,9 +10447,9 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
           children,
-          shortcut && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "span",
             {
               className: cn(
@@ -10396,7 +10461,7 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           TooltipPrimitive.Arrow,
           {
             className: TOOLTIP_TOKENS.arrow,
@@ -10406,15 +10471,15 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { ref: anchorRef, style: { display: "none" } }),
-    container ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipPrimitive.Portal, { container, children: content }) : content
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { ref: anchorRef, style: { display: "none" } }),
+    container ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TooltipPrimitive.Portal, { container, children: content }) : content
   ] });
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/dialog/dialog.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_lucide_react9 = require("lucide-react");
 
 // src/dialog/variables.ts
@@ -10450,10 +10515,10 @@ var DIALOG_TOKENS = {
 };
 
 // src/dialog/dialog.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var DialogContext = React28.createContext({ close: () => {
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var DialogContext = React29.createContext({ close: () => {
 } });
-var Dialog = React28.forwardRef(
+var Dialog = React29.forwardRef(
   ({
     open,
     onOpenChange,
@@ -10469,8 +10534,8 @@ var Dialog = React28.forwardRef(
     onConfirm,
     className
   }, ref) => {
-    const close = React28.useCallback(() => onOpenChange(false), [onOpenChange]);
-    React28.useEffect(() => {
+    const close = React29.useCallback(() => onOpenChange(false), [onOpenChange]);
+    React29.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") close();
@@ -10483,7 +10548,7 @@ var Dialog = React28.forwardRef(
     const hasFixedDividers = type === "scrollable-fixed";
     const hasIcon = type === "icon";
     const showClose = !hasIcon;
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogContext.Provider, { value: { close }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.overlay, onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogContext.Provider, { value: { close }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.overlay, onClick: close, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         ref,
@@ -10497,24 +10562,24 @@ var Dialog = React28.forwardRef(
         ),
         onClick: (e) => e.stopPropagation(),
         children: [
-          hasIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.icon.wrapper, children: icon }),
-          title && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.header.wrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.header.row, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: "dialog-title", className: DIALOG_TOKENS.header.title, children: title }),
-              showClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          hasIcon && icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.icon.wrapper, children: icon }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.header.wrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.header.row, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { id: "dialog-title", className: DIALOG_TOKENS.header.title, children: title }),
+              showClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 "button",
                 {
                   type: "button",
                   onClick: close,
                   className: DIALOG_TOKENS.header.closeBtn,
                   "aria-label": "Close dialog",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { className: "size-[18px]" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.X, { className: "size-[18px]" })
                 }
               )
             ] }),
-            hasFixedDividers && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.header.divider })
+            hasFixedDividers && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.header.divider })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "div",
             {
               className: cn(
@@ -10524,10 +10589,10 @@ var Dialog = React28.forwardRef(
               children
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.footer.wrapper, children: [
-            hasFixedDividers && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.footer.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.footer.row, children: [
-              showCancel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.footer.wrapper, children: [
+            hasFixedDividers && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.footer.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.footer.row, children: [
+              showCancel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button,
                 {
                   variant: "outline",
@@ -10536,7 +10601,7 @@ var Dialog = React28.forwardRef(
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 Button,
                 {
                   variant: "primary",
@@ -10553,34 +10618,34 @@ var Dialog = React28.forwardRef(
   }
 );
 Dialog.displayName = "Dialog";
-var DialogIcon = React28.forwardRef(
-  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: cn(DIALOG_TOKENS.icon.wrapper, className), children })
+var DialogIcon = React29.forwardRef(
+  ({ children, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn(DIALOG_TOKENS.icon.wrapper, className), children })
 );
 DialogIcon.displayName = "DialogIcon";
-var DialogHeader = React28.forwardRef(
+var DialogHeader = React29.forwardRef(
   ({ title, showClose = true, showDivider = false, className }, ref) => {
-    const { close } = React28.useContext(DialogContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref, className: cn(DIALOG_TOKENS.header.wrapper, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.header.row, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: DIALOG_TOKENS.header.title, children: title }),
-        showClose && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    const { close } = React29.useContext(DialogContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: cn(DIALOG_TOKENS.header.wrapper, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.header.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: DIALOG_TOKENS.header.title, children: title }),
+        showClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             type: "button",
             onClick: close,
             className: DIALOG_TOKENS.header.closeBtn,
             "aria-label": "Close dialog",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { className: "size-[18px]" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react9.X, { className: "size-[18px]" })
           }
         )
       ] }),
-      showDivider && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.header.divider })
+      showDivider && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.header.divider })
     ] });
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogBody = React28.forwardRef(
-  ({ children, scrollable = false, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var DialogBody = React29.forwardRef(
+  ({ children, scrollable = false, className }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       ref,
@@ -10594,7 +10659,7 @@ var DialogBody = React28.forwardRef(
   )
 );
 DialogBody.displayName = "DialogBody";
-var DialogFooter = React28.forwardRef(
+var DialogFooter = React29.forwardRef(
   ({
     cancelLabel = "Cancel",
     confirmLabel = "Continue",
@@ -10604,11 +10669,11 @@ var DialogFooter = React28.forwardRef(
     showDivider = false,
     className
   }, ref) => {
-    const { close } = React28.useContext(DialogContext);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref, className: cn(DIALOG_TOKENS.footer.wrapper, className), children: [
-      showDivider && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: DIALOG_TOKENS.footer.divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: DIALOG_TOKENS.footer.row, children: [
-        showCancel && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    const { close } = React29.useContext(DialogContext);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className: cn(DIALOG_TOKENS.footer.wrapper, className), children: [
+      showDivider && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: DIALOG_TOKENS.footer.divider }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: DIALOG_TOKENS.footer.row, children: [
+        showCancel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
             variant: "outline",
@@ -10617,7 +10682,7 @@ var DialogFooter = React28.forwardRef(
             children: cancelLabel
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           Button,
           {
             variant: "primary",
@@ -10633,7 +10698,7 @@ var DialogFooter = React28.forwardRef(
 DialogFooter.displayName = "DialogFooter";
 
 // src/toast/toast.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 var import_sonner = require("sonner");
 var import_lucide_react10 = require("lucide-react");
 
@@ -10676,11 +10741,11 @@ var TOAST_TOKENS = {
 };
 
 // src/toast/toast.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Toaster = ({
   position = "bottom-right",
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   import_sonner.Toaster,
   {
     position,
@@ -10694,7 +10759,7 @@ var TOAST_ICON = {
   error: import_lucide_react10.CircleAlert,
   default: import_lucide_react10.ThumbsUp
 };
-var Toast = React29.forwardRef(
+var Toast = React30.forwardRef(
   ({
     variant = "default",
     title,
@@ -10709,36 +10774,36 @@ var Toast = React29.forwardRef(
     const Icon2 = TOAST_ICON[variant];
     const clampedProgress = Math.min(100, Math.max(0, progress));
     const useAnimation = showProgress && clampedProgress === 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
       {
         ref,
         className: cn(TOAST_TOKENS.root, className),
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: TOAST_TOKENS.innerRow, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: TOAST_TOKENS.content, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: TOAST_TOKENS.titleRow, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon2, { className: TOAST_TOKENS.icon[variant] }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: TOAST_TOKENS.title[variant], children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: TOAST_TOKENS.innerRow, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: TOAST_TOKENS.content, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: TOAST_TOKENS.titleRow, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon2, { className: TOAST_TOKENS.icon[variant] }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: TOAST_TOKENS.title[variant], children: title })
               ] }),
-              subtext && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: TOAST_TOKENS.subtextRow, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: TOAST_TOKENS.subtext, children: subtext }) })
+              subtext && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: TOAST_TOKENS.subtextRow, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: TOAST_TOKENS.subtext, children: subtext }) })
             ] }),
-            showCancel && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            showCancel && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "button",
               {
                 type: "button",
                 onClick: onCancel,
                 className: TOAST_TOKENS.cancelBtn,
                 "aria-label": "Dismiss",
-                children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.ChevronRight, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react10.ChevronRight, {})
               }
             )
           ] }),
-          showProgress && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: TOAST_TOKENS.progress.wrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { children: `@keyframes toast-shrink { from { width: 100% } to { width: 0% } }` }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: TOAST_TOKENS.progress.track }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          showProgress && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: TOAST_TOKENS.progress.wrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("style", { children: `@keyframes toast-shrink { from { width: 100% } to { width: 0% } }` }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: TOAST_TOKENS.progress.track }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               "div",
               {
                 className: cn(
@@ -10760,7 +10825,7 @@ var showToast = ({
   ...props
 }) => {
   return import_sonner.toast.custom(
-    (id) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    (id) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Toast,
       {
         ...props,
@@ -10772,7 +10837,7 @@ var showToast = ({
 };
 
 // src/stepper/stepper.tsx
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_lucide_react11 = require("lucide-react");
 
 // src/stepper/variables.ts
@@ -10821,16 +10886,16 @@ var STEPPER_TOKENS = {
 };
 
 // src/stepper/stepper.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var StepperBar = React30.forwardRef(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var StepperBar = React31.forwardRef(
   ({ totalSteps = 4, currentStep, className, style }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref,
         className: cn(STEPPER_TOKENS.bar.root, className),
         style,
-        children: Array.from({ length: totalSteps }).map((_2, index2) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        children: Array.from({ length: totalSteps }).map((_2, index2) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             className: cn(
@@ -10845,9 +10910,9 @@ var StepperBar = React30.forwardRef(
   }
 );
 StepperBar.displayName = "StepperBar";
-var Stepper = React30.forwardRef(
+var Stepper = React31.forwardRef(
   ({ steps, className, style }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref,
@@ -10856,16 +10921,16 @@ var Stepper = React30.forwardRef(
         children: steps.map((step, index2) => {
           var _a5;
           const state2 = (_a5 = step.state) != null ? _a5 : "incomplete";
-          return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(React30.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: STEPPER_TOKENS.stepper.step.wrapper, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(React31.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: STEPPER_TOKENS.stepper.step.wrapper, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "div",
                 {
                   className: cn(
                     STEPPER_TOKENS.stepper.step.indicator.base,
                     STEPPER_TOKENS.stepper.step.indicator[state2]
                   ),
-                  children: state2 === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Check, { className: STEPPER_TOKENS.stepper.step.checkIcon }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  children: state2 === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react11.Check, { className: STEPPER_TOKENS.stepper.step.checkIcon }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                     "span",
                     {
                       className: state2 === "active" ? STEPPER_TOKENS.stepper.step.number.active : STEPPER_TOKENS.stepper.step.number.incomplete,
@@ -10874,7 +10939,7 @@ var Stepper = React30.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "span",
                 {
                   className: cn(
@@ -10885,7 +10950,7 @@ var Stepper = React30.forwardRef(
                 }
               )
             ] }),
-            index2 < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            index2 < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               "div",
               {
                 className: cn(
@@ -10901,10 +10966,10 @@ var Stepper = React30.forwardRef(
   }
 );
 Stepper.displayName = "Stepper";
-var ProgressBar = React30.forwardRef(
+var ProgressBar = React31.forwardRef(
   ({ value, max = 100, className, style }, ref) => {
     const percentage = Math.min(100, Math.max(0, value / max * 100));
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         ref,
@@ -10914,7 +10979,7 @@ var ProgressBar = React30.forwardRef(
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: STEPPER_TOKENS.progressBar.track, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: STEPPER_TOKENS.progressBar.track, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "div",
           {
             className: STEPPER_TOKENS.progressBar.fill,
@@ -10928,7 +10993,7 @@ var ProgressBar = React30.forwardRef(
 ProgressBar.displayName = "ProgressBar";
 
 // src/icon/icon.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react12 = require("lucide-react");
 var LucideIcons = __toESM(require("lucide-react"));
@@ -10977,10 +11042,10 @@ var ICON_TOKENS = {
 };
 
 // src/icon/icon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var IconWrapper = React31.forwardRef(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var IconWrapper = React32.forwardRef(
   ({ color = "default", size = "sm", children, className, style }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "span",
       {
         ref,
@@ -11117,7 +11182,7 @@ function getLucideIcon(name) {
   }
   return null;
 }
-var IconPicker = React31.forwardRef(
+var IconPicker = React32.forwardRef(
   ({
     value,
     onValueChange,
@@ -11130,24 +11195,24 @@ var IconPicker = React31.forwardRef(
   }, ref) => {
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const [open, setOpen] = React31.useState(false);
-    const [query, setQuery] = React31.useState("");
+    const [open, setOpen] = React32.useState(false);
+    const [query, setQuery] = React32.useState("");
     const iconNames = icons != null ? icons : COMMON_ICON_NAMES;
-    const filtered = React31.useMemo(() => {
+    const filtered = React32.useMemo(() => {
       if (!query.trim()) return iconNames;
       const q = query.toLowerCase().trim();
       return iconNames.filter((name) => name.toLowerCase().includes(q));
     }, [iconNames, query]);
     const SelectedIcon = value ? getLucideIcon(value) : null;
-    const container = React31.useMemo(
+    const container = React32.useMemo(
       () => {
         var _a5;
         return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
       },
       []
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: cn("inline-block", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: cn("inline-block", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DropdownMenuPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DropdownMenuPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "button",
         {
           type: "button",
@@ -11155,10 +11220,10 @@ var IconPicker = React31.forwardRef(
             ICON_TOKENS.picker.trigger,
             ICON_TOKENS.color[color]
           ),
-          children: SelectedIcon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectedIcon, { className: ICON_TOKENS.size[size] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-fg-placeholder", children: placeholder })
+          children: SelectedIcon ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SelectedIcon, { className: ICON_TOKENS.size[size] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-xs text-fg-placeholder", children: placeholder })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DropdownMenuPrimitive2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
         DropdownMenuPrimitive2.Content,
         {
           className: cn(
@@ -11174,9 +11239,9 @@ var IconPicker = React31.forwardRef(
           sideOffset: 4,
           onCloseAutoFocus: (e) => e.preventDefault(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.Search, { className: "size-4 text-fg-grey-secondary shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react12.Search, { className: "size-4 text-fg-grey-secondary shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "input",
                 {
                   type: "search",
@@ -11189,11 +11254,11 @@ var IconPicker = React31.forwardRef(
                 }
               )
             ] }),
-            filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: ICON_TOKENS.picker.emptyText, children: "No icons found" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ICON_TOKENS.picker.grid, children: filtered.map((name) => {
+            filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: ICON_TOKENS.picker.emptyText, children: "No icons found" }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ICON_TOKENS.picker.grid, children: filtered.map((name) => {
               const Icon2 = getLucideIcon(name);
               if (!Icon2) return null;
               const isSelected = name === value;
-              return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 DropdownMenuPrimitive2.Item,
                 {
                   className: cn(
@@ -11207,7 +11272,7 @@ var IconPicker = React31.forwardRef(
                     setOpen(false);
                   },
                   title: name,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon2, { className: "size-4" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon2, { className: "size-4" })
                 },
                 name
               );
@@ -11221,9 +11286,9 @@ var IconPicker = React31.forwardRef(
 IconPicker.displayName = "IconPicker";
 
 // src/shadow-dom-wrapper.tsx
-var React32 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var ShadowDOMWrapper = ({
   children,
   styles,
@@ -11231,10 +11296,10 @@ var ShadowDOMWrapper = ({
   additionalStyles = "",
   copyCSSVariables = true
 }) => {
-  const containerRef = React32.useRef(null);
-  const shadowRootRef = React32.useRef(null);
-  const [shadowRoot, setShadowRoot] = React32.useState(null);
-  React32.useEffect(() => {
+  const containerRef = React33.useRef(null);
+  const shadowRootRef = React33.useRef(null);
+  const [shadowRoot, setShadowRoot] = React33.useState(null);
+  React33.useEffect(() => {
     if (!containerRef.current) return;
     if (!shadowRootRef.current) {
       shadowRootRef.current = containerRef.current.attachShadow({ mode });
@@ -11323,15 +11388,15 @@ var ShadowDOMWrapper = ({
     return () => {
     };
   }, [styles, mode, additionalStyles, copyCSSVariables]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: containerRef }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: containerRef }),
     shadowRoot && (0, import_react_dom.createPortal)(children, shadowRoot)
   ] });
 };
 ShadowDOMWrapper.displayName = "ShadowDOMWrapper";
 
 // src/table/table.tsx
-var React33 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_lucide_react13 = require("lucide-react");
 
 // src/table/variables.ts
@@ -11421,22 +11486,22 @@ function getColumnWidthPx(width) {
 }
 
 // src/table/table.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function formatNumber(n) {
   if (n == null) return "0";
   return n.toLocaleString();
 }
 function isCellTextContent(value) {
-  return typeof value === "object" && value !== null && !React33.isValidElement(value) && "text" in value;
+  return typeof value === "object" && value !== null && !React34.isValidElement(value) && "text" in value;
 }
 function renderCellContent(content) {
   if (content === null || content === void 0) return null;
   if (typeof content === "string" || typeof content === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: content });
   }
   if (isCellTextContent(content)) {
     const { text, className, style } = content;
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className, style, children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className, style, children: text });
   }
   return content;
 }
@@ -11458,8 +11523,8 @@ function Pagination({
   };
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: TABLE_TOKENS.paginationBar.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: TABLE_TOKENS.paginationBar.text, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: TABLE_TOKENS.paginationBar.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: TABLE_TOKENS.paginationBar.text, children: [
       "Showing ",
       formatNumber(start),
       "\u2013",
@@ -11471,17 +11536,17 @@ function Pagination({
       entityName,
       total !== 1 ? "s" : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: TABLE_TOKENS.paginationBar.rightSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: TABLE_TOKENS.paginationBar.rowCountSection, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: TABLE_TOKENS.paginationBar.text, children: "Rows per page" }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: TABLE_TOKENS.paginationBar.rightSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: TABLE_TOKENS.paginationBar.rowCountSection, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: TABLE_TOKENS.paginationBar.text, children: "Rows per page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           Select,
           {
             value: String(rowsPerPage),
             onValueChange: handleRowsPerPageSelect,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectTrigger, { size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SelectValue, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectTrigger, { size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectValue, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 SelectContent,
                 {
                   items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
@@ -11494,15 +11559,15 @@ function Pagination({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: TABLE_TOKENS.paginationBar.pageSection, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: TABLE_TOKENS.paginationBar.text, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: TABLE_TOKENS.paginationBar.pageSection, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: TABLE_TOKENS.paginationBar.text, children: [
           "Page ",
           formatNumber(currentPage),
           " of ",
           formatNumber(totalPages || 1)
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: TABLE_TOKENS.paginationBar.navButtons, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: TABLE_TOKENS.paginationBar.navButtons, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -11513,10 +11578,10 @@ function Pagination({
               onClick: () => currentPage > 1 && handlePageChange(1),
               disabled: isFirstPage,
               "aria-label": "Go to first page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronFirst, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronFirst, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -11527,10 +11592,10 @@ function Pagination({
               onClick: () => currentPage > 1 && handlePageChange(currentPage - 1),
               disabled: isFirstPage,
               "aria-label": "Go to previous page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronLeft, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronLeft, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -11541,10 +11606,10 @@ function Pagination({
               onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1),
               disabled: isLastPage,
               "aria-label": "Go to next page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronRight, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronRight, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -11555,7 +11620,7 @@ function Pagination({
               onClick: () => currentPage < totalPages && handlePageChange(totalPages),
               disabled: isLastPage,
               "aria-label": "Go to last page",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronLast, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronLast, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           )
         ] })
@@ -11587,20 +11652,20 @@ function DataTable({
   loading = false,
   onRowClick
 }) {
-  const resolveId = React33.useCallback(
+  const resolveId = React34.useCallback(
     (row, index2) => {
       if (getRowId) return getRowId(row);
       return String(index2);
     },
     [getRowId]
   );
-  const orderedColumns = React33.useMemo(() => {
+  const orderedColumns = React34.useMemo(() => {
     const pinnedSet = new Set(pinnedColumns);
     const pinned = pinnedColumns.map((key) => columns.find((c) => c.key === key)).filter((c) => c !== void 0);
     const rest = columns.filter((c) => !pinnedSet.has(c.key));
     return [...pinned, ...rest];
   }, [columns, pinnedColumns]);
-  const stickyOffsets = React33.useMemo(() => {
+  const stickyOffsets = React34.useMemo(() => {
     const offsets = {};
     let accumulated = showCheckbox ? CHECKBOX_COLUMN_WIDTH : 0;
     for (const col of orderedColumns) {
@@ -11611,7 +11676,7 @@ function DataTable({
     }
     return offsets;
   }, [orderedColumns, pinnedColumns, showCheckbox]);
-  const sortState = React33.useMemo(() => {
+  const sortState = React34.useMemo(() => {
     const col = orderedColumns.find((c) => c.sort_direction);
     return col ? { key: col.key, direction: col.sort_direction } : null;
   }, [orderedColumns]);
@@ -11627,7 +11692,7 @@ function DataTable({
       onSortChange({ key, direction: null });
     }
   };
-  const selectedSet = React33.useMemo(
+  const selectedSet = React34.useMemo(
     () => new Set(selectedRows),
     [selectedRows]
   );
@@ -11644,9 +11709,9 @@ function DataTable({
   const hasActions = actions.length > 0;
   const skeletonColumnCount = columns.length > 0 ? columns.length : 5;
   const skeletonRowCount = 10;
-  const scrollContainerRef = React33.useRef(null);
-  const [scrollContainerWidth, setScrollContainerWidth] = React33.useState(0);
-  React33.useEffect(() => {
+  const scrollContainerRef = React34.useRef(null);
+  const [scrollContainerWidth, setScrollContainerWidth] = React34.useState(0);
+  React34.useEffect(() => {
     const el = scrollContainerRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver((entries) => {
@@ -11657,10 +11722,10 @@ function DataTable({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(TABLE_TOKENS.wrapper, !showBorder && "border-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: scrollContainerRef, className: TABLE_TOKENS.scrollContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("table", { className: TABLE_TOKENS.table, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("tr", { className: TABLE_TOKENS.headerRow, children: [
-        showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn(TABLE_TOKENS.wrapper, !showBorder && "border-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref: scrollContainerRef, className: TABLE_TOKENS.scrollContainer, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("table", { className: TABLE_TOKENS.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("tr", { className: TABLE_TOKENS.headerRow, children: [
+        showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "th",
           {
             className: cn(
@@ -11676,7 +11741,7 @@ function DataTable({
           const isPinned = pinnedColumns.includes(col.key);
           const isLastPinned = col.key === lastPinnedKey;
           const isSorted = (sortState == null ? void 0 : sortState.key) === col.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "th",
             {
               className: cn(
@@ -11692,16 +11757,16 @@ function DataTable({
                 width: getColumnWidthPx(col.width)
               } : col.width ? { width: getColumnWidthPx(col.width) } : void 0,
               onClick: col.isSortable ? () => handleSortClick(col.key) : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "inline-flex items-center", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "inline-flex items-center", children: [
                 col.header,
-                col.isSortable && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                col.isSortable && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   "span",
                   {
                     className: cn(
                       TABLE_TOKENS.sortIconWrapper,
                       isSorted && TABLE_TOKENS.sortIconActive
                     ),
-                    children: !isSorted ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronsUpDown, { className: "h-3.5 w-3.5" }) : (sortState == null ? void 0 : sortState.direction) === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.ChevronDown, { className: "h-3.5 w-3.5" })
+                    children: !isSorted ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronsUpDown, { className: "h-3.5 w-3.5" }) : (sortState == null ? void 0 : sortState.direction) === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react13.ChevronDown, { className: "h-3.5 w-3.5" })
                   }
                 )
               ] })
@@ -11711,20 +11776,20 @@ function DataTable({
         }) : (
           // Skeleton headers when columns is empty
           Array.from({ length: skeletonColumnCount }).map(
-            (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "th",
               {
                 className: cn(
                   TABLE_TOKENS.headerCell,
                   stickyHeader && TABLE_TOKENS.headerCellStickyTop
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-4 w-20 rounded bg-token-grey animate-pulse" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-4 w-20 rounded bg-token-grey animate-pulse" })
               },
               `skeleton-header-${colIndex}`
             )
           )
         ),
-        hasActions && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        hasActions && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "th",
           {
             className: cn(
@@ -11734,7 +11799,7 @@ function DataTable({
             style: { width: ACTIONS_COLUMN_WIDTH }
           }
         ),
-        headerAction && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        headerAction && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "th",
           {
             className: cn(
@@ -11747,18 +11812,18 @@ function DataTable({
               padding: "8px",
               right: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center justify-center h-full w-full", children: headerAction })
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center justify-center h-full w-full", children: headerAction })
           }
         )
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tbody", { children: loading ? (
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tbody", { children: loading ? (
         // Skeleton loading rows
-        Array.from({ length: skeletonRowCount }).map((_2, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        Array.from({ length: skeletonRowCount }).map((_2, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "tr",
           {
             className: cn("group", TABLE_TOKENS.bodyRow),
             children: [
-              showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "td",
                 {
                   className: cn(
@@ -11767,13 +11832,13 @@ function DataTable({
                     checkboxIsLastPinned && TABLE_TOKENS.pinnedLastBorder
                   ),
                   style: { left: 0, width: CHECKBOX_COLUMN_WIDTH },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-4 w-4 rounded bg-token-grey animate-pulse" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-4 w-4 rounded bg-token-grey animate-pulse" })
                 }
               ),
               columns.length > 0 ? orderedColumns.map((col, colIndex) => {
                 const isPinned = pinnedColumns.includes(col.key);
                 const isLastPinned = col.key === lastPinnedKey;
-                return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   "td",
                   {
                     className: cn(
@@ -11785,21 +11850,21 @@ function DataTable({
                       left: stickyOffsets[col.key],
                       width: getColumnWidthPx(col.width)
                     } : col.width ? { width: getColumnWidthPx(col.width) } : void 0,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
                   },
                   `skeleton-col-${col.key}`
                 );
               }) : Array.from({ length: skeletonColumnCount }).map(
-                (_3, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                (_3, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                   "td",
                   {
                     className: TABLE_TOKENS.bodyCell,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
                   },
                   `skeleton-col-${colIndex}`
                 )
               ),
-              hasActions && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              hasActions && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "td",
                 {
                   className: cn(
@@ -11807,7 +11872,7 @@ function DataTable({
                     TABLE_TOKENS.actionsCell
                   ),
                   style: { width: ACTIONS_COLUMN_WIDTH },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-1 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-6 w-6 rounded bg-token-grey animate-pulse" }) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "h-6 w-6 rounded bg-token-grey animate-pulse" }) })
                 }
               )
             ]
@@ -11816,11 +11881,11 @@ function DataTable({
         ))
       ) : (
         // Actual data rows
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
           data.map((row, rowIndex) => {
             const id = resolveId(row, rowIndex);
             const isSelected = selectedSet.has(id);
-            return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
               "tr",
               {
                 className: cn(
@@ -11831,7 +11896,7 @@ function DataTable({
                 "data-selected": isSelected ? "true" : void 0,
                 onClick: onRowClick ? () => onRowClick(row) : void 0,
                 children: [
-                  showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "td",
                     {
                       className: cn(
@@ -11841,7 +11906,7 @@ function DataTable({
                         checkboxIsLastPinned && TABLE_TOKENS.pinnedLastBorder
                       ),
                       style: { left: 0, width: CHECKBOX_COLUMN_WIDTH },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                         Checkbox,
                         {
                           checked: isSelected,
@@ -11855,7 +11920,7 @@ function DataTable({
                     const isPinned = pinnedColumns.includes(col.key);
                     const isLastPinned = col.key === lastPinnedKey;
                     const content = col.accessor(row);
-                    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       "td",
                       {
                         className: cn(
@@ -11867,12 +11932,12 @@ function DataTable({
                           left: stickyOffsets[col.key],
                           width: getColumnWidthPx(col.width)
                         } : col.width ? { width: getColumnWidthPx(col.width) } : void 0,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center", children: renderCellContent(content) })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center", children: renderCellContent(content) })
                       },
                       col.key
                     );
                   }),
-                  hasActions && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  hasActions && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                     "td",
                     {
                       className: cn(
@@ -11880,8 +11945,8 @@ function DataTable({
                         TABLE_TOKENS.actionsCell
                       ),
                       style: { width: ACTIONS_COLUMN_WIDTH },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-1 justify-end", children: actions.map((action, actionIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Tooltip, { delayDuration: 0, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1 justify-end", children: actions.map((action, actionIndex) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { delayDuration: 0, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                           Button,
                           {
                             variant: "link",
@@ -11891,7 +11956,7 @@ function DataTable({
                             children: action.icon
                           }
                         ) }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: action.label }) })
+                        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: action.label }) })
                       ] }, actionIndex)) })
                     }
                   )
@@ -11900,12 +11965,12 @@ function DataTable({
               id
             );
           }),
-          data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          data.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "td",
             {
               colSpan: orderedColumns.length + (hasActions ? 1 : 0) + (showCheckbox ? 1 : 0),
               className: "p-0",
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "div",
                 {
                   className: "sticky left-0 px-4 py-8 text-center text-sm text-fg-grey-secondary",
@@ -11918,7 +11983,7 @@ function DataTable({
         ] })
       ) })
     ] }) }),
-    showPagination && !loading && data.length > 0 && onPageChange && onRowsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(TABLE_TOKENS.pagination, !showBorder && "border-t-0"), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    showPagination && !loading && data.length > 0 && onPageChange && onRowsPerPageChange && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn(TABLE_TOKENS.pagination, !showBorder && "border-t-0"), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       Pagination,
       {
         handlePageChange: onPageChange,
@@ -11945,7 +12010,7 @@ var ColumnWidth = /* @__PURE__ */ ((ColumnWidth2) => {
 })(ColumnWidth || {});
 
 // src/filter-select/filter-select.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var DropdownMenuPrimitive3 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react16 = require("lucide-react");
 var import_react_day_picker = require("react-day-picker");
@@ -11999,12 +12064,15 @@ var FILTER_SELECT_TOKENS = {
   dropdown: {
     base: [
       "bg-token-white flex flex-col items-stretch",
-      "pt-1 pb-2 px-1 rounded-[16px] shadow-sm",
+      // 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",
       "outline-none"
     ].join(" "),
-    // Date dropdown: Figma p-12, gap-16, rounded-16
-    date: "p-3 gap-4 rounded-[16px]"
+    // Date dropdown — tight 4px padding on all sides so the calendar / presets
+    // sit flush against the 16px corner radius with no extra whitespace gutter.
+    date: "p-1 gap-2 rounded-[16px]"
   },
   // ---------- List item (.menu - secondary) ----------
   // Figma 4085:5931 exact spec:
@@ -12096,7 +12164,22 @@ var FILTER_SELECT_TOKENS = {
   // ---------- Empty state ----------
   emptyState: "px-3 py-4 font-sans text-xs leading-4 text-fg-grey-secondary text-center w-full",
   // ---------- Date presets (left sidebar) ----------
-  datePresetSidebar: "flex flex-col gap-1 shrink-0 w-[116px] min-h-full",
+  // `gap-0` on the outer column so the preset list and the bottom Remove/Clear
+  // button own their own spacing — avoids a double-gap between the last preset
+  // and the bottom action.
+  datePresetSidebar: "flex flex-col shrink-0 w-[116px] min-h-full",
+  // Bottom action (Remove/Clear) for the date filter. Lives INSIDE the preset
+  // column so it only occupies the sidebar width, not the whole dropdown. No
+  // sticky / no border-t / no rounded-b — those were artefacts of the old
+  // full-width footer. Pinned to the BOTTOM of the sidebar via `mt-auto` so
+  // the action row aligns with the calendar's bottom edge — no extra
+  // whitespace opens between Remove and the dropdown's rounded corner.
+  datePresetSidebarAction: {
+    wrapper: "group/remove mt-auto w-full rounded-[8px] transition-colors hover:bg-interaction-hov-solid-primary",
+    button: "flex items-center gap-2 w-full p-2 rounded-[8px] cursor-pointer outline-none bg-transparent",
+    icon: "shrink-0 size-4 text-fg-black transition-colors group-hover/remove:text-fg-destructive",
+    text: "font-sans font-normal text-xs leading-4 tracking-normal whitespace-nowrap text-fg-black transition-colors group-hover/remove:text-fg-destructive"
+  },
   datePreset: {
     base: "w-full text-left px-2.5 py-2 rounded-full font-sans text-xs font-medium leading-4 cursor-pointer transition-colors border border-transparent outline-none",
     default: "text-fg-grey-secondary hover:bg-interaction-hov-solid-primary",
@@ -12232,11 +12315,11 @@ var FILTER_SELECT_TOKENS = {
 };
 
 // src/filter-select/filter-list-item.tsx
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var import_lucide_react15 = require("lucide-react");
 
 // src/spinner/spinner.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
 
 // src/spinner/variables.ts
@@ -12257,10 +12340,10 @@ var SPINNER_TOKENS = {
 };
 
 // src/spinner/spinner.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Spinner = React34.forwardRef(
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Spinner = React35.forwardRef(
   ({ size = "md", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: cn(SPINNER_TOKENS.base, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref, className: cn(SPINNER_TOKENS.base, className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       import_lucide_react14.Loader2,
       {
         className: cn(SPINNER_TOKENS.size[size], SPINNER_TOKENS.icon),
@@ -12272,8 +12355,8 @@ var Spinner = React34.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/filter-select/filter-list-item.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var FilterListItem = React35.forwardRef(
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var FilterListItem = React36.forwardRef(
   ({
     value,
     label,
@@ -12294,18 +12377,18 @@ var FilterListItem = React35.forwardRef(
     className,
     ...props
   }, ref) => {
-    const handleClick = React35.useCallback(() => {
+    const handleClick = React36.useCallback(() => {
       if (loading) return;
       onSelect == null ? void 0 : onSelect(value);
     }, [loading, onSelect, value]);
-    const handleDragStart = React35.useCallback(
+    const handleDragStart = React36.useCallback(
       (e) => {
         e.dataTransfer.effectAllowed = "move";
         onDragStart == null ? void 0 : onDragStart(e);
       },
       [onDragStart]
     );
-    const handleDragOver = React35.useCallback(
+    const handleDragOver = React36.useCallback(
       (e) => {
         e.preventDefault();
         e.dataTransfer.dropEffect = "move";
@@ -12313,40 +12396,40 @@ var FilterListItem = React35.forwardRef(
       },
       [onDragOver]
     );
-    const handleDragLeave = React35.useCallback(
+    const handleDragLeave = React36.useCallback(
       (e) => {
         onDragLeave == null ? void 0 : onDragLeave(e);
       },
       [onDragLeave]
     );
-    const handleDrop = React35.useCallback(
+    const handleDrop = React36.useCallback(
       (e) => {
         e.preventDefault();
         onDrop == null ? void 0 : onDrop(e);
       },
       [onDrop]
     );
-    const handleDragEnd = React35.useCallback(
+    const handleDragEnd = React36.useCallback(
       (e) => {
         onDragEnd == null ? void 0 : onDragEnd(e);
       },
       [onDragEnd]
     );
-    const handleGripClick = React35.useCallback((e) => {
+    const handleGripClick = React36.useCallback((e) => {
       e.stopPropagation();
     }, []);
     const renderIcon2 = () => {
       if (!icon) return null;
-      if (React35.isValidElement(icon)) return icon;
+      if (React36.isValidElement(icon)) return icon;
       if (typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon) {
-        return React35.createElement(
+        return React36.createElement(
           icon,
           { className: "size-4" }
         );
       }
       return icon;
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
       {
         ref,
@@ -12372,23 +12455,23 @@ var FilterListItem = React35.forwardRef(
         onDragEnd: draggable ? handleDragEnd : void 0,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
-            draggable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+            draggable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "span",
               {
                 className: FILTER_SELECT_TOKENS.dragHandle,
                 onClick: handleGripClick,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.GripHorizontal, { className: "size-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.GripHorizontal, { className: "size-4" })
               }
             ),
-            icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "shrink-0 flex items-center justify-center text-fg-grey-secondary", children: renderIcon2() }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col min-w-0 flex-1 gap-[2px]", children: [
-              labelNode ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "min-w-0", children: labelNode }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: FILTER_SELECT_TOKENS.itemLabel, children: label }),
-              subtext && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: FILTER_SELECT_TOKENS.itemSubtext, children: subtext })
+            icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "shrink-0 flex items-center justify-center text-fg-grey-secondary", children: renderIcon2() }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col min-w-0 flex-1 gap-[2px]", children: [
+              labelNode ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "min-w-0", children: labelNode }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: FILTER_SELECT_TOKENS.itemLabel, children: label }),
+              subtext && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: FILTER_SELECT_TOKENS.itemSubtext, children: subtext })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Spinner, { size: "sm" }) : selected ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Check, { className: FILTER_SELECT_TOKENS.itemTick, "aria-hidden": "true" }) : null })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Spinner, { size: "sm" }) : selected ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react15.Check, { className: FILTER_SELECT_TOKENS.itemTick, "aria-hidden": "true" }) : null })
         ]
       }
     );
@@ -12397,7 +12480,7 @@ var FilterListItem = React35.forwardRef(
 FilterListItem.displayName = "FilterListItem";
 
 // src/filter-select/filter-select.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function startOfDay(d) {
   const x = new Date(d);
   x.setHours(0, 0, 0, 0);
@@ -12517,11 +12600,11 @@ var OperandDropdown = ({
   disabled
 }) => {
   var _a5, _b5;
-  const [open, setOpen] = React36.useState(false);
+  const [open, setOpen] = React37.useState(false);
   const selectedLabel = (_b5 = (_a5 = options.find((o) => o.value === value)) == null ? void 0 : _a5.label) != null ? _b5 : "";
   const hasValue = Boolean(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
@@ -12538,7 +12621,7 @@ var OperandDropdown = ({
         ),
         "aria-label": placeholder || "Select operand",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "span",
             {
               className: cn(
@@ -12548,7 +12631,7 @@ var OperandDropdown = ({
               children: hasValue ? selectedLabel : placeholder || ""
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_lucide_react16.ChevronDown,
             {
               className: cn(
@@ -12560,7 +12643,7 @@ var OperandDropdown = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.operand.content, "z-[250]"),
@@ -12571,7 +12654,7 @@ var OperandDropdown = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: options.map((opt) => {
           const isSelected = opt.value === value;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
             DropdownMenuPrimitive3.Item,
             {
               onSelect: (e) => {
@@ -12582,8 +12665,8 @@ var OperandDropdown = ({
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.operand.item,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: opt.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: opt.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   import_lucide_react16.Check,
                   {
                     className: FILTER_SELECT_TOKENS.operand.itemTick,
@@ -12621,12 +12704,12 @@ var TimeSelectPill = ({
   container,
   themeClass
 }) => {
-  const [open, setOpen] = React36.useState(false);
-  const selectedRef = React36.useRef(null);
+  const [open, setOpen] = React37.useState(false);
+  const selectedRef = React37.useRef(null);
   const currentHour = value.getHours();
   const currentMinute = value.getMinutes();
   const selectedSlotIndex = currentHour * 2 + (currentMinute >= 30 ? 1 : 0);
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     if (!open) return;
     const id = window.setTimeout(() => {
       var _a5;
@@ -12640,20 +12723,20 @@ var TimeSelectPill = ({
     onChange(out);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": ariaLabel,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: formatTime12h(value) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: formatTime12h(value) }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12664,7 +12747,7 @@ var TimeSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: TIME_OPTIONS_30M.map((opt, idx) => {
           const isSelected = idx === selectedSlotIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12674,7 +12757,7 @@ var TimeSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: opt.label })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: opt.label })
             },
             opt.label
           );
@@ -12703,9 +12786,9 @@ var MonthSelectPill = ({
   container,
   themeClass
 }) => {
-  const [open, setOpen] = React36.useState(false);
-  const selectedRef = React36.useRef(null);
-  React36.useEffect(() => {
+  const [open, setOpen] = React37.useState(false);
+  const selectedRef = React37.useRef(null);
+  React37.useEffect(() => {
     if (!open) return;
     const id = window.setTimeout(() => {
       var _a5;
@@ -12713,20 +12796,20 @@ var MonthSelectPill = ({
     }, 0);
     return () => window.clearTimeout(id);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": "Select month",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: MONTH_LABELS[monthIndex] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: MONTH_LABELS[monthIndex] }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12737,7 +12820,7 @@ var MonthSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: MONTH_LABELS.map((label, idx) => {
           const isSelected = idx === monthIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12748,7 +12831,7 @@ var MonthSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: label })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: label })
             },
             label
           );
@@ -12765,14 +12848,14 @@ var YearSelectPill = ({
   container,
   themeClass
 }) => {
-  const [open, setOpen] = React36.useState(false);
-  const selectedRef = React36.useRef(null);
-  const years = React36.useMemo(() => {
+  const [open, setOpen] = React37.useState(false);
+  const selectedRef = React37.useRef(null);
+  const years = React37.useMemo(() => {
     const out = [];
     for (let y = minYear; y <= maxYear; y++) out.push(y);
     return out;
   }, [minYear, maxYear]);
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     if (!open) return;
     const id = window.setTimeout(() => {
       var _a5;
@@ -12780,20 +12863,20 @@ var YearSelectPill = ({
     }, 0);
     return () => window.clearTimeout(id);
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": "Select year",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: year }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: year }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronDown, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12804,7 +12887,7 @@ var YearSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: years.map((y) => {
           const isSelected = y === year;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12815,7 +12898,7 @@ var YearSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "truncate", children: y })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate", children: y })
             },
             y
           );
@@ -12824,15 +12907,15 @@ var YearSelectPill = ({
     ) }) })
   ] });
 };
-var CalendarMonthCaptionContext = React36.createContext(null);
+var CalendarMonthCaptionContext = React37.createContext(null);
 var CalendarMonthCaption = ({
   calendarMonth,
   displayIndex
 }) => {
   var _a5, _b5;
-  const ctx = React36.useContext(CalendarMonthCaptionContext);
+  const ctx = React37.useContext(CalendarMonthCaptionContext);
   const { goToMonth, previousMonth, nextMonth, months } = (0, import_react_day_picker.useDayPicker)();
-  if (!ctx) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {});
+  if (!ctx) return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {});
   const { date, onDateChange, container, themeClass, showTime, minYear, maxYear } = ctx;
   const monthDate = calendarMonth.date;
   const monthIndex = monthDate.getMonth();
@@ -12864,8 +12947,8 @@ var CalendarMonthCaption = ({
       onDateChange == null ? void 0 : onDateChange({ start: date == null ? void 0 : date.start, end: d });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center justify-between gap-1 w-full px-0 py-1", children: [
-    isFirst && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  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)(
       "button",
       {
         type: "button",
@@ -12873,11 +12956,11 @@ var CalendarMonthCaption = ({
         "aria-label": "Previous month",
         onClick: () => previousMonth && goToMonth(previousMonth),
         disabled: !previousMonth,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronLeft, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronLeft, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1 flex-1 justify-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MonthSelectPill,
         {
           monthIndex,
@@ -12886,7 +12969,7 @@ var CalendarMonthCaption = ({
           themeClass
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         YearSelectPill,
         {
           year,
@@ -12897,7 +12980,7 @@ var CalendarMonthCaption = ({
           themeClass
         }
       ),
-      showTime && timeValue && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      showTime && timeValue && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         TimeSelectPill,
         {
           value: timeValue,
@@ -12908,7 +12991,7 @@ var CalendarMonthCaption = ({
         }
       )
     ] }),
-    isLast && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    isLast && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "button",
       {
         type: "button",
@@ -12916,7 +12999,7 @@ var CalendarMonthCaption = ({
         "aria-label": "Next month",
         onClick: () => nextMonth && goToMonth(nextMonth),
         disabled: !nextMonth,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.ChevronRight, { className: "size-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.ChevronRight, { className: "size-4" })
       }
     )
   ] });
@@ -12926,7 +13009,7 @@ var DEFAULT_DURATION_UNITS = [
   { value: "min", label: "min" },
   { value: "hours", label: "hours" }
 ];
-var FilterSelect = React36.forwardRef(
+var FilterSelect = React37.forwardRef(
   ({
     label = "Language",
     icon: Icon2,
@@ -12971,24 +13054,26 @@ var FilterSelect = React36.forwardRef(
     showTime = true,
     emptyStateLabel,
     labelClassName,
+    isPersistent = false,
     ...props
   }, ref) => {
+    const footerActionLabel = isPersistent ? "Clear" : "Remove";
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const [internalOpen, setInternalOpen] = React36.useState(
+    const [internalOpen, setInternalOpen] = React37.useState(
       defaultOpen != null ? defaultOpen : false
     );
     const open = controlledOpen != null ? controlledOpen : internalOpen;
-    const [searchQuery, setSearchQuery] = React36.useState("");
-    const triggerRef = React36.useRef(null);
-    const [triggerWidth, setTriggerWidth] = React36.useState(null);
-    const [focusedMonth, setFocusedMonth] = React36.useState(
+    const [searchQuery, setSearchQuery] = React37.useState("");
+    const triggerRef = React37.useRef(null);
+    const [triggerWidth, setTriggerWidth] = React37.useState(null);
+    const [focusedMonth, setFocusedMonth] = React37.useState(
       () => {
         var _a5;
         return (_a5 = date == null ? void 0 : date.start) != null ? _a5 : /* @__PURE__ */ new Date();
       }
     );
-    const setOpen = React36.useCallback(
+    const setOpen = React37.useCallback(
       (newOpen) => {
         if (controlledOpen === void 0) {
           setInternalOpen(newOpen);
@@ -12997,25 +13082,25 @@ var FilterSelect = React36.forwardRef(
       },
       [controlledOpen, onOpenChange]
     );
-    const container = React36.useMemo(
+    const container = React37.useMemo(
       () => {
         var _a5;
         return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
       },
       []
     );
-    const selectedItemsOrdered = React36.useMemo(() => {
+    const selectedItemsOrdered = React37.useMemo(() => {
       if (!selectedItems.length) return [];
       return selectedItems;
     }, [selectedItems]);
-    const filteredItems = React36.useMemo(() => {
+    const filteredItems = React37.useMemo(() => {
       return filterItemsBySearch2(items, searchQuery);
     }, [items, searchQuery]);
-    const isSectioned = React36.useMemo(
+    const isSectioned = React37.useMemo(
       () => filteredItems.length > 0 && "sectionLabel" in filteredItems[0],
       [filteredItems]
     );
-    const sortedItems = React36.useMemo(() => {
+    const sortedItems = React37.useMemo(() => {
       if (!draggable || !isSectioned) {
         if (!draggable) return filteredItems;
         const flatItems = filteredItems;
@@ -13048,7 +13133,7 @@ var FilterSelect = React36.forwardRef(
         return { ...section, items: sorted };
       });
     }, [filteredItems, selectedItemsOrdered, draggable, isSectioned]);
-    const selectedLabels = React36.useMemo(() => {
+    const selectedLabels = React37.useMemo(() => {
       const itemMap = /* @__PURE__ */ new Map();
       const isSectionedItems = items.length > 0 && "sectionLabel" in items[0];
       if (isSectionedItems) {
@@ -13069,7 +13154,7 @@ var FilterSelect = React36.forwardRef(
         }
       );
     }, [selectedItemsOrdered, items]);
-    const selectedItemsText = React36.useMemo(() => {
+    const selectedItemsText = React37.useMemo(() => {
       var _a5, _b5, _c, _d, _e2, _f;
       let trimmedText = text == null ? void 0 : text.trim();
       if (type === "text_with_operands" && trimmedText && trimmedText.length > 0) {
@@ -13124,10 +13209,10 @@ var FilterSelect = React36.forwardRef(
       durationUnits
     ]);
     const hasValue = Boolean(selectedItemsText);
-    const [visibleItemsCount, setVisibleItemsCount] = React36.useState(null);
-    const selectedItemsRef = React36.useRef(null);
-    const measureRef = React36.useRef(null);
-    React36.useEffect(() => {
+    const [visibleItemsCount, setVisibleItemsCount] = React37.useState(null);
+    const selectedItemsRef = React37.useRef(null);
+    const measureRef = React37.useRef(null);
+    React37.useEffect(() => {
       if (type !== "list" || selectedLabels.length === 0) {
         setVisibleItemsCount(null);
         return;
@@ -13199,7 +13284,7 @@ var FilterSelect = React36.forwardRef(
       ro.observe(containerEl);
       return () => ro.disconnect();
     }, [type, selectedLabels, selectedItemsMaxWidth, selectedItemsText]);
-    React36.useEffect(() => {
+    React37.useEffect(() => {
       const el = triggerRef.current;
       if (!el) return;
       const m = () => setTriggerWidth(el.offsetWidth);
@@ -13208,27 +13293,27 @@ var FilterSelect = React36.forwardRef(
       ro.observe(el);
       return () => ro.disconnect();
     }, [open, selectedItemsText]);
-    const handleItemSelect = React36.useCallback(
+    const handleItemSelect = React37.useCallback(
       (value) => {
         const newSelection = selectedItems.includes(value) ? selectedItems.filter((v2) => v2 !== value) : [...selectedItems, value];
         onSelectionChange == null ? void 0 : onSelectionChange(newSelection);
       },
       [selectedItems, onSelectionChange]
     );
-    const handleClearAll = React36.useCallback(() => {
+    const handleClearAll = React37.useCallback(() => {
       onSelectionChange == null ? void 0 : onSelectionChange([]);
       onRemoveAll == null ? void 0 : onRemoveAll();
     }, [onSelectionChange, onRemoveAll]);
-    const handleTextClear = React36.useCallback(() => {
+    const handleTextClear = React37.useCallback(() => {
       onTextChange == null ? void 0 : onTextChange("");
       onOperandChange == null ? void 0 : onOperandChange("");
       onRemoveAll == null ? void 0 : onRemoveAll();
     }, [onTextChange, onOperandChange, onRemoveAll]);
-    const handleDateClear = React36.useCallback(() => {
+    const handleDateClear = React37.useCallback(() => {
       onDateChange == null ? void 0 : onDateChange({ start: void 0, end: void 0 });
       onRemoveAll == null ? void 0 : onRemoveAll();
     }, [onDateChange, onRemoveAll]);
-    const hasContentToClear = React36.useMemo(() => {
+    const hasContentToClear = React37.useMemo(() => {
       if (type === "text" || type === "numeric") {
         return text !== void 0 && text !== "";
       }
@@ -13249,18 +13334,18 @@ var FilterSelect = React36.forwardRef(
       }
       return selectedItems.length > 0;
     }, [type, text, operand, selectedItems.length, date, rangeMin, rangeMax]);
-    const [draggedValue, setDraggedValue] = React36.useState(null);
-    const [dragOverValue, setDragOverValue] = React36.useState(
+    const [draggedValue, setDraggedValue] = React37.useState(null);
+    const [dragOverValue, setDragOverValue] = React37.useState(
       null
     );
-    const handleDragStart = React36.useCallback(
+    const handleDragStart = React37.useCallback(
       (e, value) => {
         setDraggedValue(value);
         e.dataTransfer.effectAllowed = "move";
       },
       []
     );
-    const handleDragOver = React36.useCallback(
+    const handleDragOver = React37.useCallback(
       (e, value) => {
         e.preventDefault();
         if (draggedValue !== null && draggedValue !== value && selectedItems.includes(value)) {
@@ -13269,10 +13354,10 @@ var FilterSelect = React36.forwardRef(
       },
       [draggedValue, selectedItems]
     );
-    const handleDragLeave = React36.useCallback(() => {
+    const handleDragLeave = React37.useCallback(() => {
       setDragOverValue(null);
     }, []);
-    const handleDrop = React36.useCallback(
+    const handleDrop = React37.useCallback(
       (e, dropValue) => {
         e.preventDefault();
         if (draggedValue === null || draggedValue === dropValue || !selectedItems.includes(dropValue)) {
@@ -13304,13 +13389,13 @@ var FilterSelect = React36.forwardRef(
         onSelectionChange
       ]
     );
-    const handleDragEnd = React36.useCallback(() => {
+    const handleDragEnd = React37.useCallback(() => {
       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 renderFooterClear = (onClick, labelText, ariaLabel) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    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",
       {
         type: "button",
@@ -13318,13 +13403,13 @@ var FilterSelect = React36.forwardRef(
         className: FILTER_SELECT_TOKENS.removeButton.base,
         "aria-label": ariaLabel,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Trash2, { className: FILTER_SELECT_TOKENS.removeButton.icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.removeButton.text, children: labelText })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Trash2, { className: FILTER_SELECT_TOKENS.removeButton.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.removeButton.text, children: labelText })
         ]
       }
     ) });
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: "inline-block font-sans", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: "inline-block font-sans", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "button",
         {
           type: "button",
@@ -13340,9 +13425,9 @@ var FilterSelect = React36.forwardRef(
             triggerClassName
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-              Icon2 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon2, { className: FILTER_SELECT_TOKENS.icon }),
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+              Icon2 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon2, { className: FILTER_SELECT_TOKENS.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                 "span",
                 {
                   "data-filter-label": "",
@@ -13350,8 +13435,16 @@ var FilterSelect = React36.forwardRef(
                   children: label
                 }
               ),
-              selectedItemsText && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              selectedItemsText && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-filter-separator": "",
+                    className: FILTER_SELECT_TOKENS.separator
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     ref: selectedItemsRef,
@@ -13365,7 +13458,7 @@ var FilterSelect = React36.forwardRef(
                     )}, +${selectedLabels.length - visibleItemsCount}` : selectedItemsText
                   }
                 ),
-                type === "list" && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                type === "list" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "span",
                   {
                     ref: measureRef,
@@ -13384,7 +13477,7 @@ var FilterSelect = React36.forwardRef(
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               import_lucide_react16.ChevronDown,
               {
                 className: cn(
@@ -13397,14 +13490,14 @@ var FilterSelect = React36.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
           className: cn(
             !container && "lego-land",
             !container && themeClass
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             DropdownMenuPrimitive3.Content,
             {
               className: cn(
@@ -13447,8 +13540,8 @@ var FilterSelect = React36.forwardRef(
                   e.preventDefault();
                 }
               },
-              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Spinner, { size: "md" }) : type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              children: loading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Spinner, { size: "md" }) : type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                   "textarea",
                   {
                     value: text != null ? text : "",
@@ -13458,10 +13551,10 @@ var FilterSelect = React36.forwardRef(
                     autoFocus: true
                   }
                 ) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, "Remove", "Remove text")
-              ] }) : type === "text_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pb-2 -mx-1 px-1 border-b border-token-xlight", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                (showClearBtn || hasContentToClear) && 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)(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
@@ -13471,8 +13564,8 @@ var FilterSelect = React36.forwardRef(
                       container,
                       themeClass
                     }
-                  ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "textarea",
                     {
                       value: text != null ? text : "",
@@ -13485,12 +13578,12 @@ var FilterSelect = React36.forwardRef(
                 ] }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
                   handleTextClear,
-                  "Remove",
-                  "Remove filter"
+                  footerActionLabel,
+                  `${footerActionLabel} filter`
                 )
-              ] }) : type === "numeric" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              ] }) : type === "numeric" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "input",
                     {
                       type: "number",
@@ -13501,12 +13594,12 @@ var FilterSelect = React36.forwardRef(
                       autoFocus: true
                     }
                   ),
-                  unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                  unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, "Remove", "Remove number")
-              ] }) : type === "numeric_with_operands" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-1 flex flex-col gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pb-2 -mx-1 px-1 border-b border-token-xlight", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                (showClearBtn || hasContentToClear) && 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 : "",
@@ -13516,10 +13609,10 @@ var FilterSelect = React36.forwardRef(
                       container,
                       themeClass
                     }
-                  ) }),
-                  isRangeMode ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  ),
+                  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: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "input",
                         {
                           type: "text",
@@ -13536,7 +13629,7 @@ var FilterSelect = React36.forwardRef(
                           className: FILTER_SELECT_TOKENS.bodyInput.input
                         }
                       ),
-                      unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "span",
                         {
                           className: FILTER_SELECT_TOKENS.bodyInput.unit,
@@ -13544,9 +13637,9 @@ var FilterSelect = React36.forwardRef(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    /* @__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.jsx)(
                         "input",
                         {
                           type: "text",
@@ -13563,7 +13656,7 @@ var FilterSelect = React36.forwardRef(
                           className: FILTER_SELECT_TOKENS.bodyInput.input
                         }
                       ),
-                      unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                      unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "span",
                         {
                           className: FILTER_SELECT_TOKENS.bodyInput.unit,
@@ -13571,8 +13664,8 @@ var FilterSelect = React36.forwardRef(
                         }
                       )
                     ] })
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
                         type: "number",
@@ -13583,7 +13676,7 @@ var FilterSelect = React36.forwardRef(
                         autoFocus: true
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
@@ -13594,13 +13687,13 @@ var FilterSelect = React36.forwardRef(
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
                     onRemoveAll == null ? void 0 : onRemoveAll();
                   },
-                  "Remove",
-                  "Remove filter"
+                  footerActionLabel,
+                  `${footerActionLabel} filter`
                 )
-              ] }) : type === "in_between" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "p-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              ] }) : type === "in_between" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "p-1", children: /* @__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: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
                         type: "text",
@@ -13618,11 +13711,11 @@ var FilterSelect = React36.forwardRef(
                         autoFocus: true
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__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.jsx)(
                       "input",
                       {
                         type: "text",
@@ -13639,7 +13732,7 @@ var FilterSelect = React36.forwardRef(
                         className: FILTER_SELECT_TOKENS.bodyInput.input
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }) }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
@@ -13648,12 +13741,12 @@ var FilterSelect = React36.forwardRef(
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
                     onRemoveAll == null ? void 0 : onRemoveAll();
                   },
-                  "Remove",
-                  "Remove range"
+                  footerActionLabel,
+                  `${footerActionLabel} range`
                 )
-              ] }) : type === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "p-1 flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              ] }) : type === "duration" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "p-1 flex items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     "input",
                     {
                       type: "number",
@@ -13664,7 +13757,7 @@ var FilterSelect = React36.forwardRef(
                       autoFocus: true
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                     OperandDropdown,
                     {
                       value: durationUnit != null ? durationUnit : "",
@@ -13682,41 +13775,75 @@ var FilterSelect = React36.forwardRef(
                     onDurationUnitChange == null ? void 0 : onDurationUnitChange("");
                     onRemoveAll == null ? void 0 : onRemoveAll();
                   },
-                  "Remove",
-                  "Remove duration"
+                  footerActionLabel,
+                  `${footerActionLabel} duration`
                 )
-              ] }) : type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col min-h-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              ] }) : type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col min-h-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                   "div",
                   {
                     className: cn(
-                      "flex gap-4 flex-1 min-h-0",
+                      // Tight `gap-2` between presets and calendar so there
+                      // is no wide gutter between the two columns.
+                      "flex gap-2 flex-1 min-h-0",
                       datePresets !== false && "flex-row"
                     ),
                     children: [
-                      datePresets !== false && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: FILTER_SELECT_TOKENS.datePresetSidebar, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-1", children: (Array.isArray(datePresets) ? datePresets : DEFAULT_DATE_PRESETS).map((preset) => {
-                        const selected = isPresetSelected(preset, date);
-                        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => {
-                              const range = preset.getRange();
-                              onDateChange == null ? void 0 : onDateChange({
-                                start: range.start,
-                                end: range.end
-                              });
+                      datePresets !== false && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.datePresetSidebar, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-1", children: (Array.isArray(datePresets) ? datePresets : DEFAULT_DATE_PRESETS).map((preset) => {
+                          const selected = isPresetSelected(preset, date);
+                          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => {
+                                const range = preset.getRange();
+                                onDateChange == null ? void 0 : onDateChange({
+                                  start: range.start,
+                                  end: range.end
+                                });
+                              },
+                              className: cn(
+                                FILTER_SELECT_TOKENS.datePreset.base,
+                                selected ? FILTER_SELECT_TOKENS.datePreset.selected : FILTER_SELECT_TOKENS.datePreset.default
+                              ),
+                              children: preset.label
                             },
-                            className: cn(
-                              FILTER_SELECT_TOKENS.datePreset.base,
-                              selected ? FILTER_SELECT_TOKENS.datePreset.selected : FILTER_SELECT_TOKENS.datePreset.default
-                            ),
-                            children: preset.label
-                          },
-                          preset.value
-                        );
-                      }) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col min-w-0 flex-1 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                            preset.value
+                          );
+                        }) }),
+                        (showClearBtn || hasContentToClear) && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          "div",
+                          {
+                            className: FILTER_SELECT_TOKENS.datePresetSidebarAction.wrapper,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: handleDateClear,
+                                className: FILTER_SELECT_TOKENS.datePresetSidebarAction.button,
+                                "aria-label": `${footerActionLabel} date range`,
+                                children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                                    import_lucide_react16.Trash2,
+                                    {
+                                      className: FILTER_SELECT_TOKENS.datePresetSidebarAction.icon
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                                    "span",
+                                    {
+                                      className: FILTER_SELECT_TOKENS.datePresetSidebarAction.text,
+                                      children: footerActionLabel
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col min-w-0 flex-1 gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         CalendarMonthCaptionContext.Provider,
                         {
                           value: {
@@ -13728,7 +13855,7 @@ var FilterSelect = React36.forwardRef(
                             minYear: 2020,
                             maxYear: (/* @__PURE__ */ new Date()).getFullYear() + 5
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                             import_react_day_picker.DayPicker,
                             {
                               mode: "range",
@@ -13766,7 +13893,7 @@ var FilterSelect = React36.forwardRef(
                                 MonthCaption: CalendarMonthCaption,
                                 // Hide the default nav toolbar — chevrons now live
                                 // inside our custom MonthCaption on the outer edges.
-                                Nav: () => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, {})
+                                Nav: () => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, {})
                               },
                               className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px]"
                             }
@@ -13776,19 +13903,19 @@ var FilterSelect = React36.forwardRef(
                     ]
                   }
                 ),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                datePresets === false && (showClearBtn || hasContentToClear) && renderFooterClear(
                   handleDateClear,
-                  "Remove",
-                  "Remove date range"
+                  footerActionLabel,
+                  `${footerActionLabel} date range`
                 )
               ] }) : (
                 // -----------------------------------------------------------------
                 // Default: LIST type
                 // -----------------------------------------------------------------
-                /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                  showSearch && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: FILTER_SELECT_TOKENS.searchBar.wrapper, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.Search, { className: FILTER_SELECT_TOKENS.searchBar.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                  showSearch && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: FILTER_SELECT_TOKENS.searchBar.wrapper, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.Search, { className: FILTER_SELECT_TOKENS.searchBar.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "input",
                       {
                         type: "text",
@@ -13799,20 +13926,20 @@ var FilterSelect = React36.forwardRef(
                         className: FILTER_SELECT_TOKENS.searchBar.input
                       }
                     ),
-                    searchQuery && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    searchQuery && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "button",
                       {
                         type: "button",
                         onClick: () => setSearchQuery(""),
                         "aria-label": "Remove search",
                         className: FILTER_SELECT_TOKENS.searchBar.clearBtn,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react16.X, { className: FILTER_SELECT_TOKENS.searchBar.icon })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react16.X, { className: FILTER_SELECT_TOKENS.searchBar.icon })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-1 w-full min-w-0 overflow-y-auto flex-1 min-h-0", children: isSectioned ? sortedItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map(
-                    (section, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col gap-1 w-full min-w-0 overflow-y-auto flex-1 min-h-0", children: isSectioned ? sortedItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map(
+                    (section, sectionIdx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "div",
                         {
                           className: FILTER_SELECT_TOKENS.sectionHeader,
@@ -13823,7 +13950,7 @@ var FilterSelect = React36.forwardRef(
                         const isSelected = selectedItems.includes(
                           item.value
                         );
-                        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                           FilterListItem,
                           {
                             value: item.value,
@@ -13847,9 +13974,9 @@ var FilterSelect = React36.forwardRef(
                         );
                       })
                     ] }, sectionIdx)
-                  ) : sortedItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map((item) => {
+                  ) : sortedItems.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map((item) => {
                     const isSelected = selectedItems.includes(item.value);
-                    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       FilterListItem,
                       {
                         value: item.value,
@@ -13874,8 +14001,8 @@ var FilterSelect = React36.forwardRef(
                   }) }),
                   showClearBtn && selectedItems.length > 0 && renderFooterClear(
                     handleClearAll,
-                    "Remove",
-                    "Remove all selected items"
+                    footerActionLabel,
+                    `${footerActionLabel} all selected items`
                   )
                 ] })
               )
@@ -13889,17 +14016,17 @@ var FilterSelect = React36.forwardRef(
 FilterSelect.displayName = "FilterSelect";
 
 // src/filter-select/compound-filter-select.tsx
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 var DropdownMenuPrimitive4 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function renderIcon(icon, className) {
   if (!icon) return null;
-  if (React37.isValidElement(icon)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "inline-flex items-center", children: icon });
+  if (React38.isValidElement(icon)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-flex items-center", children: icon });
   }
   if (typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon) {
-    return React37.createElement(icon, {
+    return React38.createElement(icon, {
       className: cn("size-4", className)
     });
   }
@@ -13918,8 +14045,8 @@ function CompoundFilterSelect({
 }) {
   const { theme } = useTheme();
   const themeClass = theme === "dark" ? "dark" : "light";
-  const [open, setOpen] = React37.useState(false);
-  const container = React37.useMemo(
+  const [open, setOpen] = React38.useState(false);
+  const container = React38.useMemo(
     () => {
       var _a5;
       return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
@@ -13928,7 +14055,7 @@ function CompoundFilterSelect({
   );
   const selectedOption = options.find((opt) => opt.value === value);
   const effectiveLeadingIcon = leadingIcon != null ? leadingIcon : selectedOption == null ? void 0 : selectedOption.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       className: cn(
@@ -13938,8 +14065,8 @@ function CompoundFilterSelect({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(DropdownMenuPrimitive4.Root, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenuPrimitive4.Root, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "button",
             {
               type: "button",
@@ -13958,8 +14085,8 @@ function CompoundFilterSelect({
               "aria-label": "Toggle filter type",
               children: [
                 renderIcon(effectiveLeadingIcon, "text-fg-black"),
-                leftLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-sans text-xs font-medium leading-4 text-fg-black tracking-normal whitespace-nowrap", children: leftLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                leftLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-sans text-xs font-medium leading-4 text-fg-black tracking-normal whitespace-nowrap", children: leftLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                   import_lucide_react17.ChevronDown,
                   {
                     className: cn(
@@ -13971,7 +14098,7 @@ function CompoundFilterSelect({
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DropdownMenuPrimitive4.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenuPrimitive4.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             DropdownMenuPrimitive4.Content,
             {
               className: cn(
@@ -13985,7 +14112,7 @@ function CompoundFilterSelect({
               sideOffset: 6,
               children: options.map((opt) => {
                 const isSelected = opt.value === value;
-                return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
                   DropdownMenuPrimitive4.Item,
                   {
                     onSelect: () => {
@@ -14002,11 +14129,11 @@ function CompoundFilterSelect({
                       "data-[selected=true]:hover:bg-interaction-hov-solid-primary"
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "flex items-center gap-2 min-w-0", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "flex items-center gap-2 min-w-0", children: [
                         renderIcon(opt.icon, "text-fg-black"),
-                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-sans text-xs font-normal leading-4 text-fg-black truncate", children: opt.label })
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "font-sans text-xs font-normal leading-4 text-fg-black truncate", children: opt.label })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                         import_lucide_react17.Check,
                         {
                           className: "size-4 text-fg-brand",
@@ -14021,7 +14148,7 @@ function CompoundFilterSelect({
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "div",
           {
             className: cn(
@@ -14031,7 +14158,11 @@ function CompoundFilterSelect({
               "[&_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",
-              "[&_[data-filter-label]]:!font-normal"
+              "[&_[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
+              // so the trigger reads `[icon] Agent [chevron]`, not `Agent | ▼`.
+              "[&_[data-filter-separator]]:!hidden"
             ),
             children
           }
@@ -14043,7 +14174,7 @@ function CompoundFilterSelect({
 CompoundFilterSelect.displayName = "CompoundFilterSelect";
 
 // src/button-list/button-list.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var DropdownMenuPrimitive5 = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_lucide_react18 = require("lucide-react");
 
@@ -14056,8 +14187,8 @@ var BUTTON_LIST_TOKENS = {
 };
 
 // src/button-list/button-list.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ButtonList = React38.forwardRef(
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var ButtonList = React39.forwardRef(
   ({
     label = "Button List",
     leadingIcon: LeadingIcon = import_lucide_react18.Code,
@@ -14072,53 +14203,53 @@ var ButtonList = React38.forwardRef(
   }, ref) => {
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const container = React38.useMemo(
+    const container = React39.useMemo(
       () => {
         var _a5;
         return typeof document !== "undefined" ? (_a5 = document.querySelector(".lego-land")) != null ? _a5 : void 0 : void 0;
       },
       []
     );
-    const [uncontrolledOpen, setUncontrolledOpen] = React38.useState(
+    const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(
       defaultOpen != null ? defaultOpen : false
     );
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : uncontrolledOpen;
-    const setOpen = React38.useCallback(
+    const setOpen = React39.useCallback(
       (next) => {
         if (!isControlled) setUncontrolledOpen(next);
         onOpenChange == null ? void 0 : onOpenChange(next);
       },
       [isControlled, onOpenChange]
     );
-    const handleSelect = React38.useCallback(
+    const handleSelect = React39.useCallback(
       (value) => {
         onSelect == null ? void 0 : onSelect(value);
         setOpen(false);
       },
       [onSelect, setOpen]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenuPrimitive5.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenuPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(DropdownMenuPrimitive5.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenuPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "button",
         {
           type: "button",
           className: cn(BUTTON_LIST_TOKENS.trigger, "group", className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LeadingIcon, { className: BUTTON_LIST_TOKENS.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.ChevronDown, { className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LeadingIcon, { className: BUTTON_LIST_TOKENS.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react18.ChevronDown, { className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenuPrimitive5.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownMenuPrimitive5.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           className: cn(
             !container && "lego-land",
             !container && themeClass
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DropdownMenuPrimitive5.Content,
             {
               className: cn(
@@ -14131,15 +14262,15 @@ var ButtonList = React38.forwardRef(
               sideOffset: 4,
               children: items.map((item) => {
                 const Icon2 = item.icon;
-                return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                   "button",
                   {
                     type: "button",
                     className: cn(BUTTON_LIST_TOKENS.listItem),
                     onClick: () => handleSelect(item.value),
                     children: [
-                      Icon2 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon2, { className: BUTTON_LIST_TOKENS.icon }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: item.label })
+                      Icon2 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon2, { className: BUTTON_LIST_TOKENS.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: item.label })
                     ]
                   },
                   item.value
@@ -15106,7 +15237,7 @@ function useJsonEditor({
 }
 
 // src/json-editor/JsonEditor.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function JsonEditor({
   value,
   onChange,
@@ -15138,32 +15269,32 @@ function JsonEditor({
     language
   });
   const hasErrors = errors.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         className: `rounded-[16px] border border-token-xlight overflow-hidden bg-token-white ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
         children: [
-          !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToolbarButton, { onClick: formatJson, title: "Format JSON", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Check, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Copy, { className: "size-3" }) }),
-              showExpandButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Divider, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToolbarButton, { onClick: formatJson, title: "Format JSON", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Check, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Copy, { className: "size-3" }) }),
+              showExpandButton && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   ToolbarButton,
                   {
                     onClick: () => setIsOpen(true),
                     title: "Expand editor",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Expand, { className: "size-3" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Expand, { className: "size-3" })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             Ft,
             {
               height,
@@ -15175,11 +15306,11 @@ function JsonEditor({
               theme: "vs"
             }
           ),
-          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorBar, { errors })
+          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorBar, { errors })
         ]
       }
     ),
-    showExpandButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    showExpandButton && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       Dialog,
       {
         open: isOpen,
@@ -15189,29 +15320,29 @@ function JsonEditor({
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
         className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ToolbarButton,
                 {
                   onClick: formatExpandedJson,
                   title: "Format JSON",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" })
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Divider, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Check, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.Copy, { className: "size-3" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Divider, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Check, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react19.Copy, { className: "size-3" }) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
             DialogBody,
             {
               scrollable: true,
               className: "flex-1 min-h-0 p-0 overflow-hidden",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                   Ft,
                   {
                     height: "100%",
@@ -15223,7 +15354,7 @@ function JsonEditor({
                     theme: "vs"
                   }
                 ) }),
-                hasErrors && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorBar, { errors })
+                hasErrors && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ErrorBar, { errors })
               ]
             }
           )
@@ -15237,8 +15368,8 @@ function ToolbarButton({
   title,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "button",
       {
         type: "button",
@@ -15247,16 +15378,16 @@ function ToolbarButton({
         children
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TooltipContent, { side: "top", sideOffset: 6, children: title })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TooltipContent, { side: "top", sideOffset: 6, children: title })
   ] }) });
 }
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-px h-3.5 bg-border-token-xlight mx-0.5" });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-px h-3.5 bg-border-token-xlight mx-0.5" });
 }
 function ErrorBar({ errors }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start gap-2 bg-token-destructive-secondary border-t border-token-xlight text-fg-destructive text-xs px-3 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "mt-px shrink-0", children: "\u26A0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-col gap-0.5", children: errors.map((err, idx) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: err }, idx)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-start gap-2 bg-token-destructive-secondary border-t border-token-xlight text-fg-destructive text-xs px-3 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "mt-px shrink-0", children: "\u26A0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col gap-0.5", children: errors.map((err, idx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: err }, idx)) })
   ] });
 }
 
@@ -15275,7 +15406,7 @@ var JSON_EDITOR_LANGUAGE_OPTIONS = [
 ];
 
 // src/key-value-editor/key-value-editor.tsx
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 var import_lucide_react20 = require("lucide-react");
 
 // src/key-value-editor/variables.ts
@@ -15300,8 +15431,8 @@ var KEY_VALUE_EDITOR_TOKENS = {
 };
 
 // src/key-value-editor/key-value-editor.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var KeyValueEditor = React40.forwardRef(
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var KeyValueEditor = React41.forwardRef(
   ({
     pairs,
     onPairsChange,
@@ -15314,7 +15445,7 @@ var KeyValueEditor = React40.forwardRef(
     className,
     style
   }, ref) => {
-    const updatePair = React40.useCallback(
+    const updatePair = React41.useCallback(
       (index2, field, value) => {
         const next = [...pairs];
         next[index2] = { ...next[index2], [field]: value };
@@ -15322,14 +15453,14 @@ var KeyValueEditor = React40.forwardRef(
       },
       [pairs, onPairsChange]
     );
-    const deletePair = React40.useCallback(
+    const deletePair = React41.useCallback(
       (index2) => {
         const next = pairs.filter((_2, i) => i !== index2);
         onPairsChange(next);
       },
       [pairs, onPairsChange]
     );
-    const handleRowFocus = React40.useCallback(
+    const handleRowFocus = React41.useCallback(
       (index2) => {
         if (index2 === pairs.length - 1) {
           onPairsChange([...pairs, { key: "", value: "" }]);
@@ -15337,20 +15468,20 @@ var KeyValueEditor = React40.forwardRef(
       },
       [pairs, onPairsChange]
     );
-    const defaultValueIcon = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.GitCompare, {});
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    const defaultValueIcon = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.GitCompare, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         ref,
         className: cn(KEY_VALUE_EDITOR_TOKENS.root, className),
         style,
         children: [
-          !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: KEY_VALUE_EDITOR_TOKENS.header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Key" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Value" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCellActions, children: toolbar && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.iconGroup, children: toolbar }) })
+          !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: KEY_VALUE_EDITOR_TOKENS.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Key" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Value" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCellActions, children: toolbar && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.iconGroup, children: toolbar }) })
           ] }),
-          pairs.map((pair, index2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          pairs.map((pair, index2) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             KeyValueRow,
             {
               pair,
@@ -15380,8 +15511,8 @@ function KeyValueRow({
   onFocus,
   showDelete
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: KEY_VALUE_EDITOR_TOKENS.row, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: KEY_VALUE_EDITOR_TOKENS.row, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Input,
       {
         inputSize: "sm",
@@ -15396,7 +15527,7 @@ function KeyValueRow({
         hideSupportingText: !pair.keyError
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       Input,
       {
         inputSize: "sm",
@@ -15412,21 +15543,21 @@ function KeyValueRow({
         hideSupportingText: !pair.valueError
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCellActions, children: showDelete && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCellActions, children: showDelete && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
         className: KEY_VALUE_EDITOR_TOKENS.deleteButton,
         onClick: onDelete,
         "aria-label": "Delete row",
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react20.Trash2, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react20.Trash2, {})
       }
     ) })
   ] });
 }
 
 // src/audio-player/audio-player.tsx
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var import_lucide_react21 = require("lucide-react");
 
 // src/audio-player/variables.ts
@@ -15452,14 +15583,14 @@ var AUDIO_PLAYER_TOKENS = {
 };
 
 // src/audio-player/audio-player.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function defaultFormatTime(seconds) {
   if (!isFinite(seconds) || seconds < 0) return "0:00";
   const m = Math.floor(seconds / 60);
   const s = Math.floor(seconds % 60);
   return `${m}:${String(s).padStart(2, "0")}`;
 }
-var AudioPlayer = React41.forwardRef(
+var AudioPlayer = React42.forwardRef(
   ({
     isPlaying,
     currentTime,
@@ -15475,7 +15606,7 @@ var AudioPlayer = React41.forwardRef(
     ...props
   }, ref) => {
     const progress = duration > 0 ? Math.min(1, Math.max(0, currentTime / duration)) : 0;
-    const handleWaveformClick = React41.useCallback(
+    const handleWaveformClick = React42.useCallback(
       (e) => {
         if (!onSeek || duration <= 0) return;
         const rect = e.currentTarget.getBoundingClientRect();
@@ -15487,7 +15618,7 @@ var AudioPlayer = React41.forwardRef(
       },
       [onSeek, duration]
     );
-    const handleRateClick = React41.useCallback(() => {
+    const handleRateClick = React42.useCallback(() => {
       var _a5;
       if (!onRateChange || !playbackRateOptions.length) return;
       const idx = playbackRateOptions.findIndex((r) => r === playbackRate);
@@ -15496,22 +15627,22 @@ var AudioPlayer = React41.forwardRef(
     }, [onRateChange, playbackRate, playbackRateOptions]);
     const activeBarIndex = waveform ? Math.floor(progress * waveform.length) : 0;
     const Icon2 = isPlaying ? import_lucide_react21.Pause : import_lucide_react21.Play;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         ref,
         className: cn(AUDIO_PLAYER_TOKENS.container, className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: AUDIO_PLAYER_TOKENS.leftGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: AUDIO_PLAYER_TOKENS.leftGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "button",
               {
                 type: "button",
                 onClick: onPlayPause,
                 className: AUDIO_PLAYER_TOKENS.btnXs,
                 "aria-label": isPlaying ? "Pause" : "Play",
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                   Icon2,
                   {
                     className: AUDIO_PLAYER_TOKENS.playIcon,
@@ -15521,9 +15652,9 @@ var AudioPlayer = React41.forwardRef(
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(currentTime) })
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(currentTime) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "div",
             {
               className: AUDIO_PLAYER_TOKENS.waveform.wrapper,
@@ -15532,7 +15663,7 @@ var AudioPlayer = React41.forwardRef(
               "aria-valuemin": onSeek ? 0 : void 0,
               "aria-valuemax": onSeek ? duration : void 0,
               "aria-valuenow": onSeek ? currentTime : void 0,
-              children: waveform && waveform.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: AUDIO_PLAYER_TOKENS.waveform.bars, children: waveform.map((v2, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              children: waveform && waveform.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: AUDIO_PLAYER_TOKENS.waveform.bars, children: waveform.map((v2, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 "span",
                 {
                   className: cn(
@@ -15544,19 +15675,19 @@ var AudioPlayer = React41.forwardRef(
                   }
                 },
                 i
-              )) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: AUDIO_PLAYER_TOKENS.waveform.baseline })
+              )) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: AUDIO_PLAYER_TOKENS.waveform.baseline })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: AUDIO_PLAYER_TOKENS.rightGroup, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(duration) }),
-            playbackRate != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: AUDIO_PLAYER_TOKENS.rightGroup, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(duration) }),
+            playbackRate != null && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "button",
               {
                 type: "button",
                 onClick: handleRateClick,
                 className: AUDIO_PLAYER_TOKENS.ratePill,
                 "aria-label": `Playback speed ${playbackRate}x`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: AUDIO_PLAYER_TOKENS.rateLabel, children: [
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: AUDIO_PLAYER_TOKENS.rateLabel, children: [
                   playbackRate,
                   "x"
                 ] })
@@ -15571,7 +15702,7 @@ var AudioPlayer = React41.forwardRef(
 AudioPlayer.displayName = "AudioPlayer";
 
 // src/chat-bubble/chat-bubble.tsx
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_lucide_react22 = require("lucide-react");
 
 // src/chat-bubble/variables.ts
@@ -15586,13 +15717,16 @@ var CHAT_BUBBLE_TOKENS = {
     // Row: bubble aligned to the right, avatar after it.
     row: "flex items-end justify-end gap-1 w-full",
     // Default bubble — background/grey #f5f5f5, rounded 12, p 12.
-    bubble: "max-w-[80%] p-3 rounded-xl bg-token-grey text-sm font-normal leading-5 text-fg-black",
+    // `min-w-0 break-words` so long unbroken strings (URLs, tokens) wrap
+    // inside the max-w-[80%] cap instead of overflowing horizontally.
+    bubble: "max-w-[80%] min-w-0 p-3 rounded-xl bg-token-grey text-sm font-normal leading-5 text-fg-black break-words",
     // In-Focus: bubble becomes white (sits over the pale-blue row wash).
     bubbleFocused: "bg-token-white",
     // 16px avatar — by default a brand-primary circle.
     avatar: "shrink-0 size-4 rounded-full bg-token-brand-primary overflow-hidden",
-    // Timestamp row — right-aligned under the bubble, with a 20px gutter.
-    timestampRow: "flex items-center justify-end pr-5"
+    // Timestamp row — timestamp first, then trailing (e.g. tool-call badge);
+    // 8px gap between them, 20px right gutter. Figma: 3575:10751.
+    timestampRow: "flex items-center justify-end gap-2 pr-5"
   },
   user: {
     // Row: avatar first, then text (no bubble).
@@ -15601,7 +15735,7 @@ var CHAT_BUBBLE_TOKENS = {
     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.
     text: "flex-1 min-w-0 text-sm font-normal leading-5 text-fg-grey-secondary break-words",
-    timestampRow: "flex items-center pl-5"
+    timestampRow: "flex items-center gap-2 pl-5"
   },
   timestamp: "text-xs font-normal leading-4 tracking-normal text-fg-grey-secondary whitespace-nowrap transition-opacity",
   timestampHidden: "opacity-0 group-hover:opacity-100"
@@ -15611,8 +15745,8 @@ var CHAT_BUBBLE_TOKENS = {
 var agent_avatar_default = "./agent-avatar-ZI4HOQHG.png";
 
 // src/chat-bubble/chat-bubble.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var ChatBubbleAgent = React42.forwardRef(
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var ChatBubbleAgent = React43.forwardRef(
   ({
     message,
     timestamp,
@@ -15623,7 +15757,7 @@ var ChatBubbleAgent = React42.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         ref,
@@ -15634,8 +15768,8 @@ var ChatBubbleAgent = React42.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.agent.row, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.agent.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "div",
               {
                 className: cn(
@@ -15645,7 +15779,7 @@ var ChatBubbleAgent = React42.forwardRef(
                 children: message
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: CHAT_BUBBLE_TOKENS.agent.avatar, children: avatar != null ? avatar : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: CHAT_BUBBLE_TOKENS.agent.avatar, children: avatar != null ? avatar : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "img",
               {
                 src: agent_avatar_default,
@@ -15654,19 +15788,18 @@ var ChatBubbleAgent = React42.forwardRef(
               }
             ) })
           ] }),
-          (timestamp || trailing) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.agent.timestampRow, children: [
-            trailing,
-            timestamp && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          (timestamp || trailing) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.agent.timestampRow, children: [
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: cn(
                   CHAT_BUBBLE_TOKENS.timestamp,
-                  trailing && "ml-2",
                   !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
                 ),
                 children: timestamp
               }
-            )
+            ),
+            trailing
           ] })
         ]
       }
@@ -15674,7 +15807,7 @@ var ChatBubbleAgent = React42.forwardRef(
   }
 );
 ChatBubbleAgent.displayName = "ChatBubbleAgent";
-var ChatBubbleUser = React42.forwardRef(
+var ChatBubbleUser = React43.forwardRef(
   ({
     message,
     timestamp,
@@ -15685,7 +15818,7 @@ var ChatBubbleUser = React42.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         ref,
@@ -15697,23 +15830,22 @@ var ChatBubbleUser = React42.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.row, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react22.User, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.row, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react22.User, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
           ] }),
-          (timestamp || trailing) && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: [
-            trailing,
-            timestamp && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          (timestamp || trailing) && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: [
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               "span",
               {
                 className: cn(
                   CHAT_BUBBLE_TOKENS.timestamp,
-                  trailing && "ml-2",
                   !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
                 ),
                 children: timestamp
               }
-            )
+            ),
+            trailing
           ] })
         ]
       }
@@ -15723,7 +15855,7 @@ var ChatBubbleUser = React42.forwardRef(
 ChatBubbleUser.displayName = "ChatBubbleUser";
 
 // src/popover/popover.tsx
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
 var import_lucide_react23 = require("lucide-react");
 
@@ -15760,7 +15892,7 @@ var POPOVER_TOKENS = {
 };
 
 // src/popover/popover.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function flipSide(side) {
   if (side === "right") return "left";
   if (side === "left") return "right";
@@ -15825,7 +15957,7 @@ function computePosition(triggerRect, popoverRect, side, align, sideOffset) {
   const clampedTop = Math.max(margin, Math.min(primary.top, vh - popoverRect.height - margin));
   return { top: clampedTop, left: clampedLeft };
 }
-var Popover = React43.forwardRef(
+var Popover = React44.forwardRef(
   ({
     open: controlledOpen,
     onOpenChange,
@@ -15849,21 +15981,21 @@ var Popover = React43.forwardRef(
     var _a5, _b5, _c;
     const { theme } = useTheme();
     const themeClass = theme === "dark" ? "dark" : "light";
-    const [internalOpen, setInternalOpen] = React43.useState(defaultOpen);
+    const [internalOpen, setInternalOpen] = React44.useState(defaultOpen);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : internalOpen;
-    const triggerRef = React43.useRef(null);
-    const popoverRef = React43.useRef(null);
-    const [position, setPosition] = React43.useState({ top: 0, left: 0 });
-    const [triggerWidth, setTriggerWidth] = React43.useState(0);
-    const setOpen = React43.useCallback(
+    const triggerRef = React44.useRef(null);
+    const popoverRef = React44.useRef(null);
+    const [position, setPosition] = React44.useState({ top: 0, left: 0 });
+    const [triggerWidth, setTriggerWidth] = React44.useState(0);
+    const setOpen = React44.useCallback(
       (next) => {
         if (!isControlled) setInternalOpen(next);
         onOpenChange == null ? void 0 : onOpenChange(next);
       },
       [isControlled, onOpenChange]
     );
-    React43.useLayoutEffect(() => {
+    React44.useLayoutEffect(() => {
       if (!open) return;
       const t = triggerRef.current;
       const p = popoverRef.current;
@@ -15887,7 +16019,7 @@ var Popover = React43.forwardRef(
         window.removeEventListener("scroll", onScroll, true);
       };
     }, [open, side, align, sideOffset]);
-    React43.useEffect(() => {
+    React44.useEffect(() => {
       if (!open) return;
       const onKey = (e) => {
         if (closeOnEscape && e.key === "Escape") setOpen(false);
@@ -15919,7 +16051,7 @@ var Popover = React43.forwardRef(
       maxHeight,
       zIndex: 50
     };
-    const popoverContent = open && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    const popoverContent = open && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         ref: (node) => {
@@ -15940,9 +16072,9 @@ var Popover = React43.forwardRef(
         style: popoverStyle,
         onClick: (e) => e.stopPropagation(),
         children: [
-          search && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: POPOVER_TOKENS.searchWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: POPOVER_TOKENS.search.container, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react23.Search, { className: POPOVER_TOKENS.search.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          search && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: POPOVER_TOKENS.searchWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: POPOVER_TOKENS.search.container, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react23.Search, { className: POPOVER_TOKENS.search.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "input",
               {
                 type: "search",
@@ -15958,12 +16090,12 @@ var Popover = React43.forwardRef(
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: POPOVER_TOKENS.content, children })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: POPOVER_TOKENS.content, children })
         ]
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("inline-block relative", wrapperClassName), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("inline-block relative", wrapperClassName), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         "div",
         {
           ref: triggerRef,
@@ -15973,7 +16105,7 @@ var Popover = React43.forwardRef(
         }
       ),
       typeof document !== "undefined" && popoverContent && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("lego-land", themeClass), children: popoverContent }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn("lego-land", themeClass), children: popoverContent }),
         document.body
       )
     ] });
@@ -16045,6 +16177,7 @@ Popover.displayName = "Popover";
   SelectTrigger,
   SelectValue,
   ShadowDOMWrapper,
+  SidePanel,
   Spinner,
   Stepper,
   StepperBar,