@cytario/design 1.6.1 → 1.8.0

package/dist/index.js

@@ -1,33 +1,2362 @@
 "use client";
-// React Aria re-exports for consumer integration
-export { RouterProvider } from "react-aria-components";
-// Components
-export { Button } from "./components/Button";
-export { Spinner } from "./components/Spinner";
-export { Icon } from "./components/Icon";
-export { Tooltip } from "./components/Tooltip";
-export { IconButton } from "./components/IconButton";
-export { Input } from "./components/Input";
-export { Select } from "./components/Select";
-export { Table, TableHeader, Column, TableBody, Row, Cell } from "./components/Table";
-export { Dialog } from "./components/Dialog";
-export { ToastProvider, useToast, createToastBridge } from "./components/Toast";
-export { EmptyState } from "./components/EmptyState";
-export { Checkbox } from "./components/Checkbox";
-export { Switch } from "./components/Switch";
-export { RadioGroup, Radio, RadioButton } from "./components/Radio";
-export { Label } from "./components/Label";
-export { Field } from "./components/Field";
-export { Fieldset } from "./components/Fieldset";
-export { InputGroup, InputGroupContext, useInputGroup } from "./components/InputGroup";
-export { InputAddon } from "./components/InputAddon";
-export { Heading, H1, H2, H3 } from "./components/Heading";
-export { Link } from "./components/Link";
-export { Breadcrumbs } from "./components/Breadcrumbs";
-export { ButtonLink, IconButtonLink } from "./components/ButtonLink";
-export { ToggleButton } from "./components/ToggleButton";
-export { Menu } from "./components/Menu";
-export { Popover, PopoverTrigger, PopoverContent } from "./components/Popover";
-export { Tabs, TabList, Tab, TabPanel } from "./components/Tabs";
-// Design tokens (TypeScript constants)
-export * from "./tokens/tokens";
+
+// src/index.ts
+import { RouterProvider } from "react-aria-components";
+
+// src/components/Button/Button.tsx
+import {
+  Button as AriaButton
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+
+// src/components/_shared/styles.ts
+var variantStyles = {
+  primary: [
+    "bg-[var(--color-action-primary)] text-[var(--color-text-inverse)]",
+    "hover:bg-[var(--color-action-primary-hover)]",
+    "pressed:bg-[var(--color-action-primary-active)]"
+  ].join(" "),
+  secondary: [
+    "bg-transparent text-[var(--color-action-secondary)]",
+    "border border-[var(--color-border-brand)]",
+    "hover:bg-[var(--color-purple-50)]",
+    "pressed:bg-[var(--color-purple-100)]"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-[var(--color-text-primary)]",
+    "hover:bg-[var(--color-neutral-100)]",
+    "pressed:bg-[var(--color-neutral-200)]"
+  ].join(" "),
+  destructive: [
+    "bg-[var(--color-action-danger)] text-[var(--color-text-inverse)]",
+    "hover:bg-[var(--color-action-danger-hover)]",
+    "pressed:bg-[var(--color-action-danger-hover)]"
+  ].join(" "),
+  default: [
+    "bg-[var(--color-action-default)] text-[var(--color-text-inverse)]",
+    "hover:bg-[var(--color-action-default-hover)]",
+    "pressed:bg-[var(--color-slate-600)]"
+  ].join(" "),
+  success: [
+    "bg-[var(--color-action-success)] text-[var(--color-text-inverse)]",
+    "hover:bg-[var(--color-action-success-hover)]",
+    "pressed:bg-[var(--color-green-800)]"
+  ].join(" "),
+  info: [
+    "bg-[var(--color-action-info)] text-[var(--color-text-inverse)]",
+    "hover:bg-[var(--color-action-info-hover)]",
+    "pressed:bg-[var(--color-slate-800)]"
+  ].join(" "),
+  neutral: [
+    "bg-white text-[var(--color-text-primary)]",
+    "border border-[var(--color-neutral-300)]",
+    "hover:bg-[var(--color-neutral-50)]",
+    "pressed:bg-[var(--color-neutral-100)]"
+  ].join(" ")
+};
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+
+// src/components/Icon/Icon.tsx
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+function Icon({
+  icon: LucideComponent,
+  size = "md",
+  strokeWidth,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const isDecorative = !ariaLabel;
+  return /* @__PURE__ */ jsx(
+    LucideComponent,
+    {
+      size: sizeMap[size],
+      strokeWidth,
+      role: isDecorative ? void 0 : "img",
+      "aria-label": ariaLabel,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      className
+    }
+  );
+}
+
+// src/components/Spinner/Spinner.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var sizeMap2 = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+function Spinner({
+  size = "md",
+  "aria-label": ariaLabel,
+  className
+}) {
+  const isDecorative = !ariaLabel;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      role: isDecorative ? void 0 : "status",
+      "aria-label": ariaLabel,
+      "aria-hidden": isDecorative ? "true" : void 0,
+      className: [sizeMap2[size], "animate-spin", className].filter(Boolean).join(" "),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/InputGroup/InputGroupContext.ts
+import { createContext, useContext } from "react";
+var InputGroupContext = createContext({
+  inGroup: false,
+  position: "standalone"
+});
+function useInputGroup() {
+  return useContext(InputGroupContext);
+}
+
+// src/components/Button/Button.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var iconSizeMap = {
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+function groupRadiusClass(position) {
+  switch (position) {
+    case "start":
+      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+    case "middle":
+      return "rounded-none";
+    case "end":
+      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+    default:
+      return "rounded-[var(--border-radius-md)]";
+  }
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  isDisabled,
+  iconLeft,
+  iconRight,
+  className,
+  children,
+  ...props
+}) {
+  const { inGroup, position } = useInputGroup();
+  const radiusClass = inGroup ? groupRadiusClass(position) : "rounded-[var(--border-radius-md)]";
+  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
+  return /* @__PURE__ */ jsxs2(
+    AriaButton,
+    {
+      ...props,
+      isDisabled: isDisabled || isLoading,
+      className: twMerge(
+        "inline-flex items-center justify-center gap-2 shrink-0",
+        radiusClass,
+        "font-[var(--font-weight-medium)]",
+        "leading-[var(--line-height-tight)]",
+        "outline-none transition-colors",
+        focusRing,
+        "disabled:opacity-50 disabled:pointer-events-none",
+        isLoading ? "pointer-events-none" : "",
+        variantStyles[variant],
+        sizeStyles[size],
+        marginClass,
+        className
+      ),
+      children: [
+        isLoading && /* @__PURE__ */ jsx3(Spinner, { size: iconSizeMap[size] }),
+        !isLoading && iconLeft && /* @__PURE__ */ jsx3(Icon, { icon: iconLeft, size: iconSizeMap[size] }),
+        children,
+        !isLoading && iconRight && /* @__PURE__ */ jsx3(Icon, { icon: iconRight, size: iconSizeMap[size] })
+      ]
+    }
+  );
+}
+
+// src/components/Tooltip/Tooltip.tsx
+import {
+  Tooltip as AriaTooltip,
+  TooltipTrigger
+} from "react-aria-components";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  placement = "top",
+  delay = 500,
+  className
+}) {
+  return /* @__PURE__ */ jsxs3(TooltipTrigger, { delay, children: [
+    children,
+    /* @__PURE__ */ jsx4(
+      AriaTooltip,
+      {
+        placement,
+        className: [
+          "bg-[var(--color-surface-overlay)] backdrop-blur-sm",
+          "text-[var(--color-text-inverse)] text-sm",
+          "px-3 py-1.5",
+          "rounded-md",
+          "max-w-xs",
+          "entering:animate-in entering:fade-in entering:duration-150",
+          "exiting:animate-out exiting:fade-out exiting:duration-100",
+          "entering:placement-top:slide-in-from-bottom-1",
+          "entering:placement-bottom:slide-in-from-top-1",
+          "entering:placement-left:slide-in-from-right-1",
+          "entering:placement-right:slide-in-from-left-1",
+          className
+        ].filter(Boolean).join(" "),
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/IconButton/IconButton.tsx
+import {
+  Button as AriaButton2
+} from "react-aria-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var squareSizeStyles = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+var iconSizeMap2 = {
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+function groupRadiusClass2(position) {
+  switch (position) {
+    case "start":
+      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+    case "middle":
+      return "rounded-none";
+    case "end":
+      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+    default:
+      return "rounded-[var(--border-radius-md)]";
+  }
+}
+function IconButton({
+  icon,
+  "aria-label": ariaLabel,
+  variant = "ghost",
+  size = "md",
+  showTooltip = true,
+  tooltipPlacement = "top",
+  isLoading = false,
+  isDisabled,
+  className,
+  ...props
+}) {
+  const { inGroup, position } = useInputGroup();
+  const radiusClass = inGroup ? groupRadiusClass2(position) : "rounded-[var(--border-radius-md)]";
+  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
+  const focusRing = inGroup ? "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-0 focus-visible:z-10" : "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2";
+  const button = /* @__PURE__ */ jsx5(
+    AriaButton2,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      isDisabled: isDisabled || isLoading,
+      className: [
+        "inline-flex items-center justify-center shrink-0",
+        radiusClass,
+        "outline-none transition-colors",
+        focusRing,
+        "disabled:opacity-50 disabled:pointer-events-none",
+        isLoading ? "pointer-events-none" : "",
+        variantStyles[variant],
+        squareSizeStyles[size],
+        marginClass,
+        className
+      ].filter(Boolean).join(" "),
+      children: isLoading ? /* @__PURE__ */ jsx5(Spinner, { size: iconSizeMap2[size] }) : /* @__PURE__ */ jsx5(Icon, { icon, size: iconSizeMap2[size] })
+    }
+  );
+  if (showTooltip) {
+    return /* @__PURE__ */ jsx5(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: button });
+  }
+  return button;
+}
+
+// src/components/Input/Input.tsx
+import {
+  TextField,
+  Label,
+  Input as AriaInput,
+  Text
+} from "react-aria-components";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-4 py-3 text-lg"
+};
+var prefixSizeClasses = {
+  sm: "px-3 text-sm",
+  md: "px-3 text-base",
+  lg: "px-4 text-lg"
+};
+var alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function groupRadiusClasses(position) {
+  switch (position) {
+    case "start":
+      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+    case "middle":
+      return "rounded-none";
+    case "end":
+      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+    default:
+      return "rounded-[var(--border-radius-md)]";
+  }
+}
+function Input({
+  label,
+  placeholder,
+  description,
+  errorMessage,
+  type = "text",
+  size = "md",
+  prefix,
+  align = "left",
+  isDisabled,
+  isRequired,
+  className,
+  ...props
+}) {
+  const isInvalid = !!errorMessage;
+  const { inGroup, position } = useInputGroup();
+  const borderColor = isInvalid ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]";
+  const radiusClass = inGroup ? groupRadiusClasses(position) : "rounded-[var(--border-radius-md)]";
+  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
+  return /* @__PURE__ */ jsxs4(
+    TextField,
+    {
+      ...props,
+      type,
+      isDisabled,
+      isRequired,
+      isInvalid,
+      className: [
+        "flex flex-col gap-[var(--spacing-1)]",
+        inGroup ? "min-w-0 flex-1" : "",
+        marginClass,
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsxs4(
+          Label,
+          {
+            className: [
+              "text-[length:var(--font-size-sm)]",
+              "font-[number:var(--font-weight-medium)]",
+              "text-[var(--color-text-primary)]"
+            ].join(" "),
+            children: [
+              label,
+              isRequired && /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ml-0.5 text-[var(--color-text-danger)]",
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        prefix ? /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: [
+              "flex items-center overflow-hidden",
+              radiusClass,
+              "border",
+              "bg-[var(--color-surface-default)]",
+              "outline-none transition-colors",
+              borderColor,
+              "focus-within:ring-2 focus-within:ring-[var(--color-border-focus)] focus-within:border-[var(--color-border-focus)]",
+              inGroup ? "focus-within:z-10" : "",
+              isDisabled ? "opacity-50 pointer-events-none" : ""
+            ].filter(Boolean).join(" "),
+            children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  className: [
+                    "self-stretch flex items-center shrink-0 select-none",
+                    "bg-[var(--color-surface-subtle)]",
+                    "border-r border-r-[var(--color-border-default)]",
+                    "text-[var(--color-text-secondary)]",
+                    prefixSizeClasses[size]
+                  ].join(" "),
+                  children: prefix
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                AriaInput,
+                {
+                  placeholder,
+                  className: [
+                    "w-full bg-transparent",
+                    sizeClasses[size],
+                    alignClasses[align],
+                    "text-[var(--color-text-primary)]",
+                    "placeholder:text-[var(--color-text-tertiary)]",
+                    "outline-none border-none"
+                  ].join(" ")
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx6(
+          AriaInput,
+          {
+            placeholder,
+            className: [
+              "w-full",
+              sizeClasses[size],
+              alignClasses[align],
+              radiusClass,
+              "border",
+              "text-[var(--color-text-primary)]",
+              "bg-[var(--color-surface-default)]",
+              "placeholder:text-[var(--color-text-tertiary)]",
+              "outline-none transition-colors",
+              borderColor,
+              "focus:ring-2 focus:ring-[var(--color-border-focus)] focus:border-[var(--color-border-focus)]",
+              inGroup ? "focus:z-10" : "",
+              "disabled:opacity-50 disabled:pointer-events-none"
+            ].join(" ")
+          }
+        ),
+        description && !isInvalid && /* @__PURE__ */ jsx6(
+          Text,
+          {
+            slot: "description",
+            className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]",
+            children: description
+          }
+        ),
+        isInvalid && /* @__PURE__ */ jsx6(
+          Text,
+          {
+            slot: "errorMessage",
+            className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]",
+            children: errorMessage
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Select/Select.tsx
+import {
+  Button as Button2,
+  Label as Label2,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Select as AriaSelect,
+  SelectValue
+} from "react-aria-components";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ChevronDown() {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4 text-[var(--color-text-secondary)]",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("path", { d: "M4 6l4 4 4-4" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx7(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "h-4 w-4 text-[var(--color-action-primary)]",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx7("path", { d: "M3 8.5l3.5 3.5 6.5-7" })
+    }
+  );
+}
+function Select({
+  label,
+  items,
+  placeholder = "Select an option",
+  errorMessage,
+  isDisabled,
+  isRequired,
+  className,
+  ...props
+}) {
+  const hasError = Boolean(errorMessage);
+  return /* @__PURE__ */ jsxs5(
+    AriaSelect,
+    {
+      ...props,
+      isDisabled,
+      isRequired,
+      isInvalid: hasError,
+      className: ["flex flex-col gap-1", className].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsxs5(
+          Label2,
+          {
+            className: [
+              "text-sm font-[var(--font-weight-medium)] text-[var(--color-text-primary)]"
+            ].join(" "),
+            children: [
+              label,
+              isRequired && /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ml-0.5 text-[var(--color-text-danger)]",
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          Button2,
+          {
+            className: [
+              "inline-flex items-center justify-between",
+              "w-full rounded-[var(--border-radius-md)] px-4 py-2",
+              "text-base text-left",
+              "border outline-none transition-colors",
+              hasError ? "border-[var(--color-border-danger)]" : "border-[var(--color-border-default)]",
+              "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+              "disabled:opacity-50 disabled:pointer-events-none",
+              "bg-[var(--color-surface-default)]"
+            ].join(" "),
+            children: [
+              /* @__PURE__ */ jsx7(SelectValue, { className: "truncate data-[placeholder]:text-[var(--color-text-tertiary)]", children: ({ selectedText }) => selectedText || placeholder }),
+              /* @__PURE__ */ jsx7(ChevronDown, {})
+            ]
+          }
+        ),
+        hasError && /* @__PURE__ */ jsx7("span", { className: "text-sm text-[var(--color-text-danger)]", children: errorMessage }),
+        /* @__PURE__ */ jsx7(
+          Popover,
+          {
+            className: [
+              "w-[var(--trigger-width)]",
+              "rounded-[var(--border-radius-md)]",
+              "border border-[var(--color-border-default)]",
+              "bg-[var(--color-surface-default)]",
+              "shadow-lg",
+              "overflow-auto",
+              "entering:animate-in entering:fade-in entering:slide-in-from-top-1",
+              "exiting:animate-out exiting:fade-out exiting:slide-out-to-top-1"
+            ].join(" "),
+            children: /* @__PURE__ */ jsx7(ListBox, { className: "p-1 outline-none", items, children: (item) => /* @__PURE__ */ jsx7(
+              ListBoxItem,
+              {
+                id: item.id,
+                textValue: item.name,
+                className: [
+                  "flex items-center justify-between gap-2",
+                  "px-4 py-2 rounded-[var(--border-radius-sm)]",
+                  "text-base text-[var(--color-text-primary)]",
+                  "cursor-pointer outline-none",
+                  "hover:bg-[var(--color-surface-muted)]",
+                  "focus:bg-[var(--color-surface-muted)]",
+                  "selected:text-[var(--color-action-primary)] selected:font-[var(--font-weight-medium)]"
+                ].join(" "),
+                children: ({ isSelected }) => /* @__PURE__ */ jsxs5(Fragment, { children: [
+                  /* @__PURE__ */ jsx7("span", { className: "truncate", children: item.name }),
+                  isSelected && /* @__PURE__ */ jsx7(CheckIcon, {})
+                ] })
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Table/Table.tsx
+import {
+  Cell as AriaCell,
+  Column as AriaColumn,
+  Row as AriaRow,
+  Table as AriaTable,
+  TableBody as AriaTableBody,
+  TableHeader as AriaTableHeader
+} from "react-aria-components";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var tableSizeClass = {
+  compact: "[--table-row-py:theme(spacing.1)]",
+  comfortable: "[--table-row-py:theme(spacing.3)]"
+};
+function Table({ size = "comfortable", className, ...props }) {
+  return /* @__PURE__ */ jsx8(
+    AriaTable,
+    {
+      ...props,
+      className: [
+        "w-full border-collapse text-[var(--font-size-sm)] text-[var(--color-text-primary)]",
+        tableSizeClass[size],
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+function TableHeader(props) {
+  return /* @__PURE__ */ jsx8(AriaTableHeader, { ...props });
+}
+function Column(props) {
+  return /* @__PURE__ */ jsx8(
+    AriaColumn,
+    {
+      ...props,
+      className: [
+        "px-3 py-2 text-left font-[var(--font-weight-semibold)] text-[var(--color-text-secondary)]",
+        "border-b-2 border-[var(--color-border-default)]",
+        "cursor-default select-none outline-none",
+        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
+      ].join(" "),
+      children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1", children: [
+        props.children,
+        allowsSorting && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-[var(--color-text-tertiary)]", children: sortDirection === "ascending" ? "\u25B2" : sortDirection === "descending" ? "\u25BC" : "\u25B4" })
+      ] })
+    }
+  );
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx8(AriaTableBody, { ...props });
+}
+function Row(props) {
+  return /* @__PURE__ */ jsx8(
+    AriaRow,
+    {
+      ...props,
+      className: [
+        "border-b border-[var(--color-border-default)]",
+        "even:bg-[var(--color-surface-subtle)]",
+        "hover:bg-[var(--color-surface-muted)]",
+        "outline-none",
+        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]",
+        "transition-colors"
+      ].join(" ")
+    }
+  );
+}
+function Cell(props) {
+  return /* @__PURE__ */ jsx8(
+    AriaCell,
+    {
+      ...props,
+      className: [
+        "px-3 py-[var(--table-row-py)]",
+        "outline-none",
+        "focus-visible:outline-2 focus-visible:outline-[var(--color-border-focus)] focus-visible:outline-offset-[-2px]"
+      ].join(" ")
+    }
+  );
+}
+
+// src/components/Dialog/Dialog.tsx
+import {
+  Modal,
+  ModalOverlay,
+  Dialog as AriaDialog,
+  Heading
+} from "react-aria-components";
+import { X } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var sizeStyles2 = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+function Dialog({
+  isOpen,
+  onOpenChange,
+  title,
+  size = "md",
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx9(
+    ModalOverlay,
+    {
+      isOpen,
+      onOpenChange,
+      isDismissable: true,
+      className: [
+        "fixed inset-0 z-50 bg-[var(--color-overlay-backdrop)] backdrop-blur-sm",
+        "flex items-center justify-center",
+        "data-[entering]:animate-in data-[entering]:fade-in",
+        "data-[exiting]:animate-out data-[exiting]:fade-out"
+      ].join(" "),
+      children: /* @__PURE__ */ jsx9(
+        Modal,
+        {
+          className: [
+            "w-full mx-4",
+            sizeStyles2[size],
+            "bg-[var(--color-surface-default)] rounded-lg shadow-xl max-h-[85vh] flex flex-col",
+            "data-[entering]:animate-in data-[entering]:zoom-in-95 data-[entering]:fade-in",
+            "data-[exiting]:animate-out data-[exiting]:zoom-out-95 data-[exiting]:fade-out",
+            className
+          ].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx9(AriaDialog, { className: "outline-none flex flex-col max-h-[85vh]", children: ({ close }) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--color-border-default)]", children: [
+              /* @__PURE__ */ jsx9(
+                Heading,
+                {
+                  slot: "title",
+                  className: "text-lg font-semibold text-[var(--color-text-primary)]",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: close,
+                  className: [
+                    "inline-flex items-center justify-center rounded-md p-1",
+                    "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-muted)]",
+                    "outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+                    "transition-colors"
+                  ].join(" "),
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx9(X, { size: 20, "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx9("div", { className: "px-6 py-4 overflow-y-auto", children })
+          ] }) })
+        }
+      )
+    }
+  );
+}
+
+// src/components/Toast/Toast.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { CheckCircle, XCircle, Info, X as X2 } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var ToastContext = createContext2(null);
+var toastCounter = 0;
+var defaultDuration = {
+  success: 5e3,
+  info: 5e3,
+  error: 1e4
+};
+var variantConfig = {
+  success: {
+    icon: CheckCircle,
+    containerClass: "bg-[var(--color-surface-success)] border-[var(--color-border-success)] text-[var(--color-text-success)]",
+    iconClass: "text-[var(--color-action-success)]"
+  },
+  error: {
+    icon: XCircle,
+    containerClass: "bg-[var(--color-surface-danger)] border-[var(--color-border-danger)] text-[var(--color-text-danger)]",
+    iconClass: "text-[var(--color-action-danger)]"
+  },
+  info: {
+    icon: Info,
+    containerClass: "bg-[var(--color-surface-info)] border-[var(--color-border-info)] text-[var(--color-text-info)]",
+    iconClass: "text-[var(--color-text-info)]"
+  }
+};
+function ToastItem({
+  toast,
+  onRemove
+}) {
+  const [isExiting, setIsExiting] = useState(false);
+  const timerRef = useRef(null);
+  const config = variantConfig[toast.variant];
+  const IconComponent = config.icon;
+  const dismiss = useCallback(() => {
+    setIsExiting(true);
+    setTimeout(() => onRemove(toast.id), 200);
+  }, [onRemove, toast.id]);
+  useEffect(() => {
+    const duration = toast.duration ?? defaultDuration[toast.variant];
+    timerRef.current = setTimeout(dismiss, duration);
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [toast.duration, toast.variant, dismiss]);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: [
+        "flex items-start gap-3 rounded-lg border px-4 py-3 shadow-md",
+        "min-w-[320px] max-w-[420px]",
+        "transition-all duration-200",
+        isExiting ? "translate-x-full opacity-0" : "translate-x-0 opacity-100 animate-in slide-in-from-right",
+        config.containerClass
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsx10(IconComponent, { size: 20, className: ["shrink-0 mt-0.5", config.iconClass].join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx10("p", { className: "flex-1 text-sm font-medium", children: toast.message }),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            onClick: dismiss,
+            className: "shrink-0 rounded 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__ */ jsx10(X2, { size: 16, "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({ toasts, removeToast }) {
+  if (toasts.length === 0) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx10("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2", children: toasts.map((toast) => /* @__PURE__ */ jsx10(ToastItem, { toast, onRemove: removeToast }, toast.id)) }),
+    document.body
+  );
+}
+function createToastBridge() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    emit: (toast) => {
+      listeners.forEach((fn) => fn(toast));
+    },
+    subscribe: (fn) => {
+      listeners.add(fn);
+      return () => {
+        listeners.delete(fn);
+      };
+    }
+  };
+}
+function ToastProvider({ children, bridge }) {
+  const [toasts, setToasts] = useState([]);
+  const addToast = useCallback((toast) => {
+    const id = `toast-${++toastCounter}`;
+    setToasts((prev) => [...prev, { ...toast, id }]);
+  }, []);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  useEffect(() => {
+    if (!bridge) return;
+    return bridge.subscribe(addToast);
+  }, [bridge, addToast]);
+  return /* @__PURE__ */ jsxs8(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ jsx10(ToastContainer, { toasts, removeToast })
+  ] });
+}
+function useToast() {
+  const context = useContext2(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return {
+    toast: context.addToast,
+    toasts: context.toasts,
+    removeToast: context.removeToast
+  };
+}
+
+// src/components/EmptyState/EmptyState.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: [
+        "flex flex-col items-center text-center py-12 px-6",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx11(Icon, { icon, size: "xl", className: "text-[var(--color-text-tertiary)]" }),
+        /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-[var(--color-text-primary)] mt-4", children: title }),
+        description && /* @__PURE__ */ jsx11("p", { className: "text-sm text-[var(--color-text-secondary)] mt-2 max-w-sm", children: description }),
+        action && /* @__PURE__ */ jsx11("div", { className: "mt-6", children: action })
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox/Checkbox.tsx
+import {
+  Checkbox as AriaCheckbox
+} from "react-aria-components";
+import { Check } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function Checkbox({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    AriaCheckbox,
+    {
+      ...props,
+      className: [
+        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "disabled:opacity-50 disabled:cursor-default",
+        className
+      ].filter(Boolean).join(" "),
+      children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            className: [
+              "flex items-center justify-center w-6 h-6 shrink-0",
+              "rounded-[var(--border-radius-sm)] border transition-colors",
+              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
+              isSelected || isIndeterminate ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
+            ].join(" "),
+            children: [
+              isSelected && /* @__PURE__ */ jsx12(Check, { className: "w-4 h-4 text-[var(--color-text-inverse)]", strokeWidth: 3 }),
+              isIndeterminate && /* @__PURE__ */ jsx12("div", { className: "w-3 h-0.5 bg-[var(--color-text-inverse)] rounded-full" })
+            ]
+          }
+        ),
+        children && /* @__PURE__ */ jsx12("span", { children })
+      ] })
+    }
+  );
+}
+
+// src/components/Switch/Switch.tsx
+import {
+  Switch as AriaSwitch
+} from "react-aria-components";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var trackColorMap = {
+  primary: "bg-[var(--color-action-primary)]",
+  success: "bg-[var(--color-action-success)]",
+  destructive: "bg-[var(--color-action-danger)]"
+};
+var presetColors = new Set(Object.keys(trackColorMap));
+function isPresetColor(color) {
+  return presetColors.has(color);
+}
+function Switch({
+  children,
+  color = "primary",
+  className,
+  ...props
+}) {
+  const isPreset = isPresetColor(color);
+  return /* @__PURE__ */ jsx13(
+    AriaSwitch,
+    {
+      ...props,
+      className: [
+        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "disabled:opacity-50 disabled:cursor-default",
+        className
+      ].filter(Boolean).join(" "),
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs11(Fragment4, { children: [
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: [
+              "w-9 h-5 rounded-full transition-colors shrink-0 p-0.5",
+              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
+              isSelected && isPreset ? trackColorMap[color] : !isSelected ? "bg-[var(--color-border-strong)]" : ""
+            ].join(" "),
+            style: isSelected && !isPreset ? { backgroundColor: color } : void 0,
+            children: /* @__PURE__ */ jsx13(
+              "div",
+              {
+                className: [
+                  "w-4 h-4 rounded-full bg-[var(--color-surface-default)] transition-transform shadow-sm",
+                  isSelected ? "translate-x-4" : "translate-x-0"
+                ].join(" ")
+              }
+            )
+          }
+        ),
+        children && /* @__PURE__ */ jsx13("span", { children })
+      ] })
+    }
+  );
+}
+
+// src/components/Radio/Radio.tsx
+import {
+  RadioGroup as AriaRadioGroup,
+  Radio as AriaRadio
+} from "react-aria-components";
+import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function RadioGroup({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx14(
+    AriaRadioGroup,
+    {
+      ...props,
+      className: [
+        "flex flex-col gap-2",
+        "disabled:opacity-50",
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function Radio({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx14(
+    AriaRadio,
+    {
+      ...props,
+      className: [
+        "group flex items-center gap-2 text-[length:var(--font-size-sm)] text-[var(--color-text-primary)] cursor-pointer",
+        "disabled:opacity-50 disabled:cursor-default",
+        className
+      ].filter(Boolean).join(" "),
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: [
+              "flex items-center justify-center w-5 h-5 shrink-0",
+              "rounded-full border-2 transition-colors",
+              "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
+              isSelected ? "border-[var(--color-action-primary)]" : "border-[var(--color-border-default)] group-hover:border-[var(--color-border-strong)]"
+            ].join(" "),
+            children: isSelected && /* @__PURE__ */ jsx14("div", { className: "w-2.5 h-2.5 rounded-full bg-[var(--color-action-primary)]" })
+          }
+        ),
+        children && /* @__PURE__ */ jsx14("span", { children })
+      ] })
+    }
+  );
+}
+function RadioButton({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx14(
+    AriaRadio,
+    {
+      ...props,
+      className: [
+        "group cursor-pointer",
+        "disabled:opacity-50 disabled:cursor-default",
+        className
+      ].filter(Boolean).join(" "),
+      children: ({ isSelected }) => /* @__PURE__ */ jsx14(
+        "div",
+        {
+          className: [
+            "px-4 py-2 text-[length:var(--font-size-sm)] font-[number:var(--font-weight-medium)]",
+            "rounded-[var(--border-radius-md)] border transition-colors text-center",
+            "group-focus-visible:ring-2 group-focus-visible:ring-[var(--color-border-focus)] group-focus-visible:ring-offset-2",
+            isSelected ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)] text-[var(--color-text-inverse)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] text-[var(--color-text-primary)] hover:border-[var(--color-border-strong)]"
+          ].join(" "),
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/Label/Label.tsx
+import {
+  Label as AriaLabel
+} from "react-aria-components";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function Label3({ isRequired, children, className, ...props }) {
+  return /* @__PURE__ */ jsxs13(
+    AriaLabel,
+    {
+      ...props,
+      className: [
+        "text-[length:var(--font-size-sm)]",
+        "font-[number:var(--font-weight-medium)]",
+        "text-[var(--color-text-primary)]",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        children,
+        isRequired && /* @__PURE__ */ jsx15(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ml-0.5 text-[var(--color-text-danger)]",
+            children: "*"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/Field/Field.tsx
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function getErrorMessage(error) {
+  if (!error) return void 0;
+  if (typeof error === "string") return error;
+  return error.message;
+}
+function Field({
+  label,
+  isRequired,
+  description,
+  error,
+  children,
+  className
+}) {
+  const errorMessage = getErrorMessage(error);
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: ["flex flex-col gap-[var(--spacing-1)]", className].filter(Boolean).join(" "),
+      children: [
+        label && /* @__PURE__ */ jsx16(Label3, { isRequired, children: label }),
+        children,
+        description && !errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-secondary)]", children: description }),
+        errorMessage && /* @__PURE__ */ jsx16("p", { className: "text-[length:var(--font-size-sm)] text-[var(--color-text-danger)]", children: errorMessage })
+      ]
+    }
+  );
+}
+
+// src/components/Fieldset/Fieldset.tsx
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function Fieldset({ legend, children, className }) {
+  return /* @__PURE__ */ jsxs15(
+    "fieldset",
+    {
+      className: [
+        "flex flex-col gap-[var(--spacing-8)]",
+        "border-none p-0 m-0",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        legend && /* @__PURE__ */ jsx17(
+          "legend",
+          {
+            className: [
+              "text-[length:var(--font-size-lg)]",
+              "font-[number:var(--font-weight-semibold)]",
+              "text-[var(--color-text-primary)]",
+              "p-0"
+            ].join(" "),
+            children: legend
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/InputGroup/InputGroup.tsx
+import React from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function InputGroup({ children, className }) {
+  const childArray = React.Children.toArray(children).filter(
+    React.isValidElement
+  );
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: ["flex items-stretch", className].filter(Boolean).join(" "),
+      children: childArray.map((child, index) => {
+        const position = childArray.length === 1 ? "standalone" : index === 0 ? "start" : index === childArray.length - 1 ? "end" : "middle";
+        return /* @__PURE__ */ jsx18(
+          InputGroupContext.Provider,
+          {
+            value: { inGroup: true, position },
+            children: child
+          },
+          index
+        );
+      })
+    }
+  );
+}
+
+// src/components/InputAddon/InputAddon.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function groupRadiusClass3(position) {
+  switch (position) {
+    case "start":
+      return "rounded-l-[var(--border-radius-md)] rounded-r-none";
+    case "middle":
+      return "rounded-none";
+    case "end":
+      return "rounded-r-[var(--border-radius-md)] rounded-l-none";
+    default:
+      return "rounded-[var(--border-radius-md)]";
+  }
+}
+function InputAddon({ children, className }) {
+  const { inGroup, position } = useInputGroup();
+  const radiusClass = inGroup ? groupRadiusClass3(position) : "rounded-[var(--border-radius-md)]";
+  const marginClass = inGroup && position !== "start" && position !== "standalone" ? "-ml-px" : "";
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: [
+        "flex items-center self-stretch shrink-0 select-none",
+        "px-3 py-2 text-base",
+        "bg-[var(--color-surface-subtle)]",
+        "text-[var(--color-text-secondary)]",
+        "border border-[var(--color-border-default)]",
+        radiusClass,
+        marginClass,
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+// src/components/Heading/Heading.tsx
+import { twMerge as twMerge2 } 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: Tag = "h2",
+  size,
+  weight = "semibold",
+  className,
+  children
+}) {
+  const resolvedSize = size ?? defaultSizeMap[Tag];
+  return /* @__PURE__ */ jsx20(
+    Tag,
+    {
+      className: twMerge2(
+        weightStyles[weight],
+        "text-[var(--color-text-primary)]",
+        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 AriaLink
+} from "react-aria-components";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: [
+    "text-[var(--color-teal-700)] underline",
+    "hover:text-[var(--color-teal-800)]"
+  ].join(" "),
+  subtle: [
+    "text-[var(--color-text-secondary)] no-underline",
+    "hover:underline hover:text-[var(--color-text-primary)]"
+  ].join(" ")
+};
+function Link({
+  variant = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx21(
+    AriaLink,
+    {
+      ...props,
+      className: [
+        "outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
+        variantStyles2[variant],
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import {
+  Breadcrumbs as AriaBreadcrumbs,
+  Breadcrumb as AriaBreadcrumb,
+  Link as Link2
+} from "react-aria-components";
+import { ChevronRight } from "lucide-react";
+import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+function Breadcrumbs({ items, className }) {
+  return /* @__PURE__ */ jsx22(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      className,
+      children: /* @__PURE__ */ jsx22(
+        AriaBreadcrumbs,
+        {
+          className: "flex items-center gap-1 text-sm",
+          children: items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            return /* @__PURE__ */ jsx22(
+              AriaBreadcrumb,
+              {
+                id: item.id,
+                className: "flex items-center gap-1",
+                children: isLast ? /* @__PURE__ */ jsx22("span", { className: "font-medium text-[var(--color-text-primary)]", children: item.label }) : /* @__PURE__ */ jsxs16(Fragment6, { children: [
+                  /* @__PURE__ */ jsx22(
+                    Link2,
+                    {
+                      href: item.href,
+                      className: "text-[var(--color-text-secondary)] outline-none transition-colors hover:text-[var(--color-text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2 focus-visible:rounded-sm",
+                      children: item.label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx22(
+                    ChevronRight,
+                    {
+                      className: "text-[var(--color-neutral-400)]",
+                      size: 16,
+                      "aria-hidden": "true"
+                    }
+                  )
+                ] })
+              },
+              item.id
+            );
+          })
+        }
+      )
+    }
+  );
+}
+
+// src/components/ButtonLink/ButtonLink.tsx
+import {
+  Link as AriaLink2
+} from "react-aria-components";
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var iconSizeMap3 = {
+  sm: "sm",
+  md: "sm",
+  lg: "md"
+};
+function ButtonLink({
+  variant = "primary",
+  size = "md",
+  iconLeft,
+  iconRight,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs17(
+    AriaLink2,
+    {
+      ...props,
+      className: twMerge3(
+        "inline-flex items-center justify-center gap-2",
+        "rounded-[var(--border-radius-md)]",
+        "font-[var(--font-weight-medium)]",
+        "leading-[var(--line-height-tight)]",
+        "outline-none transition-colors no-underline",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        variantStyles[variant],
+        sizeStyles[size],
+        className
+      ),
+      children: [
+        iconLeft && /* @__PURE__ */ jsx23(Icon, { icon: iconLeft, size: iconSizeMap3[size] }),
+        children,
+        iconRight && /* @__PURE__ */ jsx23(Icon, { icon: iconRight, size: iconSizeMap3[size] })
+      ]
+    }
+  );
+}
+var squareSizeStyles2 = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+};
+function IconButtonLink({
+  icon,
+  "aria-label": ariaLabel,
+  variant = "ghost",
+  size = "md",
+  showTooltip = true,
+  tooltipPlacement = "top",
+  className,
+  ...props
+}) {
+  const link = /* @__PURE__ */ jsx23(
+    AriaLink2,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      className: twMerge3(
+        "inline-flex items-center justify-center",
+        "rounded-[var(--border-radius-md)]",
+        "outline-none transition-colors no-underline",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        variantStyles[variant],
+        squareSizeStyles2[size],
+        className
+      ),
+      children: /* @__PURE__ */ jsx23(Icon, { icon, size: iconSizeMap3[size] })
+    }
+  );
+  if (showTooltip) {
+    return /* @__PURE__ */ jsx23(Tooltip, { content: ariaLabel, placement: tooltipPlacement, children: link });
+  }
+  return link;
+}
+
+// src/components/ToggleButton/ToggleButton.tsx
+import {
+  ToggleButton as AriaToggleButton
+} from "react-aria-components";
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var sizeStyles4 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+var squareSizeStyles3 = {
+  sm: "h-7 w-7 text-sm",
+  md: "h-8 w-8 text-base",
+  lg: "h-10 w-10 text-lg"
+};
+var variantStyles3 = {
+  default: {
+    base: [
+      "bg-transparent text-[var(--color-text-primary)]",
+      "hover:bg-[var(--color-neutral-100)]",
+      "pressed:bg-[var(--color-neutral-200)]"
+    ].join(" "),
+    selected: "bg-[var(--color-neutral-200)] text-[var(--color-text-primary)]"
+  },
+  primary: {
+    base: [
+      "bg-transparent text-[var(--color-text-primary)]",
+      "hover:bg-[var(--color-neutral-100)]",
+      "pressed:bg-[var(--color-neutral-200)]"
+    ].join(" "),
+    selected: "bg-[var(--color-teal-500)] text-[var(--color-text-inverse)]"
+  },
+  outlined: {
+    base: [
+      "bg-white text-[var(--color-text-primary)]",
+      "border border-[var(--color-neutral-300)]",
+      "hover:bg-[var(--color-neutral-100)]",
+      "pressed:bg-[var(--color-neutral-200)]"
+    ].join(" "),
+    selected: [
+      "bg-[var(--color-neutral-800)] text-[var(--color-text-inverse)]",
+      "border border-[var(--color-neutral-800)]"
+    ].join(" ")
+  }
+};
+function ToggleButton({
+  variant = "default",
+  size = "md",
+  isSquare = false,
+  className,
+  ...props
+}) {
+  const styles = variantStyles3[variant];
+  return /* @__PURE__ */ jsx24(
+    AriaToggleButton,
+    {
+      ...props,
+      className: ({ isSelected }) => twMerge4(
+        "inline-flex items-center justify-center gap-2",
+        isSquare ? "rounded-none" : "rounded-[var(--border-radius-md)]",
+        "font-[var(--font-weight-medium)]",
+        "leading-[var(--line-height-tight)]",
+        "outline-none transition-colors",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        "disabled:opacity-50 disabled:pointer-events-none",
+        isSquare ? squareSizeStyles3[size] : sizeStyles4[size],
+        isSelected ? styles.selected : styles.base,
+        className
+      )
+    }
+  );
+}
+
+// src/components/Menu/Menu.tsx
+import {
+  MenuTrigger,
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  Popover as Popover2
+} from "react-aria-components";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+function Menu({ items, children, className }) {
+  return /* @__PURE__ */ jsxs18(MenuTrigger, { children: [
+    children,
+    /* @__PURE__ */ jsx25(
+      Popover2,
+      {
+        className: [
+          "bg-[var(--color-surface-primary)] rounded-[var(--border-radius-md)]",
+          "shadow-lg border border-[var(--color-border-default)]",
+          "py-1 min-w-48",
+          "entering:animate-in entering:fade-in entering:zoom-in-95",
+          "exiting:animate-out exiting:fade-out exiting:zoom-out-95",
+          className
+        ].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx25(
+          AriaMenu,
+          {
+            items,
+            onAction: (key) => {
+              const item = items.find((i) => i.id === key);
+              item?.onAction?.();
+            },
+            className: "outline-none",
+            children: (item) => /* @__PURE__ */ jsxs18(
+              AriaMenuItem,
+              {
+                id: item.id,
+                href: item.href,
+                target: item.target,
+                isDisabled: item.isDisabled,
+                className: [
+                  "flex items-center gap-2 px-3 py-2 text-sm outline-none cursor-default",
+                  "transition-colors",
+                  "focus:bg-[var(--color-neutral-100)]",
+                  "hover:bg-[var(--color-neutral-100)]",
+                  "disabled:opacity-50 disabled:pointer-events-none",
+                  item.isDanger ? "text-[var(--color-text-danger)]" : "text-[var(--color-text-primary)]"
+                ].filter(Boolean).join(" "),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx25(Icon, { icon: item.icon, size: "sm" }),
+                  item.label
+                ]
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Popover/Popover.tsx
+import {
+  DialogTrigger,
+  Popover as AriaPopover,
+  Dialog as AriaDialog2,
+  Button as AriaButton3
+} from "react-aria-components";
+import { Fragment as Fragment7, jsx as jsx26 } from "react/jsx-runtime";
+function Popover3({ children, isOpen, onOpenChange }) {
+  return /* @__PURE__ */ jsx26(DialogTrigger, { isOpen, onOpenChange, children });
+}
+function PopoverTrigger({ children, className }) {
+  return /* @__PURE__ */ jsx26(
+    AriaButton3,
+    {
+      className: [
+        "inline-flex items-center bg-transparent border-none p-0 outline-none cursor-pointer",
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:rounded-[var(--border-radius-sm)]",
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function PopoverContent({
+  placement = "bottom",
+  offset: offsetPx = 8,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx26(
+    AriaPopover,
+    {
+      placement,
+      offset: offsetPx,
+      className: [
+        "z-50",
+        "bg-[var(--color-surface-default)] border border-[var(--color-border-default)]",
+        "rounded-[var(--border-radius-md)] shadow-lg",
+        "entering:animate-in entering:fade-in entering:duration-150",
+        "exiting:animate-out exiting:fade-out exiting:duration-100",
+        "entering:placement-top:slide-in-from-bottom-1",
+        "entering:placement-bottom:slide-in-from-top-1",
+        "entering:placement-left:slide-in-from-right-1",
+        "entering:placement-right:slide-in-from-left-1",
+        className
+      ].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx26(AriaDialog2, { className: "outline-none", children: ({ close }) => /* @__PURE__ */ jsx26(Fragment7, { children: typeof children === "function" ? children({ close }) : children }) })
+    }
+  );
+}
+
+// src/components/Tabs/Tabs.tsx
+import { createContext as createContext3, useContext as useContext3 } from "react";
+import {
+  Tabs as AriaTabs,
+  TabList as AriaTabList,
+  Tab as AriaTab,
+  TabPanel as AriaTabPanel
+} from "react-aria-components";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var TabsContext = createContext3({
+  variant: "underline",
+  size: "md"
+});
+var sizeStyles5 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+function Tabs({
+  variant = "underline",
+  size = "md",
+  orientation = "horizontal",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx27(TabsContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsx27(
+    AriaTabs,
+    {
+      ...props,
+      orientation,
+      className: [
+        orientation === "vertical" ? "flex" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  ) });
+}
+function TabList({
+  className,
+  ...props
+}) {
+  const { variant } = useContext3(TabsContext);
+  const baseStyles = variant === "underline" ? "flex items-center border-b border-[var(--color-border-default)]" : "inline-flex items-center bg-[var(--color-surface-muted)] rounded-[var(--border-radius-lg)] p-1 gap-1";
+  const verticalStyles = variant === "underline" ? "flex-col border-b-0 border-r border-[var(--color-border-default)]" : "flex-col";
+  return /* @__PURE__ */ jsx27(
+    AriaTabList,
+    {
+      ...props,
+      className: ({ orientation }) => [
+        baseStyles,
+        orientation === "vertical" ? verticalStyles : "",
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+function Tab({ className, ...props }) {
+  const { variant, size } = useContext3(TabsContext);
+  return /* @__PURE__ */ jsx27(
+    AriaTab,
+    {
+      ...props,
+      className: ({ isSelected, isDisabled, isHovered, isPressed }) => [
+        // Base
+        "cursor-pointer outline-none transition-colors",
+        "font-[var(--font-weight-medium)]",
+        // Focus ring
+        "focus-visible:ring-2 focus-visible:ring-[var(--color-border-focus)] focus-visible:ring-offset-2",
+        // Disabled
+        isDisabled ? "opacity-50 pointer-events-none" : "",
+        // Size
+        sizeStyles5[size],
+        // Variant-specific styles
+        ...getTabVariantStyles(variant, {
+          isSelected,
+          isHovered,
+          isPressed,
+          isDisabled
+        }),
+        className
+      ].filter(Boolean).join(" ")
+    }
+  );
+}
+function getTabVariantStyles(variant, state) {
+  if (variant === "underline") {
+    return [
+      // Shape
+      "relative rounded-t-[var(--border-radius-sm)]",
+      // Color states
+      state.isSelected ? [
+        "text-[var(--color-teal-700)] font-[var(--font-weight-semibold)]",
+        // Bottom indicator via pseudo-element
+        "after:absolute after:bottom-[-1px] after:left-0 after:right-0 after:h-0.5 after:bg-[var(--color-teal-600)]"
+      ].join(" ") : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)]" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)]" : "text-[var(--color-text-secondary)] bg-transparent"
+    ];
+  }
+  return [
+    // Shape
+    "rounded-[var(--border-radius-md)]",
+    // Color states
+    state.isSelected ? "text-[var(--color-text-primary)] font-[var(--font-weight-semibold)] bg-[var(--color-surface-default)] shadow-sm" : state.isPressed ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-50)] shadow-none" : state.isHovered ? "text-[var(--color-text-primary)] bg-[var(--color-neutral-200)]" : "text-[var(--color-text-secondary)] bg-transparent"
+  ];
+}
+function TabPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx27(
+    AriaTabPanel,
+    {
+      ...props,
+      className: ["mt-4 outline-none", className].filter(Boolean).join(" ")
+    }
+  );
+}
+
+// src/components/Tree/Tree.tsx
+import { useCallback as useCallback2, useImperativeHandle, useRef as useRef2, useState as useState2 } from "react";
+import { Tree as ArboristTree } from "react-arborist";
+import { ChevronRight as ChevronRight2, Folder, File } from "lucide-react";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var rowHeightMap = {
+  compact: 32,
+  comfortable: 40
+};
+function NodeRenderer({
+  node,
+  style,
+  tree,
+  dragHandle,
+  checkedIds,
+  onCheckToggle,
+  selectionMode
+}) {
+  const data = node.data;
+  const isCheckbox = selectionMode === "checkbox";
+  const isChecked = isCheckbox && checkedIds.has(node.id);
+  const IconComponent = data.icon ? data.icon : node.isInternal ? Folder : File;
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      ref: dragHandle,
+      style,
+      className: [
+        "flex items-center gap-1 px-2 cursor-default select-none",
+        "text-[length:var(--font-size-sm)] text-[var(--color-text-primary)]",
+        "outline-none",
+        "transition-colors",
+        node.isSelected && !isCheckbox ? "bg-[var(--color-teal-50)]" : "hover:bg-[var(--color-teal-50)]",
+        node.isFocused ? "ring-2 ring-inset ring-[var(--color-border-focus)]" : ""
+      ].filter(Boolean).join(" "),
+      role: "treeitem",
+      "aria-selected": isCheckbox ? isChecked : node.isSelected,
+      "aria-expanded": node.isInternal ? node.isOpen : void 0,
+      onClick: (e) => {
+        if (isCheckbox) {
+          onCheckToggle(node.id);
+        } else {
+          node.handleClick(e);
+        }
+      },
+      onKeyDown: (e) => {
+        if (isCheckbox && (e.key === " " || e.key === "Enter")) {
+          e.preventDefault();
+          onCheckToggle(node.id);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx28(
+          "button",
+          {
+            type: "button",
+            className: [
+              "flex items-center justify-center w-5 h-5 shrink-0",
+              "rounded-[var(--border-radius-sm)]",
+              "text-[var(--color-text-secondary)]",
+              "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-neutral-100)]",
+              "transition-transform",
+              node.isInternal ? "visible" : "invisible"
+            ].filter(Boolean).join(" "),
+            onClick: (e) => {
+              e.stopPropagation();
+              node.toggle();
+            },
+            tabIndex: -1,
+            "aria-label": node.isOpen ? "Collapse" : "Expand",
+            children: /* @__PURE__ */ jsx28(
+              ChevronRight2,
+              {
+                size: 14,
+                className: [
+                  "transition-transform",
+                  node.isOpen ? "rotate-90" : ""
+                ].filter(Boolean).join(" ")
+              }
+            )
+          }
+        ),
+        isCheckbox && /* @__PURE__ */ jsx28(
+          "div",
+          {
+            className: [
+              "flex items-center justify-center w-5 h-5 shrink-0",
+              "rounded-[var(--border-radius-sm)] border transition-colors",
+              isChecked ? "bg-[var(--color-action-primary)] border-[var(--color-action-primary)]" : "bg-[var(--color-surface-default)] border-[var(--color-border-default)] hover:border-[var(--color-border-strong)]"
+            ].join(" "),
+            role: "checkbox",
+            "aria-checked": isChecked,
+            "aria-label": `Select ${data.name}`,
+            children: isChecked && /* @__PURE__ */ jsx28(
+              Check2,
+              {
+                className: "w-3 h-3 text-[var(--color-text-inverse)]",
+                strokeWidth: 3
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx28(
+          IconComponent,
+          {
+            size: 16,
+            className: "shrink-0 text-[var(--color-text-secondary)]",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx28("span", { className: "truncate", children: data.name })
+      ]
+    }
+  );
+}
+function Tree({
+  data,
+  "aria-label": ariaLabel,
+  size = "comfortable",
+  selectionMode = "single",
+  selectedIds,
+  onSelectionChange,
+  onActivate,
+  openByDefault = false,
+  searchTerm,
+  searchMatch,
+  height = 400,
+  indent = 24,
+  disableDrag = true,
+  disableDrop = true,
+  treeRef,
+  className
+}) {
+  const internalRef = useRef2(null);
+  useImperativeHandle(treeRef, () => internalRef.current, []);
+  const [internalChecked, setInternalChecked] = useState2(
+    () => /* @__PURE__ */ new Set()
+  );
+  const checkedIds = selectedIds ?? internalChecked;
+  const handleCheckToggle = useCallback2(
+    (id) => {
+      const next = new Set(checkedIds);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      if (onSelectionChange) {
+        onSelectionChange(next);
+      } else {
+        setInternalChecked(next);
+      }
+    },
+    [checkedIds, onSelectionChange]
+  );
+  const handleSelect = useCallback2(
+    (nodes) => {
+      if (selectionMode === "checkbox" || selectionMode === "none") return;
+      if (onSelectionChange) {
+        onSelectionChange(new Set(nodes.map((n) => n.id)));
+      }
+    },
+    [selectionMode, onSelectionChange]
+  );
+  const handleActivate = useCallback2(
+    (node) => {
+      if (onActivate) {
+        onActivate(node.data);
+      }
+    },
+    [onActivate]
+  );
+  const arboristSearchMatch = searchMatch ? (node, term) => searchMatch(node.data, term) : void 0;
+  const selectionProp = selectionMode === "single" && selectedIds && selectedIds.size > 0 ? [...selectedIds][0] : void 0;
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      role: "tree",
+      "aria-label": ariaLabel,
+      className: ["outline-none", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx28(
+        ArboristTree,
+        {
+          ref: internalRef,
+          data,
+          width: "100%",
+          height,
+          rowHeight: rowHeightMap[size],
+          indent,
+          openByDefault,
+          searchTerm,
+          searchMatch: arboristSearchMatch,
+          disableDrag,
+          disableDrop,
+          disableMultiSelection: selectionMode === "single" || selectionMode === "none",
+          selection: selectionProp,
+          onSelect: handleSelect,
+          onActivate: handleActivate,
+          disableEdit: true,
+          children: (props) => /* @__PURE__ */ jsx28(
+            NodeRenderer,
+            {
+              ...props,
+              checkedIds,
+              onCheckToggle: handleCheckToggle,
+              selectionMode
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/tokens/tokens.ts
+var ColorPurple50 = "#f5f0fa";
+var ColorPurple100 = "#ead9f5";
+var ColorPurple200 = "#d4b3eb";
+var ColorPurple300 = "#b87ddb";
+var ColorPurple400 = "#9b4fcb";
+var ColorPurple500 = "#7a2ea8";
+var ColorPurple600 = "#6b2695";
+var ColorPurple700 = "#5c2483";
+var ColorPurple800 = "#4a1d6a";
+var ColorPurple900 = "#3a1754";
+var ColorTeal50 = "#edf9f9";
+var ColorTeal100 = "#d0f0f0";
+var ColorTeal200 = "#a1e1e2";
+var ColorTeal300 = "#6dd0d1";
+var ColorTeal400 = "#44c4c5";
+var ColorTeal500 = "#35b7b8";
+var ColorTeal600 = "#2a9b9c";
+var ColorTeal700 = "#217d7e";
+var ColorTeal800 = "#1a6364";
+var ColorTeal900 = "#144d4e";
+var ColorGreen50 = "#f0fdf4";
+var ColorGreen100 = "#dcfce7";
+var ColorGreen200 = "#bbf7d0";
+var ColorGreen300 = "#86efac";
+var ColorGreen400 = "#4ade80";
+var ColorGreen500 = "#22c55e";
+var ColorGreen600 = "#16a34a";
+var ColorGreen700 = "#15803d";
+var ColorGreen800 = "#166534";
+var ColorGreen900 = "#14532d";
+var ColorRose50 = "#fff1f2";
+var ColorRose100 = "#ffe4e6";
+var ColorRose200 = "#fecdd3";
+var ColorRose300 = "#fda4af";
+var ColorRose400 = "#fb7185";
+var ColorRose500 = "#f43f5e";
+var ColorRose600 = "#e11d48";
+var ColorRose700 = "#be123c";
+var ColorRose800 = "#9f1239";
+var ColorRose900 = "#881337";
+var ColorSlate50 = "#f8fafc";
+var ColorSlate100 = "#f1f5f9";
+var ColorSlate200 = "#e2e8f0";
+var ColorSlate300 = "#cbd5e1";
+var ColorSlate400 = "#94a3b8";
+var ColorSlate500 = "#64748b";
+var ColorSlate600 = "#475569";
+var ColorSlate700 = "#334155";
+var ColorSlate800 = "#1e293b";
+var ColorSlate900 = "#0f172a";
+var ColorNeutral0 = "#ffffff";
+var ColorNeutral50 = "#f9fafb";
+var ColorNeutral100 = "#f3f4f6";
+var ColorNeutral200 = "#e5e7eb";
+var ColorNeutral300 = "#d1d5db";
+var ColorNeutral400 = "#9ca3af";
+var ColorNeutral500 = "#6b7280";
+var ColorNeutral600 = "#4b5563";
+var ColorNeutral700 = "#374151";
+var ColorNeutral800 = "#1f2937";
+var ColorNeutral900 = "#111827";
+var ColorNeutral950 = "#030712";
+var ColorNeutral1000 = "#000000";
+var ColorBrandPrimary = "#5c2483";
+var ColorBrandAccent = "#35b7b8";
+var ColorActionPrimary = "#35b7b8";
+var ColorActionPrimaryHover = "#2a9b9c";
+var ColorActionPrimaryActive = "#217d7e";
+var ColorActionSecondary = "#5c2483";
+var ColorActionSecondaryHover = "#6b2695";
+var ColorActionDanger = "#e11d48";
+var ColorActionDangerHover = "#be123c";
+var ColorActionSuccess = "#16a34a";
+var ColorActionSuccessHover = "#15803d";
+var ColorActionInfo = "#475569";
+var ColorActionInfoHover = "#334155";
+var ColorActionDefault = "#1e293b";
+var ColorActionDefaultHover = "#334155";
+var ColorTextPrimary = "#111827";
+var ColorTextSecondary = "#4b5563";
+var ColorTextTertiary = "#9ca3af";
+var ColorTextInverse = "#ffffff";
+var ColorTextBrand = "#5c2483";
+var ColorTextAccent = "#35b7b8";
+var ColorTextDanger = "#e11d48";
+var ColorTextSuccess = "#16a34a";
+var ColorTextInfo = "#475569";
+var ColorTextWarning = "#d97706";
+var ColorSurfaceDefault = "#ffffff";
+var ColorSurfaceSubtle = "#f9fafb";
+var ColorSurfaceMuted = "#f3f4f6";
+var ColorSurfaceBrand = "#5c2483";
+var ColorSurfaceAccent = "#35b7b8";
+var ColorSurfaceDanger = "#fff1f2";
+var ColorSurfaceSuccess = "#f0fdf4";
+var ColorSurfaceWarning = "#fffbeb";
+var ColorSurfaceInfo = "#f8fafc";
+var ColorSurfaceOverlay = "#000000cc";
+var ColorBorderDefault = "#e5e7eb";
+var ColorBorderStrong = "#d1d5db";
+var ColorBorderBrand = "#5c2483";
+var ColorBorderAccent = "#35b7b8";
+var ColorBorderFocus = "#35b7b8";
+var ColorBorderDanger = "#e11d48";
+var ColorBorderSuccess = "#16a34a";
+var ColorBorderInfo = "#94a3b8";
+var ColorBorderWarning = "#d97706";
+var ColorOverlayBackdrop = "#00000066";
+var Spacing1 = "4px";
+var Spacing2 = "8px";
+var Spacing3 = "12px";
+var Spacing4 = "16px";
+var Spacing6 = "24px";
+var Spacing8 = "32px";
+var Spacing12 = "48px";
+var Spacing16 = "64px";
+var BorderRadiusNone = "0px";
+var BorderRadiusSm = "4px";
+var BorderRadiusMd = "8px";
+var BorderRadiusLg = "12px";
+var BorderRadiusXl = "16px";
+var BorderRadiusFull = "9999px";
+var FontSizeXs = "12px";
+var FontSizeSm = "14px";
+var FontSizeBase = "16px";
+var FontSizeLg = "18px";
+var FontSizeXl = "20px";
+var FontSize2xl = "24px";
+var FontSize3xl = "30px";
+var FontSize4xl = "36px";
+var FontSize5xl = "48px";
+var FontWeightLight = 300;
+var FontWeightRegular = 400;
+var FontWeightMedium = 500;
+var FontWeightSemibold = 600;
+var FontWeightBold = 700;
+var FontWeightExtrabold = 800;
+var LineHeightTight = 1.25;
+var LineHeightNormal = 1.5;
+var LineHeightRelaxed = 1.625;
+export {
+  BorderRadiusFull,
+  BorderRadiusLg,
+  BorderRadiusMd,
+  BorderRadiusNone,
+  BorderRadiusSm,
+  BorderRadiusXl,
+  Breadcrumbs,
+  Button,
+  ButtonLink,
+  Cell,
+  Checkbox,
+  ColorActionDanger,
+  ColorActionDangerHover,
+  ColorActionDefault,
+  ColorActionDefaultHover,
+  ColorActionInfo,
+  ColorActionInfoHover,
+  ColorActionPrimary,
+  ColorActionPrimaryActive,
+  ColorActionPrimaryHover,
+  ColorActionSecondary,
+  ColorActionSecondaryHover,
+  ColorActionSuccess,
+  ColorActionSuccessHover,
+  ColorBorderAccent,
+  ColorBorderBrand,
+  ColorBorderDanger,
+  ColorBorderDefault,
+  ColorBorderFocus,
+  ColorBorderInfo,
+  ColorBorderStrong,
+  ColorBorderSuccess,
+  ColorBorderWarning,
+  ColorBrandAccent,
+  ColorBrandPrimary,
+  ColorGreen100,
+  ColorGreen200,
+  ColorGreen300,
+  ColorGreen400,
+  ColorGreen50,
+  ColorGreen500,
+  ColorGreen600,
+  ColorGreen700,
+  ColorGreen800,
+  ColorGreen900,
+  ColorNeutral0,
+  ColorNeutral100,
+  ColorNeutral1000,
+  ColorNeutral200,
+  ColorNeutral300,
+  ColorNeutral400,
+  ColorNeutral50,
+  ColorNeutral500,
+  ColorNeutral600,
+  ColorNeutral700,
+  ColorNeutral800,
+  ColorNeutral900,
+  ColorNeutral950,
+  ColorOverlayBackdrop,
+  ColorPurple100,
+  ColorPurple200,
+  ColorPurple300,
+  ColorPurple400,
+  ColorPurple50,
+  ColorPurple500,
+  ColorPurple600,
+  ColorPurple700,
+  ColorPurple800,
+  ColorPurple900,
+  ColorRose100,
+  ColorRose200,
+  ColorRose300,
+  ColorRose400,
+  ColorRose50,
+  ColorRose500,
+  ColorRose600,
+  ColorRose700,
+  ColorRose800,
+  ColorRose900,
+  ColorSlate100,
+  ColorSlate200,
+  ColorSlate300,
+  ColorSlate400,
+  ColorSlate50,
+  ColorSlate500,
+  ColorSlate600,
+  ColorSlate700,
+  ColorSlate800,
+  ColorSlate900,
+  ColorSurfaceAccent,
+  ColorSurfaceBrand,
+  ColorSurfaceDanger,
+  ColorSurfaceDefault,
+  ColorSurfaceInfo,
+  ColorSurfaceMuted,
+  ColorSurfaceOverlay,
+  ColorSurfaceSubtle,
+  ColorSurfaceSuccess,
+  ColorSurfaceWarning,
+  ColorTeal100,
+  ColorTeal200,
+  ColorTeal300,
+  ColorTeal400,
+  ColorTeal50,
+  ColorTeal500,
+  ColorTeal600,
+  ColorTeal700,
+  ColorTeal800,
+  ColorTeal900,
+  ColorTextAccent,
+  ColorTextBrand,
+  ColorTextDanger,
+  ColorTextInfo,
+  ColorTextInverse,
+  ColorTextPrimary,
+  ColorTextSecondary,
+  ColorTextSuccess,
+  ColorTextTertiary,
+  ColorTextWarning,
+  Column,
+  Dialog,
+  EmptyState,
+  Field,
+  Fieldset,
+  FontSize2xl,
+  FontSize3xl,
+  FontSize4xl,
+  FontSize5xl,
+  FontSizeBase,
+  FontSizeLg,
+  FontSizeSm,
+  FontSizeXl,
+  FontSizeXs,
+  FontWeightBold,
+  FontWeightExtrabold,
+  FontWeightLight,
+  FontWeightMedium,
+  FontWeightRegular,
+  FontWeightSemibold,
+  H1,
+  H2,
+  H3,
+  Heading2 as Heading,
+  Icon,
+  IconButton,
+  IconButtonLink,
+  Input,
+  InputAddon,
+  InputGroup,
+  InputGroupContext,
+  Label3 as Label,
+  LineHeightNormal,
+  LineHeightRelaxed,
+  LineHeightTight,
+  Link,
+  Menu,
+  Popover3 as Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  RouterProvider,
+  Row,
+  Select,
+  Spacing1,
+  Spacing12,
+  Spacing16,
+  Spacing2,
+  Spacing3,
+  Spacing4,
+  Spacing6,
+  Spacing8,
+  Spinner,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Table,
+  TableBody,
+  TableHeader,
+  Tabs,
+  ToastProvider,
+  ToggleButton,
+  Tooltip,
+  Tree,
+  createToastBridge,
+  useInputGroup,
+  useToast
+};
+//# sourceMappingURL=index.js.map