@cytario/design 5.1.0 → 5.3.0

package/dist/index.js

@@ -214,48 +214,335 @@ function Button({
 
 // src/components/Tooltip/Tooltip.tsx
 import {
-  Tooltip as AriaTooltip,
-  TooltipTrigger
-} from "react-aria-components";
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function Tooltip({
-  content,
-  children,
-  placement = "top",
-  delay = 500,
-  className
-}) {
-  return /* @__PURE__ */ jsxs3(TooltipTrigger, { delay, children: [
-    children,
-    /* @__PURE__ */ jsx4(
-      AriaTooltip,
-      {
-        placement,
-        className: [
-          "bg-(--color-surface-overlay) backdrop-blur-sm",
-          "text-(--color-text-inverse) text-sm",
-          "px-3 py-1.5",
-          "rounded-md",
-          "max-w-xs",
-          "entering:animate-in entering:fade-in entering:duration-150",
-          "exiting:animate-out exiting:fade-out exiting:duration-100",
-          "entering:placement-top:slide-in-from-bottom-1",
-          "entering:placement-bottom:slide-in-from-top-1",
-          "entering:placement-left:slide-in-from-right-1",
-          "entering:placement-right:slide-in-from-left-1",
-          className
-        ].filter(Boolean).join(" "),
-        children: content
-      }
-    )
-  ] });
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var offsetThreshold = 5;
+var tooltipDelay = 500;
+var tooltipOffset = 12;
+var viewportMargin = 4;
+var tooltipCx = [
+  "fixed z-50 px-2 py-1 rounded shadow-lg",
+  // Natural content width (capped at max-w-xs): being positioned near the
+  // right viewport edge must shift the tooltip left, not squeeze its layout.
+  "w-max max-w-xs",
+  "bg-(--color-surface-overlay) backdrop-blur-sm",
+  "text-(--color-text-inverse) text-sm",
+  "pointer-events-none"
+].join(" ");
+function Tooltip({ content, children }) {
+  const [visible, setVisible] = useState(false);
+  const [coords, setCoords] = useState({ x: 0, y: 0 });
+  const [adjustedCoords, setAdjustedCoords] = useState({ x: 0, y: 0 });
+  const timerRef = useRef(null);
+  const restAnchorRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const isVisible = visible && content != null;
+  const calculateAdjustedPosition = (anchorX, anchorY) => {
+    if (!tooltipRef.current) {
+      return { x: anchorX + tooltipOffset, y: anchorY + tooltipOffset };
+    }
+    const { width, height } = tooltipRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let x = anchorX + tooltipOffset;
+    let y = anchorY + tooltipOffset;
+    if (anchorX + width > viewportWidth) {
+      x = anchorX - width - tooltipOffset;
+    }
+    if (anchorY + height > viewportHeight) {
+      y = anchorY - height - tooltipOffset;
+    }
+    x = Math.max(
+      viewportMargin,
+      Math.min(x, viewportWidth - width - viewportMargin)
+    );
+    y = Math.max(
+      viewportMargin,
+      Math.min(y, viewportHeight - height - viewportMargin)
+    );
+    return { x, y };
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (!isVisible || !tooltipRef.current) return;
+    setAdjustedCoords(calculateAdjustedPosition(coords.x, coords.y));
+  }, [isVisible, coords, content]);
+  const hideTooltip = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    restAnchorRef.current = null;
+    setVisible(false);
+  };
+  const handleMouseMove = ({ clientX, clientY }) => {
+    setCoords({ x: clientX, y: clientY });
+    const anchor = restAnchorRef.current;
+    const moved = anchor == null || Math.abs(clientX - anchor.x) > offsetThreshold || Math.abs(clientY - anchor.y) > offsetThreshold;
+    if (!moved) return;
+    hideTooltip();
+    restAnchorRef.current = { x: clientX, y: clientY };
+    timerRef.current = window.setTimeout(() => {
+      setVisible(true);
+    }, tooltipDelay);
+  };
+  const handleFocus = (e) => {
+    const target = e.target;
+    let focusVisible = true;
+    try {
+      focusVisible = target.matches(":focus-visible");
+    } catch {
+    }
+    if (!focusVisible) return;
+    const rect = target.getBoundingClientRect();
+    const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    restAnchorRef.current = center;
+    setCoords(center);
+    setVisible(true);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") hideTooltip();
+  };
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const tooltipContent = isVisible && content != null ? /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: tooltipRef,
+      role: "tooltip",
+      className: tooltipCx,
+      style: { left: adjustedCoords.x, top: adjustedCoords.y },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      style: { display: "contents" },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: hideTooltip,
+      onFocus: handleFocus,
+      onBlur: hideTooltip,
+      onKeyDown: handleKeyDown,
+      children: [
+        children,
+        typeof window !== "undefined" && createPortal(tooltipContent, document.body)
+      ]
+    }
+  );
+}
+
+// src/components/TruncatedText/TruncatedText.tsx
+import {
+  useRef as useRef3
+} from "react";
+
+// src/components/TruncatedText/useCopyToClipboard.ts
+import { useCallback, useRef as useRef2, useState as useState2 } from "react";
+var FLASH_DURATION = 1500;
+function useCopyToClipboard(copyValue) {
+  const [isCopied, setIsCopied] = useState2(false);
+  const timerRef = useRef2(null);
+  const handleClick = useCallback(() => {
+    if (copyValue == null) return;
+    const selection = window.getSelection()?.toString();
+    if (selection && selection.length > 0) return;
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(copyValue).then(() => {
+      if (timerRef.current != null) clearTimeout(timerRef.current);
+      setIsCopied(true);
+      timerRef.current = window.setTimeout(() => {
+        setIsCopied(false);
+        timerRef.current = null;
+      }, FLASH_DURATION);
+    }).catch(() => {
+    });
+  }, [copyValue]);
+  return { handleClick, isCopied };
 }
 
