banhatten-ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,4524 @@
+// src/components/ColorPalette.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var tokenSamples = [
+  {
+    className: "bg-brand",
+    label: "bg-brand",
+    textClass: "text-white"
+  },
+  {
+    className: "bg-danger",
+    label: "bg-danger",
+    textClass: "text-white"
+  },
+  {
+    className: "bg-inactive",
+    label: "bg-inactive",
+    textClass: "text-primary"
+  },
+  {
+    className: "bg-success",
+    label: "bg-success",
+    textClass: "text-white"
+  },
+  {
+    className: "bg-warning",
+    label: "bg-warning",
+    textClass: "text-white"
+  },
+  {
+    className: "bg-info",
+    label: "bg-info",
+    textClass: "text-white"
+  }
+];
+var ColorPalette = () => {
+  return /* @__PURE__ */ jsxs("div", { className: "p-0", children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-primary mb-lg text-xl font-semibold", children: "Token Validation" }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3", children: tokenSamples.map((sample) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${sample.className} ${sample.textClass} flex h-24 items-center justify-center rounded-lg p-4 text-sm font-mono`,
+        children: sample.label
+      },
+      sample.label
+    )) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-primary mt-8 mb-4 text-lg font-semibold", children: "Text Colors" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-primary", children: "text-primary (dark gray)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-secondary", children: "text-secondary (medium gray)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-brand", children: "text-brand (primary blue)" }),
+      /* @__PURE__ */ jsx("p", { className: "text-danger", children: "text-danger (red)" })
+    ] })
+  ] });
+};
+
+// src/components/accordion.tsx
+import * as React3 from "react";
+import { cva as cva3 } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/icon.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var iconVariants = cva("shrink-0 select-none", {
+  variants: {
+    variant: {
+      outlined: "material-symbols-outlined",
+      rounded: "material-symbols-rounded",
+      sharp: "material-symbols-sharp"
+    }
+  },
+  defaultVariants: {
+    variant: "outlined"
+  }
+});
+var sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+var Icon = React.forwardRef(
+  ({
+    name,
+    variant,
+    size = "md",
+    filled = false,
+    weight = 400,
+    grade = 0,
+    label,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const fontSize = sizeMap[size];
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref,
+        className: cn(iconVariants({ variant }), className),
+        style: {
+          fontSize,
+          fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}`,
+          ...style
+        },
+        "aria-hidden": !label,
+        "aria-label": label,
+        role: label ? "img" : void 0,
+        ...props,
+        children: name
+      }
+    );
+  }
+);
+Icon.displayName = "Icon";
+
+// src/components/divider.tsx
+import * as React2 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var dividerVariants = cva2("border-default", {
+  variants: {
+    orientation: {
+      horizontal: "w-full border-t",
+      vertical: "h-full border-l"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid"
+  }
+});
+var Divider = React2.forwardRef(
+  ({ className, orientation = "horizontal", variant = "solid", ...props }, ref) => {
+    const Component = orientation === "vertical" ? "div" : "hr";
+    return /* @__PURE__ */ jsx3(
+      Component,
+      {
+        ref,
+        className: cn(dividerVariants({ orientation, variant }), className),
+        role: "separator",
+        "aria-orientation": orientation ?? void 0,
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+// src/components/accordion.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var accordionTriggerVariants = cva3(
+  "flex w-full items-center gap-md py-md px-md text-left text-primary transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default text-inactive pointer-events-none [&_*]:pointer-events-none [&_.accordion-expand-icon]:text-icon-inactive [&_.accordion-icon-left]:text-icon-inactive",
+        false: "cursor-pointer hover:bg-tertiary [&_.accordion-expand-icon]:text-icon-primary [&_.accordion-icon-left]:text-icon-secondary"
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+var AccordionContext = React3.createContext(null);
+var AccordionItemContext = React3.createContext(null);
+function useAccordion() {
+  const ctx = React3.useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used within Accordion.");
+  return ctx;
+}
+function useAccordionItem() {
+  const ctx = React3.useContext(AccordionItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/AccordionContent must be used within AccordionItem.");
+  return ctx;
+}
+function toSet(value) {
+  if (Array.isArray(value)) return new Set(value.filter(Boolean));
+  return value ? /* @__PURE__ */ new Set([value]) : /* @__PURE__ */ new Set();
+}
+var Accordion = React3.forwardRef(
+  ({
+    className,
+    type = "single",
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    children,
+    ...props
+  }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React3.useState(() => defaultValue ?? (type === "single" ? "" : []));
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const openKeys = React3.useMemo(() => toSet(value), [value]);
+    const onToggle = React3.useCallback(
+      (key) => {
+        let nextKeys;
+        if (openKeys.has(key)) {
+          nextKeys = new Set(openKeys);
+          nextKeys.delete(key);
+        } else {
+          nextKeys = type === "single" ? /* @__PURE__ */ new Set([key]) : /* @__PURE__ */ new Set([...openKeys, key]);
+        }
+        const nextValue = type === "single" ? Array.from(nextKeys)[0] ?? "" : Array.from(nextKeys);
+        if (!isControlled) setUncontrolledValue(nextValue);
+        onValueChange?.(nextValue);
+      },
+      [type, openKeys, isControlled, onValueChange]
+    );
+    const ctx = React3.useMemo(
+      () => ({ openKeys, onToggle }),
+      [openKeys, onToggle]
+    );
+    return /* @__PURE__ */ jsx4(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx4("div", { ref, className: cn("flex flex-col", className), ...props, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = React3.forwardRef(
+  ({ className, value, disabled = false, showDivider = false, children, ...props }, ref) => {
+    const triggerId = React3.useId();
+    const contentId = React3.useId();
+    const itemCtx = React3.useMemo(
+      () => ({ value, disabled, showDivider, triggerId, contentId }),
+      [value, disabled, showDivider, triggerId, contentId]
+    );
+    return /* @__PURE__ */ jsx4(AccordionItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx4("div", { ref, className: cn("flex flex-col", className), "data-value": value, ...props, children }) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React3.forwardRef(
+  ({ className, disabled: propDisabled, iconLeft, children, ...props }, ref) => {
+    const { openKeys, onToggle } = useAccordion();
+    const { value, disabled: itemDisabled, triggerId, contentId } = useAccordionItem();
+    const disabled = propDisabled ?? itemDisabled;
+    const isExpanded = openKeys.has(value);
+    const handleClick = (e) => {
+      if (disabled) return;
+      onToggle(value);
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        ref,
+        type: "button",
+        id: triggerId,
+        "aria-expanded": isExpanded,
+        "aria-controls": contentId,
+        "aria-disabled": disabled ?? void 0,
+        className: cn(accordionTriggerVariants({ disabled }), className),
+        onClick: handleClick,
+        ...props,
+        children: [
+          iconLeft != null && /* @__PURE__ */ jsx4("span", { className: "accordion-icon-left shrink-0", children: iconLeft }),
+          /* @__PURE__ */ jsx4("span", { className: "min-w-0 flex-1", children }),
+          /* @__PURE__ */ jsx4(
+            Icon,
+            {
+              name: isExpanded ? "expand_less" : "expand_more",
+              size: "sm",
+              className: "accordion-expand-icon shrink-0",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React3.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { openKeys } = useAccordion();
+    const { value, showDivider, triggerId, contentId } = useAccordionItem();
+    const isExpanded = openKeys.has(value);
+    if (!isExpanded) return null;
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      showDivider && /* @__PURE__ */ jsx4(Divider, { className: "my-0" }),
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          ref,
+          id: contentId,
+          role: "region",
+          "aria-labelledby": triggerId,
+          className: cn("py-md px-md text-secondary text-sm", className),
+          ...props,
+          children
+        }
+      )
+    ] });
+  }
+);
+AccordionContent.displayName = "AccordionContent";
+
+// src/components/alert.tsx
+import * as React6 from "react";
+import { cva as cva6 } from "class-variance-authority";
+
+// src/components/button.tsx
+import * as React4 from "react";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var buttonVariants = cva4(
+  "inline-flex items-center justify-center font-medium shrink-0 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-component-button-brand-bg text-on-color hover:bg-component-button-brand-bg-hover active:bg-brand-strong",
+        secondary: "bg-component-button-secondary-bg border border-strong text-component-button-secondary-fg shadow-xs hover:bg-component-button-secondary-bg-hover active:bg-quarterary",
+        tertiary: "bg-transparent text-component-button-tertiary-color-fg hover:bg-component-button-tertiary-bg-hover active:bg-quarterary",
+        danger: "bg-component-button-danger-bg text-on-color hover:bg-component-button-danger-bg-hover active:bg-danger-strong",
+        link: "bg-transparent text-component-button-tertiary-color-fg underline-offset-4 hover:underline",
+        "link-brand": "bg-transparent text-component-button-link-color-fg underline-offset-4 hover:text-component-button-link-color-fg-hover"
+      },
+      size: {
+        xs: "h-9 px-md gap-0.5 text-sm rounded-sm",
+        md: "h-10 px-lg gap-1 text-sm rounded-sm",
+        lg: "h-11 px-xl gap-1 text-base rounded-sm",
+        xl: "h-12 px-2xl gap-1 text-base rounded-sm",
+        "2xl": "h-14 px-2xl gap-2 text-base rounded-md"
+      },
+      iconOnly: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Link variants don't need height/padding
+      {
+        variant: "link",
+        className: "h-auto px-0 py-0 rounded-[6px]"
+      },
+      {
+        variant: "link-brand",
+        className: "h-auto px-0 py-0 rounded-[6px]"
+      },
+      // Icon-only variants: square buttons with no horizontal padding
+      {
+        iconOnly: true,
+        size: "xs",
+        className: "w-9 px-0"
+      },
+      {
+        iconOnly: true,
+        size: "md",
+        className: "w-10 px-0"
+      },
+      {
+        iconOnly: true,
+        size: "lg",
+        className: "w-11 px-0"
+      },
+      {
+        iconOnly: true,
+        size: "xl",
+        className: "w-12 px-0"
+      },
+      {
+        iconOnly: true,
+        size: "2xl",
+        className: "w-14 px-0"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      iconOnly: false
+    }
+  }
+);
+var buttonSizeToIconSize = {
+  xs: "md",
+  md: "md",
+  lg: "md",
+  xl: "lg",
+  "2xl": "lg"
+};
+var Button = React4.forwardRef(
+  ({
+    className,
+    variant,
+    size = "md",
+    asChild = false,
+    icon,
+    leftIcon,
+    rightIcon,
+    iconVariant,
+    iconFilled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const iconSize = buttonSizeToIconSize[size ?? "md"];
+    const hasChildren = children != null && children !== "";
+    const isIconOnly = !!icon || (!!leftIcon && !rightIcon && !hasChildren || !!rightIcon && !leftIcon && !hasChildren);
+    const iconElement = icon ? /* @__PURE__ */ jsx5(
+      Icon,
+      {
+        name: icon,
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        "aria-hidden": true
+      }
+    ) : null;
+    const leftIconElement = leftIcon && !icon ? /* @__PURE__ */ jsx5(
+      Icon,
+      {
+        name: leftIcon,
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        "aria-hidden": true
+      }
+    ) : null;
+    const rightIconElement = rightIcon && !icon ? /* @__PURE__ */ jsx5(
+      Icon,
+      {
+        name: rightIcon,
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        "aria-hidden": true
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs3(
+      Comp,
+      {
+        ref,
+        className: cn(
+          buttonVariants({ variant, size, iconOnly: isIconOnly }),
+          className
+        ),
+        ...props,
+        children: [
+          iconElement,
+          leftIconElement,
+          /* @__PURE__ */ jsx5(Slottable, { children }),
+          rightIconElement
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/close-button.tsx
+import * as React5 from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var closeButtonVariants = cva5(
+  "inline-flex items-center justify-center shrink-0 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        ghost: "bg-transparent text-icon-primary hover:bg-tertiary active:bg-quarterary disabled:text-inactive",
+        outlined: "bg-transparent border border-strong text-icon-primary hover:border-strong hover:bg-secondary active:bg-tertiary disabled:border-inactive-subtle disabled:bg-secondary disabled:text-inactive"
+      },
+      size: {
+        sm: "size-6",
+        md: "size-8",
+        lg: "size-10",
+        xl: "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md"
+    }
+  }
+);
+var closeButtonSizeToIconSize = {
+  sm: "sm",
+  md: "md",
+  lg: "md",
+  xl: "lg"
+};
+var CloseButton = React5.forwardRef(
+  ({
+    className,
+    variant,
+    size = "md",
+    "aria-label": ariaLabel = "Close",
+    iconVariant,
+    iconFilled,
+    ...props
+  }, ref) => {
+    const iconSize = closeButtonSizeToIconSize[size ?? "md"];
+    return /* @__PURE__ */ jsx6(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": ariaLabel,
+        className: cn(closeButtonVariants({ variant, size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx6(
+          Icon,
+          {
+            name: "close",
+            size: iconSize,
+            variant: iconVariant,
+            filled: iconFilled,
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+);
+CloseButton.displayName = "CloseButton";
+
+// src/components/alert.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var alertVariants = cva6(
+  "flex gap-md rounded-sm px-md py-md transition-colors",
+  {
+    variants: {
+      type: {
+        info: "",
+        success: "",
+        warning: "",
+        danger: "",
+        neutral: ""
+      },
+      emphasis: {
+        // Low is identical across all types — no compound variant needed
+        low: "bg-primary border border-strong text-primary",
+        medium: "",
+        // NOTE: "medium" and "moderate" are near-synonyms in English.
+        // Consider renaming to "subtle" / "bold" in a future major version.
+        moderate: "",
+        high: ""
+      }
+    },
+    compoundVariants: [
+      // Medium emphasis — light pastel backgrounds with pastel borders
+      { emphasis: "medium", type: "info", className: "bg-info-tertiary border border-info-subtle text-info" },
+      { emphasis: "medium", type: "success", className: "bg-success-tertiary border border-success-secondary text-success" },
+      { emphasis: "medium", type: "warning", className: "bg-warning-tertiary border border-warning-secondary text-warning-strong" },
+      { emphasis: "medium", type: "danger", className: "bg-danger-tertiary border border-danger-secondary text-danger" },
+      { emphasis: "medium", type: "neutral", className: "bg-secondary border border-strong" },
+      // Moderate emphasis — secondary backgrounds with more saturated borders
+      { emphasis: "moderate", type: "info", className: "bg-info-secondary border border-info-subtle text-info" },
+      { emphasis: "moderate", type: "success", className: "bg-success-secondary border border-success-secondary text-success" },
+      { emphasis: "moderate", type: "warning", className: "bg-warning-secondary border border-warning-secondary text-warning-strong" },
+      { emphasis: "moderate", type: "danger", className: "bg-danger-secondary border border-danger-secondary text-danger" },
+      { emphasis: "moderate", type: "neutral", className: "bg-tertiary border border-strong" },
+      // High emphasis — saturated backgrounds with white text, no border
+      { emphasis: "high", type: "info", className: "bg-info text-on-color" },
+      { emphasis: "high", type: "success", className: "bg-success text-on-color" },
+      { emphasis: "high", type: "warning", className: "bg-warning text-on-color" },
+      { emphasis: "high", type: "danger", className: "bg-danger text-on-color" },
+      { emphasis: "high", type: "neutral", className: "bg-quarterary text-primary" }
+    ],
+    defaultVariants: {
+      type: "info",
+      emphasis: "medium"
+    }
+  }
+);
+var TYPE_ICON = {
+  danger: "error",
+  success: "check_circle",
+  warning: "warning",
+  info: "info",
+  neutral: "notifications"
+};
+var TYPE_COLOR = {
+  danger: "text-danger",
+  success: "text-success",
+  warning: "text-warning-strong",
+  info: "text-info",
+  neutral: "text-primary"
+};
+var TYPE_ICON_COLOR = {
+  danger: "text-danger",
+  success: "text-success",
+  warning: "text-warning-strong",
+  info: "text-info",
+  neutral: "text-icon-primary"
+};
+var Alert = React6.forwardRef(
+  ({
+    className,
+    type = "info",
+    emphasis = "medium",
+    expand = false,
+    title,
+    description,
+    actions,
+    onClose,
+    iconVariant,
+    iconFilled,
+    role,
+    ...props
+  }, ref) => {
+    const t = type ?? "info";
+    const e = emphasis ?? "medium";
+    const isHigh = e === "high";
+    const isHighContrast = isHigh && t !== "neutral";
+    const iconSize = e === "low" ? "sm" : "md";
+    const iconColor = isHighContrast ? "text-on-color" : TYPE_ICON_COLOR[t];
+    const descriptionColor = isHighContrast ? "text-on-color" : "";
+    const closeButtonColor = e === "low" ? "text-icon-secondary" : t === "neutral" ? isHigh ? "text-icon-primary" : "text-icon-secondary" : iconColor;
+    const resolvedRole = role ?? (t === "danger" || t === "warning" ? "alert" : "status");
+    const liveRegion = t === "danger" || t === "warning" ? "assertive" : "polite";
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        role: resolvedRole,
+        "aria-live": liveRegion,
+        className: cn(
+          alertVariants({ type: t, emphasis: e }),
+          expand ? "items-start" : "items-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx7(
+            Icon,
+            {
+              name: TYPE_ICON[t],
+              size: iconSize,
+              variant: iconVariant,
+              filled: iconFilled,
+              className: cn("shrink-0", iconColor),
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs4(
+              "div",
+              {
+                className: cn(
+                  "flex justify-between gap-md",
+                  expand ? "items-start" : "items-center"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
+                    /* @__PURE__ */ jsx7(
+                      "div",
+                      {
+                        className: cn(
+                          "text-sm leading-5",
+                          expand && description ? "font-medium" : "font-regular"
+                        ),
+                        children: title
+                      }
+                    ),
+                    expand && description && /* @__PURE__ */ jsx7(
+                      "div",
+                      {
+                        className: cn("text-sm leading-5 mt-xs", descriptionColor),
+                        children: description
+                      }
+                    )
+                  ] }),
+                  onClose && /* @__PURE__ */ jsx7(
+                    CloseButton,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: onClose,
+                      "aria-label": "Close alert",
+                      className: closeButtonColor
+                    }
+                  )
+                ]
+              }
+            ),
+            expand && actions && actions.length > 0 && /* @__PURE__ */ jsx7("div", { className: "flex items-center gap-md mt-sm", children: actions.map((action, index) => /* @__PURE__ */ jsx7(
+              Button,
+              {
+                variant: "link-brand",
+                size: "xs",
+                onClick: action.onClick,
+                className: isHighContrast ? "text-on-color" : e === "low" ? void 0 : TYPE_COLOR[t],
+                children: action.label
+              },
+              index
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// src/components/avatar.tsx
+import * as React7 from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var avatarVariants = cva7(
+  "inline-flex items-center justify-center font-medium shrink-0 bg-quarterary text-secondary select-none overflow-hidden",
+  {
+    variants: {
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-md"
+      },
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-7 w-7 text-xs",
+        md: "h-8 w-8 text-sm",
+        lg: "h-9 w-9 text-sm",
+        xl: "h-10 w-10 text-base",
+        "2xl": "h-12 w-12 text-lg",
+        "3xl": "h-14 w-14 text-xl",
+        "4xl": "h-16 w-16 text-xl"
+      }
+    },
+    defaultVariants: {
+      shape: "circle",
+      size: "md"
+    }
+  }
+);
+var avatarSizeToIconSize = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm",
+  lg: "sm",
+  xl: "md",
+  "2xl": "md",
+  "3xl": "lg",
+  "4xl": "lg"
+};
+var Avatar = React7.forwardRef(
+  ({
+    className,
+    shape,
+    size = "md",
+    initials,
+    "aria-label": ariaLabel,
+    username,
+    supportingText,
+    ...props
+  }, ref) => {
+    const iconSize = avatarSizeToIconSize[size ?? "md"];
+    const trimmedInitials = initials?.trim() ?? "";
+    const trimmedUsername = username?.trim() ?? "";
+    const trimmedSupporting = supportingText?.trim() ?? "";
+    const hasInitials = trimmedInitials !== "";
+    const isDecorative = ariaLabel == null || ariaLabel.trim() === "";
+    const hasText = trimmedUsername !== "" || trimmedSupporting !== "";
+    const circle = /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: isDecorative ? void 0 : "img",
+        "aria-label": isDecorative ? void 0 : ariaLabel,
+        className: cn(avatarVariants({ shape, size }), !hasText && className),
+        children: hasInitials ? /* @__PURE__ */ jsx8("span", { className: "shrink-0 leading-none", children: trimmedInitials.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ jsx8(
+          Icon,
+          {
+            name: "person",
+            size: iconSize,
+            className: "text-icon-secondary",
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+    if (hasText) {
+      return /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          ref,
+          className: cn("inline-flex items-center gap-md min-w-0", className),
+          ...props,
+          children: [
+            circle,
+            /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col justify-center", children: [
+              trimmedUsername !== "" && /* @__PURE__ */ jsx8("span", { className: "truncate text-sm font-medium text-primary", children: trimmedUsername }),
+              trimmedSupporting !== "" && /* @__PURE__ */ jsx8("span", { className: "truncate text-xs text-secondary", children: trimmedSupporting })
+            ] })
+          ]
+        }
+      );
+    }
+    return React7.cloneElement(circle, {
+      ref,
+      className: cn(avatarVariants({ shape, size }), className),
+      ...props
+    });
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/avatar-group.tsx
+import * as React9 from "react";
+
+// src/components/avatar-profile.tsx
+import * as React8 from "react";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function withFilledIcon(node) {
+  if (React8.isValidElement(node) && node.type === Icon) {
+    return React8.cloneElement(node, {
+      filled: true
+    });
+  }
+  return node;
+}
+var avatarProfileVariants = cva8(
+  "relative inline-flex shrink-0 border-2 border-subtract shadow-sm",
+  {
+    variants: {
+      shape: {
+        circle: "rounded-full",
+        rounded: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      shape: "circle"
+    }
+  }
+);
+var badgeSlotClasses = "absolute flex items-center justify-center rounded-full shrink-0 overflow-hidden z-10 box-border border-2 border-subtract bg-brand text-on-color w-xl h-xl min-w-xl min-h-xl";
+var AvatarProfile = React8.forwardRef(
+  ({
+    className,
+    shape,
+    size = "md",
+    initials,
+    "aria-label": ariaLabel,
+    topRight,
+    bottomRight,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        className: cn(avatarProfileVariants({ shape }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9(
+            Avatar,
+            {
+              shape: shape ?? "circle",
+              size,
+              initials,
+              "aria-label": ariaLabel,
+              className: "shrink-0"
+            }
+          ),
+          topRight != null && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn(
+                badgeSlotClasses,
+                "top-0 right-0 translate-x-1/2 -translate-y-1/2"
+              ),
+              "aria-hidden": true,
+              children: withFilledIcon(topRight)
+            }
+          ),
+          bottomRight != null && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: cn(
+                badgeSlotClasses,
+                "bottom-0 right-0 translate-x-1/2 translate-y-1/2"
+              ),
+              "aria-hidden": true,
+              children: withFilledIcon(bottomRight)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarProfile.displayName = "AvatarProfile";
+
+// src/components/avatar-group.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var groupSizeToProfileSize = {
+  "24": "xs",
+  "32": "md",
+  "40": "xl"
+};
+var groupSizeToIconSize = {
+  "24": "xs",
+  "32": "sm",
+  "40": "md"
+};
+var overlapClass = "-ml-sm";
+var badgeSizeClasses = {
+  "24": "h-6 w-6 min-w-6 min-h-6 text-xs",
+  "32": "h-8 w-8 min-w-8 min-h-8 text-sm",
+  "40": "h-10 w-10 min-w-10 min-h-10 text-base"
+};
+var AvatarGroup = React9.forwardRef(
+  ({
+    className,
+    lastOnTop = true,
+    size = "32",
+    moreAvatars = false,
+    addMore = false,
+    avatars,
+    maxVisible = 4,
+    onAddMore,
+    ...props
+  }, ref) => {
+    const profileSize = groupSizeToProfileSize[size];
+    const iconSize = groupSizeToIconSize[size];
+    const badgeSize = badgeSizeClasses[size];
+    const visible = avatars.slice(0, maxVisible);
+    const overflowCount = avatars.length - visible.length;
+    const showOverflow = moreAvatars && overflowCount > 0;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-label": avatars.length > 0 ? `${avatars.length} ${avatars.length === 1 ? "member" : "members"}` : void 0,
+        className: cn("inline-flex items-center", className),
+        ...props,
+        children: [
+          visible.map((item, index) => /* @__PURE__ */ jsx10(
+            "span",
+            {
+              className: cn("relative shrink-0", index === 0 ? "" : overlapClass),
+              style: {
+                zIndex: lastOnTop ? visible.length - index : index + 1
+              },
+              children: /* @__PURE__ */ jsx10(
+                AvatarProfile,
+                {
+                  size: profileSize,
+                  shape: "circle",
+                  initials: item.initials,
+                  "aria-label": item["aria-label"]
+                }
+              )
+            },
+            index
+          )),
+          showOverflow && /* @__PURE__ */ jsxs7(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center justify-center rounded-full border-2 border-subtract bg-tertiary text-secondary font-medium shrink-0",
+                overlapClass,
+                badgeSize
+              ),
+              style: { zIndex: 0 },
+              "aria-hidden": true,
+              children: [
+                "+",
+                overflowCount
+              ]
+            }
+          ),
+          addMore && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onAddMore,
+              className: cn(
+                "inline-flex items-center justify-center rounded-full border-2 border-dashed border-strong bg-transparent text-icon-tertiary shrink-0 transition-colors hover:bg-tertiary hover:border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+                overlapClass,
+                badgeSize
+              ),
+              "aria-label": "Add member",
+              children: /* @__PURE__ */ jsx10(Icon, { name: "add", size: iconSize, filled: true, "aria-hidden": true })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+
+// src/components/badge.tsx
+import * as React10 from "react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var badgeVariants = cva9(
+  "inline-flex items-center justify-center rounded-full font-medium shrink-0 gap-1",
+  {
+    variants: {
+      variant: {
+        filled: "",
+        light: "border",
+        outlined: "border bg-transparent"
+      },
+      color: {
+        brand: "",
+        neutral: "",
+        success: "",
+        warning: "",
+        danger: "",
+        info: ""
+      },
+      size: {
+        sm: "h-6 px-sm text-xs leading-4",
+        lg: "h-7 px-md text-sm leading-5"
+      }
+    },
+    compoundVariants: [
+      // Filled variants
+      {
+        variant: "filled",
+        color: "brand",
+        className: "bg-brand text-on-color"
+      },
+      {
+        variant: "filled",
+        color: "neutral",
+        className: "bg-brand-neutral-700 text-on-color"
+      },
+      {
+        variant: "filled",
+        color: "success",
+        className: "bg-success text-on-color"
+      },
+      {
+        variant: "filled",
+        color: "warning",
+        className: "bg-warning text-on-color"
+      },
+      {
+        variant: "filled",
+        color: "danger",
+        className: "bg-danger text-on-color"
+      },
+      {
+        variant: "filled",
+        color: "info",
+        className: "bg-info text-on-color"
+      },
+      // Light variants
+      {
+        variant: "light",
+        color: "brand",
+        className: "bg-brand-tertiary border-brand-secondary text-brand"
+      },
+      {
+        variant: "light",
+        color: "neutral",
+        className: "bg-secondary border-strong text-primary"
+      },
+      {
+        variant: "light",
+        color: "success",
+        className: "bg-success-tertiary border-success-secondary text-success-strong"
+      },
+      {
+        variant: "light",
+        color: "warning",
+        className: "bg-warning-tertiary border-warning-secondary text-warning-strong"
+      },
+      {
+        variant: "light",
+        color: "danger",
+        className: "bg-danger-tertiary border-danger-secondary text-danger-strong"
+      },
+      {
+        variant: "light",
+        color: "info",
+        className: "bg-info-tertiary border-info-subtle text-info-strong"
+      },
+      // Outlined variants
+      {
+        variant: "outlined",
+        color: "brand",
+        className: "border-brand text-brand"
+      },
+      {
+        variant: "outlined",
+        color: "neutral",
+        className: "border-strong text-primary"
+      },
+      {
+        variant: "outlined",
+        color: "success",
+        className: "border-success text-success"
+      },
+      {
+        variant: "outlined",
+        color: "warning",
+        className: "border-warning text-warning-strong"
+      },
+      {
+        variant: "outlined",
+        color: "danger",
+        className: "border-danger text-danger"
+      },
+      {
+        variant: "outlined",
+        color: "info",
+        className: "border-info text-info"
+      }
+    ],
+    defaultVariants: {
+      variant: "light",
+      color: "brand",
+      size: "sm"
+    }
+  }
+);
+var badgeSizeToIconSize = {
+  sm: "xs",
+  lg: "sm"
+};
+var Badge = React10.forwardRef(
+  ({
+    className,
+    variant,
+    color,
+    size = "sm",
+    withDot,
+    leftIcon,
+    rightIcon,
+    iconVariant,
+    iconFilled,
+    children,
+    ...props
+  }, ref) => {
+    const iconSize = badgeSizeToIconSize[size ?? "sm"];
+    const dotElement = withDot ? /* @__PURE__ */ jsx11(
+      "span",
+      {
+        className: "inline-block size-1.5 rounded-full bg-current",
+        "aria-hidden": "true"
+      }
+    ) : null;
+    const leftIconElement = leftIcon ? /* @__PURE__ */ jsx11(
+      Icon,
+      {
+        name: leftIcon,
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        "aria-hidden": true
+      }
+    ) : null;
+    const rightIconElement = rightIcon ? /* @__PURE__ */ jsx11(
+      Icon,
+      {
+        name: rightIcon,
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        "aria-hidden": true
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs8(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ variant, color, size }), className),
+        ...props,
+        children: [
+          dotElement,
+          leftIconElement,
+          children,
+          rightIconElement
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/breadcrumb.tsx
+import * as React11 from "react";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var breadcrumbListVariants = cva10("flex flex-wrap items-center gap-xs", {
+  variants: {
+    containerStyle: {
+      default: "",
+      withBackground: "rounded-sm border border-default bg-primary p-md"
+    }
+  },
+  defaultVariants: {
+    containerStyle: "default"
+  }
+});
+var breadcrumbSeparatorVariants = cva10(
+  "flex items-center shrink-0 text-inactive",
+  {
+    variants: {
+      separator: {
+        slash: "px-xs text-sm font-normal",
+        chevron: "[&_.breadcrumb-sep-icon]:text-icon-inactive"
+      }
+    },
+    defaultVariants: {
+      separator: "chevron"
+    }
+  }
+);
+var Breadcrumb = React11.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+    "nav",
+    {
+      ref,
+      "aria-label": "Breadcrumb",
+      className: cn(className),
+      ...props
+    }
+  )
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React11.forwardRef(
+  ({ className, containerStyle, ...props }, ref) => /* @__PURE__ */ jsx12(
+    "ol",
+    {
+      ref,
+      className: cn(breadcrumbListVariants({ containerStyle }), className),
+      ...props
+    }
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbListItem = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+  "li",
+  {
+    ref,
+    className: cn("inline-flex items-center gap-xs", className),
+    ...props
+  }
+));
+BreadcrumbListItem.displayName = "BreadcrumbListItem";
+var BreadcrumbSeparator = React11.forwardRef(({ className, separator = "chevron", ...props }, ref) => /* @__PURE__ */ jsx12(
+  "span",
+  {
+    ref,
+    role: "presentation",
+    "aria-hidden": true,
+    className: cn(breadcrumbSeparatorVariants({ separator }), className),
+    ...props,
+    children: separator === "slash" ? "/" : /* @__PURE__ */ jsx12(
+      Icon,
+      {
+        name: "chevron_right",
+        size: "sm",
+        "aria-hidden": true,
+        className: "breadcrumb-sep-icon"
+      }
+    )
+  }
+));
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+// src/components/breadcrumb-item.tsx
+import * as React12 from "react";
+import { cva as cva11 } from "class-variance-authority";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var breadcrumbItemVariants = cva11(
+  "inline-flex text-sm items-center gap-xs rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 [&_.breadcrumb-icon]:shrink-0",
+  {
+    variants: {
+      variant: {
+        iconText: "min-w-0",
+        iconOnly: "",
+        overflow: "min-w-0"
+      },
+      state: {
+        default: "text-secondary [&_.breadcrumb-icon]:text-icon-secondary hover:text-tertiary-hover hover:[&_.breadcrumb-icon]:text-icon-tertiary-hover",
+        active: "text-primary font-medium [&_.breadcrumb-icon]:text-icon-primary",
+        disabled: "text-inactive [&_.breadcrumb-icon]:text-icon-inactive-subtle cursor-default pointer-events-none"
+      },
+      overflowHover: {
+        true: "hover:bg-tertiary",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "overflow",
+        overflowHover: true,
+        state: "default",
+        className: "hover:bg-tertiary hover:text-secondary-hover hover:[&_.breadcrumb-icon]:text-icon-secondary-hover"
+      }
+    ],
+    defaultVariants: {
+      variant: "iconText",
+      state: "default",
+      overflowHover: false
+    }
+  }
+);
+var BreadcrumbItem = React12.forwardRef(
+  ({
+    className,
+    variant: styleVariant = "iconText",
+    state,
+    overflowHover,
+    active = false,
+    disabled = false,
+    icon,
+    href,
+    children,
+    ...props
+  }, ref) => {
+    const derivedState = state ? state : disabled ? "disabled" : active ? "active" : "default";
+    const showOverflowHover = overflowHover ?? (styleVariant === "overflow" && derivedState === "default");
+    const iconName = styleVariant === "overflow" ? "more_horiz" : icon ?? "home";
+    const classes = cn(
+      breadcrumbItemVariants({
+        variant: styleVariant,
+        state: derivedState,
+        overflowHover: showOverflowHover
+      }),
+      className
+    );
+    const iconElement = styleVariant !== "overflow" || iconName ? /* @__PURE__ */ jsx13(
+      Icon,
+      {
+        name: iconName,
+        size: "sm",
+        filled: derivedState === "active",
+        "aria-hidden": true,
+        className: "breadcrumb-icon"
+      }
+    ) : null;
+    const labelContent = styleVariant === "iconText" && children != null ? /* @__PURE__ */ jsx13("span", { className: "truncate", children }) : (styleVariant === "iconOnly" || styleVariant === "overflow") && children != null ? /* @__PURE__ */ jsx13("span", { className: "sr-only", children }) : null;
+    if (disabled) {
+      return /* @__PURE__ */ jsxs9(
+        "span",
+        {
+          ref,
+          className: classes,
+          "aria-disabled": "true",
+          ...props,
+          children: [
+            iconElement,
+            labelContent
+          ]
+        }
+      );
+    }
+    if (active || !href) {
+      return /* @__PURE__ */ jsxs9(
+        "span",
+        {
+          ref,
+          className: classes,
+          "aria-current": active ? "page" : void 0,
+          ...props,
+          children: [
+            iconElement,
+            labelContent
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs9(
+      "a",
+      {
+        ref,
+        href,
+        className: classes,
+        ...props,
+        children: [
+          iconElement,
+          labelContent
+        ]
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+// src/components/button-group-item.tsx
+import * as React13 from "react";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var buttonGroupItemVariants = cva12(
+  "inline-flex items-center justify-center shrink-0 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 disabled:pointer-events-none",
+  {
+    variants: {
+      size: {
+        small: "h-9 px-md gap-0.5 text-sm",
+        medium: "h-10 px-lg gap-1 text-sm"
+      },
+      type: {
+        textAndIcon: "",
+        textOnly: "",
+        iconOnly: ""
+      },
+      selected: {
+        true: "bg-brand-tertiary text-brand",
+        false: "bg-transparent text-primary hover:bg-tertiary disabled:text-inactive disabled:bg-inactive"
+      }
+    },
+    compoundVariants: [
+      {
+        type: "iconOnly",
+        size: "small",
+        className: "w-9 px-0"
+      },
+      {
+        type: "iconOnly",
+        size: "medium",
+        className: "w-10 px-0"
+      }
+    ],
+    defaultVariants: {
+      size: "medium",
+      type: "textAndIcon",
+      selected: false
+    }
+  }
+);
+var sizeToIconSize = {
+  small: "sm",
+  medium: "md"
+};
+var ButtonGroupItem = React13.forwardRef(
+  ({
+    className,
+    size = "medium",
+    type = "textAndIcon",
+    selected = false,
+    position,
+    leftIcon,
+    rightIcon,
+    icon,
+    children,
+    disabled,
+    "aria-current": ariaCurrent,
+    ...props
+  }, ref) => {
+    const iconSize = sizeToIconSize[size ?? "medium"];
+    const positionClass = position === "first" ? "rounded-l-sm rounded-r-none" : position === "middle" ? "rounded-none border-l border-strong" : position === "last" ? "rounded-r-sm rounded-l-none border-l border-strong" : "rounded-sm";
+    const iconColorClass = selected ? "text-icon-brand" : disabled ? "text-icon-inactive" : "text-icon-primary";
+    return /* @__PURE__ */ jsxs10(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          buttonGroupItemVariants({ size, type, selected }),
+          positionClass,
+          className
+        ),
+        disabled,
+        "aria-current": selected ? "true" : ariaCurrent,
+        "aria-disabled": disabled,
+        ...props,
+        children: [
+          type === "textAndIcon" && leftIcon && /* @__PURE__ */ jsx14(Icon, { name: leftIcon, size: iconSize, className: iconColorClass, "aria-hidden": true }),
+          type === "iconOnly" && icon && /* @__PURE__ */ jsx14(Icon, { name: icon, size: iconSize, className: iconColorClass, "aria-hidden": true }),
+          type !== "iconOnly" && /* @__PURE__ */ jsxs10("span", { className: "inline-grid [&>*]:col-start-1 [&>*]:row-start-1", children: [
+            /* @__PURE__ */ jsx14("span", { className: "invisible font-medium", "aria-hidden": true, children }),
+            /* @__PURE__ */ jsx14("span", { className: selected ? "font-medium" : "font-normal", children })
+          ] }),
+          type === "textAndIcon" && rightIcon && /* @__PURE__ */ jsx14(Icon, { name: rightIcon, size: iconSize, className: iconColorClass, "aria-hidden": true })
+        ]
+      }
+    );
+  }
+);
+ButtonGroupItem.displayName = "ButtonGroupItem";
+
+// src/components/button-group.tsx
+import * as React14 from "react";
+import { cva as cva13 } from "class-variance-authority";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var buttonGroupVariants = cva13(
+  "inline-flex flex-row items-stretch rounded-sm border border-strong bg-primary overflow-hidden"
+);
+function getPosition(index, total) {
+  if (total <= 1) return "only";
+  if (index === 0) return "first";
+  if (index === total - 1) return "last";
+  return "middle";
+}
+var ButtonGroup = React14.forwardRef(
+  ({ className, size = "medium", children, ...props }, ref) => {
+    const items = React14.Children.toArray(children).filter(Boolean);
+    const total = items.length;
+    return /* @__PURE__ */ jsx15(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(buttonGroupVariants(), className),
+        ...props,
+        children: items.map((child, index) => {
+          const position = getPosition(index, total);
+          const childProps = React14.isValidElement(child) ? child.props : {};
+          const injectedProps = {
+            position,
+            ...childProps.size === void 0 ? { size } : {}
+          };
+          return React14.isValidElement(child) && typeof child.type !== "string" ? React14.cloneElement(
+            child,
+            injectedProps
+          ) : child;
+        })
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/components/featured-icon.tsx
+import * as React15 from "react";
+import { cva as cva14 } from "class-variance-authority";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var featuredIconVariants = cva14(
+  "inline-flex shrink-0 items-center justify-center",
+  {
+    variants: {
+      variant: {
+        "circle-light": "rounded-full",
+        "square-light": "rounded-lg",
+        "circle-pulse": "rounded-full",
+        "solid-circle": "rounded-full",
+        "solid-square": "rounded-lg"
+      },
+      type: {
+        brand: "",
+        success: "",
+        danger: "",
+        warning: "",
+        neutral: ""
+      },
+      size: {
+        sm: "p-sm",
+        md: "p-md",
+        lg: "p-lg"
+      }
+    },
+    compoundVariants: [
+      // Circle light + type (light bg, colored icon)
+      { variant: "circle-light", type: "brand", className: "bg-brand-tertiary text-brand" },
+      { variant: "circle-light", type: "success", className: "bg-success-tertiary text-success" },
+      { variant: "circle-light", type: "danger", className: "bg-danger-tertiary text-danger" },
+      { variant: "circle-light", type: "warning", className: "bg-warning-tertiary text-warning" },
+      { variant: "circle-light", type: "neutral", className: "bg-tertiary text-secondary" },
+      // Square light + type
+      { variant: "square-light", type: "brand", className: "bg-brand-tertiary text-brand" },
+      { variant: "square-light", type: "success", className: "bg-success-tertiary text-success" },
+      { variant: "square-light", type: "danger", className: "bg-danger-tertiary text-danger" },
+      { variant: "square-light", type: "warning", className: "bg-warning-tertiary text-warning" },
+      { variant: "square-light", type: "neutral", className: "bg-tertiary text-secondary" },
+      // Circle pulse + type (solid bg, on-color icon, glow, 8px border)
+      { variant: "circle-pulse", type: "brand", className: "border-8 border-brand-tertiary bg-brand-secondary text-brand" },
+      { variant: "circle-pulse", type: "success", className: "border-8 border-success-tertiary bg-success-secondary text-success" },
+      { variant: "circle-pulse", type: "danger", className: "border-8 border-danger-tertiary bg-danger-secondary text-danger" },
+      { variant: "circle-pulse", type: "warning", className: "border-8 border-warning-tertiary bg-warning-secondary text-warning" },
+      { variant: "circle-pulse", type: "neutral", className: "border-8 border-secondary bg-quarterary text-secondary" },
+      // Solid circle + type
+      { variant: "solid-circle", type: "brand", className: "bg-brand text-on-color" },
+      { variant: "solid-circle", type: "success", className: "bg-success text-on-color" },
+      { variant: "solid-circle", type: "danger", className: "bg-danger text-on-color" },
+      { variant: "solid-circle", type: "warning", className: "bg-warning text-on-color" },
+      { variant: "solid-circle", type: "neutral", className: "bg-primary-inverse text-on-color" },
+      // Solid square + type
+      { variant: "solid-square", type: "brand", className: "bg-brand text-on-color" },
+      { variant: "solid-square", type: "success", className: "bg-success text-on-color" },
+      { variant: "solid-square", type: "danger", className: "bg-danger text-on-color" },
+      { variant: "solid-square", type: "warning", className: "bg-warning text-on-color" },
+      { variant: "solid-square", type: "neutral", className: "bg-primary-inverse text-on-color" }
+    ],
+    defaultVariants: {
+      variant: "solid-circle",
+      type: "brand",
+      size: "md"
+    }
+  }
+);
+var featuredSizeToIconSize = {
+  sm: "md",
+  md: "lg",
+  lg: "xl"
+};
+var FeaturedIcon = React15.forwardRef(
+  ({
+    className,
+    variant,
+    type,
+    size = "md",
+    name,
+    label,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx16(
+      "span",
+      {
+        ref,
+        className: cn(
+          featuredIconVariants({ variant, type, size }),
+          className
+        ),
+        role: label ? "img" : void 0,
+        "aria-label": label,
+        "aria-hidden": !label,
+        ...props,
+        children: /* @__PURE__ */ jsx16(Icon, { name, size: featuredSizeToIconSize[size ?? "md"], filled: true })
+      }
+    );
+  }
+);
+FeaturedIcon.displayName = "FeaturedIcon";
+
+// src/components/progress-bar.tsx
+import * as React16 from "react";
+import { cva as cva15 } from "class-variance-authority";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var progressBarTrackVariants = cva15(
+  "w-full overflow-hidden rounded-sm bg-tertiary",
+  {
+    variants: {
+      size: {
+        sm: "h-1",
+        lg: "h-2"
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+);
+var progressBarFillVariants = cva15("h-full rounded-sm shrink-0", {
+  variants: {
+    color: {
+      brand: "bg-brand",
+      success: "bg-success",
+      danger: "bg-danger",
+      info: "bg-info",
+      neutral: "bg-quarterary"
+    }
+  },
+  defaultVariants: {
+    color: "brand"
+  }
+});
+var ProgressBar = React16.forwardRef(
+  ({
+    className,
+    size = "sm",
+    color = "brand",
+    value,
+    label,
+    showLabelInfoIcon = false,
+    helperText,
+    showValue = false,
+    onRefresh,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? void 0 : Math.min(100, Math.max(0, value));
+    const valueText = clampedValue !== void 0 ? `${Math.round(clampedValue)}%` : void 0;
+    const barId = React16.useId();
+    const labelId = `${barId}-label`;
+    const helperId = `${barId}-helper`;
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn("flex min-w-0 flex-col", className),
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-describedby": helperText ? helperId : void 0,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              id: labelId,
+              className: "flex items-center gap-xs text-sm font-medium text-primary mb-sm",
+              children: [
+                label,
+                showLabelInfoIcon && /* @__PURE__ */ jsx17(
+                  Icon,
+                  {
+                    name: "info",
+                    size: "xs",
+                    className: "text-icon-tertiary",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              id: barId,
+              role: "progressbar",
+              "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+              "aria-valuemin": isIndeterminate ? void 0 : 0,
+              "aria-valuemax": isIndeterminate ? void 0 : 100,
+              "aria-valuetext": isIndeterminate ? "Loading" : valueText,
+              "aria-label": ariaLabel,
+              className: "flex min-w-0 items-center gap-md",
+              children: [
+                /* @__PURE__ */ jsx17(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 flex-1",
+                      progressBarTrackVariants({ size })
+                    ),
+                    children: /* @__PURE__ */ jsx17(
+                      "div",
+                      {
+                        className: cn(
+                          progressBarFillVariants({ color }),
+                          isIndeterminate ? "w-[40%] min-w-[40%] animate-pulse" : "min-w-0"
+                        ),
+                        style: !isIndeterminate && clampedValue !== void 0 ? { width: `${clampedValue}%` } : void 0
+                      }
+                    )
+                  }
+                ),
+                showValue && !isIndeterminate && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-sm text-secondary shrink-0", children: [
+                  /* @__PURE__ */ jsx17("span", { "aria-hidden": true, children: valueText }),
+                  onRefresh && /* @__PURE__ */ jsx17(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onRefresh,
+                      className: "rounded-sm p-xxs text-icon-secondary hover:text-icon-primary hover:bg-tertiary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
+                      "aria-label": "Refresh",
+                      children: /* @__PURE__ */ jsx17(Icon, { name: "refresh", size: "xs", "aria-hidden": true })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx17(
+            "p",
+            {
+              id: helperId,
+              className: "mt-sm text-sm text-secondary",
+              role: "status",
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+
+// src/components/menu-item.tsx
+import * as React18 from "react";
+import { cva as cva17 } from "class-variance-authority";
+
+// src/components/toggle.tsx
+import * as React17 from "react";
+import { cva as cva16 } from "class-variance-authority";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var toggleVariants = cva16(
+  "relative inline-flex shrink-0 rounded-full p-0.5 transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-8",
+        md: "h-6 w-10"
+      },
+      active: {
+        true: "bg-component-toggle-brand-bg hover:bg-component-toggle-brand-bg-hover",
+        false: "bg-quarterary hover:bg-quarterary/80"
+      },
+      disabled: {
+        true: "bg-inactive-subtle hover:bg-inactive-subtle",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      active: false,
+      disabled: false
+    }
+  }
+);
+var thumbVariants = cva16(
+  "pointer-events-none absolute top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full bg-primary shadow-md transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "left-0.5 size-3.5 data-[state=on]:translate-x-3",
+        md: "left-0.5 size-5 data-[state=on]:translate-x-4"
+      },
+      disabled: {
+        true: "bg-quarterary shadow-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false
+    }
+  }
+);
+var Toggle = React17.forwardRef(
+  ({
+    className,
+    label,
+    supportText,
+    togglePosition = "trailing",
+    size = "md",
+    withIcon = false,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    id,
+    ...props
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = React17.useState(
+      defaultChecked ?? false
+    );
+    const inputId = id || React17.useId();
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? !!checked : internalChecked;
+    const isDisabled = !!disabled;
+    const handleChange = React17.useCallback(
+      (e) => {
+        if (!isControlled) setInternalChecked(e.target.checked);
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+    const iconName = isChecked ? "check" : "close";
+    const iconColor = isDisabled ? "text-icon-inactive-subtle" : isChecked ? "text-icon-primary-inverse" : "text-icon-secondary";
+    const switchElement = /* @__PURE__ */ jsx18(
+      "span",
+      {
+        className: cn(
+          toggleVariants({ size, active: isChecked, disabled: isDisabled }),
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-brand peer-focus-visible:ring-offset-2"
+        ),
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsx18(
+          "span",
+          {
+            className: thumbVariants({ size, disabled: isDisabled }),
+            "data-state": isChecked ? "on" : "off",
+            children: withIcon && /* @__PURE__ */ jsx18(
+              Icon,
+              {
+                name: iconName,
+                size: "xs",
+                className: cn("pointer-events-none", iconColor),
+                "aria-hidden": true
+              }
+            )
+          }
+        )
+      }
+    );
+    const labelContent = label || supportText ? /* @__PURE__ */ jsxs12("span", { className: cn("flex min-w-0 flex-col", supportText && "gap-xxs"), children: [
+      label && /* @__PURE__ */ jsx18(
+        "span",
+        {
+          className: cn(
+            "text-sm font-medium leading-4",
+            isDisabled ? "text-inactive" : "text-primary"
+          ),
+          children: label
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx18(
+        "span",
+        {
+          className: cn(
+            "text-sm leading-5",
+            isDisabled ? "text-inactive" : "text-secondary"
+          ),
+          children: supportText
+        }
+      )
+    ] }) : null;
+    return /* @__PURE__ */ jsxs12(
+      "label",
+      {
+        className: cn(
+          "group/toggle inline-flex gap-md",
+          supportText ? "items-start" : "items-center",
+          isDisabled ? "cursor-default" : "cursor-pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              ref,
+              id: inputId,
+              type: "checkbox",
+              role: "switch",
+              className: "peer sr-only",
+              checked,
+              defaultChecked,
+              disabled,
+              "aria-checked": isChecked,
+              onChange: handleChange,
+              ...props
+            }
+          ),
+          togglePosition === "leading" ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+            switchElement,
+            labelContent
+          ] }) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+            labelContent,
+            switchElement
+          ] })
+        ]
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/components/menu-item.tsx
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var menuItemVariants = cva17(
+  "flex items-center w-full gap-md rounded-sm px-md py-sm text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default opacity-50 pointer-events-none [&_*]:pointer-events-none",
+        false: "cursor-pointer hover:bg-tertiary"
+      },
+      active: {
+        true: "bg-brand-tertiary text-brand font-medium",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false,
+      active: false
+    }
+  }
+);
+var stopPropagation = (e) => e.stopPropagation();
+var MenuItem = React18.forwardRef(
+  ({
+    className,
+    type: typeVariant = "default",
+    disabled = false,
+    active = false,
+    children,
+    supportingText,
+    leftIcon,
+    rightIcon,
+    avatar,
+    badge,
+    showSwitch = false,
+    switchChecked,
+    onSwitchChange,
+    textRight,
+    cta,
+    progressLabel,
+    progressValue,
+    ...props
+  }, ref) => {
+    const isMultiline = typeVariant === "multiline" || typeVariant === "callToAction";
+    const isProgress = typeVariant === "progress";
+    const leftSection = leftIcon || avatar ? /* @__PURE__ */ jsxs13("span", { className: "flex shrink-0 items-center gap-md", children: [
+      leftIcon && /* @__PURE__ */ jsx19(
+        Icon,
+        {
+          name: leftIcon,
+          size: "sm",
+          className: disabled ? "text-icon-inactive-subtle" : "text-icon-secondary",
+          "aria-hidden": true
+        }
+      ),
+      avatar
+    ] }) : null;
+    const centerSection = isProgress ? /* @__PURE__ */ jsx19("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx19(
+      ProgressBar,
+      {
+        label: progressLabel,
+        value: progressValue,
+        showValue: true,
+        size: "sm",
+        className: "mb-0"
+      }
+    ) }) : /* @__PURE__ */ jsxs13(
+      "span",
+      {
+        className: cn(
+          "min-w-0 flex-1",
+          isMultiline && "flex flex-col gap-xxs"
+        ),
+        children: [
+          children != null && /* @__PURE__ */ jsx19(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium leading-5",
+                disabled ? "text-inactive" : "text-primary"
+              ),
+              children
+            }
+          ),
+          isMultiline && supportingText != null && /* @__PURE__ */ jsx19(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                disabled ? "text-inactive" : "text-secondary"
+              ),
+              children: supportingText
+            }
+          )
+        ]
+      }
+    );
+    const rightSection = isProgress ? null : /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      badge,
+      showSwitch && /* @__PURE__ */ jsx19(
+        "span",
+        {
+          role: "presentation",
+          onPointerDown: stopPropagation,
+          onClick: stopPropagation,
+          children: /* @__PURE__ */ jsx19(
+            Toggle,
+            {
+              size: "sm",
+              togglePosition: "trailing",
+              checked: switchChecked,
+              onChange: onSwitchChange,
+              disabled,
+              "aria-label": typeof children === "string" ? `Toggle ${children}` : "Toggle"
+            }
+          )
+        }
+      ),
+      textRight != null && /* @__PURE__ */ jsx19(
+        "span",
+        {
+          className: cn(
+            "text-sm",
+            disabled ? "text-inactive" : "text-secondary"
+          ),
+          children: textRight
+        }
+      ),
+      rightIcon && /* @__PURE__ */ jsx19(
+        Icon,
+        {
+          name: rightIcon,
+          size: "sm",
+          className: disabled ? "text-icon-inactive-subtle" : "text-icon-secondary",
+          "aria-hidden": true
+        }
+      ),
+      typeVariant === "callToAction" && cta
+    ] });
+    const hasRightContent = rightSection !== null && (!!badge || showSwitch || !!textRight || !!rightIcon || typeVariant === "callToAction" && !!cta);
+    return /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(menuItemVariants({ disabled, active }), className),
+        "aria-disabled": disabled,
+        "aria-current": active ? "page" : void 0,
+        ...props,
+        children: [
+          leftSection,
+          centerSection,
+          hasRightContent && /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 items-center gap-md", children: rightSection })
+        ]
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+
+// src/components/menu-heading.tsx
+import * as React19 from "react";
+import { cva as cva18 } from "class-variance-authority";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var menuHeadingVariants = cva18(
+  "px-md py-xs text-sm font-medium text-tertiary"
+);
+var MenuHeading = React19.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx20(
+    "div",
+    {
+      ref,
+      className: cn(menuHeadingVariants(), className),
+      ...props,
+      children
+    }
+  )
+);
+MenuHeading.displayName = "MenuHeading";
+
+// src/components/menu-group.tsx
+import * as React20 from "react";
+import { cva as cva19 } from "class-variance-authority";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var menuGroupVariants = cva19("flex flex-col");
+var MenuGroup = React20.forwardRef(
+  ({ className, heading, children, headingId, ...props }, ref) => {
+    const hasHeading = heading != null;
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(menuGroupVariants(), className),
+        "aria-labelledby": hasHeading && headingId ? headingId : void 0,
+        ...props,
+        children: [
+          hasHeading && /* @__PURE__ */ jsx21(
+            "div",
+            {
+              className: "mb-sm shrink-0",
+              id: headingId,
+              children: heading
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+MenuGroup.displayName = "MenuGroup";
+
+// src/components/menu.tsx
+import * as React21 from "react";
+import { cva as cva20 } from "class-variance-authority";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var menuVariants = cva20(
+  "flex flex-col rounded-sm bg-primary py-md px-sm shadow-sm"
+);
+var Menu = React21.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const items = React21.Children.toArray(children);
+    return /* @__PURE__ */ jsx22(
+      "div",
+      {
+        ref,
+        className: cn(menuVariants(), className),
+        ...props,
+        children: items.flatMap(
+          (child, index) => index === 0 ? [child] : [
+            /* @__PURE__ */ jsx22(Divider, { className: "my-sm" }, `menu-divider-${index}`),
+            child
+          ]
+        )
+      }
+    );
+  }
+);
+Menu.displayName = "Menu";
+
+// src/components/sidebar-menu-item.tsx
+import * as React23 from "react";
+import { cva as cva22 } from "class-variance-authority";
+
+// src/components/sidebar.tsx
+import * as React22 from "react";
+import { cva as cva21 } from "class-variance-authority";
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var sidebarVariants = cva21(
+  "flex h-full flex-col bg-primary shadow-sm transition-[width] duration-200 ease-out",
+  {
+    variants: {
+      collapsed: {
+        true: "w-16 min-w-16",
+        false: "w-64 min-w-64"
+      }
+    },
+    defaultVariants: {
+      collapsed: false
+    }
+  }
+);
+var SidebarContext = React22.createContext(null);
+function useSidebarContext() {
+  return React22.useContext(SidebarContext);
+}
+var Sidebar = React22.forwardRef(
+  ({
+    className,
+    header,
+    children,
+    footer,
+    collapsible = false,
+    collapsed: collapsedProp,
+    onCollapsedChange,
+    defaultCollapsed = false,
+    ...props
+  }, ref) => {
+    const [collapsedState, setCollapsedState] = React22.useState(defaultCollapsed);
+    const collapsed = collapsible ? collapsedProp !== void 0 ? collapsedProp : collapsedState : false;
+    const setCollapsed = collapsible && onCollapsedChange != null ? (value) => {
+      setCollapsedState(value);
+      onCollapsedChange(value);
+    } : setCollapsedState;
+    const contextValue = React22.useMemo(
+      () => ({ collapsed }),
+      [collapsed]
+    );
+    return /* @__PURE__ */ jsx23(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15(
+      "aside",
+      {
+        ref,
+        "aria-label": "Sidebar",
+        className: cn(
+          sidebarVariants({ collapsed }),
+          "rounded-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center gap-sm px-2xl py-2xl",
+                collapsible ? "justify-between" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsx23("div", { className: collapsible ? "min-w-0 flex-1" : "min-w-0", children: header }),
+                collapsible && /* @__PURE__ */ jsx23(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setCollapsed(!collapsed),
+                    className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-icon-secondary transition-colors hover:bg-tertiary hover:text-icon-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+                    "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    children: /* @__PURE__ */ jsx23(
+                      Icon,
+                      {
+                        name: collapsed ? "chevron_right" : "chevron_left",
+                        size: "sm",
+                        "aria-hidden": true
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx23(Divider, { orientation: "horizontal", className: "shrink-0" }),
+          /* @__PURE__ */ jsx23("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden px-xl py-xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children }),
+          footer != null && /* @__PURE__ */ jsx23("div", { className: "flex shrink-0 flex-col gap-xxs border-t border-secondary px-md py-md pt-lg", children: footer })
+        ]
+      }
+    ) });
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+// src/components/sidebar-menu-item.tsx
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+var sidebarMenuItemVariants = cva22(
+  "flex items-center w-full gap-md rounded-sm px-md py-sm text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default opacity-50 pointer-events-none [&_*]:pointer-events-none",
+        false: "cursor-pointer hover:bg-tertiary"
+      },
+      active: {
+        true: "bg-brand-tertiary text-brand",
+        false: ""
+      },
+      collapsed: {
+        true: "justify-center px-sm",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false,
+      active: false,
+      collapsed: false
+    }
+  }
+);
+var SidebarMenuItem = React23.forwardRef(
+  ({
+    className,
+    disabled = false,
+    active = false,
+    collapsed = false,
+    children,
+    leftIcon,
+    submenu,
+    expanded: expandedProp,
+    onExpandedChange,
+    defaultExpanded = false,
+    onClick,
+    ...props
+  }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsedResolved = collapsed !== void 0 ? collapsed : sidebarContext?.collapsed ?? false;
+    const [expandedState, setExpandedState] = React23.useState(defaultExpanded);
+    const expanded = expandedProp !== void 0 ? expandedProp : expandedState;
+    const setExpanded = onExpandedChange != null ? (value) => {
+      setExpandedState(value);
+      onExpandedChange(value);
+    } : setExpandedState;
+    const hasSubmenu = submenu != null && React23.Children.count(submenu) > 0;
+    const submenuId = React23.useId();
+    const regionId = `${submenuId}-submenu`;
+    const handleClick = (e) => {
+      if (hasSubmenu) {
+        e.preventDefault();
+        setExpanded(!expanded);
+      }
+      onClick?.(e);
+    };
+    const trigger = /* @__PURE__ */ jsxs16(
+      "button",
+      {
+        ref,
+        type: "button",
+        disabled,
+        className: cn(
+          sidebarMenuItemVariants({
+            disabled,
+            active,
+            collapsed: collapsedResolved
+          }),
+          hasSubmenu && !collapsedResolved && "flex-1",
+          !hasSubmenu && className
+        ),
+        "aria-disabled": disabled,
+        "aria-current": active ? "page" : void 0,
+        "aria-label": collapsedResolved && typeof children === "string" ? children : void 0,
+        "aria-expanded": hasSubmenu && !collapsedResolved ? expanded : void 0,
+        "aria-controls": hasSubmenu && !collapsedResolved ? regionId : void 0,
+        onClick: handleClick,
+        ...props,
+        children: [
+          leftIcon != null && /* @__PURE__ */ jsx24(
+            Icon,
+            {
+              name: leftIcon,
+              size: "sm",
+              className: disabled ? "text-icon-inactive-subtle" : active ? "text-icon-brand" : "text-icon-secondary",
+              "aria-hidden": true
+            }
+          ),
+          !collapsedResolved && children != null && /* @__PURE__ */ jsx24(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1 truncate text-sm font-medium leading-5",
+                disabled ? "text-inactive" : active ? "text-brand" : "text-primary"
+              ),
+              children
+            }
+          ),
+          hasSubmenu && !collapsedResolved && /* @__PURE__ */ jsx24(
+            Icon,
+            {
+              name: expanded ? "expand_less" : "expand_more",
+              size: "sm",
+              className: disabled ? "text-icon-inactive-subtle" : active ? "text-icon-brand" : "text-icon-secondary",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+    if (!hasSubmenu || collapsedResolved) {
+      return hasSubmenu && collapsedResolved ? /* @__PURE__ */ jsx24("div", { className: cn("flex flex-col", className), children: trigger }) : trigger;
+    }
+    return /* @__PURE__ */ jsxs16("div", { className: cn("flex flex-col", className), children: [
+      trigger,
+      /* @__PURE__ */ jsx24(
+        "div",
+        {
+          id: regionId,
+          role: "group",
+          "aria-label": typeof children === "string" ? `${children} submenu` : "Submenu",
+          className: cn(
+            "flex flex-col overflow-hidden transition-[height] duration-200 ease-out",
+            expanded ? "visible" : "hidden"
+          ),
+          children: submenu
+        }
+      )
+    ] });
+  }
+);
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+// src/components/sidebar-submenu-item.tsx
+import * as React24 from "react";
+import { cva as cva23 } from "class-variance-authority";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var sidebarSubmenuItemVariants = cva23(
+  "flex w-full items-center rounded-sm pl-xl pr-md py-sm text-secondary text-left text-sm font-regular leading-5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2",
+  {
+    variants: {
+      disabled: {
+        true: "cursor-default opacity-50 pointer-events-none [&_*]:pointer-events-none",
+        false: "group cursor-pointer hover:bg-tertiary"
+      },
+      active: {
+        true: "bg-brand-tertiary text-brand font-medium",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false,
+      active: false
+    }
+  }
+);
+var SidebarSubmenuItem = React24.forwardRef(({ className, disabled = false, active = false, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx25(
+    "button",
+    {
+      ref,
+      type: "button",
+      disabled,
+      className: cn(
+        sidebarSubmenuItemVariants({ disabled, active }),
+        className
+      ),
+      "aria-disabled": disabled,
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children: children != null && /* @__PURE__ */ jsx25(
+        "span",
+        {
+          className: cn(
+            "min-w-0 truncate",
+            disabled ? "text-inactive" : "group-hover:text-primary",
+            !disabled && (active ? "text-brand" : "text-secondary")
+          ),
+          children
+        }
+      )
+    }
+  );
+});
+SidebarSubmenuItem.displayName = "SidebarSubmenuItem";
+
+// src/components/sidebar-account-card.tsx
+import * as React25 from "react";
+import { cva as cva24 } from "class-variance-authority";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+var sidebarAccountCardVariants = cva24(
+  "flex w-full items-center gap-md rounded-sm px-md py-md min-w-0",
+  {
+    variants: {
+      selected: {
+        true: "bg-tertiary",
+        false: ""
+      },
+      collapsed: {
+        true: "justify-center px-0 py-sm",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      selected: false,
+      collapsed: false
+    }
+  }
+);
+var SidebarAccountCard = React25.forwardRef(
+  ({
+    className,
+    username,
+    supportingText,
+    initials,
+    "aria-label": ariaLabel,
+    rightIcon,
+    selected = false,
+    collapsed: collapsedProp,
+    ...props
+  }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = collapsedProp ?? sidebarContext?.collapsed ?? false;
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        ref,
+        className: cn(
+          sidebarAccountCardVariants({ selected, collapsed }),
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx26(
+            Avatar,
+            {
+              size: "md",
+              initials,
+              username: collapsed ? void 0 : username,
+              supportingText: collapsed ? void 0 : supportingText,
+              "aria-label": ariaLabel ?? username,
+              className: collapsed ? "shrink-0" : "min-w-0 flex-1"
+            }
+          ),
+          !collapsed && rightIcon != null && /* @__PURE__ */ jsx26(
+            Icon,
+            {
+              name: rightIcon,
+              size: "sm",
+              className: "shrink-0 text-icon-secondary",
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SidebarAccountCard.displayName = "SidebarAccountCard";
+
+// src/components/input.tsx
+import * as React26 from "react";
+import { cva as cva25 } from "class-variance-authority";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var inputWrapperVariants = cva25(
+  "flex w-full items-center border bg-component-input-bg border-strong rounded-sm shadow-xs transition-colors",
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-sm",
+        md: "h-10 px-sm",
+        lg: "h-11 px-sm"
+      },
+      error: {
+        true: "border-danger-secondary",
+        false: ""
+      },
+      disabled: {
+        true: "bg-secondary border-inactive shadow-none pointer-events-none",
+        false: ""
+      },
+      focused: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { focused: true, error: false, className: "border-brand" },
+      { focused: true, error: true, className: "border-danger" }
+    ],
+    defaultVariants: {
+      size: "md",
+      error: false,
+      disabled: false,
+      focused: false
+    }
+  }
+);
+var focusRingVariants = cva25(
+  "pointer-events-none absolute inset-[-1px] rounded-sm border-4",
+  {
+    variants: {
+      error: {
+        true: "border-focused-danger",
+        false: "border-focused"
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+var presetConfig = {
+  user: {
+    leftIcon: "account_circle"
+  },
+  email: {
+    leftIcon: "email",
+    type: "email"
+  },
+  password: {
+    leftIcon: "lock",
+    rightIcon: "visibility",
+    type: "password",
+    hasPasswordToggle: true
+  },
+  date: {
+    leftIcon: "calendar_month",
+    type: "date"
+  },
+  amount: {
+    leftIcon: "attach_money",
+    rightIcon: "close",
+    type: "number",
+    hasClearBehavior: true
+  },
+  description: {
+    leftIcon: "description",
+    optional: true
+  },
+  search: {
+    leftIcon: "search",
+    rightIcon: "close",
+    optional: true,
+    hasClearBehavior: true
+  }
+};
+var Input = React26.forwardRef(
+  ({
+    className,
+    size = "md",
+    error: errorProp,
+    label,
+    optional,
+    helperText,
+    helperTextIcon,
+    errorMessage,
+    maxLength,
+    characterCount,
+    leftIcon,
+    rightIcon,
+    iconVariant,
+    iconFilled,
+    id,
+    disabled,
+    value,
+    defaultValue,
+    onFocus,
+    onBlur,
+    preset,
+    type,
+    onChange,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React26.useState(false);
+    const [showPassword, setShowPassword] = React26.useState(false);
+    const internalRef = React26.useRef(null);
+    const inputId = id || React26.useId();
+    const inputRef = React26.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+    const hasError = errorProp || !!errorMessage;
+    const isControlled = value !== void 0;
+    const presetData = preset ? presetConfig[preset] : null;
+    const mergedLeftIcon = leftIcon ?? presetData?.leftIcon;
+    const mergedRightIcon = rightIcon ?? presetData?.rightIcon;
+    const mergedType = type ?? presetData?.type;
+    const mergedOptional = optional ?? presetData?.optional;
+    const hasPasswordToggle = presetData?.hasPasswordToggle ?? false;
+    const hasClearBehavior = presetData?.hasClearBehavior ?? false;
+    const actualInputType = hasPasswordToggle && mergedType === "password" ? showPassword ? "text" : "password" : mergedType;
+    const currentValue = value ?? defaultValue ?? "";
+    const currentLength = characterCount !== void 0 ? characterCount : typeof currentValue === "string" ? currentValue.length : 0;
+    const handleFocus = React26.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React26.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const handlePasswordToggle = React26.useCallback(() => {
+      setShowPassword((prev) => !prev);
+    }, []);
+    const handleClear = React26.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isControlled && onChange) {
+          const syntheticEvent = {
+            target: { value: "" },
+            currentTarget: { value: "" }
+          };
+          onChange(syntheticEvent);
+        } else if (internalRef.current) {
+          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+            window.HTMLInputElement.prototype,
+            "value"
+          )?.set;
+          nativeInputValueSetter?.call(internalRef.current, "");
+          const event = new Event("input", { bubbles: true });
+          internalRef.current.dispatchEvent(event);
+        }
+      },
+      [isControlled, onChange]
+    );
+    const leftIconElement = mergedLeftIcon ? /* @__PURE__ */ jsx27(
+      "span",
+      {
+        className: cn(
+          "flex shrink-0 items-center",
+          size !== "sm" && "pl-[4px]"
+        ),
+        children: /* @__PURE__ */ jsx27(
+          Icon,
+          {
+            name: mergedLeftIcon,
+            size: "md",
+            variant: iconVariant,
+            filled: iconFilled,
+            className: disabled ? "text-inactive-subtle" : "text-tertiary",
+            "aria-hidden": true
+          }
+        )
+      }
+    ) : null;
+    const rightIconElement = mergedRightIcon ? /* @__PURE__ */ jsx27(
+      "span",
+      {
+        className: cn(
+          "flex shrink-0 items-center",
+          size === "sm" ? "pl-[2px]" : "px-[2px]",
+          (hasPasswordToggle || hasClearBehavior) && !disabled && "cursor-pointer"
+        ),
+        onClick: hasPasswordToggle ? handlePasswordToggle : hasClearBehavior ? handleClear : void 0,
+        role: hasPasswordToggle || hasClearBehavior ? "button" : void 0,
+        "aria-label": hasPasswordToggle ? showPassword ? "Hide password" : "Show password" : hasClearBehavior ? "Clear input" : void 0,
+        tabIndex: hasPasswordToggle || hasClearBehavior ? disabled ? -1 : 0 : void 0,
+        onKeyDown: hasPasswordToggle || hasClearBehavior ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (hasPasswordToggle) {
+              handlePasswordToggle();
+            } else if (hasClearBehavior) {
+              handleClear(e);
+            }
+          }
+        } : void 0,
+        children: /* @__PURE__ */ jsx27(
+          Icon,
+          {
+            name: hasPasswordToggle && showPassword ? "visibility_off" : mergedRightIcon,
+            size: "md",
+            variant: iconVariant,
+            filled: iconFilled,
+            className: disabled ? "text-inactive-subtle" : "text-tertiary",
+            "aria-hidden": true
+          }
+        )
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs18("div", { className: cn("w-full", className), children: [
+      label && /* @__PURE__ */ jsxs18(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "block text-sm font-medium text-primary mb-sm",
+          children: [
+            label,
+            mergedOptional && /* @__PURE__ */ jsx27("span", { className: "text-tertiary font-normal ml-1", children: "(Optional)" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-xs", children: [
+        /* @__PURE__ */ jsxs18(
+          "div",
+          {
+            className: cn(
+              inputWrapperVariants({
+                size,
+                error: hasError,
+                disabled: !!disabled,
+                focused: isFocused
+              }),
+              "relative flex-1"
+            ),
+            children: [
+              isFocused && /* @__PURE__ */ jsx27("div", { className: focusRingVariants({ error: hasError }) }),
+              leftIconElement,
+              /* @__PURE__ */ jsx27(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  className: cn(
+                    "flex-1 min-w-0 bg-transparent text-sm text-primary placeholder:text-placeholder focus:outline-none disabled:text-inactive pl-[6px] pr-[8px]",
+                    "leading-[20px]"
+                  ),
+                  disabled,
+                  type: actualInputType,
+                  value,
+                  defaultValue,
+                  maxLength,
+                  "aria-invalid": hasError,
+                  "aria-describedby": errorMessage ? errorId : helperText ? helperId : void 0,
+                  onFocus: handleFocus,
+                  onBlur: handleBlur,
+                  onChange,
+                  ...props
+                }
+              ),
+              rightIconElement
+            ]
+          }
+        ),
+        maxLength !== void 0 && /* @__PURE__ */ jsx27(
+          "span",
+          {
+            className: cn(
+              "text-sm shrink-0",
+              size === "sm" && "leading-9",
+              size === "md" && "leading-10",
+              size === "lg" && "leading-[44px]",
+              hasError ? "text-error" : "text-tertiary"
+            ),
+            children: currentLength
+          }
+        )
+      ] }),
+      (helperText || errorMessage) && /* @__PURE__ */ jsxs18(
+        "p",
+        {
+          id: errorMessage ? errorId : helperId,
+          className: cn(
+            "mt-sm text-sm flex items-center gap-1",
+            errorMessage ? "text-error" : "text-secondary"
+          ),
+          children: [
+            helperTextIcon && !errorMessage && /* @__PURE__ */ jsx27(
+              Icon,
+              {
+                name: helperTextIcon,
+                size: "sm",
+                className: "text-secondary shrink-0",
+                "aria-hidden": true
+              }
+            ),
+            errorMessage || helperText
+          ]
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/textarea.tsx
+import * as React27 from "react";
+import { cva as cva26 } from "class-variance-authority";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var textareaWrapperVariants = cva26(
+  "flex w-full items-start border bg-component-input-bg border-strong rounded-sm shadow-xs transition-colors min-h-[88px] px-sm py-sm",
+  {
+    variants: {
+      error: {
+        true: "border-danger-secondary",
+        false: ""
+      },
+      disabled: {
+        true: "bg-secondary border-inactive shadow-none pointer-events-none",
+        false: ""
+      },
+      focused: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { focused: true, error: false, className: "border-brand" },
+      { focused: true, error: true, className: "border-danger" }
+    ],
+    defaultVariants: {
+      error: false,
+      disabled: false,
+      focused: false
+    }
+  }
+);
+var focusRingVariants2 = cva26(
+  "pointer-events-none absolute inset-[-1px] rounded-sm border-4",
+  {
+    variants: {
+      error: {
+        true: "border-focused-danger",
+        false: "border-focused"
+      }
+    },
+    defaultVariants: {
+      error: false
+    }
+  }
+);
+var TextArea = React27.forwardRef(
+  ({
+    className,
+    error: errorProp,
+    label,
+    optional,
+    helperText,
+    helperTextIcon,
+    errorMessage,
+    maxLength,
+    characterCount,
+    iconVariant,
+    iconFilled,
+    id,
+    disabled,
+    value,
+    defaultValue,
+    onFocus,
+    onBlur,
+    onChange,
+    rows,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React27.useState(false);
+    const internalRef = React27.useRef(null);
+    const textareaId = id || React27.useId();
+    const textareaRef = React27.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const helperId = `${textareaId}-helper`;
+    const errorId = `${textareaId}-error`;
+    const hasError = errorProp || !!errorMessage;
+    const currentValue = value ?? defaultValue ?? "";
+    const currentLength = characterCount !== void 0 ? characterCount : typeof currentValue === "string" ? currentValue.length : 0;
+    const handleFocus = React27.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React27.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    return /* @__PURE__ */ jsxs19("div", { className: cn("w-full", className), children: [
+      label && /* @__PURE__ */ jsxs19(
+        "label",
+        {
+          htmlFor: textareaId,
+          className: "block text-sm font-medium text-primary mb-sm",
+          children: [
+            label,
+            optional && /* @__PURE__ */ jsx28("span", { className: "text-tertiary font-normal ml-1", children: "(Optional)" }),
+            optional && /* @__PURE__ */ jsx28(
+              Icon,
+              {
+                name: "info",
+                size: "sm",
+                variant: iconVariant,
+                filled: iconFilled,
+                className: "text-tertiary ml-1 inline-block align-middle",
+                "aria-hidden": true
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-start gap-xs", children: [
+        /* @__PURE__ */ jsxs19(
+          "div",
+          {
+            className: cn(
+              textareaWrapperVariants({
+                error: hasError,
+                disabled: !!disabled,
+                focused: isFocused
+              }),
+              "relative flex-1"
+            ),
+            children: [
+              isFocused && /* @__PURE__ */ jsx28("div", { className: focusRingVariants2({ error: hasError }) }),
+              /* @__PURE__ */ jsx28(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  id: textareaId,
+                  className: cn(
+                    "flex-1 min-w-0 w-full bg-transparent text-sm text-primary placeholder:text-placeholder focus:outline-none disabled:text-inactive resize-none",
+                    "leading-[20px]"
+                  ),
+                  disabled,
+                  value,
+                  defaultValue,
+                  maxLength,
+                  rows: rows ?? 4,
+                  "aria-invalid": hasError,
+                  "aria-describedby": errorMessage ? errorId : helperText ? helperId : void 0,
+                  onFocus: handleFocus,
+                  onBlur: handleBlur,
+                  onChange,
+                  ...props
+                }
+              )
+            ]
+          }
+        ),
+        maxLength !== void 0 && /* @__PURE__ */ jsx28(
+          "span",
+          {
+            className: cn(
+              "text-sm shrink-0 leading-[88px]",
+              hasError ? "text-error" : "text-tertiary"
+            ),
+            children: currentLength
+          }
+        )
+      ] }),
+      (helperText || errorMessage) && /* @__PURE__ */ jsxs19(
+        "p",
+        {
+          id: errorMessage ? errorId : helperId,
+          className: cn(
+            "mt-sm text-sm flex items-center gap-1",
+            errorMessage ? "text-error" : "text-secondary"
+          ),
+          children: [
+            helperTextIcon && !errorMessage && /* @__PURE__ */ jsx28(
+              Icon,
+              {
+                name: helperTextIcon,
+                size: "sm",
+                className: "text-secondary shrink-0",
+                "aria-hidden": true
+              }
+            ),
+            errorMessage && /* @__PURE__ */ jsx28(
+              Icon,
+              {
+                name: "error",
+                size: "sm",
+                className: "text-error shrink-0",
+                "aria-hidden": true
+              }
+            ),
+            errorMessage || helperText
+          ]
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+
+// src/components/checkbox.tsx
+import * as React28 from "react";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+function CheckSvg({ className }) {
+  return /* @__PURE__ */ jsx29(
+    Icon,
+    {
+      name: "check",
+      size: "xs",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      )
+    }
+  );
+}
+function IndeterminateSvg({ className }) {
+  return /* @__PURE__ */ jsx29(
+    Icon,
+    {
+      name: "remove",
+      size: "xs",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      )
+    }
+  );
+}
+var Checkbox = React28.forwardRef(
+  ({
+    className,
+    label,
+    supportText,
+    checkboxPosition = "leading",
+    indeterminate = false,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    id,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React28.useState(false);
+    const [internalChecked, setInternalChecked] = React28.useState(
+      defaultChecked ?? false
+    );
+    const internalRef = React28.useRef(null);
+    const inputId = id || React28.useId();
+    const mergedRef = React28.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React28.useEffect(() => {
+      if (internalRef.current) {
+        internalRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? !!checked : internalChecked;
+    const isActive = indeterminate || isChecked;
+    const isDisabled = !!disabled;
+    const handleChange = React28.useCallback(
+      (e) => {
+        if (!isControlled) {
+          setInternalChecked(e.target.checked);
+        }
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+    const handleFocus = React28.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React28.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const iconColor = isDisabled ? "text-icon-inactive-subtle" : "text-icon-primary-inverse";
+    const indicator = /* @__PURE__ */ jsxs20("span", { className: "relative size-5 shrink-0", children: [
+      isFocused && !isDisabled && /* @__PURE__ */ jsx29("span", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-xs border-2 border-focused" }),
+      /* @__PURE__ */ jsx29(
+        "span",
+        {
+          className: cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-xs transition-colors",
+            isDisabled ? "bg-inactive-subtle border border-inactive" : isActive ? "bg-brand group-hover/checkbox:bg-brand-hover" : cn(
+              "bg-primary border",
+              isFocused ? "border-brand" : "border-strong"
+            )
+          )
+        }
+      ),
+      isActive && (indeterminate ? /* @__PURE__ */ jsx29(IndeterminateSvg, { className: iconColor }) : /* @__PURE__ */ jsx29(CheckSvg, { className: iconColor }))
+    ] });
+    const labelContent = label ? /* @__PURE__ */ jsxs20(
+      "span",
+      {
+        className: cn("flex min-w-0 flex-col", supportText && "gap-xxs"),
+        children: [
+          /* @__PURE__ */ jsx29(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium leading-4",
+                isDisabled ? "text-inactive" : "text-primary"
+              ),
+              children: label
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx29(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                isDisabled ? "text-inactive" : "text-secondary"
+              ),
+              children: supportText
+            }
+          )
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs20(
+      "label",
+      {
+        className: cn(
+          "group/checkbox inline-flex gap-md",
+          supportText ? "items-start" : "items-center",
+          isDisabled ? "cursor-default" : "cursor-pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx29(
+            "input",
+            {
+              ref: mergedRef,
+              id: inputId,
+              type: "checkbox",
+              className: "sr-only",
+              checked,
+              defaultChecked,
+              disabled,
+              "aria-checked": indeterminate ? "mixed" : void 0,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              ...props
+            }
+          ),
+          checkboxPosition === "leading" ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
+            indicator,
+            labelContent
+          ] }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
+            labelContent,
+            indicator
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/checkbox-card.tsx
+import * as React29 from "react";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+function CheckSvg2({ className }) {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx30(
+        "path",
+        {
+          d: "M10 3L4.5 8.5L2 6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function IndeterminateSvg2({ className }) {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx30(
+        "path",
+        {
+          d: "M2.5 6H9.5",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+var CheckboxCard = React29.forwardRef(
+  ({
+    className,
+    label,
+    description,
+    icon,
+    iconVariant,
+    iconFilled,
+    checkboxPosition = "trailing",
+    indeterminate = false,
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    id,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React29.useState(false);
+    const [internalChecked, setInternalChecked] = React29.useState(
+      defaultChecked ?? false
+    );
+    const internalRef = React29.useRef(null);
+    const inputId = id || React29.useId();
+    const mergedRef = React29.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React29.useEffect(() => {
+      if (internalRef.current) {
+        internalRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? !!checked : internalChecked;
+    const isActive = indeterminate || isChecked;
+    const isDisabled = !!disabled;
+    const handleChange = React29.useCallback(
+      (e) => {
+        if (!isControlled) {
+          setInternalChecked(e.target.checked);
+        }
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+    const handleFocus = React29.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React29.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const checkIconColor = isDisabled ? "text-icon-inactive-subtle" : "text-icon-primary-inverse";
+    const checkboxIndicator = /* @__PURE__ */ jsxs21("span", { className: "relative size-5 shrink-0", children: [
+      /* @__PURE__ */ jsx30(
+        "span",
+        {
+          className: cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-xs transition-colors",
+            isDisabled ? "bg-inactive-subtle border border-inactive" : isActive ? "bg-brand" : "bg-primary border border-strong"
+          )
+        }
+      ),
+      isActive && (indeterminate ? /* @__PURE__ */ jsx30(IndeterminateSvg2, { className: checkIconColor }) : /* @__PURE__ */ jsx30(CheckSvg2, { className: checkIconColor }))
+    ] });
+    const iconElement = icon ? /* @__PURE__ */ jsx30(
+      Icon,
+      {
+        name: icon,
+        size: "lg",
+        variant: iconVariant,
+        filled: iconFilled,
+        className: isDisabled ? "text-icon-inactive" : "text-icon-secondary",
+        "aria-hidden": true
+      }
+    ) : null;
+    const textContent = /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col",
+          description && "gap-xs"
+        ),
+        children: [
+          /* @__PURE__ */ jsx30(
+            "span",
+            {
+              className: cn(
+                "font-medium",
+                description ? "text-sm leading-4" : "text-base leading-5",
+                isDisabled ? "text-inactive" : "text-primary"
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx30(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                isDisabled ? "text-inactive" : "text-secondary"
+              ),
+              children: description
+            }
+          )
+        ]
+      }
+    );
+    const cardClasses = cn(
+      "relative flex rounded-md p-lg border transition-colors",
+      checkboxPosition === "leading" ? "gap-md" : "gap-lg",
+      !description && checkboxPosition === "leading" ? "items-center" : "items-start",
+      isDisabled ? "bg-inactive-subtle border-inactive-subtle cursor-default" : isActive ? "bg-primary border-brand cursor-pointer" : "bg-primary border-default hover:bg-highlight-hover cursor-pointer",
+      className
+    );
+    return /* @__PURE__ */ jsxs21("label", { className: cardClasses, children: [
+      /* @__PURE__ */ jsx30(
+        "input",
+        {
+          ref: mergedRef,
+          id: inputId,
+          type: "checkbox",
+          className: "sr-only",
+          checked,
+          defaultChecked,
+          disabled,
+          "aria-checked": indeterminate ? "mixed" : void 0,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props
+        }
+      ),
+      (isActive || isFocused) && !isDisabled && /* @__PURE__ */ jsx30("span", { className: "pointer-events-none absolute inset-[-1px] rounded-md border-2 border-focused" }),
+      checkboxPosition === "leading" ? /* @__PURE__ */ jsxs21(Fragment5, { children: [
+        checkboxIndicator,
+        iconElement && /* @__PURE__ */ jsxs21("div", { className: "flex flex-1 items-start gap-md", children: [
+          iconElement,
+          textContent
+        ] }),
+        !iconElement && textContent
+      ] }) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
+        iconElement ? /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 flex-1 items-start gap-md", children: [
+          iconElement,
+          textContent
+        ] }) : textContent,
+        checkboxIndicator
+      ] })
+    ] });
+  }
+);
+CheckboxCard.displayName = "CheckboxCard";
+
+// src/components/radio.tsx
+import * as React30 from "react";
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function RadioDot({ className }) {
+  return /* @__PURE__ */ jsx31(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx31("circle", { cx: "6", cy: "6", r: "3", fill: "currentColor" })
+    }
+  );
+}
+var Radio = React30.forwardRef(
+  ({
+    className,
+    label,
+    supportText,
+    radioPosition = "leading",
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    id,
+    name,
+    value,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React30.useState(false);
+    const [internalChecked, setInternalChecked] = React30.useState(
+      defaultChecked ?? false
+    );
+    const internalRef = React30.useRef(null);
+    const inputId = id || React30.useId();
+    const mergedRef = React30.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? !!checked : internalChecked;
+    const isDisabled = !!disabled;
+    const handleChange = React30.useCallback(
+      (e) => {
+        if (!isControlled) {
+          setInternalChecked(e.target.checked);
+        }
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+    const handleFocus = React30.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React30.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const iconColor = isDisabled ? "text-icon-inactive-subtle" : "text-icon-primary-inverse";
+    const indicator = /* @__PURE__ */ jsxs22("span", { className: "relative size-5 shrink-0", children: [
+      isFocused && !isDisabled && /* @__PURE__ */ jsx31("span", { className: "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-full border-2 border-focused" }),
+      /* @__PURE__ */ jsx31(
+        "span",
+        {
+          className: cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-full transition-colors",
+            isDisabled ? "bg-inactive-subtle border border-inactive" : isChecked ? "bg-brand group-hover/radio:bg-brand-hover" : cn(
+              "bg-primary border",
+              isFocused ? "border-brand" : "border-strong"
+            )
+          )
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsx31(RadioDot, { className: iconColor })
+    ] });
+    const labelContent = label ? /* @__PURE__ */ jsxs22(
+      "span",
+      {
+        className: cn("flex min-w-0 flex-col", supportText && "gap-xxs"),
+        children: [
+          /* @__PURE__ */ jsx31(
+            "span",
+            {
+              className: cn(
+                "text-sm font-medium leading-4",
+                isDisabled ? "text-inactive" : "text-primary"
+              ),
+              children: label
+            }
+          ),
+          supportText && /* @__PURE__ */ jsx31(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                isDisabled ? "text-inactive" : "text-secondary"
+              ),
+              children: supportText
+            }
+          )
+        ]
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs22(
+      "label",
+      {
+        className: cn(
+          "group/radio inline-flex gap-md",
+          supportText ? "items-start" : "items-center",
+          isDisabled ? "cursor-default" : "cursor-pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx31(
+            "input",
+            {
+              ref: mergedRef,
+              id: inputId,
+              type: "radio",
+              className: "sr-only",
+              checked,
+              defaultChecked,
+              disabled,
+              name,
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              ...props
+            }
+          ),
+          radioPosition === "leading" ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+            indicator,
+            labelContent
+          ] }) : /* @__PURE__ */ jsxs22(Fragment6, { children: [
+            labelContent,
+            indicator
+          ] })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// src/components/radio-card.tsx
+import * as React31 from "react";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+function RadioDotSvg({ className }) {
+  return /* @__PURE__ */ jsx32(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      className: cn(
+        "pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+        className
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx32("circle", { cx: "6", cy: "6", r: "3", fill: "currentColor" })
+    }
+  );
+}
+var RadioCard = React31.forwardRef(
+  ({
+    className,
+    label,
+    description,
+    icon,
+    iconVariant,
+    iconFilled,
+    radioPosition = "trailing",
+    checked,
+    defaultChecked,
+    disabled,
+    onChange,
+    onFocus,
+    onBlur,
+    id,
+    name,
+    value,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = React31.useState(false);
+    const [internalChecked, setInternalChecked] = React31.useState(
+      defaultChecked ?? false
+    );
+    const internalRef = React31.useRef(null);
+    const inputId = id || React31.useId();
+    const mergedRef = React31.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const isControlled = checked !== void 0;
+    const isChecked = isControlled ? !!checked : internalChecked;
+    const isDisabled = !!disabled;
+    const handleChange = React31.useCallback(
+      (e) => {
+        if (!isControlled) {
+          setInternalChecked(e.target.checked);
+        }
+        onChange?.(e);
+      },
+      [isControlled, onChange]
+    );
+    const handleFocus = React31.useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = React31.useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    const radioDotColor = isDisabled ? "text-icon-inactive-subtle" : "text-icon-primary-inverse";
+    const radioIndicator = /* @__PURE__ */ jsxs23("span", { className: "relative size-5 shrink-0", children: [
+      /* @__PURE__ */ jsx32(
+        "span",
+        {
+          className: cn(
+            "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-4 rounded-full transition-colors",
+            isDisabled ? "bg-inactive-subtle border border-inactive" : isChecked ? "bg-brand" : "bg-primary border border-strong"
+          )
+        }
+      ),
+      isChecked && /* @__PURE__ */ jsx32(RadioDotSvg, { className: radioDotColor })
+    ] });
+    const iconElement = icon ? /* @__PURE__ */ jsx32(
+      Icon,
+      {
+        name: icon,
+        size: "lg",
+        variant: iconVariant,
+        filled: iconFilled,
+        className: isDisabled ? "text-icon-inactive" : "text-icon-secondary",
+        "aria-hidden": true
+      }
+    ) : null;
+    const textContent = /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 flex-1 flex-col",
+          description && "gap-xs"
+        ),
+        children: [
+          /* @__PURE__ */ jsx32(
+            "span",
+            {
+              className: cn(
+                "font-medium",
+                description ? "text-sm leading-4" : "text-base leading-5",
+                isDisabled ? "text-inactive" : "text-primary"
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx32(
+            "span",
+            {
+              className: cn(
+                "text-sm leading-5",
+                isDisabled ? "text-inactive" : "text-secondary"
+              ),
+              children: description
+            }
+          )
+        ]
+      }
+    );
+    const cardClasses = cn(
+      "relative flex rounded-md p-lg border transition-colors",
+      radioPosition === "leading" ? "gap-md" : "gap-lg",
+      !description && radioPosition === "leading" ? "items-center" : "items-start",
+      isDisabled ? "bg-inactive-subtle border-inactive-subtle cursor-default" : isChecked ? "bg-primary border-brand cursor-pointer" : "bg-primary border-default hover:bg-highlight-hover cursor-pointer",
+      className
+    );
+    return /* @__PURE__ */ jsxs23("label", { className: cardClasses, children: [
+      /* @__PURE__ */ jsx32(
+        "input",
+        {
+          ref: mergedRef,
+          id: inputId,
+          type: "radio",
+          className: "sr-only",
+          checked,
+          defaultChecked,
+          disabled,
+          name,
+          value,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          ...props
+        }
+      ),
+      (isChecked || isFocused) && !isDisabled && /* @__PURE__ */ jsx32("span", { className: "pointer-events-none absolute inset-[-1px] rounded-md border-2 border-focused" }),
+      radioPosition === "leading" ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
+        radioIndicator,
+        iconElement && /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 items-start gap-md", children: [
+          iconElement,
+          textContent
+        ] }),
+        !iconElement && textContent
+      ] }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+        iconElement ? /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 items-start gap-md", children: [
+          iconElement,
+          textContent
+        ] }) : textContent,
+        radioIndicator
+      ] })
+    ] });
+  }
+);
+RadioCard.displayName = "RadioCard";
+
+// src/components/tag.tsx
+import * as React32 from "react";
+import { cva as cva27 } from "class-variance-authority";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+var tagVariants = cva27(
+  "inline-flex items-center justify-center rounded-sm font-regular shrink-0 gap-1 border transition-colors",
+  {
+    variants: {
+      type: {
+        simple: "",
+        "with-dot": "",
+        "with-icon": ""
+      },
+      state: {
+        default: "bg-primary border-strong text-primary hover:bg-highlight-hover",
+        focus: "bg-primary border-brand text-brand",
+        active: "bg-brand-tertiary border-brand text-primary",
+        disabled: "bg-secondary border-inactive-subtle text-inactive pointer-events-none"
+      },
+      size: {
+        small: "h-6 px-sm text-xs leading-4",
+        large: "h-7 px-md text-sm leading-5"
+      }
+    },
+    compoundVariants: [
+      {
+        state: "disabled",
+        className: "hover:bg-secondary hover:border-inactive-subtle"
+      },
+      {
+        state: "active",
+        className: "hover:bg-brand-tertiary hover:border-brand"
+      }
+    ],
+    defaultVariants: {
+      type: "simple",
+      state: "default",
+      size: "small"
+    }
+  }
+);
+var tagSizeToIconSize = {
+  small: "xs",
+  large: "sm"
+};
+var Tag = React32.forwardRef(
+  ({
+    className,
+    type = "simple",
+    state = "default",
+    size = "small",
+    leftIcon,
+    iconVariant,
+    iconFilled,
+    close,
+    onClose,
+    children,
+    ...props
+  }, ref) => {
+    const iconSize = tagSizeToIconSize[size ?? "small"];
+    const isDisabled = state === "disabled";
+    const isActive = state === "active";
+    const isDefault = state === "default" || !state;
+    const dotColor = (isDefault || isActive) && !isDisabled ? "bg-success" : "bg-current";
+    const iconColor = isDisabled ? "text-inactive" : isActive ? "text-brand" : state === "focus" ? "text-brand" : "text-primary";
+    const dotElement = type === "with-dot" ? /* @__PURE__ */ jsx33(
+      "span",
+      {
+        className: cn(
+          "inline-block size-1.5 rounded-full shrink-0",
+          dotColor
+        ),
+        "aria-hidden": "true"
+      }
+    ) : null;
+    const leftIconElement = type === "with-icon" ? /* @__PURE__ */ jsx33(
+      Icon,
+      {
+        name: leftIcon || "calendar_month",
+        size: iconSize,
+        variant: iconVariant,
+        filled: iconFilled,
+        className: iconColor,
+        "aria-hidden": true
+      }
+    ) : null;
+    const handleCloseClick = React32.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (!isDisabled && onClose) {
+          onClose(e);
+        }
+      },
+      [isDisabled, onClose]
+    );
+    const closeButtonElement = close ? /* @__PURE__ */ jsx33(
+      CloseButton,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: handleCloseClick,
+        disabled: isDisabled,
+        "aria-label": "Remove tag",
+        className: iconColor,
+        iconVariant,
+        iconFilled
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs24(
+      "span",
+      {
+        ref,
+        className: cn(tagVariants({ type, state, size }), className),
+        ...props,
+        children: [
+          dotElement,
+          leftIconElement,
+          children,
+          closeButtonElement
+        ]
+      }
+    );
+  }
+);
+Tag.displayName = "Tag";
+
+// src/components/slider-handle.tsx
+import * as React34 from "react";
+import { cva as cva29 } from "class-variance-authority";
+
+// src/components/tooltip.tsx
+import * as React33 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva as cva28 } from "class-variance-authority";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+var tooltipContentVariants = cva28(
+  "rounded-sm text-xs leading-5 max-w-[var(--radix-tooltip-content-available-width)] z-50 transition-opacity duration-150 ease-out data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
+  {
+    variants: {
+      size: {
+        small: "px-md py-sm",
+        large: "px-md py-md flex flex-col gap-xs"
+      },
+      variant: {
+        dark: "bg-always-dark text-on-color",
+        light: "bg-primary text-primary shadow-lg border border-default"
+      }
+    },
+    defaultVariants: {
+      size: "small",
+      variant: "dark"
+    }
+  }
+);
+var arrowClassMap = {
+  dark: "fill-primary-inverse",
+  light: "fill-white"
+};
+var subtitleClassMap = {
+  dark: "text-on-color",
+  light: "text-on-color-inverse"
+};
+var TooltipContent = React33.forwardRef(
+  ({
+    className,
+    size: sizeProp,
+    variant = "dark",
+    title,
+    subtitle,
+    children,
+    side = "bottom",
+    sideOffset = 8,
+    showArrow = true,
+    ...props
+  }, ref) => {
+    const resolvedVariant = variant ?? "dark";
+    const isLarge = sizeProp === "large" || !sizeProp && (title != null || subtitle != null);
+    const size = isLarge ? "large" : sizeProp ?? "small";
+    return /* @__PURE__ */ jsx34(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs25(
+      TooltipPrimitive.Content,
+      {
+        ref,
+        side,
+        sideOffset,
+        className: cn(tooltipContentVariants({ size, variant: resolvedVariant }), className),
+        ...props,
+        children: [
+          isLarge ? /* @__PURE__ */ jsxs25(Fragment8, { children: [
+            title != null && /* @__PURE__ */ jsx34("span", { className: "font-medium", children: title }),
+            subtitle != null && /* @__PURE__ */ jsx34("span", { className: cn("font-regular", subtitleClassMap[resolvedVariant]), children: subtitle })
+          ] }) : children,
+          showArrow && /* @__PURE__ */ jsx34(
+            TooltipPrimitive.Arrow,
+            {
+              className: arrowClassMap[resolvedVariant],
+              width: 12,
+              height: 6
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+TooltipContent.displayName = "TooltipContent";
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipProvider = TooltipPrimitive.Provider;
+function Tooltip({
+  children,
+  content,
+  title,
+  subtitle,
+  size,
+  variant = "dark",
+  side = "bottom",
+  sideOffset = 8,
+  delayDuration = 200,
+  showArrow = true,
+  contentClassName,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsxs25(TooltipPrimitive.Root, { delayDuration, ...rootProps, children: [
+    /* @__PURE__ */ jsx34(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx34(
+      TooltipContent,
+      {
+        size,
+        variant,
+        side,
+        sideOffset,
+        title,
+        subtitle,
+        showArrow,
+        className: contentClassName,
+        children: content
+      }
+    )
+  ] });
+}
+
+// src/components/slider-handle.tsx
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+var stateClassMap = {
+  default: "hover:bg-primary active:bg-primary",
+  hover: "bg-brand-tertiary pointer-events-none",
+  active: "bg-brand-secondary pointer-events-none"
+};
+var sliderHandleCircleVariants = cva29(
+  "size-2xl shrink-0 rounded-full border border-brand bg-primary transition-colors cursor-grab touch-none select-none hover:bg-brand-tertiary active:bg-brand-secondary active:cursor-grabbing shadow-sm"
+);
+var SliderHandle = React34.forwardRef(
+  ({
+    className,
+    state,
+    valueLabel,
+    labelVariant,
+    labelPosition = "below",
+    ...props
+  }, ref) => {
+    const circle = /* @__PURE__ */ jsx35(
+      "div",
+      {
+        ref,
+        role: "img",
+        ...valueLabel != null && valueLabel !== "" ? { "aria-hidden": true } : { "aria-label": "Slider handle" },
+        className: cn(
+          sliderHandleCircleVariants(),
+          state && stateClassMap[state],
+          className
+        ),
+        ...props
+      }
+    );
+    if (!valueLabel || valueLabel === "") return circle;
+    const tooltipSide = labelPosition === "above" ? "top" : "bottom";
+    const label = labelVariant === "label" ? /* @__PURE__ */ jsx35(
+      "span",
+      {
+        className: cn(
+          "absolute left-1/2 -translate-x-1/2 text-xs text-primary whitespace-nowrap",
+          labelPosition === "above" ? "bottom-[calc(100%+8px)]" : "top-[calc(100%+8px)]"
+        ),
+        children: valueLabel
+      }
+    ) : null;
+    const handle = labelVariant === "tooltip" ? /* @__PURE__ */ jsx35(
+      Tooltip,
+      {
+        content: valueLabel,
+        variant: "light",
+        side: tooltipSide,
+        sideOffset: 8,
+        open: true,
+        showArrow: false,
+        children: circle
+      }
+    ) : circle;
+    return /* @__PURE__ */ jsxs26("div", { className: "relative inline-flex flex-col items-center", children: [
+      label,
+      handle
+    ] });
+  }
+);
+SliderHandle.displayName = "SliderHandle";
+
+// src/components/slider.tsx
+import * as React35 from "react";
+import { Fragment as Fragment9, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+function clamp(v, lo, hi) {
+  return Math.min(hi, Math.max(lo, v));
+}
+function snap(raw, min, max, step) {
+  if (step <= 0) return raw;
+  return clamp(Math.round((raw - min) / step) * step + min, min, max);
+}
+function toPct(v, min, max) {
+  return max > min ? (v - min) / (max - min) * 100 : 0;
+}
+var Slider = React35.forwardRef(
+  ({
+    className,
+    variant = "single",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    label,
+    showLabelInfoIcon = false,
+    helperText,
+    valueLabelVariant,
+    valueLabelPosition = "below",
+    formatValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const isSingle = variant === "single";
+    const isControlled = valueProp !== void 0;
+    const trackRef = React35.useRef(null);
+    const [internalSingle, setInternalSingle] = React35.useState(
+      () => isSingle ? defaultValue ?? 0 : 0
+    );
+    const [internalRange, setInternalRange] = React35.useState(
+      () => {
+        if (isSingle) return [min, max];
+        const [s, e] = defaultValue ?? [min, max];
+        return [clamp(Math.min(s, e), min, max), clamp(Math.max(s, e), min, max)];
+      }
+    );
+    const singleVal = isSingle ? clamp(isControlled ? valueProp : internalSingle, min, max) : 0;
+    const singlePct = toPct(singleVal, min, max);
+    const rawRange = !isSingle ? isControlled ? valueProp : internalRange : [min, max];
+    const rangeStart = clamp(Math.min(rawRange[0], rawRange[1]), min, max);
+    const rangeEnd = clamp(Math.max(rawRange[0], rawRange[1]), min, max);
+    const startPct = toPct(rangeStart, min, max);
+    const endPct = toPct(rangeEnd, min, max);
+    const format = formatValue ?? ((v) => `${Math.round(v)}%`);
+    const latestRef = React35.useRef({ rangeStart, rangeEnd });
+    latestRef.current = { rangeStart, rangeEnd };
+    const commitSingle = React35.useCallback(
+      (next) => {
+        const v = clamp(next, min, max);
+        if (!isControlled) setInternalSingle(v);
+        onChange?.(v);
+      },
+      [isControlled, min, max, onChange]
+    );
+    const commitRange = React35.useCallback(
+      (next) => {
+        const ordered = [
+          clamp(Math.min(next[0], next[1]), min, max),
+          clamp(Math.max(next[0], next[1]), min, max)
+        ];
+        if (!isControlled) setInternalRange(ordered);
+        onChange?.(ordered);
+      },
+      [isControlled, min, max, onChange]
+    );
+    const valueFromClientX = React35.useCallback(
+      (clientX) => {
+        const track = trackRef.current;
+        if (!track) return min;
+        const { left, width } = track.getBoundingClientRect();
+        if (width <= 0) return min;
+        return snap(min + clamp((clientX - left) / width, 0, 1) * (max - min), min, max, step);
+      },
+      [min, max, step]
+    );
+    const updateSingleRef = React35.useRef((clientX) => {
+    });
+    updateSingleRef.current = (clientX) => {
+      commitSingle(valueFromClientX(clientX));
+    };
+    const updateStartRef = React35.useRef((clientX) => {
+    });
+    updateStartRef.current = (clientX) => {
+      const v = valueFromClientX(clientX);
+      const { rangeEnd: end } = latestRef.current;
+      commitRange([Math.min(v, end), end]);
+    };
+    const updateEndRef = React35.useRef((clientX) => {
+    });
+    updateEndRef.current = (clientX) => {
+      const v = valueFromClientX(clientX);
+      const { rangeStart: start } = latestRef.current;
+      commitRange([start, Math.max(v, start)]);
+    };
+    const makeDrag = React35.useCallback(
+      (fnRef) => (e) => {
+        if (disabled) return;
+        e.preventDefault();
+        fnRef.current(e.clientX);
+        const onMove = (ev) => fnRef.current(ev.clientX);
+        const onUp = () => {
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+        };
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+      },
+      [disabled]
+    );
+    const onSingleDrag = makeDrag(updateSingleRef);
+    const onStartDrag = makeDrag(updateStartRef);
+    const onEndDrag = makeDrag(updateEndRef);
+    const onTrackClick = React35.useCallback(
+      (e) => {
+        if (disabled) return;
+        e.preventDefault();
+        const v = valueFromClientX(e.clientX);
+        const { rangeStart: s, rangeEnd: en } = latestRef.current;
+        const mid = (s + en) / 2;
+        commitRange(v < mid ? [Math.min(v, en), en] : [s, Math.max(v, s)]);
+      },
+      [disabled, valueFromClientX, commitRange]
+    );
+    const barId = React35.useId();
+    const labelId = `${barId}-label`;
+    const helperId = `${barId}-helper`;
+    const renderHandle = (pct, text, onPointerDown) => /* @__PURE__ */ jsx36(
+      "div",
+      {
+        className: "absolute top-1/2 z-20 overflow-visible",
+        style: { left: `${pct}%`, transform: "translate(-50%, -50%)" },
+        onPointerDown: disabled ? void 0 : onPointerDown,
+        children: /* @__PURE__ */ jsx36(
+          SliderHandle,
+          {
+            valueLabel: valueLabelVariant ? text : void 0,
+            labelVariant: valueLabelVariant,
+            labelPosition: valueLabelPosition,
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+    return /* @__PURE__ */ jsxs27(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn("flex min-w-0 flex-col", className),
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-describedby": helperText ? helperId : void 0,
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxs27(
+            "div",
+            {
+              id: labelId,
+              className: "flex items-center gap-xs text-sm font-medium text-primary mb-sm",
+              children: [
+                label,
+                showLabelInfoIcon && /* @__PURE__ */ jsx36(
+                  Icon,
+                  {
+                    name: "info",
+                    size: "xs",
+                    className: "text-icon-tertiary",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx36("div", { id: barId, className: "relative flex min-w-0 items-center overflow-visible", children: /* @__PURE__ */ jsxs27(
+            "div",
+            {
+              ref: trackRef,
+              className: cn(
+                "relative min-w-0 flex-1",
+                progressBarTrackVariants({ size: "lg" }),
+                "overflow-visible"
+              ),
+              children: [
+                /* @__PURE__ */ jsx36(
+                  "div",
+                  {
+                    className: cn(
+                      progressBarFillVariants({ color: "brand" }),
+                      !isSingle && "absolute inset-y-0"
+                    ),
+                    style: isSingle ? { width: `${singlePct}%` } : { left: `${startPct}%`, width: `${endPct - startPct}%` }
+                  }
+                ),
+                isSingle ? /* @__PURE__ */ jsxs27(Fragment9, { children: [
+                  /* @__PURE__ */ jsx36(
+                    "input",
+                    {
+                      type: "range",
+                      min,
+                      max,
+                      step,
+                      value: singleVal,
+                      onChange: (e) => commitSingle(parseFloat(e.target.value)),
+                      disabled,
+                      "aria-valuenow": singleVal,
+                      "aria-valuemin": min,
+                      "aria-valuemax": max,
+                      "aria-valuetext": format(singleVal),
+                      "aria-label": ariaLabel,
+                      className: "absolute inset-0 w-full opacity-0 cursor-grab disabled:cursor-default z-10 disabled:pointer-events-none"
+                    }
+                  ),
+                  renderHandle(singlePct, format(singleVal), onSingleDrag)
+                ] }) : /* @__PURE__ */ jsxs27(Fragment9, { children: [
+                  /* @__PURE__ */ jsx36(
+                    "input",
+                    {
+                      type: "range",
+                      min,
+                      max,
+                      step,
+                      value: rangeStart,
+                      onChange: (e) => {
+                        const v = parseFloat(e.target.value);
+                        commitRange([Math.min(v, rangeEnd), rangeEnd]);
+                      },
+                      disabled,
+                      "aria-valuenow": rangeStart,
+                      "aria-valuemin": min,
+                      "aria-valuemax": max,
+                      "aria-valuetext": format(rangeStart),
+                      "aria-label": ariaLabel ? `${ariaLabel} (start)` : "Range start",
+                      className: "sr-only"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    "input",
+                    {
+                      type: "range",
+                      min,
+                      max,
+                      step,
+                      value: rangeEnd,
+                      onChange: (e) => {
+                        const v = parseFloat(e.target.value);
+                        commitRange([rangeStart, Math.max(v, rangeStart)]);
+                      },
+                      disabled,
+                      "aria-valuenow": rangeEnd,
+                      "aria-valuemin": min,
+                      "aria-valuemax": max,
+                      "aria-valuetext": format(rangeEnd),
+                      "aria-label": ariaLabel ? `${ariaLabel} (end)` : "Range end",
+                      className: "sr-only"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx36(
+                    "div",
+                    {
+                      role: "presentation",
+                      className: "absolute inset-0 z-10",
+                      style: {
+                        cursor: disabled ? "default" : "grab",
+                        pointerEvents: disabled ? "none" : void 0
+                      },
+                      onPointerDown: onTrackClick
+                    }
+                  ),
+                  renderHandle(startPct, format(rangeStart), onStartDrag),
+                  renderHandle(endPct, format(rangeEnd), onEndDrag)
+                ] })
+              ]
+            }
+          ) }),
+          helperText && /* @__PURE__ */ jsx36(
+            "p",
+            {
+              id: helperId,
+              className: "mt-sm text-sm text-secondary",
+              role: "status",
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  AvatarProfile,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbListItem,
+  BreadcrumbSeparator,
+  Button,
+  ButtonGroup,
+  ButtonGroupItem,
+  Checkbox,
+  CheckboxCard,
+  CloseButton,
+  ColorPalette,
+  Divider,
+  FeaturedIcon,
+  Icon,
+  Input,
+  Menu,
+  MenuGroup,
+  MenuHeading,
+  MenuItem,
+  ProgressBar,
+  Radio,
+  RadioCard,
+  Sidebar,
+  SidebarAccountCard,
+  SidebarContext,
+  SidebarMenuItem,
+  SidebarSubmenuItem,
+  Slider,
+  SliderHandle,
+  Tag,
+  TextArea,
+  Toggle,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  accordionTriggerVariants,
+  alertVariants,
+  avatarProfileVariants,
+  avatarVariants,
+  badgeVariants,
+  breadcrumbItemVariants,
+  breadcrumbListVariants,
+  breadcrumbSeparatorVariants,
+  buttonGroupItemVariants,
+  buttonGroupVariants,
+  buttonVariants,
+  closeButtonVariants,
+  dividerVariants,
+  featuredIconVariants,
+  iconVariants,
+  inputWrapperVariants as inputVariants,
+  menuGroupVariants,
+  menuHeadingVariants,
+  menuItemVariants,
+  menuVariants,
+  progressBarFillVariants,
+  progressBarTrackVariants,
+  sidebarAccountCardVariants,
+  sidebarMenuItemVariants,
+  sidebarSubmenuItemVariants,
+  sidebarVariants,
+  sliderHandleCircleVariants,
+  tagVariants,
+  textareaWrapperVariants as textareaVariants,
+  thumbVariants,
+  toggleVariants,
+  tooltipContentVariants,
+  useSidebarContext
+};
+//# sourceMappingURL=index.mjs.map