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

package/dist/index.mjs

@@ -8006,8 +8006,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 ---
@@ -9211,9 +9215,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",
@@ -10101,27 +10108,37 @@ import * as React25 from "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"
   }
 };
 
@@ -10176,8 +10193,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"
 };
 
@@ -10229,8 +10246,55 @@ var SurfaceFooter = React26.forwardRef(
 );
 SurfaceFooter.displayName = "SurfaceFooter";
 
-// src/tooltip/tooltip.tsx
+// src/side-panel/side-panel.tsx
 import * as React27 from "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
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SidePanel = React27.forwardRef(
+  ({
+    size = "sm",
+    side = "right",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx23(
+      "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
+import * as React28 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 // src/tooltip/variables.ts
@@ -10248,10 +10312,10 @@ var TOOLTIP_TOKENS = {
 };
 
 // src/tooltip/tooltip.tsx
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx24, jsxs as jsxs15 } from "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;
@@ -10263,8 +10327,8 @@ 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__ */ jsxs15(
     TooltipPrimitive.Content,
@@ -10281,7 +10345,7 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
       children: [
         /* @__PURE__ */ jsxs15("div", { className: "flex items-center", children: [
           children,
-          shortcut && /* @__PURE__ */ jsx23(
+          shortcut && /* @__PURE__ */ jsx24(
             "span",
             {
               className: cn(
@@ -10293,7 +10357,7 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
             }
           )
         ] }),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24(
           TooltipPrimitive.Arrow,
           {
             className: TOOLTIP_TOKENS.arrow,
@@ -10304,14 +10368,14 @@ var TooltipContent = React27.forwardRef(({ className, sideOffset = 6, shortcut,
     }
   );
   return /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    /* @__PURE__ */ jsx23("span", { ref: anchorRef, style: { display: "none" } }),
-    container ? /* @__PURE__ */ jsx23(TooltipPrimitive.Portal, { container, children: content }) : content
+    /* @__PURE__ */ jsx24("span", { ref: anchorRef, style: { display: "none" } }),
+    container ? /* @__PURE__ */ jsx24(TooltipPrimitive.Portal, { container, children: content }) : content
   ] });
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/dialog/dialog.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { X } from "lucide-react";
 
 // src/dialog/variables.ts
@@ -10347,10 +10411,10 @@ var DIALOG_TOKENS = {
 };
 
 // src/dialog/dialog.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
-var DialogContext = React28.createContext({ close: () => {
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var DialogContext = React29.createContext({ close: () => {
 } });
-var Dialog = React28.forwardRef(
+var Dialog = React29.forwardRef(
   ({
     open,
     onOpenChange,
@@ -10366,8 +10430,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();
@@ -10380,7 +10444,7 @@ var Dialog = React28.forwardRef(
     const hasFixedDividers = type === "scrollable-fixed";
     const hasIcon = type === "icon";
     const showClose = !hasIcon;
-    return /* @__PURE__ */ jsx24(DialogContext.Provider, { value: { close }, children: /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.overlay, onClick: close, children: /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsx25(DialogContext.Provider, { value: { close }, children: /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.overlay, onClick: close, children: /* @__PURE__ */ jsxs16(
       "div",
       {
         ref,
@@ -10394,24 +10458,24 @@ var Dialog = React28.forwardRef(
         ),
         onClick: (e) => e.stopPropagation(),
         children: [
-          hasIcon && icon && /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.icon.wrapper, children: icon }),
+          hasIcon && icon && /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.icon.wrapper, children: icon }),
           title && /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.header.wrapper, children: [
             /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.header.row, children: [
-              /* @__PURE__ */ jsx24("h2", { id: "dialog-title", className: DIALOG_TOKENS.header.title, children: title }),
-              showClose && /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25("h2", { id: "dialog-title", className: DIALOG_TOKENS.header.title, children: title }),
+              showClose && /* @__PURE__ */ jsx25(
                 "button",
                 {
                   type: "button",
                   onClick: close,
                   className: DIALOG_TOKENS.header.closeBtn,
                   "aria-label": "Close dialog",
-                  children: /* @__PURE__ */ jsx24(X, { className: "size-[18px]" })
+                  children: /* @__PURE__ */ jsx25(X, { className: "size-[18px]" })
                 }
               )
             ] }),
-            hasFixedDividers && /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.header.divider })
+            hasFixedDividers && /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.header.divider })
           ] }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25(
             "div",
             {
               className: cn(
@@ -10422,9 +10486,9 @@ var Dialog = React28.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.footer.wrapper, children: [
-            hasFixedDividers && /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.footer.divider }),
+            hasFixedDividers && /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.footer.divider }),
             /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.footer.row, children: [
-              showCancel && /* @__PURE__ */ jsx24(
+              showCancel && /* @__PURE__ */ jsx25(
                 Button,
                 {
                   variant: "outline",
@@ -10433,7 +10497,7 @@ var Dialog = React28.forwardRef(
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx25(
                 Button,
                 {
                   variant: "primary",
@@ -10450,34 +10514,34 @@ var Dialog = React28.forwardRef(
   }
 );
 Dialog.displayName = "Dialog";
-var DialogIcon = React28.forwardRef(
-  ({ children, className }, ref) => /* @__PURE__ */ jsx24("div", { ref, className: cn(DIALOG_TOKENS.icon.wrapper, className), children })
+var DialogIcon = React29.forwardRef(
+  ({ children, className }, ref) => /* @__PURE__ */ jsx25("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);
+    const { close } = React29.useContext(DialogContext);
     return /* @__PURE__ */ jsxs16("div", { ref, className: cn(DIALOG_TOKENS.header.wrapper, className), children: [
       /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.header.row, children: [
-        /* @__PURE__ */ jsx24("h2", { className: DIALOG_TOKENS.header.title, children: title }),
-        showClose && /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25("h2", { className: DIALOG_TOKENS.header.title, children: title }),
+        showClose && /* @__PURE__ */ jsx25(
           "button",
           {
             type: "button",
             onClick: close,
             className: DIALOG_TOKENS.header.closeBtn,
             "aria-label": "Close dialog",
-            children: /* @__PURE__ */ jsx24(X, { className: "size-[18px]" })
+            children: /* @__PURE__ */ jsx25(X, { className: "size-[18px]" })
           }
         )
       ] }),
-      showDivider && /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.header.divider })
+      showDivider && /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.header.divider })
     ] });
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogBody = React28.forwardRef(
-  ({ children, scrollable = false, className }, ref) => /* @__PURE__ */ jsx24(
+var DialogBody = React29.forwardRef(
+  ({ children, scrollable = false, className }, ref) => /* @__PURE__ */ jsx25(
     "div",
     {
       ref,
@@ -10491,7 +10555,7 @@ var DialogBody = React28.forwardRef(
   )
 );
 DialogBody.displayName = "DialogBody";
-var DialogFooter = React28.forwardRef(
+var DialogFooter = React29.forwardRef(
   ({
     cancelLabel = "Cancel",
     confirmLabel = "Continue",
@@ -10501,11 +10565,11 @@ var DialogFooter = React28.forwardRef(
     showDivider = false,
     className
   }, ref) => {
-    const { close } = React28.useContext(DialogContext);
+    const { close } = React29.useContext(DialogContext);
     return /* @__PURE__ */ jsxs16("div", { ref, className: cn(DIALOG_TOKENS.footer.wrapper, className), children: [
-      showDivider && /* @__PURE__ */ jsx24("div", { className: DIALOG_TOKENS.footer.divider }),
+      showDivider && /* @__PURE__ */ jsx25("div", { className: DIALOG_TOKENS.footer.divider }),
       /* @__PURE__ */ jsxs16("div", { className: DIALOG_TOKENS.footer.row, children: [
-        showCancel && /* @__PURE__ */ jsx24(
+        showCancel && /* @__PURE__ */ jsx25(
           Button,
           {
             variant: "outline",
@@ -10514,7 +10578,7 @@ var DialogFooter = React28.forwardRef(
             children: cancelLabel
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           Button,
           {
             variant: "primary",
@@ -10530,7 +10594,7 @@ var DialogFooter = React28.forwardRef(
 DialogFooter.displayName = "DialogFooter";
 
 // src/toast/toast.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";
 import { ChevronRight, CircleCheck, CircleAlert, ThumbsUp } from "lucide-react";
 
@@ -10573,11 +10637,11 @@ var TOAST_TOKENS = {
 };
 
 // src/toast/toast.tsx
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var Toaster = ({
   position = "bottom-right",
   ...props
-}) => /* @__PURE__ */ jsx25(
+}) => /* @__PURE__ */ jsx26(
   SonnerToaster,
   {
     position,
@@ -10591,7 +10655,7 @@ var TOAST_ICON = {
   error: CircleAlert,
   default: ThumbsUp
 };
-var Toast = React29.forwardRef(
+var Toast = React30.forwardRef(
   ({
     variant = "default",
     title,
@@ -10616,26 +10680,26 @@ var Toast = React29.forwardRef(
           /* @__PURE__ */ jsxs17("div", { className: TOAST_TOKENS.innerRow, children: [
             /* @__PURE__ */ jsxs17("div", { className: TOAST_TOKENS.content, children: [
               /* @__PURE__ */ jsxs17("div", { className: TOAST_TOKENS.titleRow, children: [
-                /* @__PURE__ */ jsx25(Icon2, { className: TOAST_TOKENS.icon[variant] }),
-                /* @__PURE__ */ jsx25("span", { className: TOAST_TOKENS.title[variant], children: title })
+                /* @__PURE__ */ jsx26(Icon2, { className: TOAST_TOKENS.icon[variant] }),
+                /* @__PURE__ */ jsx26("span", { className: TOAST_TOKENS.title[variant], children: title })
               ] }),
-              subtext && /* @__PURE__ */ jsx25("div", { className: TOAST_TOKENS.subtextRow, children: /* @__PURE__ */ jsx25("span", { className: TOAST_TOKENS.subtext, children: subtext }) })
+              subtext && /* @__PURE__ */ jsx26("div", { className: TOAST_TOKENS.subtextRow, children: /* @__PURE__ */ jsx26("span", { className: TOAST_TOKENS.subtext, children: subtext }) })
             ] }),
-            showCancel && /* @__PURE__ */ jsx25(
+            showCancel && /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
                 onClick: onCancel,
                 className: TOAST_TOKENS.cancelBtn,
                 "aria-label": "Dismiss",
-                children: /* @__PURE__ */ jsx25(ChevronRight, {})
+                children: /* @__PURE__ */ jsx26(ChevronRight, {})
               }
             )
           ] }),
           showProgress && /* @__PURE__ */ jsxs17("div", { className: TOAST_TOKENS.progress.wrapper, children: [
-            /* @__PURE__ */ jsx25("style", { children: `@keyframes toast-shrink { from { width: 100% } to { width: 0% } }` }),
-            /* @__PURE__ */ jsx25("div", { className: TOAST_TOKENS.progress.track }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx26("style", { children: `@keyframes toast-shrink { from { width: 100% } to { width: 0% } }` }),
+            /* @__PURE__ */ jsx26("div", { className: TOAST_TOKENS.progress.track }),
+            /* @__PURE__ */ jsx26(
               "div",
               {
                 className: cn(
@@ -10657,7 +10721,7 @@ var showToast = ({
   ...props
 }) => {
   return sonnerToast.custom(
-    (id) => /* @__PURE__ */ jsx25(
+    (id) => /* @__PURE__ */ jsx26(
       Toast,
       {
         ...props,
@@ -10669,7 +10733,7 @@ var showToast = ({
 };
 
 // src/stepper/stepper.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { Check as Check4 } from "lucide-react";
 
 // src/stepper/variables.ts
@@ -10718,16 +10782,16 @@ var STEPPER_TOKENS = {
 };
 
 // src/stepper/stepper.tsx
-import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
-var StepperBar = React30.forwardRef(
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var StepperBar = React31.forwardRef(
   ({ totalSteps = 4, currentStep, className, style }, ref) => {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         ref,
         className: cn(STEPPER_TOKENS.bar.root, className),
         style,
-        children: Array.from({ length: totalSteps }).map((_2, index2) => /* @__PURE__ */ jsx26(
+        children: Array.from({ length: totalSteps }).map((_2, index2) => /* @__PURE__ */ jsx27(
           "div",
           {
             className: cn(
@@ -10742,9 +10806,9 @@ var StepperBar = React30.forwardRef(
   }
 );
 StepperBar.displayName = "StepperBar";
-var Stepper = React30.forwardRef(
+var Stepper = React31.forwardRef(
   ({ steps, className, style }, ref) => {
-    return /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         ref,
@@ -10753,16 +10817,16 @@ var Stepper = React30.forwardRef(
         children: steps.map((step, index2) => {
           var _a5;
           const state2 = (_a5 = step.state) != null ? _a5 : "incomplete";
-          return /* @__PURE__ */ jsxs18(React30.Fragment, { children: [
+          return /* @__PURE__ */ jsxs18(React31.Fragment, { children: [
             /* @__PURE__ */ jsxs18("div", { className: STEPPER_TOKENS.stepper.step.wrapper, children: [
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 "div",
                 {
                   className: cn(
                     STEPPER_TOKENS.stepper.step.indicator.base,
                     STEPPER_TOKENS.stepper.step.indicator[state2]
                   ),
-                  children: state2 === "complete" ? /* @__PURE__ */ jsx26(Check4, { className: STEPPER_TOKENS.stepper.step.checkIcon }) : /* @__PURE__ */ jsx26(
+                  children: state2 === "complete" ? /* @__PURE__ */ jsx27(Check4, { className: STEPPER_TOKENS.stepper.step.checkIcon }) : /* @__PURE__ */ jsx27(
                     "span",
                     {
                       className: state2 === "active" ? STEPPER_TOKENS.stepper.step.number.active : STEPPER_TOKENS.stepper.step.number.incomplete,
@@ -10771,7 +10835,7 @@ var Stepper = React30.forwardRef(
                   )
                 }
               ),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27(
                 "span",
                 {
                   className: cn(
@@ -10782,7 +10846,7 @@ var Stepper = React30.forwardRef(
                 }
               )
             ] }),
-            index2 < steps.length - 1 && /* @__PURE__ */ jsx26(
+            index2 < steps.length - 1 && /* @__PURE__ */ jsx27(
               "div",
               {
                 className: cn(
@@ -10798,10 +10862,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__ */ jsx26(
+    return /* @__PURE__ */ jsx27(
       "div",
       {
         ref,
@@ -10811,7 +10875,7 @@ var ProgressBar = React30.forwardRef(
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx26("div", { className: STEPPER_TOKENS.progressBar.track, children: /* @__PURE__ */ jsx26(
+        children: /* @__PURE__ */ jsx27("div", { className: STEPPER_TOKENS.progressBar.track, children: /* @__PURE__ */ jsx27(
           "div",
           {
             className: STEPPER_TOKENS.progressBar.fill,
@@ -10825,7 +10889,7 @@ var ProgressBar = React30.forwardRef(
 ProgressBar.displayName = "ProgressBar";
 
 // src/icon/icon.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import * as DropdownMenuPrimitive2 from "@radix-ui/react-dropdown-menu";
 import { Search as Search2 } from "lucide-react";
 import * as LucideIcons from "lucide-react";
@@ -10874,10 +10938,10 @@ var ICON_TOKENS = {
 };
 
 // src/icon/icon.tsx
-import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
-var IconWrapper = React31.forwardRef(
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var IconWrapper = React32.forwardRef(
   ({ color = "default", size = "sm", children, className, style }, ref) => {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "span",
       {
         ref,
@@ -11014,7 +11078,7 @@ function getLucideIcon(name) {
   }
   return null;
 }
-var IconPicker = React31.forwardRef(
+var IconPicker = React32.forwardRef(
   ({
     value,
     onValueChange,
@@ -11027,24 +11091,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__ */ jsx27("div", { ref, className: cn("inline-block", className), style, children: /* @__PURE__ */ jsxs19(DropdownMenuPrimitive2.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx27(DropdownMenuPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28("div", { ref, className: cn("inline-block", className), style, children: /* @__PURE__ */ jsxs19(DropdownMenuPrimitive2.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx28(DropdownMenuPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx28(
         "button",
         {
           type: "button",
@@ -11052,10 +11116,10 @@ var IconPicker = React31.forwardRef(
             ICON_TOKENS.picker.trigger,
             ICON_TOKENS.color[color]
           ),
-          children: SelectedIcon ? /* @__PURE__ */ jsx27(SelectedIcon, { className: ICON_TOKENS.size[size] }) : /* @__PURE__ */ jsx27("span", { className: "text-xs text-fg-placeholder", children: placeholder })
+          children: SelectedIcon ? /* @__PURE__ */ jsx28(SelectedIcon, { className: ICON_TOKENS.size[size] }) : /* @__PURE__ */ jsx28("span", { className: "text-xs text-fg-placeholder", children: placeholder })
         }
       ) }),
-      /* @__PURE__ */ jsx27(DropdownMenuPrimitive2.Portal, { container, children: /* @__PURE__ */ jsx27("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsxs19(
+      /* @__PURE__ */ jsx28(DropdownMenuPrimitive2.Portal, { container, children: /* @__PURE__ */ jsx28("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsxs19(
         DropdownMenuPrimitive2.Content,
         {
           className: cn(
@@ -11072,8 +11136,8 @@ var IconPicker = React31.forwardRef(
           onCloseAutoFocus: (e) => e.preventDefault(),
           children: [
             /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx27(Search2, { className: "size-4 text-fg-grey-secondary shrink-0" }),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx28(Search2, { className: "size-4 text-fg-grey-secondary shrink-0" }),
+              /* @__PURE__ */ jsx28(
                 "input",
                 {
                   type: "search",
@@ -11086,11 +11150,11 @@ var IconPicker = React31.forwardRef(
                 }
               )
             ] }),
-            filtered.length === 0 ? /* @__PURE__ */ jsx27("p", { className: ICON_TOKENS.picker.emptyText, children: "No icons found" }) : /* @__PURE__ */ jsx27("div", { className: ICON_TOKENS.picker.grid, children: filtered.map((name) => {
+            filtered.length === 0 ? /* @__PURE__ */ jsx28("p", { className: ICON_TOKENS.picker.emptyText, children: "No icons found" }) : /* @__PURE__ */ jsx28("div", { className: ICON_TOKENS.picker.grid, children: filtered.map((name) => {
               const Icon2 = getLucideIcon(name);
               if (!Icon2) return null;
               const isSelected = name === value;
-              return /* @__PURE__ */ jsx27(
+              return /* @__PURE__ */ jsx28(
                 DropdownMenuPrimitive2.Item,
                 {
                   className: cn(
@@ -11104,7 +11168,7 @@ var IconPicker = React31.forwardRef(
                     setOpen(false);
                   },
                   title: name,
-                  children: /* @__PURE__ */ jsx27(Icon2, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx28(Icon2, { className: "size-4" })
                 },
                 name
               );
@@ -11118,9 +11182,9 @@ var IconPicker = React31.forwardRef(
 IconPicker.displayName = "IconPicker";
 
 // src/shadow-dom-wrapper.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment9, jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var ShadowDOMWrapper = ({
   children,
   styles,
@@ -11128,10 +11192,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 });
@@ -11221,14 +11285,14 @@ var ShadowDOMWrapper = ({
     };
   }, [styles, mode, additionalStyles, copyCSSVariables]);
   return /* @__PURE__ */ jsxs20(Fragment9, { children: [
-    /* @__PURE__ */ jsx28("div", { ref: containerRef }),
+    /* @__PURE__ */ jsx29("div", { ref: containerRef }),
     shadowRoot && createPortal(children, shadowRoot)
   ] });
 };
 ShadowDOMWrapper.displayName = "ShadowDOMWrapper";
 
 // src/table/table.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import {
   ChevronUp,
   ChevronDown as ChevronDown4,
@@ -11326,22 +11390,22 @@ function getColumnWidthPx(width) {
 }
 
 // src/table/table.tsx
-import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs21 } from "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__ */ jsx29("span", { children: content });
+    return /* @__PURE__ */ jsx30("span", { children: content });
   }
   if (isCellTextContent(content)) {
     const { text, className, style } = content;
-    return /* @__PURE__ */ jsx29("span", { className, style, children: text });
+    return /* @__PURE__ */ jsx30("span", { className, style, children: text });
   }
   return content;
 }
@@ -11378,15 +11442,15 @@ function Pagination({
     ] }),
     /* @__PURE__ */ jsxs21("div", { className: TABLE_TOKENS.paginationBar.rightSection, children: [
       /* @__PURE__ */ jsxs21("div", { className: TABLE_TOKENS.paginationBar.rowCountSection, children: [
-        /* @__PURE__ */ jsx29("span", { className: TABLE_TOKENS.paginationBar.text, children: "Rows per page" }),
+        /* @__PURE__ */ jsx30("span", { className: TABLE_TOKENS.paginationBar.text, children: "Rows per page" }),
         /* @__PURE__ */ jsxs21(
           Select,
           {
             value: String(rowsPerPage),
             onValueChange: handleRowsPerPageSelect,
             children: [
-              /* @__PURE__ */ jsx29(SelectTrigger, { size: "small", children: /* @__PURE__ */ jsx29(SelectValue, {}) }),
-              /* @__PURE__ */ jsx29(
+              /* @__PURE__ */ jsx30(SelectTrigger, { size: "small", children: /* @__PURE__ */ jsx30(SelectValue, {}) }),
+              /* @__PURE__ */ jsx30(
                 SelectContent,
                 {
                   items: ROWS_PER_PAGE_OPTIONS.map((n) => ({
@@ -11407,7 +11471,7 @@ function Pagination({
           formatNumber(totalPages || 1)
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: TABLE_TOKENS.paginationBar.navButtons, children: [
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -11418,10 +11482,10 @@ function Pagination({
               onClick: () => currentPage > 1 && handlePageChange(1),
               disabled: isFirstPage,
               "aria-label": "Go to first page",
-              children: /* @__PURE__ */ jsx29(ChevronFirst, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ jsx30(ChevronFirst, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -11432,10 +11496,10 @@ function Pagination({
               onClick: () => currentPage > 1 && handlePageChange(currentPage - 1),
               disabled: isFirstPage,
               "aria-label": "Go to previous page",
-              children: /* @__PURE__ */ jsx29(ChevronLeft, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ jsx30(ChevronLeft, { className: isFirstPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -11446,10 +11510,10 @@ function Pagination({
               onClick: () => currentPage < totalPages && handlePageChange(currentPage + 1),
               disabled: isLastPage,
               "aria-label": "Go to next page",
-              children: /* @__PURE__ */ jsx29(ChevronRight2, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ jsx30(ChevronRight2, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           ),
-          /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -11460,7 +11524,7 @@ function Pagination({
               onClick: () => currentPage < totalPages && handlePageChange(totalPages),
               disabled: isLastPage,
               "aria-label": "Go to last page",
-              children: /* @__PURE__ */ jsx29(ChevronLast, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
+              children: /* @__PURE__ */ jsx30(ChevronLast, { className: isLastPage ? TABLE_TOKENS.paginationBar.navIconDisabled : TABLE_TOKENS.paginationBar.navIcon })
             }
           )
         ] })
@@ -11492,20 +11556,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) {
@@ -11516,7 +11580,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]);
@@ -11532,7 +11596,7 @@ function DataTable({
       onSortChange({ key, direction: null });
     }
   };
-  const selectedSet = React33.useMemo(
+  const selectedSet = React34.useMemo(
     () => new Set(selectedRows),
     [selectedRows]
   );
@@ -11549,9 +11613,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) => {
@@ -11562,10 +11626,10 @@ function DataTable({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs21("div", { className: cn(TABLE_TOKENS.wrapper, !showBorder && "border-0", className), children: [
-    /* @__PURE__ */ jsx29("div", { ref: scrollContainerRef, className: TABLE_TOKENS.scrollContainer, children: /* @__PURE__ */ jsxs21("table", { className: TABLE_TOKENS.table, children: [
-      /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs21("tr", { className: TABLE_TOKENS.headerRow, children: [
-        showCheckbox && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(TooltipProvider, { children: /* @__PURE__ */ jsxs21("div", { className: cn(TABLE_TOKENS.wrapper, !showBorder && "border-0", className), children: [
+    /* @__PURE__ */ jsx30("div", { ref: scrollContainerRef, className: TABLE_TOKENS.scrollContainer, children: /* @__PURE__ */ jsxs21("table", { className: TABLE_TOKENS.table, children: [
+      /* @__PURE__ */ jsx30("thead", { children: /* @__PURE__ */ jsxs21("tr", { className: TABLE_TOKENS.headerRow, children: [
+        showCheckbox && /* @__PURE__ */ jsx30(
           "th",
           {
             className: cn(
@@ -11581,7 +11645,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__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             "th",
             {
               className: cn(
@@ -11599,14 +11663,14 @@ function DataTable({
               onClick: col.isSortable ? () => handleSortClick(col.key) : void 0,
               children: /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center", children: [
                 col.header,
-                col.isSortable && /* @__PURE__ */ jsx29(
+                col.isSortable && /* @__PURE__ */ jsx30(
                   "span",
                   {
                     className: cn(
                       TABLE_TOKENS.sortIconWrapper,
                       isSorted && TABLE_TOKENS.sortIconActive
                     ),
-                    children: !isSorted ? /* @__PURE__ */ jsx29(ChevronsUpDown, { className: "h-3.5 w-3.5" }) : (sortState == null ? void 0 : sortState.direction) === "asc" ? /* @__PURE__ */ jsx29(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx29(ChevronDown4, { className: "h-3.5 w-3.5" })
+                    children: !isSorted ? /* @__PURE__ */ jsx30(ChevronsUpDown, { className: "h-3.5 w-3.5" }) : (sortState == null ? void 0 : sortState.direction) === "asc" ? /* @__PURE__ */ jsx30(ChevronUp, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx30(ChevronDown4, { className: "h-3.5 w-3.5" })
                   }
                 )
               ] })
@@ -11616,20 +11680,20 @@ function DataTable({
         }) : (
           // Skeleton headers when columns is empty
           Array.from({ length: skeletonColumnCount }).map(
-            (_2, colIndex) => /* @__PURE__ */ jsx29(
+            (_2, colIndex) => /* @__PURE__ */ jsx30(
               "th",
               {
                 className: cn(
                   TABLE_TOKENS.headerCell,
                   stickyHeader && TABLE_TOKENS.headerCellStickyTop
                 ),
-                children: /* @__PURE__ */ jsx29("div", { className: "h-4 w-20 rounded bg-token-grey animate-pulse" })
+                children: /* @__PURE__ */ jsx30("div", { className: "h-4 w-20 rounded bg-token-grey animate-pulse" })
               },
               `skeleton-header-${colIndex}`
             )
           )
         ),
-        hasActions && /* @__PURE__ */ jsx29(
+        hasActions && /* @__PURE__ */ jsx30(
           "th",
           {
             className: cn(
@@ -11639,7 +11703,7 @@ function DataTable({
             style: { width: ACTIONS_COLUMN_WIDTH }
           }
         ),
-        headerAction && /* @__PURE__ */ jsx29(
+        headerAction && /* @__PURE__ */ jsx30(
           "th",
           {
             className: cn(
@@ -11652,18 +11716,18 @@ function DataTable({
               padding: "8px",
               right: 0
             },
-            children: /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-center h-full w-full", children: headerAction })
+            children: /* @__PURE__ */ jsx30("div", { className: "flex items-center justify-center h-full w-full", children: headerAction })
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx29("tbody", { children: loading ? (
+      /* @__PURE__ */ jsx30("tbody", { children: loading ? (
         // Skeleton loading rows
         Array.from({ length: skeletonRowCount }).map((_2, rowIndex) => /* @__PURE__ */ jsxs21(
           "tr",
           {
             className: cn("group", TABLE_TOKENS.bodyRow),
             children: [
-              showCheckbox && /* @__PURE__ */ jsx29(
+              showCheckbox && /* @__PURE__ */ jsx30(
                 "td",
                 {
                   className: cn(
@@ -11672,13 +11736,13 @@ function DataTable({
                     checkboxIsLastPinned && TABLE_TOKENS.pinnedLastBorder
                   ),
                   style: { left: 0, width: CHECKBOX_COLUMN_WIDTH },
-                  children: /* @__PURE__ */ jsx29("div", { className: "h-4 w-4 rounded bg-token-grey animate-pulse" })
+                  children: /* @__PURE__ */ jsx30("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__ */ jsx29(
+                return /* @__PURE__ */ jsx30(
                   "td",
                   {
                     className: cn(
@@ -11690,21 +11754,21 @@ function DataTable({
                       left: stickyOffsets[col.key],
                       width: getColumnWidthPx(col.width)
                     } : col.width ? { width: getColumnWidthPx(col.width) } : void 0,
-                    children: /* @__PURE__ */ jsx29("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
+                    children: /* @__PURE__ */ jsx30("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__ */ jsx29(
+                (_3, colIndex) => /* @__PURE__ */ jsx30(
                   "td",
                   {
                     className: TABLE_TOKENS.bodyCell,
-                    children: /* @__PURE__ */ jsx29("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
+                    children: /* @__PURE__ */ jsx30("div", { className: "h-4 w-3/4 rounded bg-token-grey animate-pulse" })
                   },
                   `skeleton-col-${colIndex}`
                 )
               ),
-              hasActions && /* @__PURE__ */ jsx29(
+              hasActions && /* @__PURE__ */ jsx30(
                 "td",
                 {
                   className: cn(
@@ -11712,7 +11776,7 @@ function DataTable({
                     TABLE_TOKENS.actionsCell
                   ),
                   style: { width: ACTIONS_COLUMN_WIDTH },
-                  children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-1 justify-end", children: /* @__PURE__ */ jsx29("div", { className: "h-6 w-6 rounded bg-token-grey animate-pulse" }) })
+                  children: /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-1 justify-end", children: /* @__PURE__ */ jsx30("div", { className: "h-6 w-6 rounded bg-token-grey animate-pulse" }) })
                 }
               )
             ]
@@ -11736,7 +11800,7 @@ function DataTable({
                 "data-selected": isSelected ? "true" : void 0,
                 onClick: onRowClick ? () => onRowClick(row) : void 0,
                 children: [
-                  showCheckbox && /* @__PURE__ */ jsx29(
+                  showCheckbox && /* @__PURE__ */ jsx30(
                     "td",
                     {
                       className: cn(
@@ -11746,7 +11810,7 @@ function DataTable({
                         checkboxIsLastPinned && TABLE_TOKENS.pinnedLastBorder
                       ),
                       style: { left: 0, width: CHECKBOX_COLUMN_WIDTH },
-                      children: /* @__PURE__ */ jsx29("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx29(
+                      children: /* @__PURE__ */ jsx30("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(
                         Checkbox,
                         {
                           checked: isSelected,
@@ -11760,7 +11824,7 @@ function DataTable({
                     const isPinned = pinnedColumns.includes(col.key);
                     const isLastPinned = col.key === lastPinnedKey;
                     const content = col.accessor(row);
-                    return /* @__PURE__ */ jsx29(
+                    return /* @__PURE__ */ jsx30(
                       "td",
                       {
                         className: cn(
@@ -11772,12 +11836,12 @@ function DataTable({
                           left: stickyOffsets[col.key],
                           width: getColumnWidthPx(col.width)
                         } : col.width ? { width: getColumnWidthPx(col.width) } : void 0,
-                        children: /* @__PURE__ */ jsx29("div", { className: "flex items-center", children: renderCellContent(content) })
+                        children: /* @__PURE__ */ jsx30("div", { className: "flex items-center", children: renderCellContent(content) })
                       },
                       col.key
                     );
                   }),
-                  hasActions && /* @__PURE__ */ jsx29(
+                  hasActions && /* @__PURE__ */ jsx30(
                     "td",
                     {
                       className: cn(
@@ -11785,8 +11849,8 @@ function DataTable({
                         TABLE_TOKENS.actionsCell
                       ),
                       style: { width: ACTIONS_COLUMN_WIDTH },
-                      children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-1 justify-end", children: actions.map((action, actionIndex) => /* @__PURE__ */ jsxs21(Tooltip, { delayDuration: 0, children: [
-                        /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx29("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx29(
+                      children: /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-1 justify-end", children: actions.map((action, actionIndex) => /* @__PURE__ */ jsxs21(Tooltip, { delayDuration: 0, children: [
+                        /* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx30("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30(
                           Button,
                           {
                             variant: "link",
@@ -11796,7 +11860,7 @@ function DataTable({
                             children: action.icon
                           }
                         ) }) }),
-                        /* @__PURE__ */ jsx29(TooltipContent, { children: /* @__PURE__ */ jsx29("p", { children: action.label }) })
+                        /* @__PURE__ */ jsx30(TooltipContent, { children: /* @__PURE__ */ jsx30("p", { children: action.label }) })
                       ] }, actionIndex)) })
                     }
                   )
@@ -11805,12 +11869,12 @@ function DataTable({
               id
             );
           }),
-          data.length === 0 && /* @__PURE__ */ jsx29("tr", { children: /* @__PURE__ */ jsx29(
+          data.length === 0 && /* @__PURE__ */ jsx30("tr", { children: /* @__PURE__ */ jsx30(
             "td",
             {
               colSpan: orderedColumns.length + (hasActions ? 1 : 0) + (showCheckbox ? 1 : 0),
               className: "p-0",
-              children: /* @__PURE__ */ jsx29(
+              children: /* @__PURE__ */ jsx30(
                 "div",
                 {
                   className: "sticky left-0 px-4 py-8 text-center text-sm text-fg-grey-secondary",
@@ -11823,7 +11887,7 @@ function DataTable({
         ] })
       ) })
     ] }) }),
-    showPagination && !loading && data.length > 0 && onPageChange && onRowsPerPageChange && /* @__PURE__ */ jsx29("div", { className: cn(TABLE_TOKENS.pagination, !showBorder && "border-t-0"), children: /* @__PURE__ */ jsx29(
+    showPagination && !loading && data.length > 0 && onPageChange && onRowsPerPageChange && /* @__PURE__ */ jsx30("div", { className: cn(TABLE_TOKENS.pagination, !showBorder && "border-t-0"), children: /* @__PURE__ */ jsx30(
       Pagination,
       {
         handlePageChange: onPageChange,
@@ -11850,7 +11914,7 @@ var ColumnWidth = /* @__PURE__ */ ((ColumnWidth2) => {
 })(ColumnWidth || {});
 
 // src/filter-select/filter-select.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import * as DropdownMenuPrimitive3 from "@radix-ui/react-dropdown-menu";
 import {
   Check as Check6,
@@ -11912,12 +11976,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:
@@ -12009,7 +12076,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",
@@ -12145,11 +12227,11 @@ var FILTER_SELECT_TOKENS = {
 };
 
 // src/filter-select/filter-list-item.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { Check as Check5, GripHorizontal } from "lucide-react";
 
 // src/spinner/spinner.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import { Loader2 } from "lucide-react";
 
 // src/spinner/variables.ts
@@ -12170,10 +12252,10 @@ var SPINNER_TOKENS = {
 };
 
 // src/spinner/spinner.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Spinner = React34.forwardRef(
+import { jsx as jsx31 } from "react/jsx-runtime";
+var Spinner = React35.forwardRef(
   ({ size = "md", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx30("div", { ref, className: cn(SPINNER_TOKENS.base, className), ...props, children: /* @__PURE__ */ jsx30(
+    return /* @__PURE__ */ jsx31("div", { ref, className: cn(SPINNER_TOKENS.base, className), ...props, children: /* @__PURE__ */ jsx31(
       Loader2,
       {
         className: cn(SPINNER_TOKENS.size[size], SPINNER_TOKENS.icon),
@@ -12185,8 +12267,8 @@ var Spinner = React34.forwardRef(
 Spinner.displayName = "Spinner";
 
 // src/filter-select/filter-list-item.tsx
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
-var FilterListItem = React35.forwardRef(
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
+var FilterListItem = React36.forwardRef(
   ({
     value,
     label,
@@ -12207,18 +12289,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";
@@ -12226,33 +12308,33 @@ 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" }
         );
@@ -12286,22 +12368,22 @@ var FilterListItem = React35.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
-            draggable && /* @__PURE__ */ jsx31(
+            draggable && /* @__PURE__ */ jsx32(
               "span",
               {
                 className: FILTER_SELECT_TOKENS.dragHandle,
                 onClick: handleGripClick,
                 "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx31(GripHorizontal, { className: "size-4" })
+                children: /* @__PURE__ */ jsx32(GripHorizontal, { className: "size-4" })
               }
             ),
-            icon && /* @__PURE__ */ jsx31("span", { className: "shrink-0 flex items-center justify-center text-fg-grey-secondary", children: renderIcon2() }),
+            icon && /* @__PURE__ */ jsx32("span", { className: "shrink-0 flex items-center justify-center text-fg-grey-secondary", children: renderIcon2() }),
             /* @__PURE__ */ jsxs22("div", { className: "flex flex-col min-w-0 flex-1 gap-[2px]", children: [
-              labelNode ? /* @__PURE__ */ jsx31("span", { className: "min-w-0", children: labelNode }) : /* @__PURE__ */ jsx31("p", { className: FILTER_SELECT_TOKENS.itemLabel, children: label }),
-              subtext && /* @__PURE__ */ jsx31("p", { className: FILTER_SELECT_TOKENS.itemSubtext, children: subtext })
+              labelNode ? /* @__PURE__ */ jsx32("span", { className: "min-w-0", children: labelNode }) : /* @__PURE__ */ jsx32("p", { className: FILTER_SELECT_TOKENS.itemLabel, children: label }),
+              subtext && /* @__PURE__ */ jsx32("p", { className: FILTER_SELECT_TOKENS.itemSubtext, children: subtext })
             ] })
           ] }),
-          /* @__PURE__ */ jsx31("span", { className: "shrink-0 flex items-center justify-end w-4", children: loading ? /* @__PURE__ */ jsx31(Spinner, { size: "sm" }) : selected ? /* @__PURE__ */ jsx31(Check5, { className: FILTER_SELECT_TOKENS.itemTick, "aria-hidden": "true" }) : null })
+          /* @__PURE__ */ jsx32("span", { className: "shrink-0 flex items-center justify-end w-4", children: loading ? /* @__PURE__ */ jsx32(Spinner, { size: "sm" }) : selected ? /* @__PURE__ */ jsx32(Check5, { className: FILTER_SELECT_TOKENS.itemTick, "aria-hidden": "true" }) : null })
         ]
       }
     );
@@ -12310,7 +12392,7 @@ var FilterListItem = React35.forwardRef(
 FilterListItem.displayName = "FilterListItem";
 
 // src/filter-select/filter-select.tsx
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function startOfDay(d) {
   const x = new Date(d);
   x.setHours(0, 0, 0, 0);
@@ -12430,11 +12512,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__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
@@ -12451,7 +12533,7 @@ var OperandDropdown = ({
         ),
         "aria-label": placeholder || "Select operand",
         children: [
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "span",
             {
               className: cn(
@@ -12461,7 +12543,7 @@ var OperandDropdown = ({
               children: hasValue ? selectedLabel : placeholder || ""
             }
           ),
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             ChevronDown5,
             {
               className: cn(
@@ -12473,7 +12555,7 @@ var OperandDropdown = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx32("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx33("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx33(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.operand.content, "z-[250]"),
@@ -12495,8 +12577,8 @@ var OperandDropdown = ({
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.operand.item,
               children: [
-                /* @__PURE__ */ jsx32("span", { className: "truncate", children: opt.label }),
-                /* @__PURE__ */ jsx32("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33("span", { className: "truncate", children: opt.label }),
+                /* @__PURE__ */ jsx33("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ jsx33(
                   Check6,
                   {
                     className: FILTER_SELECT_TOKENS.operand.itemTick,
@@ -12534,12 +12616,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;
@@ -12554,19 +12636,19 @@ var TimeSelectPill = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": ariaLabel,
         children: [
-          /* @__PURE__ */ jsx32("span", { className: "truncate", children: formatTime12h(value) }),
-          /* @__PURE__ */ jsx32(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ jsx33("span", { className: "truncate", children: formatTime12h(value) }),
+          /* @__PURE__ */ jsx33(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx32("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx33("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx33(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12577,7 +12659,7 @@ var TimeSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: TIME_OPTIONS_30M.map((opt, idx) => {
           const isSelected = idx === selectedSlotIndex;
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx33(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12587,7 +12669,7 @@ var TimeSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ jsx32("span", { className: "truncate", children: opt.label })
+              children: /* @__PURE__ */ jsx33("span", { className: "truncate", children: opt.label })
             },
             opt.label
           );
@@ -12616,9 +12698,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;
@@ -12627,19 +12709,19 @@ var MonthSelectPill = ({
     return () => window.clearTimeout(id);
   }, [open]);
   return /* @__PURE__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": "Select month",
         children: [
-          /* @__PURE__ */ jsx32("span", { className: "truncate", children: MONTH_LABELS[monthIndex] }),
-          /* @__PURE__ */ jsx32(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ jsx33("span", { className: "truncate", children: MONTH_LABELS[monthIndex] }),
+          /* @__PURE__ */ jsx33(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx32("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx33("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx33(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12650,7 +12732,7 @@ var MonthSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: MONTH_LABELS.map((label, idx) => {
           const isSelected = idx === monthIndex;
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx33(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12661,7 +12743,7 @@ var MonthSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ jsx32("span", { className: "truncate", children: label })
+              children: /* @__PURE__ */ jsx33("span", { className: "truncate", children: label })
             },
             label
           );
@@ -12678,14 +12760,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;
@@ -12694,19 +12776,19 @@ var YearSelectPill = ({
     return () => window.clearTimeout(id);
   }, [open]);
   return /* @__PURE__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
         className: FILTER_SELECT_TOKENS.timeSelectPill.trigger,
         "aria-label": "Select year",
         children: [
-          /* @__PURE__ */ jsx32("span", { className: "truncate", children: year }),
-          /* @__PURE__ */ jsx32(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
+          /* @__PURE__ */ jsx33("span", { className: "truncate", children: year }),
+          /* @__PURE__ */ jsx33(ChevronDown5, { className: FILTER_SELECT_TOKENS.timeSelectPill.chevron })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx32("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx33("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx33(
       DropdownMenuPrimitive3.Content,
       {
         className: cn(FILTER_SELECT_TOKENS.timeSelectPill.content, "z-[250]"),
@@ -12717,7 +12799,7 @@ var YearSelectPill = ({
         onCloseAutoFocus: (e) => e.preventDefault(),
         children: years.map((y) => {
           const isSelected = y === year;
-          return /* @__PURE__ */ jsx32(
+          return /* @__PURE__ */ jsx33(
             DropdownMenuPrimitive3.Item,
             {
               ref: isSelected ? selectedRef : void 0,
@@ -12728,7 +12810,7 @@ var YearSelectPill = ({
               },
               "data-state": isSelected ? "checked" : "unchecked",
               className: FILTER_SELECT_TOKENS.timeSelectPill.item,
-              children: /* @__PURE__ */ jsx32("span", { className: "truncate", children: y })
+              children: /* @__PURE__ */ jsx33("span", { className: "truncate", children: y })
             },
             y
           );
@@ -12737,15 +12819,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 } = useDayPicker();
-  if (!ctx) return /* @__PURE__ */ jsx32(Fragment11, {});
+  if (!ctx) return /* @__PURE__ */ jsx33(Fragment11, {});
   const { date, onDateChange, container, themeClass, showTime, minYear, maxYear } = ctx;
   const monthDate = calendarMonth.date;
   const monthIndex = monthDate.getMonth();
@@ -12778,7 +12860,7 @@ var CalendarMonthCaption = ({
     }
   };
   return /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between gap-1 w-full px-0 py-1", children: [
-    isFirst && /* @__PURE__ */ jsx32(
+    isFirst && /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -12786,11 +12868,11 @@ var CalendarMonthCaption = ({
         "aria-label": "Previous month",
         onClick: () => previousMonth && goToMonth(previousMonth),
         disabled: !previousMonth,
-        children: /* @__PURE__ */ jsx32(ChevronLeft2, { className: "size-4" })
+        children: /* @__PURE__ */ jsx33(ChevronLeft2, { className: "size-4" })
       }
     ),
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 flex-1 justify-center", children: [
-      /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 flex-1 justify-start", children: [
+      /* @__PURE__ */ jsx33(
         MonthSelectPill,
         {
           monthIndex,
@@ -12799,7 +12881,7 @@ var CalendarMonthCaption = ({
           themeClass
         }
       ),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         YearSelectPill,
         {
           year,
@@ -12810,7 +12892,7 @@ var CalendarMonthCaption = ({
           themeClass
         }
       ),
-      showTime && timeValue && /* @__PURE__ */ jsx32(
+      showTime && timeValue && /* @__PURE__ */ jsx33(
         TimeSelectPill,
         {
           value: timeValue,
@@ -12821,7 +12903,7 @@ var CalendarMonthCaption = ({
         }
       )
     ] }),
-    isLast && /* @__PURE__ */ jsx32(
+    isLast && /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -12829,7 +12911,7 @@ var CalendarMonthCaption = ({
         "aria-label": "Next month",
         onClick: () => nextMonth && goToMonth(nextMonth),
         disabled: !nextMonth,
-        children: /* @__PURE__ */ jsx32(ChevronRight3, { className: "size-4" })
+        children: /* @__PURE__ */ jsx33(ChevronRight3, { className: "size-4" })
       }
     )
   ] });
@@ -12839,7 +12921,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,
@@ -12884,24 +12966,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);
@@ -12910,25 +12994,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;
@@ -12961,7 +13045,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) {
@@ -12982,7 +13066,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) {
@@ -13037,10 +13121,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;
@@ -13112,7 +13196,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);
@@ -13121,27 +13205,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 !== "";
       }
@@ -13162,18 +13246,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)) {
@@ -13182,10 +13266,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)) {
@@ -13217,13 +13301,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__ */ jsx32("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ jsxs23(
+    const renderFooterClear = (onClick, labelText, ariaLabel) => /* @__PURE__ */ jsx33("div", { className: FILTER_SELECT_TOKENS.footer.wrapper, children: /* @__PURE__ */ jsxs23(
       "button",
       {
         type: "button",
@@ -13231,13 +13315,13 @@ var FilterSelect = React36.forwardRef(
         className: FILTER_SELECT_TOKENS.removeButton.base,
         "aria-label": ariaLabel,
         children: [
-          /* @__PURE__ */ jsx32(Trash2, { className: FILTER_SELECT_TOKENS.removeButton.icon }),
-          /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.removeButton.text, children: labelText })
+          /* @__PURE__ */ jsx33(Trash2, { className: FILTER_SELECT_TOKENS.removeButton.icon }),
+          /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.removeButton.text, children: labelText })
         ]
       }
     ) });
-    return /* @__PURE__ */ jsx32("div", { ref, className: "inline-block font-sans", ...props, children: /* @__PURE__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsx33("div", { ref, className: "inline-block font-sans", ...props, children: /* @__PURE__ */ jsxs23(DropdownMenuPrimitive3.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
         "button",
         {
           type: "button",
@@ -13254,8 +13338,8 @@ var FilterSelect = React36.forwardRef(
           ),
           children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 min-w-0", children: [
-              Icon2 && /* @__PURE__ */ jsx32(Icon2, { className: FILTER_SELECT_TOKENS.icon }),
-              /* @__PURE__ */ jsx32(
+              Icon2 && /* @__PURE__ */ jsx33(Icon2, { className: FILTER_SELECT_TOKENS.icon }),
+              /* @__PURE__ */ jsx33(
                 "span",
                 {
                   "data-filter-label": "",
@@ -13264,7 +13348,15 @@ var FilterSelect = React36.forwardRef(
                 }
               ),
               selectedItemsText && /* @__PURE__ */ jsxs23(Fragment11, { children: [
-                /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    "data-filter-separator": "",
+                    className: FILTER_SELECT_TOKENS.separator
+                  }
+                ),
+                /* @__PURE__ */ jsx33(
                   "span",
                   {
                     ref: selectedItemsRef,
@@ -13278,7 +13370,7 @@ var FilterSelect = React36.forwardRef(
                     )}, +${selectedLabels.length - visibleItemsCount}` : selectedItemsText
                   }
                 ),
-                type === "list" && /* @__PURE__ */ jsx32(
+                type === "list" && /* @__PURE__ */ jsx33(
                   "span",
                   {
                     ref: measureRef,
@@ -13297,7 +13389,7 @@ var FilterSelect = React36.forwardRef(
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsx32(
+            /* @__PURE__ */ jsx33(
               ChevronDown5,
               {
                 className: cn(
@@ -13310,14 +13402,14 @@ var FilterSelect = React36.forwardRef(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx32(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(DropdownMenuPrimitive3.Portal, { container, children: /* @__PURE__ */ jsx33(
         "div",
         {
           className: cn(
             !container && "lego-land",
             !container && themeClass
           ),
-          children: /* @__PURE__ */ jsx32(
+          children: /* @__PURE__ */ jsx33(
             DropdownMenuPrimitive3.Content,
             {
               className: cn(
@@ -13360,8 +13452,8 @@ var FilterSelect = React36.forwardRef(
                   e.preventDefault();
                 }
               },
-              children: loading ? /* @__PURE__ */ jsx32(Spinner, { size: "md" }) : type === "text" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
-                /* @__PURE__ */ jsx32("div", { className: "p-1", children: /* @__PURE__ */ jsx32(
+              children: loading ? /* @__PURE__ */ jsx33(Spinner, { size: "md" }) : type === "text" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
+                /* @__PURE__ */ jsx33("div", { className: "p-1", children: /* @__PURE__ */ jsx33(
                   "textarea",
                   {
                     value: text != null ? text : "",
@@ -13371,10 +13463,10 @@ var FilterSelect = React36.forwardRef(
                     autoFocus: true
                   }
                 ) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, "Remove", "Remove text")
+                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} text`)
               ] }) : type === "text_with_operands" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
                 /* @__PURE__ */ jsxs23("div", { className: "p-1 flex flex-col gap-2", children: [
-                  /* @__PURE__ */ jsx32("div", { className: "pb-2 -mx-1 px-1 border-b border-token-xlight", children: /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx33(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
@@ -13384,8 +13476,8 @@ var FilterSelect = React36.forwardRef(
                       container,
                       themeClass
                     }
-                  ) }),
-                  /* @__PURE__ */ jsx32(
+                  ),
+                  /* @__PURE__ */ jsx33(
                     "textarea",
                     {
                       value: text != null ? text : "",
@@ -13398,12 +13490,12 @@ var FilterSelect = React36.forwardRef(
                 ] }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
                   handleTextClear,
-                  "Remove",
-                  "Remove filter"
+                  footerActionLabel,
+                  `${footerActionLabel} filter`
                 )
               ] }) : type === "numeric" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
-                /* @__PURE__ */ jsx32("div", { className: "p-1", children: /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                  /* @__PURE__ */ jsx32(
+                /* @__PURE__ */ jsx33("div", { className: "p-1", children: /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
+                  /* @__PURE__ */ jsx33(
                     "input",
                     {
                       type: "number",
@@ -13414,12 +13506,12 @@ var FilterSelect = React36.forwardRef(
                       autoFocus: true
                     }
                   ),
-                  unitLabel && /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                  unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                 ] }) }),
-                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, "Remove", "Remove number")
+                (showClearBtn || hasContentToClear) && renderFooterClear(handleTextClear, footerActionLabel, `${footerActionLabel} number`)
               ] }) : type === "numeric_with_operands" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
                 /* @__PURE__ */ jsxs23("div", { className: "p-1 flex flex-col gap-2", children: [
-                  /* @__PURE__ */ jsx32("div", { className: "pb-2 -mx-1 px-1 border-b border-token-xlight", children: /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx33(
                     OperandDropdown,
                     {
                       value: operand != null ? operand : "",
@@ -13429,10 +13521,10 @@ var FilterSelect = React36.forwardRef(
                       container,
                       themeClass
                     }
-                  ) }),
+                  ),
                   isRangeMode ? /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 w-full", children: [
                     /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                      /* @__PURE__ */ jsx32(
+                      /* @__PURE__ */ jsx33(
                         "input",
                         {
                           type: "text",
@@ -13449,7 +13541,7 @@ var FilterSelect = React36.forwardRef(
                           className: FILTER_SELECT_TOKENS.bodyInput.input
                         }
                       ),
-                      unitLabel && /* @__PURE__ */ jsx32(
+                      unitLabel && /* @__PURE__ */ jsx33(
                         "span",
                         {
                           className: FILTER_SELECT_TOKENS.bodyInput.unit,
@@ -13457,9 +13549,9 @@ var FilterSelect = React36.forwardRef(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
+                    /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
                     /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                      /* @__PURE__ */ jsx32(
+                      /* @__PURE__ */ jsx33(
                         "input",
                         {
                           type: "text",
@@ -13476,7 +13568,7 @@ var FilterSelect = React36.forwardRef(
                           className: FILTER_SELECT_TOKENS.bodyInput.input
                         }
                       ),
-                      unitLabel && /* @__PURE__ */ jsx32(
+                      unitLabel && /* @__PURE__ */ jsx33(
                         "span",
                         {
                           className: FILTER_SELECT_TOKENS.bodyInput.unit,
@@ -13485,7 +13577,7 @@ var FilterSelect = React36.forwardRef(
                       )
                     ] })
                   ] }) : /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: [
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(
                       "input",
                       {
                         type: "number",
@@ -13496,7 +13588,7 @@ var FilterSelect = React36.forwardRef(
                         autoFocus: true
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
@@ -13507,13 +13599,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__ */ jsxs23(Fragment11, { children: [
-                /* @__PURE__ */ jsx32("div", { className: "p-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 w-full", children: [
+                /* @__PURE__ */ jsx33("div", { className: "p-1", children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 w-full", children: [
                   /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(
                       "input",
                       {
                         type: "text",
@@ -13531,11 +13623,11 @@ var FilterSelect = React36.forwardRef(
                         autoFocus: true
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] }),
-                  /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
+                  /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.rangeDivider, children: "-" }),
                   /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapper, children: [
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(
                       "input",
                       {
                         type: "text",
@@ -13552,7 +13644,7 @@ var FilterSelect = React36.forwardRef(
                         className: FILTER_SELECT_TOKENS.bodyInput.input
                       }
                     ),
-                    unitLabel && /* @__PURE__ */ jsx32("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
+                    unitLabel && /* @__PURE__ */ jsx33("span", { className: FILTER_SELECT_TOKENS.bodyInput.unit, children: unitLabel })
                   ] })
                 ] }) }),
                 (showClearBtn || hasContentToClear) && renderFooterClear(
@@ -13561,12 +13653,12 @@ var FilterSelect = React36.forwardRef(
                     onRangeMaxChange == null ? void 0 : onRangeMaxChange("");
                     onRemoveAll == null ? void 0 : onRemoveAll();
                   },
-                  "Remove",
-                  "Remove range"
+                  footerActionLabel,
+                  `${footerActionLabel} range`
                 )
               ] }) : type === "duration" ? /* @__PURE__ */ jsxs23(Fragment11, { children: [
                 /* @__PURE__ */ jsxs23("div", { className: "p-1 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx32("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx33("div", { className: FILTER_SELECT_TOKENS.bodyInput.wrapperCompact, children: /* @__PURE__ */ jsx33(
                     "input",
                     {
                       type: "number",
@@ -13577,7 +13669,7 @@ var FilterSelect = React36.forwardRef(
                       autoFocus: true
                     }
                   ) }),
-                  /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx33(
                     OperandDropdown,
                     {
                       value: durationUnit != null ? durationUnit : "",
@@ -13595,41 +13687,75 @@ var FilterSelect = React36.forwardRef(
                     onDurationUnitChange == null ? void 0 : onDurationUnitChange("");
                     onRemoveAll == null ? void 0 : onRemoveAll();
                   },
-                  "Remove",
-                  "Remove duration"
+                  footerActionLabel,
+                  `${footerActionLabel} duration`
                 )
               ] }) : type === "date" ? /* @__PURE__ */ jsxs23("div", { className: "flex flex-col min-h-0 flex-1", children: [
                 /* @__PURE__ */ jsxs23(
                   "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__ */ jsx32("div", { className: FILTER_SELECT_TOKENS.datePresetSidebar, children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-1", children: (Array.isArray(datePresets) ? datePresets : DEFAULT_DATE_PRESETS).map((preset) => {
-                        const selected = isPresetSelected(preset, date);
-                        return /* @__PURE__ */ jsx32(
-                          "button",
-                          {
-                            type: "button",
-                            onClick: () => {
-                              const range = preset.getRange();
-                              onDateChange == null ? void 0 : onDateChange({
-                                start: range.start,
-                                end: range.end
-                              });
+                      datePresets !== false && /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.datePresetSidebar, children: [
+                        /* @__PURE__ */ jsx33("div", { className: "flex flex-col gap-1", children: (Array.isArray(datePresets) ? datePresets : DEFAULT_DATE_PRESETS).map((preset) => {
+                          const selected = isPresetSelected(preset, date);
+                          return /* @__PURE__ */ jsx33(
+                            "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__ */ jsx32("div", { className: "flex flex-col min-w-0 flex-1 gap-2", children: /* @__PURE__ */ jsx32(
+                            preset.value
+                          );
+                        }) }),
+                        (showClearBtn || hasContentToClear) && /* @__PURE__ */ jsx33(
+                          "div",
+                          {
+                            className: FILTER_SELECT_TOKENS.datePresetSidebarAction.wrapper,
+                            children: /* @__PURE__ */ jsxs23(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: handleDateClear,
+                                className: FILTER_SELECT_TOKENS.datePresetSidebarAction.button,
+                                "aria-label": `${footerActionLabel} date range`,
+                                children: [
+                                  /* @__PURE__ */ jsx33(
+                                    Trash2,
+                                    {
+                                      className: FILTER_SELECT_TOKENS.datePresetSidebarAction.icon
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx33(
+                                    "span",
+                                    {
+                                      className: FILTER_SELECT_TOKENS.datePresetSidebarAction.text,
+                                      children: footerActionLabel
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx33("div", { className: "flex flex-col min-w-0 flex-1 gap-2", children: /* @__PURE__ */ jsx33(
                         CalendarMonthCaptionContext.Provider,
                         {
                           value: {
@@ -13641,7 +13767,7 @@ var FilterSelect = React36.forwardRef(
                             minYear: 2020,
                             maxYear: (/* @__PURE__ */ new Date()).getFullYear() + 5
                           },
-                          children: /* @__PURE__ */ jsx32(
+                          children: /* @__PURE__ */ jsx33(
                             DayPicker,
                             {
                               mode: "range",
@@ -13679,7 +13805,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__ */ jsx32(Fragment11, {})
+                                Nav: () => /* @__PURE__ */ jsx33(Fragment11, {})
                               },
                               className: "p-0 font-sans [&_.rdp-day_button]:rounded-[8px]"
                             }
@@ -13689,10 +13815,10 @@ var FilterSelect = React36.forwardRef(
                     ]
                   }
                 ),
-                (showClearBtn || hasContentToClear) && renderFooterClear(
+                datePresets === false && (showClearBtn || hasContentToClear) && renderFooterClear(
                   handleDateClear,
-                  "Remove",
-                  "Remove date range"
+                  footerActionLabel,
+                  `${footerActionLabel} date range`
                 )
               ] }) : (
                 // -----------------------------------------------------------------
@@ -13700,8 +13826,8 @@ var FilterSelect = React36.forwardRef(
                 // -----------------------------------------------------------------
                 /* @__PURE__ */ jsxs23(Fragment11, { children: [
                   showSearch && /* @__PURE__ */ jsxs23("div", { className: FILTER_SELECT_TOKENS.searchBar.wrapper, children: [
-                    /* @__PURE__ */ jsx32(Search3, { className: FILTER_SELECT_TOKENS.searchBar.icon }),
-                    /* @__PURE__ */ jsx32(
+                    /* @__PURE__ */ jsx33(Search3, { className: FILTER_SELECT_TOKENS.searchBar.icon }),
+                    /* @__PURE__ */ jsx33(
                       "input",
                       {
                         type: "text",
@@ -13712,20 +13838,20 @@ var FilterSelect = React36.forwardRef(
                         className: FILTER_SELECT_TOKENS.searchBar.input
                       }
                     ),
-                    searchQuery && /* @__PURE__ */ jsx32(
+                    searchQuery && /* @__PURE__ */ jsx33(
                       "button",
                       {
                         type: "button",
                         onClick: () => setSearchQuery(""),
                         "aria-label": "Remove search",
                         className: FILTER_SELECT_TOKENS.searchBar.clearBtn,
-                        children: /* @__PURE__ */ jsx32(X2, { className: FILTER_SELECT_TOKENS.searchBar.icon })
+                        children: /* @__PURE__ */ jsx33(X2, { className: FILTER_SELECT_TOKENS.searchBar.icon })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx32("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__ */ jsx32("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map(
+                  /* @__PURE__ */ jsx33("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__ */ jsx33("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map(
                     (section, sectionIdx) => /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1", children: [
-                      /* @__PURE__ */ jsx32(
+                      /* @__PURE__ */ jsx33(
                         "div",
                         {
                           className: FILTER_SELECT_TOKENS.sectionHeader,
@@ -13736,7 +13862,7 @@ var FilterSelect = React36.forwardRef(
                         const isSelected = selectedItems.includes(
                           item.value
                         );
-                        return /* @__PURE__ */ jsx32(
+                        return /* @__PURE__ */ jsx33(
                           FilterListItem,
                           {
                             value: item.value,
@@ -13760,9 +13886,9 @@ var FilterSelect = React36.forwardRef(
                         );
                       })
                     ] }, sectionIdx)
-                  ) : sortedItems.length === 0 ? /* @__PURE__ */ jsx32("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map((item) => {
+                  ) : sortedItems.length === 0 ? /* @__PURE__ */ jsx33("div", { className: FILTER_SELECT_TOKENS.emptyState, children: emptyStateLabel || "No items available" }) : sortedItems.map((item) => {
                     const isSelected = selectedItems.includes(item.value);
-                    return /* @__PURE__ */ jsx32(
+                    return /* @__PURE__ */ jsx33(
                       FilterListItem,
                       {
                         value: item.value,
@@ -13787,8 +13913,8 @@ var FilterSelect = React36.forwardRef(
                   }) }),
                   showClearBtn && selectedItems.length > 0 && renderFooterClear(
                     handleClearAll,
-                    "Remove",
-                    "Remove all selected items"
+                    footerActionLabel,
+                    `${footerActionLabel} all selected items`
                   )
                 ] })
               )
@@ -13802,17 +13928,17 @@ var FilterSelect = React36.forwardRef(
 FilterSelect.displayName = "FilterSelect";
 
 // src/filter-select/compound-filter-select.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 import * as DropdownMenuPrimitive4 from "@radix-ui/react-dropdown-menu";
 import { Check as Check7, ChevronDown as ChevronDown6 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 function renderIcon(icon, className) {
   if (!icon) return null;
-  if (React37.isValidElement(icon)) {
-    return /* @__PURE__ */ jsx33("span", { className: "inline-flex items-center", children: icon });
+  if (React38.isValidElement(icon)) {
+    return /* @__PURE__ */ jsx34("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)
     });
   }
@@ -13831,8 +13957,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;
@@ -13852,7 +13978,7 @@ function CompoundFilterSelect({
       ...props,
       children: [
         /* @__PURE__ */ jsxs24(DropdownMenuPrimitive4.Root, { open, onOpenChange: setOpen, children: [
-          /* @__PURE__ */ jsx33(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
+          /* @__PURE__ */ jsx34(DropdownMenuPrimitive4.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs24(
             "button",
             {
               type: "button",
@@ -13871,8 +13997,8 @@ function CompoundFilterSelect({
               "aria-label": "Toggle filter type",
               children: [
                 renderIcon(effectiveLeadingIcon, "text-fg-black"),
-                leftLabel && /* @__PURE__ */ jsx33("span", { className: "font-sans text-xs font-medium leading-4 text-fg-black tracking-normal whitespace-nowrap", children: leftLabel }),
-                /* @__PURE__ */ jsx33(
+                leftLabel && /* @__PURE__ */ jsx34("span", { className: "font-sans text-xs font-medium leading-4 text-fg-black tracking-normal whitespace-nowrap", children: leftLabel }),
+                /* @__PURE__ */ jsx34(
                   ChevronDown6,
                   {
                     className: cn(
@@ -13884,7 +14010,7 @@ function CompoundFilterSelect({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx33(DropdownMenuPrimitive4.Portal, { container, children: /* @__PURE__ */ jsx33("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(DropdownMenuPrimitive4.Portal, { container, children: /* @__PURE__ */ jsx34("div", { className: cn(!container && "lego-land", !container && themeClass), children: /* @__PURE__ */ jsx34(
             DropdownMenuPrimitive4.Content,
             {
               className: cn(
@@ -13917,9 +14043,9 @@ function CompoundFilterSelect({
                     children: [
                       /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-2 min-w-0", children: [
                         renderIcon(opt.icon, "text-fg-black"),
-                        /* @__PURE__ */ jsx33("span", { className: "font-sans text-xs font-normal leading-4 text-fg-black truncate", children: opt.label })
+                        /* @__PURE__ */ jsx34("span", { className: "font-sans text-xs font-normal leading-4 text-fg-black truncate", children: opt.label })
                       ] }),
-                      /* @__PURE__ */ jsx33("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ jsx33(
+                      /* @__PURE__ */ jsx34("span", { className: "shrink-0 flex items-center justify-end w-4", children: isSelected && /* @__PURE__ */ jsx34(
                         Check7,
                         {
                           className: "size-4 text-fg-brand",
@@ -13934,7 +14060,7 @@ function CompoundFilterSelect({
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             className: cn(
@@ -13944,7 +14070,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
           }
@@ -13956,7 +14086,7 @@ function CompoundFilterSelect({
 CompoundFilterSelect.displayName = "CompoundFilterSelect";
 
 // src/button-list/button-list.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import * as DropdownMenuPrimitive5 from "@radix-ui/react-dropdown-menu";
 import { ChevronDown as ChevronDown7, Code } from "lucide-react";
 
@@ -13969,8 +14099,8 @@ var BUTTON_LIST_TOKENS = {
 };
 
 // src/button-list/button-list.tsx
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
-var ButtonList = React38.forwardRef(
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+var ButtonList = React39.forwardRef(
   ({
     label = "Button List",
     leadingIcon: LeadingIcon = Code,
@@ -13985,53 +14115,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__ */ jsx34("div", { ref, ...props, children: /* @__PURE__ */ jsxs25(DropdownMenuPrimitive5.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx34(DropdownMenuPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsx35("div", { ref, ...props, children: /* @__PURE__ */ jsxs25(DropdownMenuPrimitive5.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx35(DropdownMenuPrimitive5.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs25(
         "button",
         {
           type: "button",
           className: cn(BUTTON_LIST_TOKENS.trigger, "group", className),
           children: [
-            /* @__PURE__ */ jsx34(LeadingIcon, { className: BUTTON_LIST_TOKENS.icon }),
-            /* @__PURE__ */ jsx34("span", { children: label }),
-            /* @__PURE__ */ jsx34(ChevronDown7, { className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })
+            /* @__PURE__ */ jsx35(LeadingIcon, { className: BUTTON_LIST_TOKENS.icon }),
+            /* @__PURE__ */ jsx35("span", { children: label }),
+            /* @__PURE__ */ jsx35(ChevronDown7, { className: "size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180" })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx34(DropdownMenuPrimitive5.Portal, { container, children: /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(DropdownMenuPrimitive5.Portal, { container, children: /* @__PURE__ */ jsx35(
         "div",
         {
           className: cn(
             !container && "lego-land",
             !container && themeClass
           ),
-          children: /* @__PURE__ */ jsx34(
+          children: /* @__PURE__ */ jsx35(
             DropdownMenuPrimitive5.Content,
             {
               className: cn(
@@ -14051,8 +14181,8 @@ var ButtonList = React38.forwardRef(
                     className: cn(BUTTON_LIST_TOKENS.listItem),
                     onClick: () => handleSelect(item.value),
                     children: [
-                      Icon2 && /* @__PURE__ */ jsx34(Icon2, { className: BUTTON_LIST_TOKENS.icon }),
-                      /* @__PURE__ */ jsx34("span", { children: item.label })
+                      Icon2 && /* @__PURE__ */ jsx35(Icon2, { className: BUTTON_LIST_TOKENS.icon }),
+                      /* @__PURE__ */ jsx35("span", { children: item.label })
                     ]
                   },
                   item.value
@@ -15019,7 +15149,7 @@ function useJsonEditor({
 }
 
 // src/json-editor/JsonEditor.tsx
-import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
 function JsonEditor({
   value,
   onChange,
@@ -15058,25 +15188,25 @@ function JsonEditor({
         className: `rounded-[16px] border border-token-xlight overflow-hidden bg-token-white ${hideHeader ? "rounded-t-none border-t-0" : ""}`,
         children: [
           !hideHeader && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ jsx35("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
+            /* @__PURE__ */ jsx36("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
             /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx35(ToolbarButton, { onClick: formatJson, title: "Format JSON", children: /* @__PURE__ */ jsx35(WandSparkles, { className: "size-3" }) }),
-              /* @__PURE__ */ jsx35(Divider, {}),
-              /* @__PURE__ */ jsx35(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ jsx35(Check8, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ jsx35(Copy, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx36(ToolbarButton, { onClick: formatJson, title: "Format JSON", children: /* @__PURE__ */ jsx36(WandSparkles, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx36(Divider, {}),
+              /* @__PURE__ */ jsx36(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ jsx36(Check8, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ jsx36(Copy, { className: "size-3" }) }),
               showExpandButton && /* @__PURE__ */ jsxs26(Fragment12, { children: [
-                /* @__PURE__ */ jsx35(Divider, {}),
-                /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36(Divider, {}),
+                /* @__PURE__ */ jsx36(
                   ToolbarButton,
                   {
                     onClick: () => setIsOpen(true),
                     title: "Expand editor",
-                    children: /* @__PURE__ */ jsx35(Expand, { className: "size-3" })
+                    children: /* @__PURE__ */ jsx36(Expand, { className: "size-3" })
                   }
                 )
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             Ft,
             {
               height,
@@ -15088,11 +15218,11 @@ function JsonEditor({
               theme: "vs"
             }
           ),
-          hasErrors && /* @__PURE__ */ jsx35(ErrorBar, { errors })
+          hasErrors && /* @__PURE__ */ jsx36(ErrorBar, { errors })
         ]
       }
     ),
-    showExpandButton && /* @__PURE__ */ jsx35(
+    showExpandButton && /* @__PURE__ */ jsx36(
       Dialog,
       {
         open: isOpen,
@@ -15102,20 +15232,20 @@ function JsonEditor({
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
         className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ jsx35("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsxs26("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
+        children: /* @__PURE__ */ jsx36("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsxs26("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
           /* @__PURE__ */ jsxs26("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ jsx35("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
+            /* @__PURE__ */ jsx36("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
             /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx35(
+              /* @__PURE__ */ jsx36(
                 ToolbarButton,
                 {
                   onClick: formatExpandedJson,
                   title: "Format JSON",
-                  children: /* @__PURE__ */ jsx35(WandSparkles, { className: "size-3" })
+                  children: /* @__PURE__ */ jsx36(WandSparkles, { className: "size-3" })
                 }
               ),
-              /* @__PURE__ */ jsx35(Divider, {}),
-              /* @__PURE__ */ jsx35(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ jsx35(Check8, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ jsx35(Copy, { className: "size-3" }) })
+              /* @__PURE__ */ jsx36(Divider, {}),
+              /* @__PURE__ */ jsx36(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ jsx36(Check8, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ jsx36(Copy, { className: "size-3" }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxs26(
@@ -15124,7 +15254,7 @@ function JsonEditor({
               scrollable: true,
               className: "flex-1 min-h-0 p-0 overflow-hidden",
               children: [
-                /* @__PURE__ */ jsx35("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ jsx35(
+                /* @__PURE__ */ jsx36("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ jsx36(
                   Ft,
                   {
                     height: "100%",
@@ -15136,7 +15266,7 @@ function JsonEditor({
                     theme: "vs"
                   }
                 ) }),
-                hasErrors && /* @__PURE__ */ jsx35(ErrorBar, { errors })
+                hasErrors && /* @__PURE__ */ jsx36(ErrorBar, { errors })
               ]
             }
           )
@@ -15150,8 +15280,8 @@ function ToolbarButton({
   title,
   children
 }) {
-  return /* @__PURE__ */ jsx35(TooltipProvider, { children: /* @__PURE__ */ jsxs26(Tooltip, { children: [
-    /* @__PURE__ */ jsx35(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(TooltipProvider, { children: /* @__PURE__ */ jsxs26(Tooltip, { children: [
+    /* @__PURE__ */ jsx36(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -15160,16 +15290,16 @@ function ToolbarButton({
         children
       }
     ) }),
-    /* @__PURE__ */ jsx35(TooltipContent, { side: "top", sideOffset: 6, children: title })
+    /* @__PURE__ */ jsx36(TooltipContent, { side: "top", sideOffset: 6, children: title })
   ] }) });
 }
 function Divider() {
-  return /* @__PURE__ */ jsx35("div", { className: "w-px h-3.5 bg-border-token-xlight mx-0.5" });
+  return /* @__PURE__ */ jsx36("div", { className: "w-px h-3.5 bg-border-token-xlight mx-0.5" });
 }
 function ErrorBar({ errors }) {
   return /* @__PURE__ */ jsxs26("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__ */ jsx35("span", { className: "mt-px shrink-0", children: "\u26A0" }),
-    /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-0.5", children: errors.map((err, idx) => /* @__PURE__ */ jsx35("span", { children: err }, idx)) })
+    /* @__PURE__ */ jsx36("span", { className: "mt-px shrink-0", children: "\u26A0" }),
+    /* @__PURE__ */ jsx36("div", { className: "flex flex-col gap-0.5", children: errors.map((err, idx) => /* @__PURE__ */ jsx36("span", { children: err }, idx)) })
   ] });
 }
 
@@ -15188,7 +15318,7 @@ var JSON_EDITOR_LANGUAGE_OPTIONS = [
 ];
 
 // src/key-value-editor/key-value-editor.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { GitCompare, Trash2 as Trash22 } from "lucide-react";
 
 // src/key-value-editor/variables.ts
@@ -15213,8 +15343,8 @@ var KEY_VALUE_EDITOR_TOKENS = {
 };
 
 // src/key-value-editor/key-value-editor.tsx
-import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
-var KeyValueEditor = React40.forwardRef(
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+var KeyValueEditor = React41.forwardRef(
   ({
     pairs,
     onPairsChange,
@@ -15227,7 +15357,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 };
@@ -15235,14 +15365,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: "" }]);
@@ -15250,7 +15380,7 @@ var KeyValueEditor = React40.forwardRef(
       },
       [pairs, onPairsChange]
     );
-    const defaultValueIcon = /* @__PURE__ */ jsx36(GitCompare, {});
+    const defaultValueIcon = /* @__PURE__ */ jsx37(GitCompare, {});
     return /* @__PURE__ */ jsxs27(
       "div",
       {
@@ -15259,11 +15389,11 @@ var KeyValueEditor = React40.forwardRef(
         style,
         children: [
           !hideHeader && /* @__PURE__ */ jsxs27("div", { className: KEY_VALUE_EDITOR_TOKENS.header, children: [
-            /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ jsx36("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Key" }) }),
-            /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ jsx36("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Value" }) }),
-            /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCellActions, children: toolbar && /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.iconGroup, children: toolbar }) })
+            /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ jsx37("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Key" }) }),
+            /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCell, children: /* @__PURE__ */ jsx37("span", { className: KEY_VALUE_EDITOR_TOKENS.headerLabel, children: "Value" }) }),
+            /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.headerCellActions, children: toolbar && /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.iconGroup, children: toolbar }) })
           ] }),
-          pairs.map((pair, index2) => /* @__PURE__ */ jsx36(
+          pairs.map((pair, index2) => /* @__PURE__ */ jsx37(
             KeyValueRow,
             {
               pair,
@@ -15294,7 +15424,7 @@ function KeyValueRow({
   showDelete
 }) {
   return /* @__PURE__ */ jsxs27("div", { className: KEY_VALUE_EDITOR_TOKENS.row, children: [
-    /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ jsx37(
       Input,
       {
         inputSize: "sm",
@@ -15309,7 +15439,7 @@ function KeyValueRow({
         hideSupportingText: !pair.keyError
       }
     ) }),
-    /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCell, children: /* @__PURE__ */ jsx37(
       Input,
       {
         inputSize: "sm",
@@ -15325,21 +15455,21 @@ function KeyValueRow({
         hideSupportingText: !pair.valueError
       }
     ) }),
-    /* @__PURE__ */ jsx36("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCellActions, children: showDelete && /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: KEY_VALUE_EDITOR_TOKENS.rowCellActions, children: showDelete && /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
         className: KEY_VALUE_EDITOR_TOKENS.deleteButton,
         onClick: onDelete,
         "aria-label": "Delete row",
-        children: /* @__PURE__ */ jsx36(Trash22, {})
+        children: /* @__PURE__ */ jsx37(Trash22, {})
       }
     ) })
   ] });
 }
 
 // src/audio-player/audio-player.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { Pause as Pause3, Play as Play3 } from "lucide-react";
 
 // src/audio-player/variables.ts
@@ -15365,14 +15495,14 @@ var AUDIO_PLAYER_TOKENS = {
 };
 
 // src/audio-player/audio-player.tsx
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs28 } from "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,
@@ -15388,7 +15518,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();
@@ -15400,7 +15530,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);
@@ -15417,14 +15547,14 @@ var AudioPlayer = React41.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs28("div", { className: AUDIO_PLAYER_TOKENS.leftGroup, children: [
-            /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38(
               "button",
               {
                 type: "button",
                 onClick: onPlayPause,
                 className: AUDIO_PLAYER_TOKENS.btnXs,
                 "aria-label": isPlaying ? "Pause" : "Play",
-                children: /* @__PURE__ */ jsx37(
+                children: /* @__PURE__ */ jsx38(
                   Icon2,
                   {
                     className: AUDIO_PLAYER_TOKENS.playIcon,
@@ -15434,9 +15564,9 @@ var AudioPlayer = React41.forwardRef(
                 )
               }
             ),
-            /* @__PURE__ */ jsx37("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(currentTime) })
+            /* @__PURE__ */ jsx38("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(currentTime) })
           ] }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             "div",
             {
               className: AUDIO_PLAYER_TOKENS.waveform.wrapper,
@@ -15445,7 +15575,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__ */ jsx37("div", { className: AUDIO_PLAYER_TOKENS.waveform.bars, children: waveform.map((v2, i) => /* @__PURE__ */ jsx37(
+              children: waveform && waveform.length > 0 ? /* @__PURE__ */ jsx38("div", { className: AUDIO_PLAYER_TOKENS.waveform.bars, children: waveform.map((v2, i) => /* @__PURE__ */ jsx38(
                 "span",
                 {
                   className: cn(
@@ -15457,12 +15587,12 @@ var AudioPlayer = React41.forwardRef(
                   }
                 },
                 i
-              )) }) : /* @__PURE__ */ jsx37("div", { className: AUDIO_PLAYER_TOKENS.waveform.baseline })
+              )) }) : /* @__PURE__ */ jsx38("div", { className: AUDIO_PLAYER_TOKENS.waveform.baseline })
             }
           ),
           /* @__PURE__ */ jsxs28("div", { className: AUDIO_PLAYER_TOKENS.rightGroup, children: [
-            /* @__PURE__ */ jsx37("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(duration) }),
-            playbackRate != null && /* @__PURE__ */ jsx37(
+            /* @__PURE__ */ jsx38("span", { className: AUDIO_PLAYER_TOKENS.time, children: formatTime(duration) }),
+            playbackRate != null && /* @__PURE__ */ jsx38(
               "button",
               {
                 type: "button",
@@ -15484,7 +15614,7 @@ var AudioPlayer = React41.forwardRef(
 AudioPlayer.displayName = "AudioPlayer";
 
 // src/chat-bubble/chat-bubble.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { User } from "lucide-react";
 
 // src/chat-bubble/variables.ts
@@ -15499,13 +15629,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).
@@ -15514,7 +15647,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"
@@ -15524,8 +15657,8 @@ var CHAT_BUBBLE_TOKENS = {
 var agent_avatar_default = "./agent-avatar-ZI4HOQHG.png";
 
 // src/chat-bubble/chat-bubble.tsx
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
-var ChatBubbleAgent = React42.forwardRef(
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var ChatBubbleAgent = React43.forwardRef(
   ({
     message,
     timestamp,
@@ -15548,7 +15681,7 @@ var ChatBubbleAgent = React42.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.agent.row, children: [
-            /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39(
               "div",
               {
                 className: cn(
@@ -15558,7 +15691,7 @@ var ChatBubbleAgent = React42.forwardRef(
                 children: message
               }
             ),
-            /* @__PURE__ */ jsx38("div", { className: CHAT_BUBBLE_TOKENS.agent.avatar, children: avatar != null ? avatar : /* @__PURE__ */ jsx38(
+            /* @__PURE__ */ jsx39("div", { className: CHAT_BUBBLE_TOKENS.agent.avatar, children: avatar != null ? avatar : /* @__PURE__ */ jsx39(
               "img",
               {
                 src: agent_avatar_default,
@@ -15568,18 +15701,17 @@ var ChatBubbleAgent = React42.forwardRef(
             ) })
           ] }),
           (timestamp || trailing) && /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.agent.timestampRow, children: [
-            trailing,
-            timestamp && /* @__PURE__ */ jsx38(
+            timestamp && /* @__PURE__ */ jsx39(
               "span",
               {
                 className: cn(
                   CHAT_BUBBLE_TOKENS.timestamp,
-                  trailing && "ml-2",
                   !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
                 ),
                 children: timestamp
               }
-            )
+            ),
+            trailing
           ] })
         ]
       }
@@ -15587,7 +15719,7 @@ var ChatBubbleAgent = React42.forwardRef(
   }
 );
 ChatBubbleAgent.displayName = "ChatBubbleAgent";
-var ChatBubbleUser = React42.forwardRef(
+var ChatBubbleUser = React43.forwardRef(
   ({
     message,
     timestamp,
@@ -15611,22 +15743,21 @@ var ChatBubbleUser = React42.forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.user.row, children: [
-            /* @__PURE__ */ jsx38("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ jsx38(User, {}) }),
-            /* @__PURE__ */ jsx38("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
+            /* @__PURE__ */ jsx39("div", { className: cn(CHAT_BUBBLE_TOKENS.user.avatar, "mb-0.5"), children: avatar != null ? avatar : /* @__PURE__ */ jsx39(User, {}) }),
+            /* @__PURE__ */ jsx39("div", { className: CHAT_BUBBLE_TOKENS.user.text, children: message })
           ] }),
           (timestamp || trailing) && /* @__PURE__ */ jsxs29("div", { className: CHAT_BUBBLE_TOKENS.user.timestampRow, children: [
-            trailing,
-            timestamp && /* @__PURE__ */ jsx38(
+            timestamp && /* @__PURE__ */ jsx39(
               "span",
               {
                 className: cn(
                   CHAT_BUBBLE_TOKENS.timestamp,
-                  trailing && "ml-2",
                   !alwaysShowTimestamp && !focused && CHAT_BUBBLE_TOKENS.timestampHidden
                 ),
                 children: timestamp
               }
-            )
+            ),
+            trailing
           ] })
         ]
       }
@@ -15636,7 +15767,7 @@ var ChatBubbleUser = React42.forwardRef(
 ChatBubbleUser.displayName = "ChatBubbleUser";
 
 // src/popover/popover.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Search as Search4 } from "lucide-react";
 
@@ -15673,7 +15804,7 @@ var POPOVER_TOKENS = {
 };
 
 // src/popover/popover.tsx
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
 function flipSide(side) {
   if (side === "right") return "left";
   if (side === "left") return "right";
@@ -15738,7 +15869,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,
@@ -15762,21 +15893,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;
@@ -15800,7 +15931,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);
@@ -15853,9 +15984,9 @@ var Popover = React43.forwardRef(
         style: popoverStyle,
         onClick: (e) => e.stopPropagation(),
         children: [
-          search && /* @__PURE__ */ jsx39("div", { className: POPOVER_TOKENS.searchWrapper, children: /* @__PURE__ */ jsxs30("div", { className: POPOVER_TOKENS.search.container, children: [
-            /* @__PURE__ */ jsx39(Search4, { className: POPOVER_TOKENS.search.icon }),
-            /* @__PURE__ */ jsx39(
+          search && /* @__PURE__ */ jsx40("div", { className: POPOVER_TOKENS.searchWrapper, children: /* @__PURE__ */ jsxs30("div", { className: POPOVER_TOKENS.search.container, children: [
+            /* @__PURE__ */ jsx40(Search4, { className: POPOVER_TOKENS.search.icon }),
+            /* @__PURE__ */ jsx40(
               "input",
               {
                 type: "search",
@@ -15871,12 +16002,12 @@ var Popover = React43.forwardRef(
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx39("div", { className: POPOVER_TOKENS.content, children })
+          /* @__PURE__ */ jsx40("div", { className: POPOVER_TOKENS.content, children })
         ]
       }
     );
     return /* @__PURE__ */ jsxs30("div", { className: cn("inline-block relative", wrapperClassName), children: [
-      /* @__PURE__ */ jsx39(
+      /* @__PURE__ */ jsx40(
         "div",
         {
           ref: triggerRef,
@@ -15886,7 +16017,7 @@ var Popover = React43.forwardRef(
         }
       ),
       typeof document !== "undefined" && popoverContent && createPortal2(
-        /* @__PURE__ */ jsx39("div", { className: cn("lego-land", themeClass), children: popoverContent }),
+        /* @__PURE__ */ jsx40("div", { className: cn("lego-land", themeClass), children: popoverContent }),
         document.body
       )
     ] });
@@ -15957,6 +16088,7 @@ export {
   SelectTrigger,
   SelectValue,
   ShadowDOMWrapper,
+  SidePanel,
   Spinner,
   Stepper,
   StepperBar,