+// src/components/TruncatedText/useMiddleEllipsis.ts
+import { useLayoutEffect as useLayoutEffect2, useState as useState3 } from "react";
+var ELLIPSIS = "\u2026";
+function computeTruncated(el, text) {
+  el.textContent = text;
+  if (el.scrollWidth <= el.clientWidth) return text;
+  let lo = 0;
+  let hi = text.length;
+  while (lo < hi) {
+    const mid = Math.ceil((lo + hi) / 2);
+    const startLen2 = Math.ceil(mid / 2);
+    const endLen2 = Math.floor(mid / 2);
+    el.textContent = text.slice(0, startLen2) + ELLIPSIS + (endLen2 > 0 ? text.slice(text.length - endLen2) : "");
+    if (el.scrollWidth <= el.clientWidth) {
+      lo = mid;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  if (lo === 0) return ELLIPSIS;
+  const startLen = Math.ceil(lo / 2);
+  const endLen = Math.floor(lo / 2);
+  const result = endLen === 0 ? text.slice(0, startLen) + ELLIPSIS : text.slice(0, startLen) + ELLIPSIS + text.slice(text.length - endLen);
+  el.textContent = result;
+  return result;
+}
+function useMiddleEllipsis(ref, text) {
+  const [displayed, setDisplayed] = useState3(text);
+  useLayoutEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () => setDisplayed(computeTruncated(el, text));
+    update();
+    const observer = new ResizeObserver(() => update());
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [ref, text]);
+  return displayed;
+}
+
+// src/components/TruncatedText/useOverflowDetection.ts
+import { useLayoutEffect as useLayoutEffect3, useState as useState4 } from "react";
+function useOverflowDetection(ref) {
+  const [isTruncated, setIsTruncated] = useState4(false);
+  useLayoutEffect3(() => {
+    const el = ref.current;
+    if (!el) return;
+    const check = () => setIsTruncated(el.scrollWidth > el.offsetWidth);
+    check();
+    let raf = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(check);
+    });
+    observer.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, [ref]);
+  return isTruncated;
+}
+
+// src/components/TruncatedText/TruncatedText.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var spanCx = "truncate overflow-hidden whitespace-nowrap block min-w-0 w-full";
+var copyCx = "hover:bg-(--color-surface-hover) transition-colors rounded cursor-pointer";
+var leftStyle = { direction: "rtl", textAlign: "left" };
+var pinScroll = (e) => {
+  if (e.currentTarget.scrollLeft !== 0) e.currentTarget.scrollLeft = 0;
+};
+var handleCopyKeyDown = (handleClick) => (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    handleClick();
+  }
+};
+var CopiedOverlay = () => /* @__PURE__ */ jsx5(
+  "span",
+  {
+    role: "status",
+    "aria-live": "polite",
+    className: "absolute inset-0 flex items-center text-(--color-text-secondary) pointer-events-none",
+    children: "Copied"
+  }
+);
+var RightEllipsis = ({ children, copyValue }) => {
+  const ref = useRef3(null);
+  const isTruncated = useOverflowDetection(ref);
+  const { handleClick, isCopied } = useCopyToClipboard(copyValue);
+  const isCopyable = copyValue != null;
+  const baseCx = isCopyable ? `${spanCx} ${copyCx} relative` : spanCx;
+  const cx = isCopied ? `${baseCx} text-transparent` : baseCx;
+  return /* @__PURE__ */ jsx5(Tooltip, { content: isTruncated ? children : null, children: /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      ref,
+      className: cx,
+      onScroll: pinScroll,
+      onClick: isCopyable ? handleClick : void 0,
+      onKeyDown: isCopyable ? handleCopyKeyDown(handleClick) : void 0,
+      role: isCopyable ? "button" : void 0,
+      tabIndex: isCopyable ? 0 : void 0,
+      children: [
+        children,
+        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+      ]
+    }
+  ) });
+};
+var LeftEllipsis = ({ children, copyValue }) => {
+  const ref = useRef3(null);
+  const isTruncated = useOverflowDetection(ref);
+  const { handleClick, isCopied } = useCopyToClipboard(copyValue);
+  const isCopyable = copyValue != null;
+  const baseCx = isCopyable ? `${spanCx} ${copyCx} relative` : spanCx;
+  const cx = isCopied ? `${baseCx} text-transparent` : baseCx;
+  return /* @__PURE__ */ jsx5(Tooltip, { content: isTruncated ? children : null, children: /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      ref,
+      className: cx,
+      style: leftStyle,
+      onScroll: pinScroll,
+      onClick: isCopyable ? handleClick : void 0,
+      onKeyDown: isCopyable ? handleCopyKeyDown(handleClick) : void 0,
+      role: isCopyable ? "button" : void 0,
+      tabIndex: isCopyable ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsx5("bdi", { children }),
+        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+      ]
+    }
+  ) });
+};
+var middleCx = "overflow-hidden whitespace-nowrap block min-w-0 w-full";
+var MiddleEllipsisString = ({ text, copyValue }) => {
+  const ref = useRef3(null);
+  const displayed = useMiddleEllipsis(ref, text);
+  const isTruncated = displayed !== text;
+  const { handleClick, isCopied } = useCopyToClipboard(copyValue);
+  const isCopyable = copyValue != null;
+  const baseCx = isCopyable ? `${middleCx} ${copyCx} relative` : middleCx;
+  const cx = isCopied ? `${baseCx} text-transparent` : baseCx;
+  return /* @__PURE__ */ jsx5(Tooltip, { content: isTruncated ? text : null, children: /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      ref,
+      className: cx,
+      "aria-label": isTruncated ? text : void 0,
+      onScroll: pinScroll,
+      onClick: isCopyable ? handleClick : void 0,
+      onKeyDown: isCopyable ? handleCopyKeyDown(handleClick) : void 0,
+      role: isCopyable ? "button" : void 0,
+      tabIndex: isCopyable ? 0 : void 0,
+      children: [
+        displayed,
+        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+      ]
+    }
+  ) });
+};
+var TruncatedText = ({ children, ellipsis = "right", copyValue }) => {
+  if (ellipsis === "left") return /* @__PURE__ */ jsx5(LeftEllipsis, { copyValue, children });
+  if (ellipsis === "middle" && typeof children === "string")
+    return /* @__PURE__ */ jsx5(MiddleEllipsisString, { text: children, copyValue });
+  return /* @__PURE__ */ jsx5(RightEllipsis, { copyValue, children });
+};
+
 // src/components/IconButton/IconButton.tsx
 import {
   Button as AriaButton2
 } from "react-aria-components";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var squareSizeStyles = {
   xs: "h-7 w-7",
   sm: "h-8 w-8",
@@ -292,7 +579,6 @@ function IconButton({
   variant = "ghost",
   size = "md",
   showTooltip = true,
-  tooltipPlacement = "top",
   isLoading = false,
   isDisabled,
   className,
@@ -303,7 +589,7 @@ function IconButton({
   const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
   const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2";
-  const button = /* @__PURE__ */ jsx5(
+  const button = /* @__PURE__ */ jsx6(
     AriaButton2,
     {
       ...props,
@@ -321,11 +607,11 @@ function IconButton({
         marginClass,
         className
       ].filter(Boolean).join(" "),
-      children: isLoading ? /* @__PURE__ */ jsx5(Spinner, { size: iconSizeMap2[size] }) : /* @__PURE__ */ jsx5(Icon, { icon, size: iconSizeMap2[size] })
+      children: isLoading ? /* @__PURE__ */ jsx6(Spinner, { size: iconSizeMap2[size] }) : /* @__PURE__ */ jsx6(Icon, { icon, size: iconSizeMap2[size] })
     }
   );
   if (showTooltip) {
-    return /* @__PURE__ */ jsx5(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: button });
+    return /* @__PURE__ */ jsx6(Tooltip, { content: ariaLabel, children: button });
   }
   return button;
 }
@@ -342,9 +628,9 @@ import { twMerge as twMerge2 } from "tailwind-merge";
 import {
   Label as AriaLabel
 } from "react-aria-components";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function Label({ isRequired, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     AriaLabel,
     {
       ...props,
@@ -356,7 +642,7 @@ function Label({ isRequired, children, className, ...props }) {
       ].filter(Boolean).join(" "),
       children: [
         children,
-        isRequired && /* @__PURE__ */ jsx6(
+        isRequired && /* @__PURE__ */ jsx7(
           "span",
           {
             "aria-hidden": "true",
@@ -370,7 +656,7 @@ function Label({ isRequired, children, className, ...props }) {
 }
 
 // src/components/Form/Input/Input.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var alignClasses = {
   left: "text-left",
   center: "text-center",
@@ -409,7 +695,7 @@ function Input({
   const borderColor = isInvalid ? "border-(--color-border-danger)" : "border-(--color-border-default) hover:border-(--color-border-strong)";
   const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     Field,
     {
       ...props,
@@ -424,8 +710,8 @@ function Input({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx7(Label, { isRequired, children: label }),
-        prefix ? /* @__PURE__ */ jsxs5(
+        label && /* @__PURE__ */ jsx8(Label, { isRequired, children: label }),
+        prefix ? /* @__PURE__ */ jsxs6(
           "div",
           {
             className: twMerge2(
@@ -440,7 +726,7 @@ function Input({
               isDisabled && "opacity-50 pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "span",
                 {
                   className: twMerge2(
@@ -453,7 +739,7 @@ function Input({
                   children: prefix
                 }
               ),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 AriaInput,
                 {
                   placeholder,
@@ -469,7 +755,7 @@ function Input({
               )
             ]
           }
-        ) : /* @__PURE__ */ jsx7(
+        ) : /* @__PURE__ */ jsx8(
           AriaInput,
           {
             placeholder,
@@ -490,7 +776,7 @@ function Input({
             )
           }
         ),
-        description && /* @__PURE__ */ jsx7(
+        description && /* @__PURE__ */ jsx8(
           Text,
           {
             slot: "description",
@@ -498,7 +784,7 @@ function Input({
             children: description
           }
         ),
-        isInvalid && /* @__PURE__ */ jsx7(
+        isInvalid && /* @__PURE__ */ jsx8(
           Text,
           {
             slot: "errorMessage",
@@ -524,7 +810,7 @@ import {
   Text as Text2
 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function Select({
   label,
   items,
@@ -539,7 +825,7 @@ function Select({
   ...props
 }) {
   const hasError = Boolean(errorMessage);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     AriaSelect,
     {
       ...props,
@@ -548,8 +834,8 @@ function Select({
       isInvalid: hasError,
       className: twMerge3("flex flex-col gap-1", className),
       children: [
-        label && /* @__PURE__ */ jsx8(Label, { isRequired, children: label }),
-        /* @__PURE__ */ jsxs6(
+        label && /* @__PURE__ */ jsx9(Label, { isRequired, children: label }),
+        /* @__PURE__ */ jsxs7(
           Button2,
           {
             "aria-required": isRequired || void 0,
@@ -567,7 +853,7 @@ function Select({
               hasError ? "border-(--color-border-danger)" : "border-(--color-border-default)"
             ),
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 SelectValue,
                 {
                   className: twMerge3(
@@ -581,7 +867,7 @@ function Select({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 ChevronDown,
                 {
                   "aria-hidden": true,
@@ -594,8 +880,8 @@ function Select({
             ]
           }
         ),
-        description && /* @__PURE__ */ jsx8(Text2, { slot: "description", className: "text-sm text-(--color-text-secondary)", children: description }),
-        hasError && /* @__PURE__ */ jsx8(
+        description && /* @__PURE__ */ jsx9(Text2, { slot: "description", className: "text-sm text-(--color-text-secondary)", children: description }),
+        hasError && /* @__PURE__ */ jsx9(
           Text2,
           {
             slot: "errorMessage",
@@ -604,7 +890,7 @@ function Select({
             children: errorMessage
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           Popover,
           {
             className: twMerge3(
@@ -617,7 +903,7 @@ function Select({
               "entering:animate-in entering:fade-in",
               "exiting:animate-out exiting:fade-out"
             ),
-            children: /* @__PURE__ */ jsx8(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx9(
               ListBoxItem,
               {
                 id: item.id,
@@ -634,9 +920,9 @@ function Select({
                 `,
                   sizeStyles[size]
                 ),
-                children: ({ isSelected }) => /* @__PURE__ */ jsxs6(Fragment, { children: [
-                  /* @__PURE__ */ jsx8("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
-                  isSelected && /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
+                children: ({ isSelected }) => /* @__PURE__ */ jsxs7(Fragment, { children: [
+                  /* @__PURE__ */ jsx9("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  isSelected && /* @__PURE__ */ jsx9(Check, { className: "h-4 w-4 shrink-0 text-(--color-action-primary)" })
                 ] })
               }
             ) })
@@ -656,13 +942,13 @@ import {
   TableBody as AriaTableBody,
   TableHeader as AriaTableHeader
 } from "react-aria-components";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var tableSizeClass = {
   compact: "[--table-row-py:theme(spacing.1)]",
   comfortable: "[--table-row-py:theme(spacing.3)]"
 };
 function Table({ size = "comfortable", className, ...props }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     AriaTable,
     {
       ...props,
@@ -675,10 +961,10 @@ function Table({ size = "comfortable", className, ...props }) {
   );
 }
 function TableHeader(props) {
-  return /* @__PURE__ */ jsx9(AriaTableHeader, { ...props });
+  return /* @__PURE__ */ jsx10(AriaTableHeader, { ...props });
 }
 function Column(props) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     AriaColumn,
     {
       ...props,
@@ -688,18 +974,18 @@ function Column(props) {
         "cursor-default select-none outline-none",
         "focus-visible:outline-2 focus-visible:outline-(--color-border-focus) focus-visible:outline-offset-[-2px]"
       ].join(" "),
-      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs7("span", { className: "inline-flex items-center gap-1", children: [
+      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "text-(--color-text-tertiary)", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx9(AriaTableBody, { ...props });
+  return /* @__PURE__ */ jsx10(AriaTableBody, { ...props });
 }
 function Row(props) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     AriaRow,
     {
       ...props,
@@ -715,7 +1001,7 @@ function Row(props) {
   );
 }
 function Cell(props) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     AriaCell,
     {
       ...props,
@@ -737,7 +1023,7 @@ import {
   Heading
 } from "react-aria-components";
 import { X } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var sizeStyles2 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -753,7 +1039,7 @@ function Dialog({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     ModalOverlay,
     {
       isOpen,
@@ -765,7 +1051,7 @@ function Dialog({
         "data-[entering]:animate-in data-[entering]:fade-in",
         "data-[exiting]:animate-out data-[exiting]:fade-out"
       ].join(" "),
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         Modal,
         {
           className: [
@@ -776,9 +1062,9 @@ function Dialog({
             "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
             className
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx10(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
-              /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx11(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs9(Fragment2, { children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between px-6 py-4 border-b border-(--color-border-default)", children: [
+              /* @__PURE__ */ jsx11(
                 Heading,
                 {
                   slot: "title",
@@ -786,7 +1072,7 @@ function Dialog({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -798,11 +1084,11 @@ function Dialog({
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx10(X, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx11(X, { size: 20, "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx10("div", { className: "px-6 py-4 overflow-y-auto", children })
+            /* @__PURE__ */ jsx11("div", { className: "px-6 py-4 overflow-y-auto", children })
           ] }) })
         }
       )
@@ -811,20 +1097,20 @@ function Dialog({
 }
 
 // src/components/Dialog/DialogFooter.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 
 // src/components/Toast/Toast.tsx
 import {
   createContext as createContext2,
-  useCallback,
+  useCallback as useCallback2,
   useContext as useContext2,
-  useEffect,
-  useRef,
-  useState
+  useEffect as useEffect2,
+  useRef as useRef4,
+  useState as useState5
 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var ToastContext = createContext2(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -866,23 +1152,23 @@ function ToastItem({
   toast,
   onRemove
 }) {
-  const [isExiting, setIsExiting] = useState(false);
-  const timerRef = useRef(null);
+  const [isExiting, setIsExiting] = useState5(false);
+  const timerRef = useRef4(null);
   const placement = useContext2(PlacementContext);
   const config = variantConfig[toast.variant];
   const IconComponent = config.icon;
-  const dismiss = useCallback(() => {
+  const dismiss = useCallback2(() => {
     setIsExiting(true);
     setTimeout(() => onRemove(toast.id), 200);
   }, [onRemove, toast.id]);
-  useEffect(() => {
+  useEffect2(() => {
     const duration = toast.duration ?? defaultDuration[toast.variant];
     timerRef.current = setTimeout(dismiss, duration);
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, [toast.duration, toast.variant, dismiss]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       role: "status",
@@ -895,16 +1181,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx12(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx12("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx13("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx13(
           "button",
           {
             type: "button",
             onClick: dismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx12(X2, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx13(X2, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -923,8 +1209,8 @@ function ToastContainer({
   placement = "bottom-right"
 }) {
   if (toasts.length === 0) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx12(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx12("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx12(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+  return createPortal2(
+    /* @__PURE__ */ jsx13(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx13("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx13(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -943,21 +1229,21 @@ function createToastBridge() {
   };
 }
 function ToastProvider({ children, bridge, placement = "bottom-right" }) {
-  const [toasts, setToasts] = useState([]);
-  const addToast = useCallback((toast) => {
+  const [toasts, setToasts] = useState5([]);
+  const addToast = useCallback2((toast) => {
     const id = `toast-${++toastCounter}`;
     setToasts((prev) => [...prev, { ...toast, id }]);
   }, []);
-  const removeToast = useCallback((id) => {
+  const removeToast = useCallback2((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!bridge) return;
     return bridge.subscribe(addToast);
   }, [bridge, addToast]);
-  return /* @__PURE__ */ jsxs9(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs10(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx12(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx13(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -973,7 +1259,7 @@ function useToast() {
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -981,7 +1267,7 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: [
@@ -989,10 +1275,10 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx13(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
-        /* @__PURE__ */ jsx13("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
-        description && /* @__PURE__ */ jsx13("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx13("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx14(Icon, { icon, size: "xl", className: "text-(--color-text-tertiary)" }),
+        /* @__PURE__ */ jsx14("h3", { className: "text-lg font-semibold text-(--color-text-primary) mt-4", children: title }),
+        description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-(--color-text-secondary) mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx14("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -1003,9 +1289,9 @@ import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
 import { Check as Check2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     AriaCheckbox,
     {
       ...props,
@@ -1014,8 +1300,8 @@ function Checkbox({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs11(Fragment3, { children: [
-        /* @__PURE__ */ jsxs11(
+      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment3, { children: [
+        /* @__PURE__ */ jsxs12(
           "div",
           {
             className: [
@@ -1025,12 +1311,12 @@ function Checkbox({ children, className, ...props }) {
               isSelected || isIndeterminate ? "bg-(--color-action-primary) border-(--color-action-primary)" : "bg-(--color-surface-default) border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx14(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx14("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
+              isSelected && /* @__PURE__ */ jsx15(Check2, { className: "w-4 h-4 text-(--color-text-inverse)", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx15("div", { className: "w-3 h-0.5 bg-(--color-text-inverse) rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx14("span", { children })
+        children && /* @__PURE__ */ jsx15("span", { children })
       ] })
     }
   );
@@ -1040,7 +1326,7 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var trackColorMap = {
   primary: "bg-(--color-action-primary)",
   success: "bg-(--color-action-success)",
@@ -1057,7 +1343,7 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     AriaSwitch,
     {
       ...props,
@@ -1066,8 +1352,8 @@ function Switch({
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
-        /* @__PURE__ */ jsx15(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
+        /* @__PURE__ */ jsx16(
           "div",
           {
             className: [
@@ -1076,7 +1362,7 @@ function Switch({
               isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-(--color-border-strong)" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx15(
+            children: /* @__PURE__ */ jsx16(
               "div",
               {
                 className: [
@@ -1087,7 +1373,7 @@ function Switch({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx15("span", { children })
+        children && /* @__PURE__ */ jsx16("span", { children })
       ] })
     }
   );
@@ -1098,9 +1384,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     AriaRadioGroup,
     {
       ...props,
@@ -1114,7 +1400,7 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     AriaRadio,
     {
       ...props,
@@ -1123,8 +1409,8 @@ function Radio({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
-        /* @__PURE__ */ jsx16(
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs14(Fragment5, { children: [
+        /* @__PURE__ */ jsx17(
           "div",
           {
             className: [
@@ -1133,16 +1419,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-(--color-border-focus) group-focus-visible:ring-offset-2",
               isSelected ? "border-(--color-action-primary)" : "border-(--color-border-default) group-hover:border-(--color-border-strong)"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx16("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
+            children: isSelected && /* @__PURE__ */ jsx17("div", { className: "w-2.5 h-2.5 rounded-full bg-(--color-action-primary)" })
           }
         ),
-        children && /* @__PURE__ */ jsx16("span", { children })
+        children && /* @__PURE__ */ jsx17("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     AriaRadio,
     {
       ...props,
@@ -1151,7 +1437,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx16(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx17(
         "div",
         {
           className: [
@@ -1168,9 +1454,9 @@ function RadioButton({ children, className, ...props }) {
 }
 
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "fieldset",
     {
       className: [
@@ -1179,7 +1465,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx17(
+        legend && /* @__PURE__ */ jsx18(
           "legend",
           {
             className: [
@@ -1199,18 +1485,18 @@ function Fieldset({ legend, children, className }) {
 
 // src/components/Form/InputGroup/InputGroup.tsx
 import React from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function InputGroup({ children, className }) {
   const childArray = React.Children.toArray(children).filter(
     React.isValidElement
   );
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       className: ["flex items-stretch", className].filter(Boolean).join(" "),
       children: childArray.map((child, index) => {
         const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(
           InputGroupContext.Provider,
           {
             value: { inGroup: true, position },
@@ -1224,7 +1510,7 @@ function InputGroup({ children, className }) {
 }
 
 // src/components/Form/InputAddon/InputAddon.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function groupRadiusClass3(position) {
   switch (position) {
     case "start":
@@ -1241,7 +1527,7 @@ function InputAddon({ children, className }) {
   const { inGroup, position } = useInputGroup();
   const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-md";
   const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       className: [
@@ -1261,7 +1547,7 @@ function InputAddon({ children, className }) {
 
 // src/components/Heading/Heading.tsx
 import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultSizeMap = {
   h1: "2xl",
   h2: "xl",
@@ -1291,7 +1577,7 @@ function Heading2({
   children
 }) {
   const resolvedSize = size ?? defaultSizeMap[Tag];
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Tag,
     {
       className: twMerge4(
@@ -1305,7 +1591,7 @@ function Heading2({
   );
 }
 function H1(props) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Heading2,
     {
       ...props,
@@ -1316,17 +1602,17 @@ function H1(props) {
   );
 }
 function H2(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
 }
 function H3(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
+  return /* @__PURE__ */ jsx21(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
 }
 
 // src/components/Link/Link.tsx
 import {
   Link as AriaLink
 } from "react-aria-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -1342,7 +1628,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     AriaLink,
     {
       ...props,
@@ -1363,20 +1649,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx23(
         AriaBreadcrumbs,
         {
           className: "flex items-center gap-1 text-sm min-w-0",
           children: items.map((item, index) => {
             const isLast = index === items.length - 1;
-            return /* @__PURE__ */ jsx22(
+            return /* @__PURE__ */ jsx23(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1384,8 +1670,8 @@ function Breadcrumbs({ items, className }) {
                   "flex items-center gap-1",
                   isLast ? "min-w-0" : "shrink-0"
                 ].join(" "),
-                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs15(Fragment6, { children: [
-                  /* @__PURE__ */ jsx22(
+                children: isLast ? /* @__PURE__ */ jsx23("span", { className: "font-medium text-(--color-text-primary) truncate", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                  /* @__PURE__ */ jsx23(
                     Link2,
                     {
                       href: item.href,
@@ -1393,7 +1679,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     ChevronRight,
                     {
                       className: "shrink-0 text-neutral-400",
@@ -1417,7 +1703,7 @@ import {
   Link as AriaLink2
 } from "react-aria-components";
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var iconSizeMap3 = {
   xs: "sm",
   sm: "sm",
@@ -1433,7 +1719,7 @@ function ButtonLink({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     AriaLink2,
     {
       ...props,
@@ -1449,9 +1735,9 @@ function ButtonLink({
         className
       ),
       children: [
-        iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
+        iconLeft && /* @__PURE__ */ jsx24(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
         children,
-        iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
+        iconRight && /* @__PURE__ */ jsx24(Icon, { icon: iconRight, size: iconSizeMap3[size] })
       ]
     }
   );
@@ -1467,11 +1753,10 @@ function IconButtonLink({
   variant = "ghost",
   size = "md",
   showTooltip = true,
-  tooltipPlacement = "top",
   className,
   ...props
 }) {
-  const link = /* @__PURE__ */ jsx23(
+  const link = /* @__PURE__ */ jsx24(
     AriaLink2,
     {
       ...props,
@@ -1485,11 +1770,11 @@ function IconButtonLink({
         squareSizeStyles2[size],
         className
       ),
-      children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
+      children: /* @__PURE__ */ jsx24(Icon, { icon, size: iconSizeMap3[size] })
     }
   );
   if (showTooltip) {
-    return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
+    return /* @__PURE__ */ jsx24(Tooltip, { content: ariaLabel, children: link });
   }
   return link;
 }
@@ -1499,7 +1784,7 @@ import {
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var squareSizeStyles3 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-7 w-7 text-sm",
@@ -1544,7 +1829,7 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     AriaToggleButton,
     {
       ...props,
@@ -1571,7 +1856,7 @@ import {
   RadioGroup as AriaRadioGroup2,
   Radio as AriaRadio2
 } from "react-aria-components";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ToggleButtonGroupContext = createContext3({
   size: "md"
 });
@@ -1591,7 +1876,7 @@ function ToggleButtonGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx25(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(ToggleButtonGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx26(
     AriaRadioGroup2,
     {
       ...props,
@@ -1611,7 +1896,7 @@ function ToggleButtonGroupItem({
   ...props
 }) {
   const { size } = useContext3(ToggleButtonGroupContext);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     AriaRadio2,
     {
       ...props,
@@ -1643,7 +1928,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var popoverStyles = [
   "bg-(--color-surface-default) rounded-md",
   "shadow-lg border border-(--color-border-default)",
@@ -1663,13 +1948,13 @@ function Menu({
   className
 }) {
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
-  return /* @__PURE__ */ jsxs17(MenuTrigger, { children: [
+  return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       Popover2,
       {
         className: [popoverStyles, className].filter(Boolean).join(" "),
-        children: items ? /* @__PURE__ */ jsx26(
+        children: items ? /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             items,
@@ -1680,7 +1965,7 @@ function Menu({
             },
             ...selectionProps,
             className: "outline-none",
-            children: (item) => /* @__PURE__ */ jsxs17(
+            children: (item) => /* @__PURE__ */ jsxs18(
               AriaMenuItem,
               {
                 id: item.id,
@@ -1696,14 +1981,14 @@ function Menu({
                   item.isDanger ? "text-(--color-text-danger)" : "text-(--color-text-primary)"
                 ].filter(Boolean).join(" "),
                 children: [
-                  item.icon && /* @__PURE__ */ jsx26(Icon, { icon: item.icon, size: "sm" }),
-                  /* @__PURE__ */ jsx26("span", { className: "flex-1", children: item.label }),
-                  item.endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: item.endContent })
+                  item.icon && /* @__PURE__ */ jsx27(Icon, { icon: item.icon, size: "sm" }),
+                  /* @__PURE__ */ jsx27("span", { className: "flex-1", children: item.label }),
+                  item.endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: item.endContent })
                 ]
               }
             )
           }
-        ) : /* @__PURE__ */ jsx26(
+        ) : /* @__PURE__ */ jsx27(
           AriaMenu,
           {
             onAction: (key) => onAction?.(key),
@@ -1719,7 +2004,7 @@ function Menu({
 
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -1733,7 +2018,7 @@ function MenuItem({
   textValue,
   className
 }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     AriaMenuItem2,
     {
       id,
@@ -1752,9 +2037,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx27(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx27("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx27("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx28(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx28("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx28("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -1763,7 +2048,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check3 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -1771,7 +2056,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     AriaMenuItem3,
     {
       id,
@@ -1787,9 +2072,9 @@ function MenuCheckboxItem({
         isSelected ? "font-medium" : "",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsxs19(Fragment7, { children: [
-        /* @__PURE__ */ jsx28("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx28(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx28("span", { className: "flex-1", children })
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
+        /* @__PURE__ */ jsx29("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx29(Check3, { size: 14, className: "text-(--color-action-primary)", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx29("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -1800,15 +2085,15 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
   "aria-label": ariaLabel,
   className
 }) {
-  return /* @__PURE__ */ jsxs20(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs21(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
+    header && /* @__PURE__ */ jsx30(
       Header,
       {
         className: [
@@ -1827,16 +2112,16 @@ function MenuSection({
 
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx30(Header2, { className, children });
+  return /* @__PURE__ */ jsx31(Header2, { className, children });
 }
 
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     Separator,
     {
       className: [
@@ -1854,16 +2139,16 @@ import {
   Button as AriaButton3
 } from "react-aria-components";
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Popover3({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx32(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx33(DialogTrigger, { isOpen, onOpenChange, children });
 }
 function PopoverTrigger({ children, className }) {
   const cx = `
     inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer
     focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx32(AriaButton3, { className: twMerge8(cx, className), children });
+  return /* @__PURE__ */ jsx33(AriaButton3, { className: twMerge8(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -1884,7 +2169,7 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     AriaPopover,
     {
       ...rest,
@@ -1905,7 +2190,7 @@ import {
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var TabsContext = createContext4({
   variant: "underline",
   size: "md"
@@ -1923,7 +2208,7 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx33(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx34(
     AriaTabs,
     {
       ...props,
@@ -1943,7 +2228,7 @@ function TabList({
   const { variant } = useContext4(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-(--color-border-default)" : "inline-flex items-center bg-(--color-surface-muted) rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-(--color-border-default)" : "flex-col";
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTabList,
     {
       ...props,
@@ -1957,7 +2242,7 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTab,
     {
       ...props,
@@ -2014,7 +2299,7 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext4(TabsContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaTabPanel,
     {
       ...props,
@@ -2041,7 +2326,7 @@ import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext5({
   size: "md"
 });
@@ -2061,7 +2346,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx34(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx35(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2082,7 +2367,7 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext5(SegmentedControlContext);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     AriaToggleButton2,
     {
       ...props,
@@ -2108,7 +2393,7 @@ function SegmentedControlItem({
 
 // src/components/Badge/Badge.tsx
 import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 var variantStyles4 = {
   neutral: "bg-(--color-badge-neutral-bg) text-(--color-badge-neutral-text)",
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text)",
@@ -2133,7 +2418,7 @@ function Badge({
   icon: IconComponent,
   className
 }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "span",
     {
       className: twMerge11(
@@ -2144,7 +2429,7 @@ function Badge({
         className
       ),
       children: [
-        IconComponent && /* @__PURE__ */ jsx35(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
+        IconComponent && /* @__PURE__ */ jsx36(IconComponent, { size: iconSizeMap4[size], "aria-hidden": "true" }),
         children
       ]
     }
@@ -2152,9 +2437,9 @@ function Badge({
 }
 
 // src/components/Card/Card.tsx
-import { useCallback as useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { twMerge as twMerge12 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 var paddingStyles = {
   none: "p-0",
   sm: "p-3",
@@ -2178,7 +2463,7 @@ function Card({
     (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
-  const handleKeyDown = useCallback2(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (onPress && (e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
@@ -2187,8 +2472,8 @@ function Card({
     },
     [onPress]
   );
-  const content = /* @__PURE__ */ jsxs22(Fragment8, { children: [
-    header && /* @__PURE__ */ jsx36(
+  const content = /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    header && /* @__PURE__ */ jsx37(
       "div",
       {
         className: twMerge12(
@@ -2198,8 +2483,8 @@ function Card({
         children: header
       }
     ),
-    /* @__PURE__ */ jsx36("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: paddingStyles[padding], children }),
+    footer && /* @__PURE__ */ jsx37(
       "div",
       {
         className: twMerge12(
@@ -2211,10 +2496,10 @@ function Card({
     )
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx36("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx37("a", { href, className: containerClass, children: content });
   }
   if (onPress) {
-    return /* @__PURE__ */ jsx36(
+    return /* @__PURE__ */ jsx37(
       "div",
       {
         role: "button",
@@ -2226,13 +2511,13 @@ function Card({
       }
     );
   }
-  return /* @__PURE__ */ jsx36("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx37("div", { className: containerClass, children: content });
 }
 
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp, ArrowDown, Minus } from "lucide-react";
 import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2285,7 +2570,7 @@ function DeltaIndicator({
   className
 }) {
   if (unavailable) {
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       "span",
       {
         className: twMerge13(
@@ -2294,7 +2579,7 @@ function DeltaIndicator({
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+          label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2324,7 +2609,7 @@ function DeltaIndicator({
     }
   }
   const isPill = mode === "pill";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "span",
     {
       className: twMerge13(
@@ -2338,8 +2623,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx37("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
-        /* @__PURE__ */ jsx37(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary) mr-1", children: label }),
+        /* @__PURE__ */ jsx38(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2348,7 +2633,7 @@ function DeltaIndicator({
 
 // src/components/ProgressBar/ProgressBar.tsx
 import { twMerge as twMerge14 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-(--color-progress-fill)",
   success: "bg-(--color-progress-fill-success)",
@@ -2371,12 +2656,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs24("div", { className: twMerge14("w-full", className), children: [
-    (label || description || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
-      /* @__PURE__ */ jsx38("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
+  return /* @__PURE__ */ jsxs25("div", { className: twMerge14("w-full", className), children: [
+    (label || description || showValue) && /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-(--color-text-primary)", children: label }),
+      /* @__PURE__ */ jsx39("span", { className: "text-sm text-(--color-text-secondary)", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       "div",
       {
         role: "progressbar",
@@ -2388,7 +2673,7 @@ function ProgressBar({
           "w-full rounded-full bg-(--color-progress-track)",
           sizeStyles8[size]
         ),
-        children: /* @__PURE__ */ jsx38(
+        children: /* @__PURE__ */ jsx39(
           "div",
           {
             className: twMerge14(
@@ -2404,7 +2689,7 @@ function ProgressBar({
 }
 
 // src/components/Banner/Banner.tsx
-import { useState as useState2 } from "react";
+import { useState as useState6 } from "react";
 import {
   Info as Info2,
   AlertTriangle,
@@ -2413,7 +2698,7 @@ import {
   X as X3
 } from "lucide-react";
 import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info2,
@@ -2449,7 +2734,7 @@ function Banner({
   onDismiss,
   className
 }) {
-  const [dismissed, setDismissed] = useState2(false);
+  const [dismissed, setDismissed] = useState6(false);
   if (dismissed) return null;
   const config = variantConfig2[variant];
   const IconComponent = icon ?? config.icon;
@@ -2457,7 +2742,7 @@ function Banner({
     setDismissed(true);
     onDismiss?.();
   };
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       role: config.role,
@@ -2468,7 +2753,7 @@ function Banner({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39(
+        /* @__PURE__ */ jsx40(
           IconComponent,
           {
             size: 20,
@@ -2476,21 +2761,21 @@ function Banner({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsxs25("span", { className: "font-medium", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsxs26("span", { className: "font-medium", children: [
             title,
             " \u2014 "
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx39(
+        dismissible && /* @__PURE__ */ jsx40(
           "button",
           {
             type: "button",
             onClick: handleDismiss,
             className: "shrink-0 rounded-sm p-0.5 opacity-70 hover:opacity-100 transition-opacity outline-none focus-visible:ring-2 focus-visible:ring-current",
             "aria-label": "Dismiss",
-            children: /* @__PURE__ */ jsx39(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx40(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -2500,7 +2785,7 @@ function Banner({
 
 // src/components/MetricCard/MetricCard.tsx
 import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2528,9 +2813,9 @@ function MetricCard({
     href && "block transition-shadow hover:shadow-md hover:border-(--color-border-focus) focus-visible:ring-2 focus-visible:ring-(--color-border-focus) focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs26(Fragment9, { children: [
-    /* @__PURE__ */ jsx40("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
-    /* @__PURE__ */ jsx40(
+  const content = /* @__PURE__ */ jsxs27(Fragment9, { children: [
+    /* @__PURE__ */ jsx41("div", { className: twMerge16(config.labelClass, "text-(--color-text-secondary)"), children: label }),
+    /* @__PURE__ */ jsx41(
       "div",
       {
         className: twMerge16(
@@ -2540,23 +2825,23 @@ function MetricCard({
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx40("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx41("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx40("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx41("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx40("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx41("div", { className: containerClass, children: content });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
 import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: twMerge17(
@@ -2564,8 +2849,8 @@ function SectionHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx41(H2, { children: title }),
-        children && /* @__PURE__ */ jsx41("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        /* @__PURE__ */ jsx42(H2, { children: title }),
+        children && /* @__PURE__ */ jsx42("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
       ]
     }
   );
@@ -2573,7 +2858,7 @@ function SectionHeader({
 
 // src/components/Pill/Pill.tsx
 import { twMerge as twMerge18 } from "tailwind-merge";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var hashColors = {
   purple: "bg-(--color-badge-purple-bg) text-(--color-badge-purple-text) border-(--color-badge-purple-text)/20",
   teal: "bg-(--color-badge-teal-bg) text-(--color-badge-teal-text) border-(--color-badge-teal-text)/20",
@@ -2611,12 +2896,12 @@ function Pill({
     colorStyles[color],
     className
   );
-  return /* @__PURE__ */ jsx42("span", { className: cx, ...rest, children });
+  return /* @__PURE__ */ jsx43("span", { className: cx, ...rest, children });
 }
 
 // src/components/Pill/PathPill.tsx
 import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function PathPill({
   children,
   visibleCount,
@@ -2628,7 +2913,7 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "div",
     {
       className: twMerge19("relative flex", className),
@@ -2638,7 +2923,7 @@ function PathPill({
         const isLast = i === segments.length - 1;
         const cx = twMerge19(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx43(
+        return /* @__PURE__ */ jsx44(
           Pill,
           {
             className: cx,
@@ -2654,8 +2939,8 @@ function PathPill({
 }
 
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext6, useContext as useContext6, useCallback as useCallback3, useMemo } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { createContext as createContext6, useContext as useContext6, useCallback as useCallback4, useMemo } from "react";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var FormWizardContext = createContext6({
   currentStep: 0,
   totalSteps: 1,
@@ -2675,7 +2960,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback3(() => {
+  const goBack = useCallback4(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -2690,13 +2975,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx44(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx45(FormWizardContext.Provider, { value, children });
 }
 
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "svg",
     {
       "aria-hidden": "true",
@@ -2707,60 +2992,60 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx45("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx46("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx45("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx45("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx46("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx46("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
     const isCompleted = index < currentStep;
     const isCurrent = index === currentStep;
     const isFuture = index > currentStep;
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs29("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx46(
               "div",
               {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index <= currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
+                  index <= currentStep ? "bg-(--color-surface-brand)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx45(
+            ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx46(
               "div",
               {
                 className: [
                   "flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
                   "text-sm font-medium",
                   "transition-colors",
-                  isCompleted ? "bg-(--color-brand-primary) text-(--color-text-inverse)" : "",
-                  isCurrent ? "border-2 border-(--color-brand-primary) bg-(--color-surface-default) text-(--color-brand-primary)" : "",
+                  isCompleted ? "bg-(--color-surface-brand) text-(--color-text-inverse)" : "",
+                  isCurrent ? "border-2 border-(--color-border-brand) bg-(--color-surface-default) text-(--color-text-brand)" : "",
                   isFuture ? "border-2 border-(--color-border-default) bg-(--color-surface-default) text-(--color-text-tertiary)" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx45(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx46(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx45(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx46(
               "div",
               {
                 "aria-hidden": "true",
                 className: [
                   "h-0.5 flex-1",
-                  index < currentStep ? "bg-(--color-brand-primary)" : "bg-(--color-border-default)"
+                  index < currentStep ? "bg-(--color-surface-brand)" : "bg-(--color-border-default)"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx45("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx46("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx46(
             "span",
             {
               className: [
@@ -2778,15 +3063,15 @@ function FormWizardProgress({ labels }) {
 }
 
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx47(
       Button,
       {
         variant: "secondary",
@@ -2796,7 +3081,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx47(
       Button,
       {
         variant: "primary",
@@ -2820,6 +3105,7 @@ var ColorPurple600 = "#6b2695";
 var ColorPurple700 = "#5c2483";
 var ColorPurple800 = "#4a1d6a";
 var ColorPurple900 = "#3a1754";
+var ColorPurple950 = "#2a0f3e";
 var ColorTeal50 = "#edf9f9";
 var ColorTeal100 = "#d0f0f0";
 var ColorTeal200 = "#a1e1e2";
@@ -2830,6 +3116,7 @@ var ColorTeal600 = "#2a9b9c";
 var ColorTeal700 = "#217d7e";
 var ColorTeal800 = "#1a6364";
 var ColorTeal900 = "#144d4e";
+var ColorTeal950 = "#0a2829";
 var ColorGreen50 = "#f0fdf4";
 var ColorGreen100 = "#dcfce7";
 var ColorGreen200 = "#bbf7d0";
@@ -2840,6 +3127,7 @@ var ColorGreen600 = "#16a34a";
 var ColorGreen700 = "#15803d";
 var ColorGreen800 = "#166534";
 var ColorGreen900 = "#14532d";
+var ColorGreen950 = "#052e16";
 var ColorRose50 = "#fff1f2";
 var ColorRose100 = "#ffe4e6";
 var ColorRose200 = "#fecdd3";
@@ -2850,6 +3138,7 @@ var ColorRose600 = "#e11d48";
 var ColorRose700 = "#be123c";
 var ColorRose800 = "#9f1239";
 var ColorRose900 = "#881337";
+var ColorRose950 = "#4c0519";
 var ColorSlate50 = "#f8fafc";
 var ColorSlate100 = "#f1f5f9";
 var ColorSlate200 = "#e2e8f0";
@@ -2860,6 +3149,7 @@ var ColorSlate600 = "#475569";
 var ColorSlate700 = "#334155";
 var ColorSlate800 = "#1e293b";
 var ColorSlate900 = "#0f172a";
+var ColorSlate950 = "#020617";
 var ColorAmber50 = "#fffbeb";
 var ColorAmber100 = "#fef3c7";
 var ColorAmber200 = "#fde68a";
@@ -2870,21 +3160,26 @@ var ColorAmber600 = "#d97706";
 var ColorAmber700 = "#b45309";
 var ColorAmber800 = "#92400e";
 var ColorAmber900 = "#78350f";
-var ColorNeutral0 = "#ffffff";
-var ColorNeutral50 = "#f9fafb";
-var ColorNeutral100 = "#f3f4f6";
-var ColorNeutral200 = "#e5e7eb";
-var ColorNeutral300 = "#d1d5db";
-var ColorNeutral400 = "#9ca3af";
-var ColorNeutral500 = "#6b7280";
-var ColorNeutral600 = "#4b5563";
-var ColorNeutral700 = "#374151";
-var ColorNeutral800 = "#1f2937";
-var ColorNeutral900 = "#111827";
-var ColorNeutral950 = "#030712";
-var ColorNeutral1000 = "#000000";
-var ColorBrandPrimary = "#5c2483";
-var ColorBrandAccent = "#35b7b8";
+var ColorAmber950 = "#451a03";
+var ColorBlue50 = "#eff6ff";
+var ColorBlue100 = "#dbeafe";
+var ColorBlue200 = "#bfdbfe";
+var ColorBlue300 = "#93c5fd";
+var ColorBlue400 = "#60a5fa";
+var ColorBlue500 = "#3b82f6";
+var ColorBlue600 = "#2563eb";
+var ColorBlue700 = "#1d4ed8";
+var ColorBlue800 = "#1e40af";
+var ColorBlue900 = "#1e3a8a";
+var ColorBlue950 = "#172554";
+var ColorWhite = "#ffffff";
+var ColorBlack = "#000000";
+var ColorAlphaBlack80 = "#000000cc";
+var ColorAlphaBlack60 = "#00000099";
+var ColorAlphaBlack40 = "#00000066";
+var ColorAlphaBlack06 = "#0000000f";
+var ColorAlphaWhite10 = "#ffffff1a";
+var ColorAlphaWhite06 = "#ffffff0f";
 var ColorActionPrimary = "#5c2483";
 var ColorActionPrimaryHover = "#6b2695";
 var ColorActionPrimaryActive = "#4a1d6a";
@@ -2894,66 +3189,66 @@ var ColorActionDanger = "#e11d48";
 var ColorActionDangerHover = "#be123c";
 var ColorActionSuccess = "#16a34a";
 var ColorActionSuccessHover = "#15803d";
-var ColorActionInfo = "#475569";
-var ColorActionInfoHover = "#334155";
+var ColorActionInfo = "#2563eb";
+var ColorActionInfoHover = "#1d4ed8";
 var ColorActionDefault = "#1e293b";
 var ColorActionDefaultHover = "#334155";
-var ColorTextPrimary = "#111827";
-var ColorTextSecondary = "#4b5563";
-var ColorTextTertiary = "#9ca3af";
+var ColorTextPrimary = "#0f172a";
+var ColorTextSecondary = "#475569";
+var ColorTextTertiary = "#94a3b8";
 var ColorTextInverse = "#ffffff";
 var ColorTextBrand = "#5c2483";
 var ColorTextAccent = "#35b7b8";
 var ColorTextDanger = "#e11d48";
 var ColorTextSuccess = "#16a34a";
-var ColorTextInfo = "#475569";
+var ColorTextInfo = "#2563eb";
 var ColorTextWarning = "#d97706";
 var ColorSurfaceDefault = "#ffffff";
-var ColorSurfaceSubtle = "#f9fafb";
-var ColorSurfaceMuted = "#f3f4f6";
+var ColorSurfaceSubtle = "#f8fafc";
+var ColorSurfaceMuted = "#f1f5f9";
 var ColorSurfaceBrand = "#5c2483";
 var ColorSurfaceAccent = "#35b7b8";
 var ColorSurfaceDanger = "#fff1f2";
 var ColorSurfaceSuccess = "#f0fdf4";
 var ColorSurfaceWarning = "#fffbeb";
-var ColorSurfaceInfo = "#f8fafc";
+var ColorSurfaceInfo = "#eff6ff";
 var ColorSurfaceOverlay = "#000000cc";
-var ColorSurfaceHover = "#f3f4f6";
-var ColorSurfacePressed = "#e5e7eb";
+var ColorSurfaceHover = "#0000000f";
+var ColorSurfacePressed = "#e2e8f0";
 var ColorSurfaceSelected = "#edf9f9";
 var ColorSurfaceSelectedHover = "#d0f0f0";
-var ColorBorderDefault = "#e5e7eb";
-var ColorBorderStrong = "#d1d5db";
+var ColorBorderDefault = "#e2e8f0";
+var ColorBorderStrong = "#cbd5e1";
 var ColorBorderBrand = "#5c2483";
 var ColorBorderAccent = "#35b7b8";
 var ColorBorderFocus = "#35b7b8";
 var ColorBorderDanger = "#e11d48";
 var ColorBorderSuccess = "#16a34a";
-var ColorBorderInfo = "#94a3b8";
+var ColorBorderInfo = "#60a5fa";
 var ColorBorderWarning = "#d97706";
 var ColorOverlayBackdrop = "#00000066";
 var ColorStatusSuccess = "#22c55e";
 var ColorStatusDanger = "#f43f5e";
 var ColorStatusWarning = "#d97706";
-var ColorStatusInfo = "#64748b";
+var ColorStatusInfo = "#3b82f6";
 var ColorDeltaIncreaseBg = "#fff1f2";
 var ColorDeltaIncreaseText = "#be123c";
 var ColorDeltaIncreaseIcon = "#f43f5e";
 var ColorDeltaDecreaseBg = "#f0fdf4";
 var ColorDeltaDecreaseText = "#15803d";
 var ColorDeltaDecreaseIcon = "#22c55e";
-var ColorDeltaFlatBg = "#f3f4f6";
-var ColorDeltaFlatText = "#6b7280";
-var ColorDeltaFlatIcon = "#9ca3af";
-var ColorProgressTrack = "#e5e7eb";
+var ColorDeltaFlatBg = "#f1f5f9";
+var ColorDeltaFlatText = "#64748b";
+var ColorDeltaFlatIcon = "#94a3b8";
+var ColorProgressTrack = "#e2e8f0";
 var ColorProgressFill = "#6b2695";
 var ColorProgressFillSuccess = "#22c55e";
 var ColorProgressFillWarning = "#f59e0b";
 var ColorProgressFillDanger = "#f43f5e";
-var ColorBannerInfoBg = "#f8fafc";
-var ColorBannerInfoText = "#334155";
-var ColorBannerInfoBorder = "#e2e8f0";
-var ColorBannerInfoIcon = "#64748b";
+var ColorBannerInfoBg = "#eff6ff";
+var ColorBannerInfoText = "#1d4ed8";
+var ColorBannerInfoBorder = "#bfdbfe";
+var ColorBannerInfoIcon = "#3b82f6";
 var ColorBannerWarningBg = "#fffbeb";
 var ColorBannerWarningText = "#92400e";
 var ColorBannerWarningBorder = "#fde68a";
@@ -2974,8 +3269,8 @@ var ColorBadgeSlateBg = "#f1f5f9";
 var ColorBadgeSlateText = "#334155";
 var ColorBadgeRoseBg = "#ffe4e6";
 var ColorBadgeRoseText = "#be123c";
-var ColorBadgeNeutralBg = "#f3f4f6";
-var ColorBadgeNeutralText = "#374151";
+var ColorBadgeNeutralBg = "#f1f5f9";
+var ColorBadgeNeutralText = "#334155";
 var ColorBadgeGreenBg = "#dcfce7";
 var ColorBadgeGreenText = "#15803d";
 var ColorBadgeAmberBg = "#fef3c7";
@@ -3040,6 +3335,12 @@ export {
   ColorActionSecondaryHover,
   ColorActionSuccess,
   ColorActionSuccessHover,
+  ColorAlphaBlack06,
+  ColorAlphaBlack40,
+  ColorAlphaBlack60,
+  ColorAlphaBlack80,
+  ColorAlphaWhite06,
+  ColorAlphaWhite10,
   ColorAmber100,
   ColorAmber200,
   ColorAmber300,
@@ -3050,6 +3351,7 @@ export {
   ColorAmber700,
   ColorAmber800,
   ColorAmber900,
+  ColorAmber950,
   ColorBadgeAmberBg,
   ColorBadgeAmberText,
   ColorBadgeGreenBg,
@@ -3080,6 +3382,18 @@ export {
   ColorBannerWarningBorder,
   ColorBannerWarningIcon,
   ColorBannerWarningText,
+  ColorBlack,
+  ColorBlue100,
+  ColorBlue200,
+  ColorBlue300,
+  ColorBlue400,
+  ColorBlue50,
+  ColorBlue500,
+  ColorBlue600,
+  ColorBlue700,
+  ColorBlue800,
+  ColorBlue900,
+  ColorBlue950,
   ColorBorderAccent,
   ColorBorderBrand,
   ColorBorderDanger,
@@ -3089,8 +3403,6 @@ export {
   ColorBorderStrong,
   ColorBorderSuccess,
   ColorBorderWarning,
-  ColorBrandAccent,
-  ColorBrandPrimary,
   ColorDeltaDecreaseBg,
   ColorDeltaDecreaseIcon,
   ColorDeltaDecreaseText,
@@ -3110,19 +3422,7 @@ export {
   ColorGreen700,
   ColorGreen800,
   ColorGreen900,
-  ColorNeutral0,
-  ColorNeutral100,
-  ColorNeutral1000,
-  ColorNeutral200,
-  ColorNeutral300,
-  ColorNeutral400,
-  ColorNeutral50,
-  ColorNeutral500,
-  ColorNeutral600,
-  ColorNeutral700,
-  ColorNeutral800,
-  ColorNeutral900,
-  ColorNeutral950,
+  ColorGreen950,
   ColorOverlayBackdrop,
   ColorProgressFill,
   ColorProgressFillDanger,
@@ -3139,6 +3439,7 @@ export {
   ColorPurple700,
   ColorPurple800,
   ColorPurple900,
+  ColorPurple950,
   ColorRose100,
   ColorRose200,
   ColorRose300,
@@ -3149,6 +3450,7 @@ export {
   ColorRose700,
   ColorRose800,
   ColorRose900,
+  ColorRose950,
   ColorSlate100,
   ColorSlate200,
   ColorSlate300,
@@ -3159,6 +3461,7 @@ export {
   ColorSlate700,
   ColorSlate800,
   ColorSlate900,
+  ColorSlate950,
   ColorStatusDanger,
   ColorStatusInfo,
   ColorStatusSuccess,
@@ -3187,6 +3490,7 @@ export {
   ColorTeal700,
   ColorTeal800,
   ColorTeal900,
+  ColorTeal950,
   ColorTextAccent,
   ColorTextBrand,
   ColorTextDanger,
@@ -3197,6 +3501,7 @@ export {
   ColorTextSuccess,
   ColorTextTertiary,
   ColorTextWarning,
+  ColorWhite,
   Column,
   DeltaIndicator,
   Dialog,
@@ -3280,6 +3585,7 @@ export {
   ToggleButtonGroup,
   ToggleButtonGroupItem,
   Tooltip,
+  TruncatedText,
   Tab2 as UnstyledTab,
   TabList2 as UnstyledTabList,
   TabPanel2 as UnstyledTabPanel,