npm - @cytario/design - Versions diffs - 8.0.0 → 9.1.0 - Mend

@cytario/design 8.0.0 → 9.1.0

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

Files changed (8) hide show

package/dist/index.css +1 -1
package/dist/index.d.ts +133 -79
package/dist/index.js +627 -497
package/dist/index.js.map +1 -1
package/package.json +2 -1
package/src/styles/theme.css +29 -30
package/src/styles/tokens.css +2 -0
package/assets/logos/cytario-logo-on-purple.svg +0 -1

package/dist/index.js CHANGED Viewed

@@ -1,12 +1,62 @@
 "use client";
-// src/colors.ts
-var ColorTeal500 = "#35b7b8";
-var ColorPurple700 = "#5c2483";
 // src/index.ts
 import { RouterProvider } from "react-aria-components";
+// src/components/Logo/Logo.tsx
+import { jsx } from "react/jsx-runtime";
+var W = 56;
+var H = 20;
+var paths = {
+  c: "M7.043,15.648C7.043,15.744 7.025,15.781 6.949,15.799C6.347,16.046 5.593,16.103 4.859,16.103C1.808,16.103 0,14.002 0,11.279C0,8.479 2.072,6.398 5.179,6.398C6.121,6.398 6.629,6.493 6.949,6.606C7.025,6.644 7.043,6.7 7.043,6.814L7.025,8.497C7.025,8.63 6.949,8.63 6.874,8.612C6.479,8.46 5.989,8.365 5.255,8.365C3.54,8.365 2.335,9.387 2.335,11.203C2.335,13.266 3.823,14.059 5.273,14.059C5.951,14.059 6.535,14.002 6.912,13.87C7.006,13.833 7.043,13.89 7.043,13.965L7.043,15.648Z",
+  y: "M9.919,6.588C9.994,6.588 10.051,6.606 10.088,6.701C11.313,10.238 11.953,12.282 12.197,13.208C12.819,11.297 13.479,9.349 14.326,6.701C14.364,6.625 14.42,6.588 14.533,6.588L16.473,6.588C16.586,6.588 16.605,6.644 16.586,6.738C15.23,10.919 13.071,16.185 11.546,19.684C11.508,19.76 11.452,19.817 11.301,19.817L9.238,20C9.125,20 9.099,19.938 9.144,19.849C9.71,18.713 10.427,17.181 11.03,15.744C11.068,15.63 11.086,15.573 11.048,15.44C10.54,14.192 8.732,9.69 7.602,6.72C7.564,6.644 7.62,6.588 7.715,6.588L9.919,6.588Z",
+  t: "M22.706,15.61C22.706,15.725 22.688,15.8 22.593,15.838C22.085,16.027 21.614,16.102 20.992,16.102C19.448,16.102 18.525,15.346 18.525,13.473L18.525,8.498L17.338,8.498C17.244,8.48 17.206,8.441 17.206,8.328L17.206,6.738C17.206,6.625 17.244,6.587 17.357,6.587L18.525,6.583C18.543,5.921 18.525,4.912 18.525,4.26C18.543,4.166 18.581,4.109 18.675,4.09L20.674,3.912C20.764,3.904 20.806,3.912 20.806,4.007L20.806,6.583L22.65,6.587C22.744,6.587 22.781,6.625 22.781,6.72L22.781,8.365C22.781,8.46 22.744,8.498 22.65,8.498L20.804,8.498L20.804,12.981C20.804,13.813 21.067,14.211 21.878,14.211C22.122,14.211 22.33,14.193 22.593,14.135C22.65,14.116 22.706,14.135 22.706,14.248L22.706,15.61Z",
+  a: "M28.959,11.752C28.676,11.714 28.356,11.695 27.923,11.695C26.435,11.695 25.776,12.186 25.776,13C25.776,13.7 26.265,14.305 27.621,14.305C28.111,14.305 28.544,14.248 28.959,14.079L28.959,11.752ZM31.162,13.984C31.162,14.4 31.162,14.778 31.2,15.176C31.2,15.213 31.2,15.232 31.162,15.252C29.618,15.913 28.526,16.102 27.244,16.102C25.192,16.102 23.553,15.138 23.553,13C23.553,10.995 25.342,9.992 27.791,9.992C28.356,9.992 28.789,10.011 28.959,10.03L28.959,9.803C28.959,9.368 28.714,8.384 27.056,8.384C26.115,8.384 25.286,8.574 24.588,8.914C24.532,8.933 24.438,8.914 24.438,8.801L24.438,7.155C24.438,7.06 24.457,7.022 24.551,6.966C25.361,6.587 26.397,6.397 27.415,6.397C30.032,6.397 31.162,8.044 31.162,10.144L31.162,13.984Z",
+  r: "M34.267,6.588C34.381,6.588 34.438,6.625 34.475,6.738C34.569,6.984 34.644,7.458 34.663,7.874C35.304,7.079 36.327,6.398 37.627,6.398C37.739,6.398 37.827,6.453 37.827,6.594L37.827,8.535C37.827,8.63 37.789,8.668 37.658,8.668C36.321,8.63 35.21,9.103 34.776,9.671L34.776,15.762C34.776,15.876 34.72,15.913 34.606,15.913L32.648,15.913C32.516,15.913 32.478,15.856 32.478,15.762C32.478,15.762 32.485,7.369 32.485,6.701C32.485,6.606 32.504,6.588 32.598,6.588L34.267,6.588Z",
+  i: "M38.777,6.55C38.777,6.466 38.845,6.398 38.929,6.398C40.114,6.398 41.075,7.362 41.075,8.553L41.075,15.764C41.075,15.877 41.036,15.915 40.905,15.915L38.966,15.915C38.834,15.915 38.777,15.858 38.777,15.745L38.777,6.55Z",
+  o: "M47.169,14.138C45.576,14.123 44.297,12.814 44.311,11.214C44.326,9.615 45.629,8.329 47.222,8.344C48.815,8.359 50.094,9.668 50.079,11.268C50.065,12.868 48.761,14.153 47.169,14.138M47.876,6.482C47.119,6.369 46.014,6.446 45.46,6.41C43.518,6.279 42.185,4.377 42.182,2.485C42.181,1.047 41.374,0.235 40.308,0.039C39.63,-0.088 38.97,0.105 38.471,0.501C37.984,0.908 37.658,1.518 37.642,2.21C37.612,3.297 38.236,4.259 39.637,4.556C41.479,4.951 43.056,6.656 42.782,8.591C42.702,9.142 42.392,10.273 42.346,11.04C42.18,13.708 44.321,16.035 47.032,16.093C48.225,16.119 49.332,15.719 50.191,15.02C51.049,14.322 51.682,13.32 51.889,12.138C52.369,9.509 50.569,6.882 47.876,6.482",
+  "\xAE": "M54.243,7.684C54.243,7.493 54.104,7.355 53.837,7.355L53.499,7.355L53.499,8.006L53.837,8.006C54.104,8.006 54.243,7.884 54.243,7.684M53.499,8.224L53.499,8.893L53.257,8.893L53.257,7.137L53.837,7.137C54.235,7.137 54.494,7.346 54.494,7.676C54.494,7.937 54.33,8.11 54.088,8.18L54.581,8.893L54.295,8.893L53.845,8.224L53.499,8.224ZM55.212,8.015C55.212,7.207 54.65,6.633 53.837,6.633C53.023,6.633 52.452,7.207 52.452,8.015C52.452,8.832 53.023,9.405 53.837,9.405C54.65,9.405 55.212,8.832 55.212,8.015M52.21,8.015C52.21,7.085 52.894,6.398 53.837,6.398C54.78,6.398 55.463,7.085 55.463,8.015C55.463,8.954 54.78,9.64 53.837,9.64C52.894,9.64 52.21,8.954 52.21,8.015"
+};
+function Logo({
+  color,
+  highlightColor,
+  scale = 1,
+  className
+}) {
+  const width = W * scale;
+  const height = H * scale;
+  const style = {
+    fill: "var(--logo-fill)",
+    ...color && { "--logo-fill": color },
+    ...highlightColor && { "--logo-highlight": highlightColor }
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      role: "img",
+      "aria-label": "Cytario Logo",
+      width,
+      height,
+      viewBox: `0 0 ${W} ${H}`,
+      className,
+      style,
+      children: Object.entries(paths).map(([key, d], i) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          "aria-hidden": "true",
+          style: {
+            fill: key === "o" ? "var(--logo-highlight)" : void 0,
+            animation: "logo-fade-in 0.4s ease-out both",
+            animationDelay: `${i * 0.06}s`
+          }
+        },
+        key
+      ))
+    }
+  );
+}
 // src/components/Button/Button.tsx
 import {
   Button as AriaButton,
@@ -93,6 +143,7 @@ import {
   AlignRight,
   Archive,
   ArrowDown,
+  ArrowLeft,
   ArrowRight,
   ArrowUp,
   ArrowUpRight,
@@ -101,6 +152,7 @@ import {
   BookmarkCheck,
   Braces,
   Building2,
+  Calendar,
   Check,
   CheckCircle,
   CheckCircle2,
@@ -150,6 +202,7 @@ import {
   Mail,
   MapPin,
   Maximize,
+  Menu,
   Microscope,
   Minus,
   MoreVertical,
@@ -191,6 +244,54 @@ import {
   ZoomIn,
   ZoomOut
 } from "lucide-react";
+// src/components/Icon/icons/LinkedinIcon.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LinkedinIcon = forwardRef(
+  function LinkedinIcon2({ size = 24, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        className,
+        "aria-hidden": "true",
+        focusable: false,
+        ...props,
+        children: /* @__PURE__ */ jsx2("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })
+      }
+    );
+  }
+);
+// src/components/Icon/icons/GithubIcon.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var GithubIcon = forwardRef2(
+  function GithubIcon2({ size = 24, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        className,
+        "aria-hidden": "true",
+        focusable: false,
+        ...props,
+        children: /* @__PURE__ */ jsx3("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" })
+      }
+    );
+  }
+);
+// src/components/Icon/icon-registry.ts
 var iconRegistry = {
   AlertCircle,
   AlertTriangle,
@@ -199,6 +300,7 @@ var iconRegistry = {
   AlignRight,
   Archive,
   ArrowDown,
+  ArrowLeft,
   ArrowRight,
   ArrowUp,
   ArrowUpRight,
@@ -207,6 +309,7 @@ var iconRegistry = {
   BookmarkCheck,
   Braces,
   Building2,
+  Calendar,
   Check,
   CheckCircle,
   CheckCircle2,
@@ -237,6 +340,7 @@ var iconRegistry = {
   FolderPlus,
   FolderTree,
   Fullscreen,
+  Github: GithubIcon,
   Grid2x2,
   Grid3x3,
   Heart,
@@ -250,12 +354,14 @@ var iconRegistry = {
   Layers2,
   LayoutDashboard,
   LayoutGrid,
+  Linkedin: LinkedinIcon,
   List,
   ListFilter,
   LogOut,
   Mail,
   MapPin,
   Maximize,
+  Menu,
   Microscope,
   Minus,
   MoreVertical,
@@ -299,7 +405,7 @@ var iconRegistry = {
 };
 // src/components/Icon/Icon.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var sizeMap = {
   xs: 14,
   sm: 16,
@@ -314,7 +420,7 @@ function Icon({
   className
 }) {
   const Component = typeof icon === "string" ? iconRegistry[icon] : icon;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx4(
     Component,
     {
       size: sizeMap[size],
@@ -328,7 +434,7 @@ function Icon({
 // src/components/Spinner/Spinner.tsx
 import { twMerge as twMerge2 } from "tailwind-merge";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
 function Spinner({
   size = "md",
   "aria-label": ariaLabel,
@@ -347,7 +453,7 @@ function Spinner({
       width: sizeMap[size],
       height: sizeMap[size],
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx5(
           "circle",
           {
             className: "opacity-25",
@@ -358,7 +464,7 @@ function Spinner({
             strokeWidth: "4"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             className: "opacity-75",
@@ -372,7 +478,7 @@ function Spinner({
 }
 // src/components/Button/Button.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonBaseClass = `
   inline-flex items-center justify-center gap-2 shrink-0 cursor-pointer
   rounded-full
@@ -402,19 +508,126 @@ function ButtonBase({
     className
   );
   return /* @__PURE__ */ jsxs2(Component, { ...props, isDisabled: isDisabled || isLoading, className: cx, children: [
-    isLoading && /* @__PURE__ */ jsx3(Spinner, { size }),
-    !isLoading && iconLeft && /* @__PURE__ */ jsx3(Icon, { icon: iconLeft, size }),
+    isLoading && /* @__PURE__ */ jsx6(Spinner, { size }),
+    !isLoading && iconLeft && /* @__PURE__ */ jsx6(Icon, { icon: iconLeft, size }),
     children,
-    !isLoading && iconRight && /* @__PURE__ */ jsx3(Icon, { icon: iconRight, size })
+    !isLoading && iconRight && /* @__PURE__ */ jsx6(Icon, { icon: iconRight, size })
   ] });
 }
 function Button(props) {
-  return /* @__PURE__ */ jsx3(ButtonBase, { as: AriaButton, ...props });
+  return /* @__PURE__ */ jsx6(ButtonBase, { as: AriaButton, ...props });
 }
 function ButtonLink(props) {
-  return /* @__PURE__ */ jsx3(ButtonBase, { as: AriaLink, ...props });
+  return /* @__PURE__ */ jsx6(ButtonBase, { as: AriaLink, ...props });
 }
+// src/components/Heading/Heading.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var sizeMap2 = {
+  h1: "text-4xl sm:text-5xl leading-tight font-bold",
+  h2: "text-2xl sm:text-3xl leading-tight font-bold",
+  h3: "text-lg sm:text-xl leading-snug font-bold",
+  h4: "text-base sm:text-lg font-semibold",
+  h5: "text-sm sm:text-base font-semibold",
+  h6: "text-sm font-semibold",
+  hero: "text-4xl sm:text-5xl lg:text-6xl leading-tight font-bold"
+};
+var Heading = forwardRef3(
+  function Heading2({ as: Tag2 = "h2", size, className, children, ...rest }, ref) {
+    const resolvedSize = size ?? Tag2;
+    const cx = twMerge4("text-inherit mb-4", sizeMap2[resolvedSize], className);
+    return /* @__PURE__ */ jsx7(Tag2, { ref, className: cx, ...rest, children });
+  }
+);
+var H1 = forwardRef3(
+  function H12(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h1" });
+  }
+);
+var H2 = forwardRef3(
+  function H22(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h2" });
+  }
+);
+var H3 = forwardRef3(
+  function H32(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h3" });
+  }
+);
+var H4 = forwardRef3(
+  function H42(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h4" });
+  }
+);
+var H5 = forwardRef3(
+  function H52(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h5" });
+  }
+);
+var H6 = forwardRef3(
+  function H62(props, ref) {
+    return /* @__PURE__ */ jsx7(Heading, { ...props, ref, as: "h6" });
+  }
+);
+// src/components/Prose/Prose.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { twMerge as twMerge5 } from "tailwind-merge";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "prose-sm",
+  default: "prose",
+  lg: "prose-lg",
+  xl: "prose-xl"
+};
+var Prose = forwardRef4(function Prose2({ size = "default", invert = false, className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref,
+      className: twMerge5(
+        "prose",
+        sizeClasses[size],
+        invert && "prose-invert",
+        "max-w-none",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+// src/components/Description/Description.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { twMerge as twMerge6 } from "tailwind-merge";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  sm: "text-sm md:text-base",
+  md: "text-base md:text-lg",
+  lg: "text-lg md:text-xl",
+  xl: "text-xl md:text-2xl"
+};
+var Description = forwardRef5(
+  function Description2({ size = "md", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx9(
+      "p",
+      {
+        ref,
+        className: twMerge6(
+          "text-pretty text-muted-foreground mb-4",
+          sizeClasses2[size],
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
 // src/components/Tooltip/Tooltip.tsx
 import {
   useEffect,
@@ -423,7 +636,7 @@ import {
   useState
 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var offsetThreshold = 5;
 var tooltipDelay = 500;
@@ -516,7 +729,7 @@ function Tooltip({ content, children }) {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
-  const tooltipContent = isVisible && content != null ? /* @__PURE__ */ jsx4(
+  const tooltipContent = isVisible && content != null ? /* @__PURE__ */ jsx10(
     "div",
     {
       ref: tooltipRef,
@@ -636,7 +849,7 @@ function useOverflowDetection(ref) {
 }
 // src/components/TruncatedText/TruncatedText.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var spanCx = "truncate overflow-hidden whitespace-nowrap block min-w-0 w-full";
 var copyCx = "hover:bg-accent transition-colors rounded cursor-pointer";
 var leftStyle = { direction: "rtl", textAlign: "left" };
@@ -649,7 +862,7 @@ var handleCopyKeyDown = (handleClick) => (e) => {
     handleClick();
   }
 };
-var CopiedOverlay = () => /* @__PURE__ */ jsx5(
+var CopiedOverlay = () => /* @__PURE__ */ jsx11(
   "span",
   {
     role: "status",
@@ -665,7 +878,7 @@ var RightEllipsis = ({ children, 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(
+  return /* @__PURE__ */ jsx11(Tooltip, { content: isTruncated ? children : null, children: /* @__PURE__ */ jsxs4(
     "span",
     {
       ref,
@@ -677,7 +890,7 @@ var RightEllipsis = ({ children, copyValue }) => {
       tabIndex: isCopyable ? 0 : void 0,
       children: [
         children,
-        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+        isCopied && /* @__PURE__ */ jsx11(CopiedOverlay, {})
       ]
     }
   ) });
@@ -689,7 +902,7 @@ var LeftEllipsis = ({ children, 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(
+  return /* @__PURE__ */ jsx11(Tooltip, { content: isTruncated ? children : null, children: /* @__PURE__ */ jsxs4(
     "span",
     {
       ref,
@@ -701,8 +914,8 @@ var LeftEllipsis = ({ children, copyValue }) => {
       role: isCopyable ? "button" : void 0,
       tabIndex: isCopyable ? 0 : void 0,
       children: [
-        /* @__PURE__ */ jsx5("bdi", { children }),
-        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+        /* @__PURE__ */ jsx11("bdi", { children }),
+        isCopied && /* @__PURE__ */ jsx11(CopiedOverlay, {})
       ]
     }
   ) });
@@ -716,7 +929,7 @@ var MiddleEllipsisString = ({ text, 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(
+  return /* @__PURE__ */ jsx11(Tooltip, { content: isTruncated ? text : null, children: /* @__PURE__ */ jsxs4(
     "span",
     {
       ref,
@@ -729,16 +942,16 @@ var MiddleEllipsisString = ({ text, copyValue }) => {
       tabIndex: isCopyable ? 0 : void 0,
       children: [
         displayed,
-        isCopied && /* @__PURE__ */ jsx5(CopiedOverlay, {})
+        isCopied && /* @__PURE__ */ jsx11(CopiedOverlay, {})
       ]
     }
   ) });
 };
 var TruncatedText = ({ children, ellipsis = "right", copyValue }) => {
-  if (ellipsis === "left") return /* @__PURE__ */ jsx5(LeftEllipsis, { copyValue, children });
+  if (ellipsis === "left") return /* @__PURE__ */ jsx11(LeftEllipsis, { copyValue, children });
   if (ellipsis === "middle" && typeof children === "string")
-    return /* @__PURE__ */ jsx5(MiddleEllipsisString, { text: children, copyValue });
-  return /* @__PURE__ */ jsx5(RightEllipsis, { copyValue, children });
+    return /* @__PURE__ */ jsx11(MiddleEllipsisString, { text: children, copyValue });
+  return /* @__PURE__ */ jsx11(RightEllipsis, { copyValue, children });
 };
 // src/components/IconButton/IconButton.tsx
@@ -747,8 +960,8 @@ import {
   Link as AriaLink2,
   ToggleButton as AriaToggleButton
 } from "react-aria-components";
-import { twMerge as twMerge4 } from "tailwind-merge";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { twMerge as twMerge7 } from "tailwind-merge";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var squareSizeStyles = {
   xs: "h-7 w-7",
   // 28px
@@ -771,7 +984,7 @@ function IconButtonBase({
   ref,
   ...props
 }) {
-  const cx = twMerge4(
+  const cx = twMerge7(
     buttonBaseClass,
     isLoading ? "pointer-events-none" : "",
     variantStyles[variant],
@@ -780,7 +993,7 @@ function IconButtonBase({
     squareSizeStyles[size],
     className
   );
-  return /* @__PURE__ */ jsx6(Tooltip, { content: label, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx12(Tooltip, { content: label, children: /* @__PURE__ */ jsx12(
     Component,
     {
       ...props,
@@ -788,18 +1001,18 @@ function IconButtonBase({
       "aria-label": label,
       isDisabled: isDisabled || isLoading,
       className: cx,
-      children: isLoading ? /* @__PURE__ */ jsx6(Spinner, { size }) : /* @__PURE__ */ jsx6(Icon, { icon, size })
+      children: isLoading ? /* @__PURE__ */ jsx12(Spinner, { size }) : /* @__PURE__ */ jsx12(Icon, { icon, size })
     }
   ) });
 }
 function IconButton(props) {
-  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaButton2, ...props });
+  return /* @__PURE__ */ jsx12(IconButtonBase, { as: AriaButton2, ...props });
 }
 function IconButtonLink(props) {
-  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaLink2, ...props });
+  return /* @__PURE__ */ jsx12(IconButtonBase, { as: AriaLink2, ...props });
 }
 function IconButtonToggle(props) {
-  return /* @__PURE__ */ jsx6(IconButtonBase, { as: AriaToggleButton, ...props });
+  return /* @__PURE__ */ jsx12(IconButtonBase, { as: AriaToggleButton, ...props });
 }
 // src/components/Form/Input/Input.tsx
@@ -808,13 +1021,13 @@ import {
   Input as AriaInput,
   Text
 } from "react-aria-components";
-import { twMerge as twMerge5 } from "tailwind-merge";
+import { twMerge as twMerge8 } from "tailwind-merge";
 // src/components/Form/Label/Label.tsx
 import {
   Label as AriaLabel
 } from "react-aria-components";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function Label({ isRequired, children, className, ...props }) {
   return /* @__PURE__ */ jsxs5(
     AriaLabel,
@@ -828,7 +1041,7 @@ function Label({ isRequired, children, className, ...props }) {
       ].filter(Boolean).join(" "),
       children: [
         children,
-        isRequired && /* @__PURE__ */ jsx7(
+        isRequired && /* @__PURE__ */ jsx13(
           "span",
           {
             "aria-hidden": "true",
@@ -842,7 +1055,7 @@ function Label({ isRequired, children, className, ...props }) {
 }
 // src/components/Form/Input/Input.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var alignClasses = {
   left: "text-left",
   center: "text-center",
@@ -875,13 +1088,13 @@ function Input({
       isDisabled,
       isRequired,
       isInvalid,
-      className: twMerge5("flex w-full flex-col gap-1", className),
+      className: twMerge8("flex w-full flex-col gap-1", className),
       children: [
-        label && /* @__PURE__ */ jsx8(Label, { isRequired, children: label }),
+        label && /* @__PURE__ */ jsx14(Label, { isRequired, children: label }),
         prefix ? /* @__PURE__ */ jsxs6(
           "div",
           {
-            className: twMerge5(
+            className: twMerge8(
               "flex items-center overflow-hidden",
               radiusClass,
               "border",
@@ -892,10 +1105,10 @@ function Input({
               isDisabled && "opacity-50 pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx14(
                 "span",
                 {
-                  className: twMerge5(
+                  className: twMerge8(
                     "self-stretch flex items-center shrink-0 select-none",
                     "bg-card",
                     "border-r border-r-border",
@@ -905,11 +1118,11 @@ function Input({
                   children: prefix
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx14(
                 AriaInput,
                 {
                   placeholder,
-                  className: twMerge5(
+                  className: twMerge8(
                     "w-full bg-transparent",
                     sizeStyles[size],
                     alignClasses[align],
@@ -921,11 +1134,11 @@ function Input({
               )
             ]
           }
-        ) : /* @__PURE__ */ jsx8(
+        ) : /* @__PURE__ */ jsx14(
           AriaInput,
           {
             placeholder,
-            className: twMerge5(
+            className: twMerge8(
               "w-full",
               sizeStyles[size],
               alignClasses[align],
@@ -941,8 +1154,8 @@ function Input({
             )
           }
         ),
-        description && /* @__PURE__ */ jsx8(Text, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
-        isInvalid && /* @__PURE__ */ jsx8(
+        description && /* @__PURE__ */ jsx14(Text, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
+        isInvalid && /* @__PURE__ */ jsx14(
           Text,
           {
             slot: "errorMessage",
@@ -957,11 +1170,11 @@ function Input({
 }
 // src/components/Form/InputPassword/InputPassword.tsx
-import { forwardRef, useId, useState as useState5 } from "react";
+import { forwardRef as forwardRef6, useId, useState as useState5 } from "react";
 import { Eye as Eye2, EyeOff as EyeOff2 } from "lucide-react";
-import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var InputPassword = forwardRef(
+import { twMerge as twMerge9 } from "tailwind-merge";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var InputPassword = forwardRef6(
   function InputPassword2({
     label,
     description,
@@ -986,7 +1199,7 @@ var InputPassword = forwardRef(
     const errId = isInvalid ? `${inputId}-error` : void 0;
     const describedBy = [descId, errId, ariaDescribedByProp].filter(Boolean).join(" ") || void 0;
     const toggleDisabled = isToggleDisabled ?? isDisabled;
-    return /* @__PURE__ */ jsxs7("div", { className: twMerge6("flex w-full flex-col gap-1", className), children: [
+    return /* @__PURE__ */ jsxs7("div", { className: twMerge9("flex w-full flex-col gap-1", className), children: [
       label && /* @__PURE__ */ jsxs7(
         "label",
         {
@@ -994,14 +1207,14 @@ var InputPassword = forwardRef(
           className: "text-sm font-medium text-foreground",
           children: [
             label,
-            isRequired && /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
+            isRequired && /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })
           ]
         }
       ),
       /* @__PURE__ */ jsxs7(
         "div",
         {
-          className: twMerge6(
+          className: twMerge9(
             "flex items-center overflow-hidden rounded-md border bg-background",
             "outline-none transition-colors",
             isInvalid ? "border-destructive-border" : "border-border",
@@ -1009,7 +1222,7 @@ var InputPassword = forwardRef(
             isDisabled && "opacity-50 pointer-events-none"
           ),
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx15(
               "input",
               {
                 ...inputProps,
@@ -1020,7 +1233,7 @@ var InputPassword = forwardRef(
                 disabled: isDisabled,
                 "aria-invalid": isInvalid || ariaInvalidProp,
                 "aria-describedby": describedBy,
-                className: twMerge6(
+                className: twMerge9(
                   "w-full bg-transparent text-foreground",
                   "placeholder:text-muted-foreground",
                   "outline-none border-none",
@@ -1028,7 +1241,7 @@ var InputPassword = forwardRef(
                 )
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -1036,20 +1249,20 @@ var InputPassword = forwardRef(
                 disabled: toggleDisabled,
                 tabIndex: toggleDisabled ? -1 : void 0,
                 onClick: () => setVisible((v) => !v),
-                className: twMerge6(
+                className: twMerge9(
                   "flex items-center justify-center shrink-0 self-stretch px-3 cursor-pointer",
                   "text-muted-foreground hover:text-foreground transition-colors",
                   "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                   "disabled:cursor-not-allowed disabled:opacity-50"
                 ),
-                children: /* @__PURE__ */ jsx9(Icon, { icon: visible ? EyeOff2 : Eye2, size: "sm" })
+                children: /* @__PURE__ */ jsx15(Icon, { icon: visible ? EyeOff2 : Eye2, size: "sm" })
               }
             )
           ]
         }
       ),
-      description && /* @__PURE__ */ jsx9("p", { id: descId, className: "text-sm text-muted-foreground", children: description }),
-      isInvalid && /* @__PURE__ */ jsx9("p", { id: errId, role: "alert", className: "text-sm text-destructive", children: errorMessage })
+      description && /* @__PURE__ */ jsx15("p", { id: descId, className: "text-sm text-muted-foreground", children: description }),
+      isInvalid && /* @__PURE__ */ jsx15("p", { id: errId, role: "alert", className: "text-sm text-destructive", children: errorMessage })
     ] });
   }
 );
@@ -1065,8 +1278,8 @@ import {
   SelectValue,
   Text as Text2
 } from "react-aria-components";
-import { twMerge as twMerge7 } from "tailwind-merge";
-import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { Fragment, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function Select({
   label,
   items,
@@ -1088,14 +1301,14 @@ function Select({
       isDisabled,
       isRequired,
       isInvalid: hasError,
-      className: twMerge7("flex flex-col gap-1", className),
+      className: twMerge10("flex flex-col gap-1", className),
       children: [
-        label && /* @__PURE__ */ jsx10(Label, { isRequired, children: label }),
+        label && /* @__PURE__ */ jsx16(Label, { isRequired, children: label }),
         /* @__PURE__ */ jsxs8(
           Button2,
           {
             "aria-required": isRequired || void 0,
-            className: twMerge7(
+            className: twMerge10(
               `
             inline-flex items-center justify-between
             w-full rounded-md
@@ -1109,10 +1322,10 @@ function Select({
               hasError ? "border-destructive-border" : "border-border"
             ),
             children: [
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx16(
                 SelectValue,
                 {
-                  className: twMerge7(
+                  className: twMerge10(
                     renderItem ? "min-w-0" : "truncate",
                     "data-placeholder:text-muted-foreground"
                   ),
@@ -1123,11 +1336,11 @@ function Select({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx16(
                 ChevronDown2,
                 {
                   "aria-hidden": true,
-                  className: twMerge7(
+                  className: twMerge10(
                     "shrink-0 text-muted-foreground",
                     size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4"
                   )
@@ -1136,8 +1349,8 @@ function Select({
             ]
           }
         ),
-        description && /* @__PURE__ */ jsx10(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
-        hasError && /* @__PURE__ */ jsx10(
+        description && /* @__PURE__ */ jsx16(Text2, { slot: "description", className: "text-sm text-muted-foreground", children: description }),
+        hasError && /* @__PURE__ */ jsx16(
           Text2,
           {
             slot: "errorMessage",
@@ -1146,10 +1359,10 @@ function Select({
             children: errorMessage
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx16(
           Popover,
           {
-            className: twMerge7(
+            className: twMerge10(
               "w-(--trigger-width)",
               "rounded-md",
               "border border-border",
@@ -1159,12 +1372,12 @@ function Select({
               "entering:animate-in entering:fade-in",
               "exiting:animate-out exiting:fade-out"
             ),
-            children: /* @__PURE__ */ jsx10(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx10(
+            children: /* @__PURE__ */ jsx16(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx16(
               ListBoxItem,
               {
                 id: item.id,
                 textValue: item.name,
-                className: twMerge7(
+                className: twMerge10(
                   `
                   flex items-center justify-between gap-2
                   rounded-sm
@@ -1177,8 +1390,8 @@ function Select({
                   sizeStyles[size]
                 ),
                 children: ({ isSelected }) => /* @__PURE__ */ jsxs8(Fragment, { children: [
-                  /* @__PURE__ */ jsx10("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
-                  isSelected && /* @__PURE__ */ jsx10(Check2, { className: "h-4 w-4 shrink-0 text-primary" })
+                  /* @__PURE__ */ jsx16("span", { className: renderItem ? "min-w-0 flex-1" : "truncate", children: renderItem ? renderItem(item) : item.name }),
+                  isSelected && /* @__PURE__ */ jsx16(Check2, { className: "h-4 w-4 shrink-0 text-primary" })
                 ] })
               }
             ) })
@@ -1198,75 +1411,88 @@ import {
   TableBody as AriaTableBody,
   TableHeader as AriaTableHeader
 } from "react-aria-components";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var tableSizeClass = {
   compact: "[--table-row-py:theme(spacing.1)]",
   comfortable: "[--table-row-py:theme(spacing.3)]"
 };
-function Table2({ size = "comfortable", className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+function Table2({
+  size = "comfortable",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
     AriaTable,
     {
       ...props,
-      className: [
-        "w-full border-collapse text-(--font-size-sm) text-foreground",
+      className: twMerge11(
+        "w-full border-collapse text-sm text-foreground",
         tableSizeClass[size],
         className
-      ].filter(Boolean).join(" ")
+      )
     }
   );
 }
 function TableHeader(props) {
-  return /* @__PURE__ */ jsx11(AriaTableHeader, { ...props });
+  return /* @__PURE__ */ jsx17(AriaTableHeader, { ...props });
 }
-function Column(props) {
-  return /* @__PURE__ */ jsx11(
+function Column({ className, ...props }) {
+  return /* @__PURE__ */ jsx17(
     AriaColumn,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "px-3 py-2 text-left font-semibold text-muted-foreground",
         "border-b-2 border-border",
         "cursor-default select-none outline-none",
-        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
-      ].join(" "),
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
+        className
+      ),
       children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs9("span", { className: "inline-flex items-center gap-1", children: [
         props.children,
-        allowsSorting && /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+        allowsSorting && /* @__PURE__ */ jsx17("span", { "aria-hidden": "true", className: "text-muted-foreground", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
       ] })
     }
   );
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx11(AriaTableBody, { ...props });
+  return /* @__PURE__ */ jsx17(AriaTableBody, { ...props });
 }
-function Row(props) {
-  return /* @__PURE__ */ jsx11(
+function Row({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx17(
     AriaRow,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "border-b border-border",
         "even:bg-card",
         "hover:bg-muted",
+        "data-[selected]:bg-accent",
+        "data-[selected]:ring-2 data-[selected]:ring-ring data-[selected]:ring-inset",
         "outline-none",
         "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
-        "transition-colors"
-      ].join(" ")
+        "transition-colors",
+        className
+      )
     }
   );
 }
-function Cell(props) {
-  return /* @__PURE__ */ jsx11(
+function Cell({ className, ...props }) {
+  return /* @__PURE__ */ jsx17(
     AriaCell,
     {
       ...props,
-      className: [
+      className: twMerge11(
         "px-3 py-(--table-row-py)",
         "text-foreground",
         "outline-none",
-        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]"
-      ].join(" ")
+        "focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]",
+        className
+      )
     }
   );
 }
@@ -1276,10 +1502,10 @@ import {
   Modal,
   ModalOverlay,
   Dialog as AriaDialog,
-  Heading
+  Heading as Heading3
 } from "react-aria-components";
 import { X as X2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var sizeStyles2 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -1295,7 +1521,7 @@ function Dialog({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx18(
     ModalOverlay,
     {
       isOpen,
@@ -1307,7 +1533,7 @@ function Dialog({
         "entering:animate-in entering:fade-in",
         "exiting:animate-out exiting:fade-out"
       ].join(" "),
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx18(
         Modal,
         {
           className: [
@@ -1318,17 +1544,17 @@ function Dialog({
             "exiting:animate-out exiting:zoom-out-95 exiting:fade-out",
             className
           ].filter(Boolean).join(" "),
-          children: /* @__PURE__ */ jsx12(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          children: /* @__PURE__ */ jsx18(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs10(Fragment2, { children: [
             /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border", children: [
-              /* @__PURE__ */ jsx12(
-                Heading,
+              /* @__PURE__ */ jsx18(
+                Heading3,
                 {
                   slot: "title",
                   className: "text-lg font-semibold text-foreground",
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   type: "button",
@@ -1340,11 +1566,11 @@ function Dialog({
                     "transition-colors"
                   ].join(" "),
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx12(X2, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ jsx18(X2, { size: 20, "aria-hidden": "true" })
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx12("div", { className: "px-6 py-4 overflow-y-auto", children })
+            /* @__PURE__ */ jsx18("div", { className: "px-6 py-4 overflow-y-auto", children })
           ] }) })
         }
       )
@@ -1353,7 +1579,7 @@ function Dialog({
 }
 // src/components/Dialog/DialogFooter.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 // src/components/Toast/Toast.tsx
 import {
@@ -1366,7 +1592,7 @@ import {
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { CheckCircle as CheckCircle3, XCircle as XCircle2, Info as Info2, X as X3 } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var ToastContext = createContext(null);
 var toastCounter = 0;
 var defaultDuration = {
@@ -1437,16 +1663,16 @@ function ToastItem({
         config.containerClass
       ].join(" "),
       children: [
-        /* @__PURE__ */ jsx14(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx14("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx20(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx20("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx20(
           "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__ */ jsx14(X3, { size: 16, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx20(X3, { size: 16, "aria-hidden": "true" })
           }
         )
       ]
@@ -1466,7 +1692,7 @@ function ToastContainer({
 }) {
   if (toasts.length === 0) return null;
   return createPortal2(
-    /* @__PURE__ */ jsx14(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx14("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx14(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
+    /* @__PURE__ */ jsx20(PlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx20("div", { className: containerPositionStyles[placement], children: toasts.map((toast) => /* @__PURE__ */ jsx20(ToastItem, { toast, onRemove: removeToast }, toast.id)) }) }),
     document.body
   );
 }
@@ -1499,7 +1725,7 @@ function ToastProvider({ children, bridge, placement = "bottom-right" }) {
   }, [bridge, addToast]);
   return /* @__PURE__ */ jsxs11(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx14(ToastContainer, { toasts, removeToast, placement })
+    /* @__PURE__ */ jsx20(ToastContainer, { toasts, removeToast, placement })
   ] });
 }
 function useToast() {
@@ -1515,7 +1741,7 @@ function useToast() {
 }
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 function EmptyState({
   icon,
   title,
@@ -1531,10 +1757,10 @@ function EmptyState({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx15(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
-        /* @__PURE__ */ jsx15("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
-        description && /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
-        action && /* @__PURE__ */ jsx15("div", { className: "mt-6", children: action })
+        icon && /* @__PURE__ */ jsx21(Icon, { icon, size: "xl", className: "text-muted-foreground" }),
+        /* @__PURE__ */ jsx21("h3", { className: "text-lg font-semibold text-foreground mt-4", children: title }),
+        description && /* @__PURE__ */ jsx21("p", { className: "text-sm text-muted-foreground mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx21("div", { className: "mt-6", children: action })
       ]
     }
   );
@@ -1545,9 +1771,9 @@ import {
   Checkbox as AriaCheckbox
 } from "react-aria-components";
 import { Check as Check3 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx22(
     AriaCheckbox,
     {
       ...props,
@@ -1567,12 +1793,12 @@ function Checkbox({ children, className, ...props }) {
               isSelected || isIndeterminate ? "bg-primary border-primary" : "bg-background border-border group-hover:border-border"
             ].join(" "),
             children: [
-              isSelected && /* @__PURE__ */ jsx16(Check3, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
-              isIndeterminate && /* @__PURE__ */ jsx16("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
+              isSelected && /* @__PURE__ */ jsx22(Check3, { className: "w-4 h-4 text-primary-foreground", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx22("div", { className: "w-3 h-0.5 bg-primary-foreground rounded-full" })
             ]
           }
         ),
-        children && /* @__PURE__ */ jsx16("span", { children })
+        children && /* @__PURE__ */ jsx22("span", { children })
       ] })
     }
   );
@@ -1582,7 +1808,7 @@ function Checkbox({ children, className, ...props }) {
 import {
   Switch as AriaSwitch
 } from "react-aria-components";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var trackColorMap = {
   primary: "bg-primary",
   success: "bg-success",
@@ -1599,7 +1825,7 @@ function Switch({
   ...props
 }) {
   const isPreset = isPresetColor(color);
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx23(
     AriaSwitch,
     {
       ...props,
@@ -1609,7 +1835,7 @@ function Switch({
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx23(
           "div",
           {
             className: [
@@ -1618,7 +1844,7 @@ function Switch({
               isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-border" : ""
             ].join(" "),
             style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx23(
               "div",
               {
                 className: [
@@ -1629,7 +1855,7 @@ function Switch({
             )
           }
         ),
-        children && /* @__PURE__ */ jsx17("span", { children })
+        children && /* @__PURE__ */ jsx23("span", { children })
       ] })
     }
   );
@@ -1640,9 +1866,9 @@ import {
   RadioGroup as AriaRadioGroup,
   Radio as AriaRadio
 } from "react-aria-components";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 function RadioGroup({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     AriaRadioGroup,
     {
       ...props,
@@ -1656,7 +1882,7 @@ function RadioGroup({ children, className, ...props }) {
   );
 }
 function Radio({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     AriaRadio,
     {
       ...props,
@@ -1666,7 +1892,7 @@ function Radio({ children, className, ...props }) {
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs15(Fragment5, { children: [
-        /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx24(
           "div",
           {
             className: [
@@ -1675,16 +1901,16 @@ function Radio({ children, className, ...props }) {
               "group-focus-visible:ring-2 group-focus-visible:ring-ring group-focus-visible:ring-offset-2",
               isSelected ? "border-primary" : "border-border group-hover:border-border"
             ].join(" "),
-            children: isSelected && /* @__PURE__ */ jsx18("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
+            children: isSelected && /* @__PURE__ */ jsx24("div", { className: "w-2.5 h-2.5 rounded-full bg-primary" })
           }
         ),
-        children && /* @__PURE__ */ jsx18("span", { children })
+        children && /* @__PURE__ */ jsx24("span", { children })
       ] })
     }
   );
 }
 function RadioButton({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx24(
     AriaRadio,
     {
       ...props,
@@ -1693,7 +1919,7 @@ function RadioButton({ children, className, ...props }) {
         "disabled:opacity-50 disabled:cursor-default",
         className
       ].filter(Boolean).join(" "),
-      children: ({ isSelected }) => /* @__PURE__ */ jsx18(
+      children: ({ isSelected }) => /* @__PURE__ */ jsx24(
         "div",
         {
           className: [
@@ -1710,7 +1936,7 @@ function RadioButton({ children, className, ...props }) {
 }
 // src/components/Form/Fieldset/Fieldset.tsx
-import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function Fieldset({ legend, children, className }) {
   return /* @__PURE__ */ jsxs16(
     "fieldset",
@@ -1721,7 +1947,7 @@ function Fieldset({ legend, children, className }) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        legend && /* @__PURE__ */ jsx19(
+        legend && /* @__PURE__ */ jsx25(
           "legend",
           {
             className: [
@@ -1739,74 +1965,11 @@ function Fieldset({ legend, children, className }) {
   );
 }
-// src/components/Heading/Heading.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var defaultSizeMap = {
-  h1: "2xl",
-  h2: "xl",
-  h3: "lg",
-  h4: "md",
-  h5: "sm",
-  h6: "xs"
-};
-var sizeStyles3 = {
-  xs: "text-sm",
-  sm: "text-base",
-  md: "text-lg",
-  lg: "text-xl",
-  xl: "text-2xl",
-  "2xl": "text-3xl",
-  "3xl": "text-4xl"
-};
-var weightStyles = {
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-function Heading2({
-  as: Tag2 = "h2",
-  size,
-  weight = "semibold",
-  className,
-  children
-}) {
-  const resolvedSize = size ?? defaultSizeMap[Tag2];
-  return /* @__PURE__ */ jsx20(
-    Tag2,
-    {
-      className: twMerge8(
-        weightStyles[weight],
-        "text-foreground",
-        sizeStyles3[resolvedSize],
-        className
-      ),
-      children
-    }
-  );
-}
-function H1(props) {
-  return /* @__PURE__ */ jsx20(
-    Heading2,
-    {
-      ...props,
-      as: "h1",
-      size: props.size ?? "2xl",
-      weight: props.weight ?? "bold"
-    }
-  );
-}
-function H2(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h2", size: props.size ?? "xl" });
-}
-function H3(props) {
-  return /* @__PURE__ */ jsx20(Heading2, { ...props, as: "h3", size: props.size ?? "lg" });
-}
 // src/components/Link/Link.tsx
 import {
   Link as AriaLink3
 } from "react-aria-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var variantStyles2 = {
   default: [
     "text-teal-700 underline",
@@ -1822,7 +1985,7 @@ function Link({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     AriaLink3,
     {
       ...props,
@@ -1843,20 +2006,20 @@ import {
   Link as Link2
 } from "react-aria-components";
 import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function Breadcrumbs({ items, className }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     "nav",
     {
       "aria-label": "Breadcrumb",
       className,
-      children: /* @__PURE__ */ jsx22(
+      children: /* @__PURE__ */ jsx27(
         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__ */ jsx27(
               AriaBreadcrumb,
               {
                 id: item.id,
@@ -1864,8 +2027,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-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-                  /* @__PURE__ */ jsx22(
+                children: isLast ? /* @__PURE__ */ jsx27("span", { className: "font-medium text-foreground truncate", children: item.label }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
+                  /* @__PURE__ */ jsx27(
                     Link2,
                     {
                       href: item.href,
@@ -1873,7 +2036,7 @@ function Breadcrumbs({ items, className }) {
                       children: item.label
                     }
                   ),
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx27(
                     ChevronRight2,
                     {
                       className: "shrink-0 text-slate-400",
@@ -1896,8 +2059,8 @@ function Breadcrumbs({ items, className }) {
 import {
   ToggleButton as AriaToggleButton2
 } from "react-aria-components";
-import { twMerge as twMerge9 } from "tailwind-merge";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var squareSizeStyles2 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-7 w-7 text-sm",
@@ -1942,11 +2105,11 @@ function ToggleButton({
   ...props
 }) {
   const styles = variantStyles3[variant];
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx28(
     AriaToggleButton2,
     {
       ...props,
-      className: ({ isSelected }) => twMerge9(
+      className: ({ isSelected }) => twMerge12(
         "inline-flex items-center justify-center gap-2 cursor-pointer",
         isSquare ? "rounded-none" : "rounded-md",
         "font-medium",
@@ -1969,7 +2132,7 @@ import {
   MenuItem as AriaMenuItem,
   Popover as Popover2
 } from "react-aria-components";
-import { twMerge as twMerge10 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 // src/components/Menu/menuStyles.ts
 var popoverStyles = `
@@ -1981,8 +2144,8 @@ var popoverStyles = `
 `;
 // src/components/Menu/Menu.tsx
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
-function Menu({
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+function Menu2({
   items,
   content,
   children,
@@ -1996,7 +2159,7 @@ function Menu({
   const selectionProps = selectionMode && selectionMode !== "none" ? { selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange } : {};
   return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
     children,
-    /* @__PURE__ */ jsx24(Popover2, { className: twMerge10(popoverStyles, className), children: items ? /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx29(Popover2, { className: twMerge13(popoverStyles, className), children: items ? /* @__PURE__ */ jsx29(
       AriaMenu,
       {
         items,
@@ -2023,14 +2186,14 @@ function Menu({
               item.isDanger ? "text-destructive" : "text-foreground"
             ].filter(Boolean).join(" "),
             children: [
-              item.icon && /* @__PURE__ */ jsx24(Icon, { icon: item.icon, size: "sm" }),
-              /* @__PURE__ */ jsx24("span", { className: "flex-1", children: item.label }),
-              item.endContent && /* @__PURE__ */ jsx24("span", { className: "ml-auto flex items-center", children: item.endContent })
+              item.icon && /* @__PURE__ */ jsx29(Icon, { icon: item.icon, size: "sm" }),
+              /* @__PURE__ */ jsx29("span", { className: "flex-1", children: item.label }),
+              item.endContent && /* @__PURE__ */ jsx29("span", { className: "ml-auto flex items-center", children: item.endContent })
             ]
           }
         )
       }
-    ) : /* @__PURE__ */ jsx24(
+    ) : /* @__PURE__ */ jsx29(
       AriaMenu,
       {
         onAction: (key) => onAction?.(key),
@@ -2055,8 +2218,8 @@ import {
   Popover as Popover3,
   Pressable
 } from "react-aria-components";
-import { twMerge as twMerge11 } from "tailwind-merge";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { twMerge as twMerge14 } from "tailwind-merge";
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 function useContextMenu({
   content,
   onAction,
@@ -2106,7 +2269,7 @@ function useContextMenu({
         if (!open) close();
       },
       children: [
-        /* @__PURE__ */ jsx25(Pressable, { children: /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx30(Pressable, { children: /* @__PURE__ */ jsx30(
           "span",
           {
             ref: anchorRef,
@@ -2115,14 +2278,14 @@ function useContextMenu({
             style: { left: anchor?.x ?? 0, top: anchor?.y ?? 0 }
           }
         ) }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx30(
           Popover3,
           {
             isNonModal: true,
             placement: "bottom start",
             ref: popoverRef,
-            className: twMerge11(popoverStyles, className),
-            children: /* @__PURE__ */ jsx25(
+            className: twMerge14(popoverStyles, className),
+            children: /* @__PURE__ */ jsx30(
               AriaMenu2,
               {
                 autoFocus: "first",
@@ -2150,7 +2313,7 @@ function useContextMenu({
 // src/components/Menu/MenuItem.tsx
 import { MenuItem as AriaMenuItem2 } from "react-aria-components";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function MenuItem({
   id,
   children,
@@ -2183,9 +2346,9 @@ function MenuItem({
         className
       ].filter(Boolean).join(" "),
       children: [
-        icon && /* @__PURE__ */ jsx26(Icon, { icon, size: "sm" }),
-        /* @__PURE__ */ jsx26("span", { className: "flex-1", children }),
-        endContent && /* @__PURE__ */ jsx26("span", { className: "ml-auto flex items-center", children: endContent })
+        icon && /* @__PURE__ */ jsx31(Icon, { icon, size: "sm" }),
+        /* @__PURE__ */ jsx31("span", { className: "flex-1", children }),
+        endContent && /* @__PURE__ */ jsx31("span", { className: "ml-auto flex items-center", children: endContent })
       ]
     }
   );
@@ -2194,7 +2357,7 @@ function MenuItem({
 // src/components/Menu/MenuCheckboxItem.tsx
 import { MenuItem as AriaMenuItem3 } from "react-aria-components";
 import { Check as Check4 } from "lucide-react";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function MenuCheckboxItem({
   id,
   children,
@@ -2202,7 +2365,7 @@ function MenuCheckboxItem({
   isDisabled,
   className
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx32(
     AriaMenuItem3,
     {
       id,
@@ -2219,8 +2382,8 @@ function MenuCheckboxItem({
         className
       ].filter(Boolean).join(" "),
       children: ({ isSelected }) => /* @__PURE__ */ jsxs21(Fragment7, { children: [
-        /* @__PURE__ */ jsx27("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx27(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsx27("span", { className: "flex-1", children })
+        /* @__PURE__ */ jsx32("span", { className: "flex items-center justify-center w-4 h-4 shrink-0", children: isSelected && /* @__PURE__ */ jsx32(Check4, { size: 14, className: "text-primary", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx32("span", { className: "flex-1", children })
       ] })
     }
   );
@@ -2231,7 +2394,7 @@ import {
   MenuSection as AriaMenuSection,
   Header
 } from "react-aria-components";
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function MenuSection({
   header,
   children,
@@ -2239,7 +2402,7 @@ function MenuSection({
   className
 }) {
   return /* @__PURE__ */ jsxs22(AriaMenuSection, { className, "aria-label": ariaLabel, children: [
-    header && /* @__PURE__ */ jsx28(
+    header && /* @__PURE__ */ jsx33(
       Header,
       {
         className: [
@@ -2258,16 +2421,16 @@ function MenuSection({
 // src/components/Menu/MenuHeader.tsx
 import { Header as Header2 } from "react-aria-components";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function MenuHeader({ children, className }) {
-  return /* @__PURE__ */ jsx29(Header2, { className, children });
+  return /* @__PURE__ */ jsx34(Header2, { className, children });
 }
 // src/components/Menu/MenuSeparator.tsx
 import { Separator } from "react-aria-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx35(
     Separator,
     {
       className: [
@@ -2284,17 +2447,17 @@ import {
   Popover as AriaPopover,
   Button as AriaButton3
 } from "react-aria-components";
-import { twMerge as twMerge12 } from "tailwind-merge";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Popover4({ children, isOpen, onOpenChange }) {
-  return /* @__PURE__ */ jsx31(DialogTrigger, { isOpen, onOpenChange, children });
+  return /* @__PURE__ */ jsx36(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-ring focus-visible:rounded-sm
   `;
-  return /* @__PURE__ */ jsx31(AriaButton3, { className: twMerge12(cx, className), children });
+  return /* @__PURE__ */ jsx36(AriaButton3, { className: twMerge15(cx, className), children });
 }
 function PopoverContent({
   placement = "bottom",
@@ -2315,13 +2478,13 @@ function PopoverContent({
     entering:placement-left:slide-in-from-right-1
     entering:placement-right:slide-in-from-left-1
   `;
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx36(
     AriaPopover,
     {
       ...rest,
       placement,
       offset: offsetPx,
-      className: twMerge12(cx, className),
+      className: twMerge15(cx, className),
       children
     }
   );
@@ -2329,19 +2492,19 @@ function PopoverContent({
 // src/components/Tabs/Tabs.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import {
   Tabs as AriaTabs,
   TabList as AriaTabList,
   Tab as AriaTab,
   TabPanel as AriaTabPanel
 } from "react-aria-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var TabsContext = createContext2({
   variant: "underline",
   size: "md"
 });
-var sizeStyles4 = {
+var sizeStyles3 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-base",
   lg: "px-6 py-3 text-lg"
@@ -2354,12 +2517,12 @@ function Tabs({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx37(
     AriaTabs,
     {
       ...props,
       orientation,
-      className: twMerge13(
+      className: twMerge16(
         orientation === "vertical" ? "flex" : "",
         className
       ),
@@ -2374,11 +2537,11 @@ function TabList({
   const { variant } = useContext2(TabsContext);
   const baseStyles = variant === "unstyled" ? "flex items-center" : variant === "underline" ? "flex items-center border-b border-border" : "inline-flex items-center bg-muted rounded-lg p-1 gap-1";
   const verticalStyles = variant === "unstyled" ? "flex-col" : variant === "underline" ? "flex-col border-b-0 border-r border-border" : "flex-col";
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     AriaTabList,
     {
       ...props,
-      className: ({ orientation }) => twMerge13(
+      className: ({ orientation }) => twMerge16(
         baseStyles,
         orientation === "vertical" ? verticalStyles : "",
         className
@@ -2388,20 +2551,20 @@ function TabList({
 }
 function Tab({ className, ...props }) {
   const { variant, size } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     AriaTab,
     {
       ...props,
       className: ({ isSelected, isDisabled, isHovered, isPressed }) => {
         if (variant === "unstyled") {
-          return twMerge13(
+          return twMerge16(
             "cursor-pointer outline-none",
             "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             isDisabled ? "opacity-50 pointer-events-none" : "",
             className
           );
         }
-        return twMerge13(
+        return twMerge16(
           // Base
           "cursor-pointer outline-none transition-colors",
           "font-medium",
@@ -2410,7 +2573,7 @@ function Tab({ className, ...props }) {
           // Disabled
           isDisabled ? "opacity-50 pointer-events-none" : "",
           // Size
-          sizeStyles4[size],
+          sizeStyles3[size],
           ...getTabVariantStyles(variant, {
             isSelected,
             isHovered,
@@ -2445,11 +2608,11 @@ function getTabVariantStyles(variant, state) {
 }
 function TabPanel({ className, ...props }) {
   const { variant } = useContext2(TabsContext);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx37(
     AriaTabPanel,
     {
       ...props,
-      className: twMerge13(
+      className: twMerge16(
         variant === "unstyled" ? "outline-none" : "mt-4 outline-none",
         className
       )
@@ -2467,16 +2630,16 @@ import {
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
-import { twMerge as twMerge14 } from "tailwind-merge";
+import { twMerge as twMerge17 } from "tailwind-merge";
 import {
   ToggleButtonGroup as AriaToggleButtonGroup,
   ToggleButton as AriaToggleButton3
 } from "react-aria-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var SegmentedControlContext = createContext3({
   size: "md"
 });
-var sizeStyles5 = {
+var sizeStyles4 = {
   sm: "px-2.5 py-1 text-xs",
   md: "px-3 py-1.5 text-sm",
   lg: "px-4 py-2 text-base"
@@ -2492,7 +2655,7 @@ function SegmentedControl({
   ...props
 }) {
   const isNoneMode = selectionMode === "none";
-  return /* @__PURE__ */ jsx33(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx38(SegmentedControlContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx38(
     AriaToggleButtonGroup,
     {
       ...props,
@@ -2500,7 +2663,7 @@ function SegmentedControl({
       selectedKeys: isNoneMode ? /* @__PURE__ */ new Set() : selectedKeys,
       defaultSelectedKeys: isNoneMode ? void 0 : defaultSelectedKeys,
       onSelectionChange: isNoneMode ? void 0 : onSelectionChange,
-      className: twMerge14(
+      className: twMerge17(
         "inline-flex items-center rounded-lg border border-border bg-muted p-0.5 gap-0.5",
         className
       ),
@@ -2513,11 +2676,11 @@ function SegmentedControlItem({
   ...props
 }) {
   const { size } = useContext3(SegmentedControlContext);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx38(
     AriaToggleButton3,
     {
       ...props,
-      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge14(
+      className: ({ isSelected, isHovered, isPressed, isDisabled }) => twMerge17(
         // Base layout
         "inline-flex items-center justify-center",
         "rounded-md",
@@ -2528,7 +2691,7 @@ function SegmentedControlItem({
         // Disabled
         isDisabled && "opacity-50 pointer-events-none",
         // Size
-        sizeStyles5[size],
+        sizeStyles4[size],
         // Selected state
         isSelected ? "bg-background text-foreground shadow-sm font-semibold" : isPressed ? "bg-card text-foreground" : isHovered ? "bg-card text-foreground" : "bg-transparent text-muted-foreground",
         className
@@ -2538,40 +2701,43 @@ function SegmentedControlItem({
 }
 // src/components/Badge/Badge.tsx
-import { twMerge as twMerge15 } from "tailwind-merge";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
-var variantStyles4 = {
-  neutral: "bg-badge-neutral-bg text-badge-neutral-text",
-  purple: "bg-badge-purple-bg text-badge-purple-text",
-  teal: "bg-badge-teal-bg text-badge-teal-text",
-  rose: "bg-badge-rose-bg text-badge-rose-text",
-  slate: "bg-badge-slate-bg text-badge-slate-text",
-  green: "bg-badge-green-bg text-badge-green-text",
-  amber: "bg-badge-amber-bg text-badge-amber-text"
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+var colorStyles = {
+  purple: "bg-badge-purple-bg text-badge-purple-text border-badge-purple-text/20",
+  teal: "bg-badge-teal-bg text-badge-teal-text border-badge-teal-text/20",
+  rose: "bg-badge-rose-bg text-badge-rose-text border-badge-rose-text/20",
+  slate: "bg-badge-slate-bg text-badge-slate-text border-badge-slate-text/20",
+  green: "bg-badge-green-bg text-badge-green-text border-badge-green-text/20",
+  amber: "bg-badge-amber-bg text-badge-amber-text border-badge-amber-text/20"
 };
-var sizeStyles6 = {
-  sm: "px-1.5 py-0.5",
-  md: "px-2 py-0.5"
+var sizeStyles5 = {
+  xs: "px-1 py-0 text-[10px]",
+  sm: "px-1.5 py-0.5 text-xs",
+  md: "px-2 py-0.5 text-xs",
+  lg: "px-2.5 py-1 text-sm"
 };
 function Badge({
   children,
-  variant = "neutral",
+  color = "slate",
   size = "sm",
   icon,
-  className
+  className,
+  ...rest
 }) {
   return /* @__PURE__ */ jsxs23(
     "span",
     {
-      className: twMerge15(
-        "inline-flex items-center gap-1 rounded-full",
-        "text-xs font-medium leading-tight tracking-wider tabular-nums",
-        variantStyles4[variant],
-        sizeStyles6[size],
+      className: twMerge18(
+        "inline-flex items-center gap-1 rounded-full border",
+        "font-medium leading-tight tracking-wider tabular-nums",
+        colorStyles[color],
+        sizeStyles5[size],
         className
       ),
+      ...rest,
       children: [
-        icon && /* @__PURE__ */ jsx34(Icon, { icon, size: "xs" }),
+        icon && /* @__PURE__ */ jsx39(Icon, { icon, size: "xs" }),
         children
       ]
     }
@@ -2579,87 +2745,29 @@ function Badge({
 }
 // src/components/Card/Card.tsx
-import { useCallback as useCallback4 } from "react";
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
-var paddingStyles = {
-  none: "p-0",
-  sm: "p-3",
-  md: "p-4",
-  lg: "p-6"
-};
-function Card({
-  children,
-  header,
-  footer,
-  padding = "md",
-  href,
-  onPress,
-  interactive = false,
-  className
-}) {
-  const isInteractive = interactive || !!href || !!onPress;
-  const containerClass = twMerge16(
-    "bg-background border border-border rounded-lg overflow-hidden shadow-sm",
-    isInteractive && "transition-all hover:shadow-md hover:border-ring cursor-pointer",
-    (href || onPress) && "block focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+function Card({ children, header, footer, className }) {
+  const cx = twMerge19(
+    `
+      bg-card p-8
+      border border-border
+      rounded-lg
+      shadow-sm
+    `,
     className
   );
-  const handleKeyDown = useCallback4(
-    (e) => {
-      if (onPress && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault();
-        onPress();
-      }
-    },
-    [onPress]
-  );
-  const content = /* @__PURE__ */ jsxs24(Fragment8, { children: [
-    header && /* @__PURE__ */ jsx35(
-      "div",
-      {
-        className: twMerge16(
-          "border-b border-border",
-          paddingStyles[padding]
-        ),
-        children: header
-      }
-    ),
-    /* @__PURE__ */ jsx35("div", { className: paddingStyles[padding], children }),
-    footer && /* @__PURE__ */ jsx35(
-      "div",
-      {
-        className: twMerge16(
-          "border-t border-border",
-          paddingStyles[padding]
-        ),
-        children: footer
-      }
-    )
+  return /* @__PURE__ */ jsxs24("div", { className: cx, children: [
+    header && /* @__PURE__ */ jsx40("div", { className: "border-b border-border", children: header }),
+    children,
+    footer && /* @__PURE__ */ jsx40("div", { className: "border-t border-border", children: footer })
   ] });
-  if (href) {
-    return /* @__PURE__ */ jsx35("a", { href, className: containerClass, children: content });
-  }
-  if (onPress) {
-    return /* @__PURE__ */ jsx35(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        className: containerClass,
-        onClick: onPress,
-        onKeyDown: handleKeyDown,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx35("div", { className: containerClass, children: content });
 }
 // src/components/DeltaIndicator/DeltaIndicator.tsx
 import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, Minus as Minus2 } from "lucide-react";
-import { twMerge as twMerge17 } from "tailwind-merge";
-import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
 function getDirection(current, previous) {
   const diff = current - previous;
   if (diff > 0) return "increase";
@@ -2715,13 +2823,13 @@ function DeltaIndicator({
     return /* @__PURE__ */ jsxs25(
       "span",
       {
-        className: twMerge17(
+        className: twMerge20(
           "inline-flex items-center gap-1 font-medium",
           "text-muted-foreground",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+          label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
           unavailableText
         ]
       }
@@ -2754,7 +2862,7 @@ function DeltaIndicator({
   return /* @__PURE__ */ jsxs25(
     "span",
     {
-      className: twMerge17(
+      className: twMerge20(
         "inline-flex items-center gap-1 font-medium",
         colorStyles2,
         isPill && [
@@ -2765,8 +2873,8 @@ function DeltaIndicator({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsx36("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
-        /* @__PURE__ */ jsx36(IconComponent, { size: 14, "aria-hidden": true }),
+        label && /* @__PURE__ */ jsx41("span", { className: "text-sm text-muted-foreground mr-1", children: label }),
+        /* @__PURE__ */ jsx41(IconComponent, { size: 14, "aria-hidden": true }),
         valueText
       ]
     }
@@ -2774,8 +2882,8 @@ function DeltaIndicator({
 }
 // src/components/ProgressBar/ProgressBar.tsx
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var fillStyles = {
   brand: "bg-progress-fill",
   success: "bg-progress-fill-success",
@@ -2783,7 +2891,7 @@ var fillStyles = {
   danger: "bg-progress-fill-danger",
   neutral: "bg-muted-foreground"
 };
-var sizeStyles7 = {
+var sizeStyles6 = {
   sm: "h-1.5",
   md: "h-3",
   lg: "h-4"
@@ -2798,12 +2906,12 @@ function ProgressBar({
   className
 }) {
   const clampedValue = Math.min(100, Math.max(0, value));
-  return /* @__PURE__ */ jsxs26("div", { className: twMerge18("w-full", className), children: [
+  return /* @__PURE__ */ jsxs26("div", { className: twMerge21("w-full", className), children: [
     (label || description || showValue) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium text-foreground", children: label }),
-      /* @__PURE__ */ jsx37("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
+      /* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsx42("span", { className: "text-sm text-muted-foreground", children: description ?? (showValue ? `${clampedValue}%` : null) })
     ] }),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         role: "progressbar",
@@ -2811,14 +2919,14 @@ function ProgressBar({
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-label": label ?? "Progress",
-        className: twMerge18(
+        className: twMerge21(
           "w-full rounded-full bg-progress-track",
-          sizeStyles7[size]
+          sizeStyles6[size]
         ),
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx42(
           "div",
           {
-            className: twMerge18(
+            className: twMerge21(
               "h-full rounded-full transition-all duration-300",
               fillStyles[variant]
             ),
@@ -2838,8 +2946,8 @@ import {
   AlertCircle as AlertCircle2,
   CheckCircle2 as CheckCircle22
 } from "lucide-react";
-import { twMerge as twMerge19 } from "tailwind-merge";
-import { jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
+import { twMerge as twMerge22 } from "tailwind-merge";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 var variantConfig2 = {
   info: {
     icon: Info3,
@@ -2887,19 +2995,19 @@ function Banner({
     "div",
     {
       role: config.role,
-      className: twMerge19(
+      className: twMerge22(
         "flex items-start gap-3 rounded-lg border px-4 py-3",
         "text-sm",
         config.containerClass,
         className
       ),
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx43(
           Icon,
           {
             icon: resolvedIcon,
             size: "md",
-            className: twMerge19("mt-0.5", config.iconClass)
+            className: twMerge22("mt-0.5", config.iconClass)
           }
         ),
         /* @__PURE__ */ jsxs27("div", { className: "flex-1", children: [
@@ -2909,14 +3017,14 @@ function Banner({
           ] }),
           children
         ] }),
-        dismissible && /* @__PURE__ */ jsx38(
+        dismissible && /* @__PURE__ */ jsx43(
           "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__ */ jsx38(Icon, { icon: "X", size: "sm" })
+            children: /* @__PURE__ */ jsx43(Icon, { icon: "X", size: "sm" })
           }
         )
       ]
@@ -2925,8 +3033,8 @@ function Banner({
 }
 // src/components/MetricCard/MetricCard.tsx
-import { twMerge as twMerge20 } from "tailwind-merge";
-import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
+import { twMerge as twMerge23 } from "tailwind-merge";
+import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeConfig = {
   sm: {
     padding: "p-3",
@@ -2948,101 +3056,119 @@ function MetricCard({
   className
 }) {
   const config = sizeConfig[size];
-  const containerClass = twMerge20(
+  const containerClass = twMerge23(
     "bg-background border border-border rounded-lg shadow-sm",
     config.padding,
     href && "block transition-shadow hover:shadow-md hover:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none",
     className
   );
-  const content = /* @__PURE__ */ jsxs28(Fragment9, { children: [
-    /* @__PURE__ */ jsx39("div", { className: twMerge20(config.labelClass, "text-muted-foreground"), children: label }),
-    /* @__PURE__ */ jsx39(
+  const content = /* @__PURE__ */ jsxs28(Fragment8, { children: [
+    /* @__PURE__ */ jsx44("div", { className: twMerge23(config.labelClass, "text-muted-foreground"), children: label }),
+    /* @__PURE__ */ jsx44(
       "div",
       {
-        className: twMerge20(
+        className: twMerge23(
           config.valueClass,
           "font-semibold text-foreground mt-1 tabular-nums"
         ),
         children: value
       }
     ),
-    secondary && /* @__PURE__ */ jsx39("div", { className: "mt-1 text-sm", children: secondary })
+    secondary && /* @__PURE__ */ jsx44("div", { className: "mt-1 text-sm", children: secondary })
   ] });
   if (href) {
-    return /* @__PURE__ */ jsx39("a", { href, className: containerClass, children: content });
+    return /* @__PURE__ */ jsx44("a", { href, className: containerClass, children: content });
   }
-  return /* @__PURE__ */ jsx39("div", { className: containerClass, children: content });
+  return /* @__PURE__ */ jsx44("div", { className: containerClass, children: content });
 }
 // src/components/SectionHeader/SectionHeader.tsx
-import { twMerge as twMerge21 } from "tailwind-merge";
-import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
-function SectionHeader({
-  title,
+import { forwardRef as forwardRef7 } from "react";
+import { twMerge as twMerge24 } from "tailwind-merge";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+var SectionHeader = forwardRef7(
+  function SectionHeader2({ title, as = "h2", children, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs29(
+      "div",
+      {
+        ref,
+        className: twMerge24(
+          "flex flex-wrap items-center gap-3 pt-0 pb-4",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx45(Heading, { as, children: title }),
+          children && /* @__PURE__ */ jsx45("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
+        ]
+      }
+    );
+  }
+);
+// src/components/DescriptionList/DescriptionList.tsx
+import { createContext as createContext4, useContext as useContext4 } from "react";
+import { Button as AriaButton4 } from "react-aria-components";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+var LayoutContext = createContext4("stacked");
+var listGapStyles = {
+  stacked: "gap-4",
+  horizontal: "gap-3"
+};
+function DescriptionList({
   children,
+  layout = "stacked",
   className
 }) {
-  return /* @__PURE__ */ jsxs29(
-    "div",
+  return /* @__PURE__ */ jsx46(LayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx46(
+    "dl",
     {
-      className: twMerge21(
-        "flex flex-wrap items-center gap-3 py-4",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx40(H2, { children: title }),
-        children && /* @__PURE__ */ jsx40("div", { className: "ml-auto flex flex-wrap items-center gap-2", children })
-      ]
+      className: ["flex flex-col", listGapStyles[layout], className].filter(Boolean).join(" "),
+      children
     }
-  );
+  ) });
 }
-// src/components/Pill/Pill.tsx
-import { twMerge as twMerge22 } from "tailwind-merge";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var hashColors = {
-  purple: "bg-badge-purple-bg text-badge-purple-text border-badge-purple-text/20",
-  teal: "bg-badge-teal-bg text-badge-teal-text border-badge-teal-text/20",
-  rose: "bg-badge-rose-bg text-badge-rose-text border-badge-rose-text/20",
-  green: "bg-badge-green-bg text-badge-green-text border-badge-green-text/20",
-  amber: "bg-badge-amber-bg text-badge-amber-text border-badge-amber-text/20"
-};
-var colorStyles = {
-  ...hashColors,
-  slate: "bg-badge-slate-bg text-badge-slate-text border-badge-slate-text/20"
+var itemLayoutStyles = {
+  stacked: "flex flex-col gap-1",
+  horizontal: "grid grid-cols-[140px_1fr] gap-x-(--spacing-4) items-baseline"
 };
-var hashKeys = Object.keys(hashColors);
+var labelClasses = "text-sm font-medium text-foreground";
+function DescriptionListItem({
+  label,
+  children,
+  muted = false,
+  fullValue
+}) {
+  const layout = useContext4(LayoutContext);
+  const valueClasses = [
+    "text-sm m-0",
+    muted ? "text-muted-foreground" : "text-foreground"
+  ].join(" ");
+  const valueContent = /* @__PURE__ */ jsx46("dd", { className: valueClasses, children });
+  return /* @__PURE__ */ jsxs30("div", { className: itemLayoutStyles[layout], children: [
+    /* @__PURE__ */ jsx46("dt", { className: labelClasses, children: label }),
+    fullValue ? /* @__PURE__ */ jsx46(Tooltip, { content: fullValue, children: /* @__PURE__ */ jsx46(AriaButton4, { className: "text-left outline-none cursor-default", children: valueContent }) }) : valueContent
+  ] });
+}
+DescriptionList.Item = DescriptionListItem;
+// src/components/PathPill/PathPill.tsx
+import { twMerge as twMerge25 } from "tailwind-merge";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var hashColors = [
+  "purple",
+  "teal",
+  "rose",
+  "green",
+  "amber"
+];
 function pillColorFromName(name = "") {
   let hash = 0;
   for (let i = 0; i < name.length; i++) {
     hash = name.charCodeAt(i) + ((hash << 5) - hash);
   }
-  return hashKeys[Math.abs(hash) % hashKeys.length];
+  return hashColors[Math.abs(hash) % hashColors.length];
 }
-function Pill({
-  children,
-  color = pillColorFromName(children),
-  className,
-  ...rest
-}) {
-  const cx = twMerge22(
-    `
-    inline-flex items-center
-    rounded-full
-    border
-    px-2 py-0.5
-    text-xs font-medium
-    leading-tight
-    `,
-    colorStyles[color],
-    className
-  );
-  return /* @__PURE__ */ jsx41("span", { className: cx, ...rest, children });
-}
-// src/components/Pill/PathPill.tsx
-import { twMerge as twMerge23 } from "tailwind-merge";
-import { jsx as jsx42 } from "react/jsx-runtime";
 function PathPill({
   children,
   visibleCount,
@@ -3054,18 +3180,18 @@ function PathPill({
   const effectiveVisible = visibleCount ?? segments.length;
   const dotCount = Math.max(0, segments.length - effectiveVisible);
   const fullPath = segments.join(" / ");
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
-      className: twMerge23("relative flex", className),
+      className: twMerge25("relative flex", className),
       "aria-label": `Path: ${fullPath}`,
       children: segments.map((segment, i) => {
         const isCollapsed = i < dotCount;
         const isLast = i === segments.length - 1;
-        const cx = twMerge23(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
+        const cx = twMerge25(!isLast && "pr-5 -mr-4", isCollapsed && "pr-3");
         const color = colorFn ? colorFn(segment, i) : pillColorFromName(segment);
-        return /* @__PURE__ */ jsx42(
-          Pill,
+        return /* @__PURE__ */ jsx47(
+          Badge,
           {
             className: cx,
             color,
@@ -3080,9 +3206,9 @@ function PathPill({
 }
 // src/components/FormWizard/FormWizard.tsx
-import { createContext as createContext4, useContext as useContext4, useCallback as useCallback5, useMemo } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var FormWizardContext = createContext4({
+import { createContext as createContext5, useContext as useContext5, useCallback as useCallback4, useMemo } from "react";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var FormWizardContext = createContext5({
   currentStep: 0,
   totalSteps: 1,
   canGoBack: false,
@@ -3091,7 +3217,7 @@ var FormWizardContext = createContext4({
   isLastStep: true
 });
 function useFormWizard() {
-  return useContext4(FormWizardContext);
+  return useContext5(FormWizardContext);
 }
 function FormWizard({
   currentStep,
@@ -3101,7 +3227,7 @@ function FormWizard({
 }) {
   const canGoBack = currentStep > 0;
   const isLastStep = currentStep >= totalSteps - 1;
-  const goBack = useCallback5(() => {
+  const goBack = useCallback4(() => {
     if (currentStep > 0) {
       onStepChange(currentStep - 1);
     }
@@ -3116,13 +3242,13 @@ function FormWizard({
     }),
     [currentStep, totalSteps, canGoBack, goBack, isLastStep]
   );
-  return /* @__PURE__ */ jsx43(FormWizardContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx48(FormWizardContext.Provider, { value, children });
 }
 // src/components/FormWizard/FormWizardProgress.tsx
-import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 function CheckIcon() {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     "svg",
     {
       "aria-hidden": "true",
@@ -3133,24 +3259,24 @@ function CheckIcon() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx44("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+      children: /* @__PURE__ */ jsx49("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
     }
   );
 }
 function FormWizardProgress({ labels }) {
   const { currentStep, totalSteps } = useFormWizard();
-  return /* @__PURE__ */ jsx44("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx44("ol", { className: "flex items-start", role: "list", children: labels.map((label, index) => {
+  return /* @__PURE__ */ jsx49("nav", { "aria-label": "Form progress", children: /* @__PURE__ */ jsx49("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__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31(
       "li",
       {
         className: "flex flex-1 flex-col items-center",
         "aria-current": isCurrent ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsxs30("div", { className: "flex w-full items-center", children: [
-            index > 0 ? /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsxs31("div", { className: "flex w-full items-center", children: [
+            index > 0 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
@@ -3159,8 +3285,8 @@ function FormWizardProgress({ labels }) {
                   index <= currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx44(
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx49(
               "div",
               {
                 className: [
@@ -3172,10 +3298,10 @@ function FormWizardProgress({ labels }) {
                   isFuture ? "border-2 border-border bg-background text-muted-foreground" : ""
                 ].join(" "),
                 "aria-hidden": "true",
-                children: isCompleted ? /* @__PURE__ */ jsx44(CheckIcon, {}) : index + 1
+                children: isCompleted ? /* @__PURE__ */ jsx49(CheckIcon, {}) : index + 1
               }
             ),
-            index < totalSteps - 1 ? /* @__PURE__ */ jsx44(
+            index < totalSteps - 1 ? /* @__PURE__ */ jsx49(
               "div",
               {
                 "aria-hidden": "true",
@@ -3184,9 +3310,9 @@ function FormWizardProgress({ labels }) {
                   index < currentStep ? "bg-primary" : "bg-border"
                 ].join(" ")
               }
-            ) : /* @__PURE__ */ jsx44("div", { className: "flex-1", "aria-hidden": "true" })
+            ) : /* @__PURE__ */ jsx49("div", { className: "flex-1", "aria-hidden": "true" })
           ] }),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx49(
             "span",
             {
               className: [
@@ -3204,15 +3330,15 @@ function FormWizardProgress({ labels }) {
 }
 // src/components/FormWizard/FormWizardNav.tsx
-import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
 function FormWizardNav({
   onNext,
   isSubmitting = false,
   submitLabel = "Submit"
 }) {
   const { canGoBack, goBack, isLastStep } = useFormWizard();
-  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-3", children: [
-    canGoBack && /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-end gap-3", children: [
+    canGoBack && /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "secondary",
@@ -3222,7 +3348,7 @@ function FormWizardNav({
         children: "Back"
       }
     ),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx50(
       Button,
       {
         variant: "primary",
@@ -3243,10 +3369,10 @@ export {
   Card,
   Cell,
   Checkbox,
-  ColorPurple700,
-  ColorTeal500,
   Column,
   DeltaIndicator,
+  Description,
+  DescriptionList,
   Dialog,
   EmptyState,
   Fieldset,
@@ -3256,7 +3382,10 @@ export {
   H1,
   H2,
   H3,
-  Heading2 as Heading,
+  H4,
+  H5,
+  H6,
+  Heading,
   Icon,
   IconButton,
   IconButtonLink,
@@ -3265,7 +3394,8 @@ export {
   InputPassword,
   Label,
   Link,
-  Menu,
+  Logo,
+  Menu2 as Menu,
   MenuCheckboxItem,
   MenuHeader,
   MenuItem,
@@ -3273,11 +3403,11 @@ export {
   MenuSeparator,
   MetricCard,
   PathPill,
-  Pill,
   Popover4 as Popover,
   PopoverContent,
   PopoverTrigger,
   ProgressBar,
+  Prose,
   Radio,
   RadioButton,
   RadioGroup,