infinity-ui-elements 1.3.1 → 1.4.1-beta.0

package/dist/index.esm.js

@@ -1,16 +1,28 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { PulseLoader, ClipLoader } from 'react-spinners';
 
 // Define patterns for custom classes that should be preserved
 // This approach is more scalable than hardcoding individual class names
 const CUSTOM_CLASS_PATTERNS = [
     // Custom font classes
     /^font-(functional|display)$/,
+    // Custom font-size classes
+    /^font-size-/,
+    // Custom leading (line-height) classes
+    /^leading-(00|25|50|75|100|200|300|400|500|600|700|800|900|1000|1100)$/,
+    // Custom text utility classes (text-display, text-heading, text-body, text-caption variants)
+    /^text-(display|heading|body|caption)(-\w+)?(-\w+)?$/,
+    // Text weight classes
+    /^text-weight-/,
+    // Text color classes
+    /^text-color-/,
+    /^outline-width-/,
+    /^border-width-/,
     // Custom spacing classes (example)
     // /^spacing-(xs|sm|md|lg|xl)$/,
     // Custom color classes (example)
@@ -33,7 +45,133 @@ function cn(...inputs) {
     return clsx(mergedStandard, customClasses);
 }
 
-const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
+const badgeVariants = cva("inline-flex items-center whitespace-nowrap transition-colors", {
+    variants: {
+        variant: {
+            light: "",
+            filled: "",
+        },
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+        size: {
+            small: "px-2 h-[var(--size-20)]  gap-2 rounded-large text-body-small-medium",
+            medium: "px-3 h-[var(--size-24)]  gap-3 rounded-large text-body-medium-medium",
+            large: "px-4 h-[var(--size-28)] gap-3 rounded-xlarge text-body-large-medium",
+        },
+    },
+    compoundVariants: [
+        // Light variant colors
+        {
+            variant: "light",
+            color: "primary",
+            class: "bg-action-fill-primary-faded text-action-ink-primary-normal",
+        },
+        {
+            variant: "light",
+            color: "positive",
+            class: "bg-action-fill-positive-faded text-action-ink-positive-normal",
+        },
+        {
+            variant: "light",
+            color: "negative",
+            class: "bg-action-fill-negative-faded text-action-ink-negative-normal",
+        },
+        {
+            variant: "light",
+            color: "notice",
+            class: "bg-action-fill-notice-faded text-action-ink-notice-normal",
+        },
+        {
+            variant: "light",
+            color: "info",
+            class: "bg-action-fill-info-faded text-action-ink-info-normal",
+        },
+        {
+            variant: "light",
+            color: "neutral",
+            class: "bg-action-fill-neutral-faded text-action-ink-neutral-normal",
+        },
+        // Filled variant colors
+        {
+            variant: "filled",
+            color: "primary",
+            class: "bg-action-fill-primary-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "positive",
+            class: "bg-action-fill-positive-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "negative",
+            class: "bg-action-fill-negative-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "notice",
+            class: "bg-action-fill-notice-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "info",
+            class: "bg-action-fill-info-default text-action-ink-on-primary-normal",
+        },
+        {
+            variant: "filled",
+            color: "neutral",
+            class: "bg-action-fill-neutral-default text-action-ink-on-primary-normal",
+        },
+    ],
+    defaultVariants: {
+        variant: "light",
+        color: "info",
+        size: "medium",
+    },
+});
+const Badge = React.forwardRef(({ className, variant, size, color, showDot = false, children, ...props }, ref) => {
+    const getDotColor = () => {
+        if (variant === "filled") {
+            return "bg-action-ink-on-primary-normal";
+        }
+        // Light variant - use the corresponding action color
+        switch (color) {
+            case "primary":
+                return "bg-action-fill-primary-default";
+            case "positive":
+                return "bg-action-fill-positive-default";
+            case "negative":
+                return "bg-action-fill-negative-default";
+            case "notice":
+                return "bg-action-fill-notice-default";
+            case "info":
+                return "bg-action-fill-info-default";
+            case "neutral":
+                return "bg-action-fill-neutral-default";
+            default:
+                return "bg-action-fill-info-default";
+        }
+    };
+    const getDotSize = () => {
+        if (size === "small") {
+            return "h-2 w-2";
+        }
+        if (size === "medium") {
+            return "h-[6px] w-[6px]";
+        }
+        return "h-3 w-3";
+    };
+    return (jsxs("div", { ref: ref, className: cn(badgeVariants({ variant, size, color }), className), ...props, children: [showDot && (jsx("span", { className: cn("rounded-full", getDotColor(), getDotSize()), "aria-hidden": "true" })), children] }));
+});
+Badge.displayName = "Badge";
+
+const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none", {
     variants: {
         variant: {
             primary: "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
@@ -49,10 +187,10 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             neutral: "",
         },
         size: {
-            xsmall: "md:h-[28px] px-3 text-xs rounded-medium",
-            small: "md:h-[32px] px-4 text-xs rounded-medium",
-            medium: "md:h-[36px] px-6 py-2 rounded-medium",
-            large: "md:h-[44px] px-6 text-base rounded-xlarge",
+            xsmall: "md:h-[28px] px-3 rounded-medium text-body-small-medium",
+            small: "md:h-[32px] px-4 rounded-medium text-body-small-medium",
+            medium: "md:h-[36px] px-6 py-2 rounded-medium text-body-medium-medium",
+            large: "md:h-[44px] px-6 rounded-xlarge text-body-large-medium",
         },
         isIconOnly: {
             true: "aspect-square p-0",
@@ -79,7 +217,8 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `bg-action-fill-primary-default text-action-ink-on-primary-normal 
           hover:bg-action-fill-primary-hover 
           disabled:bg-action-fill-primary-disabled
-          disabled:text-action-ink-primary-disabled
+          disabled:text-action-ink-primary-disabled,
+          active:bg-action-fill-primary-activated
           `,
         },
         {
@@ -89,6 +228,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           hover:bg-action-fill-positive-hover 
           disabled:bg-action-fill-primary-disabled
           disabled:text-action-ink-primary-disabled
+          active:bg-action-fill-positive-activated
           `,
         },
         {
@@ -98,6 +238,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           hover:bg-action-fill-negative-hover 
           disabled:bg-action-fill-negative-disabled
           disabled:text-action-ink-negative-disabled
+          active:bg-action-fill-negative-activated
           `,
         },
         {
@@ -107,6 +248,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           hover:bg-action-fill-notice-hover 
           disabled:bg-action-fill-notice-disabled
           disabled:text-action-ink-notice-disabled
+          active:bg-action-fill-notice-activated
           `,
         },
         {
@@ -116,6 +258,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           hover:bg-action-fill-info-hover 
           disabled:bg-action-fill-info-disabled
           disabled:text-action-ink-info-disabled
+          active:bg-action-fill-info-activated
           `,
         },
         {
@@ -125,42 +268,96 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           hover:bg-action-fill-neutral-hover 
           disabled:bg-action-fill-neutral-disabled
           disabled:text-action-ink-neutral-disabled
+          active:bg-action-fill-neutral-activated
           `,
         },
         // Secondary variant colors
         {
             variant: "secondary",
             color: "primary",
-            class: `border-action-outline-info-faded text-action-ink-primary-normal hover:border-action-outline-info-faded-hover 
+            class: `
+          border-action-outline-info-faded 
+          text-action-ink-primary-normal 
+          hover:border-action-outline-primary-faded-hover 
+          hover:bg-action-fill-primary-faded-hover
           disabled:bg-action-outline-info-disabled
           disabled:text-action-ink-primary-disabled
           disabled:border-action-outline-primary-disabled
+          active:border-action-outline-primary-faded-activated
+          active:bg-action-fill-primary-faded-activated
           `,
         },
         {
             variant: "secondary",
             color: "positive",
-            class: "border-action-outline-positive-faded text-action-ink-positive-normal hover:border-action-outline-positive-faded-hover disabled:bg-action-outline-positive-disabled",
+            class: `
+          border-action-outline-positive-faded 
+          text-action-ink-positive-normal 
+          hover:border-action-outline-positive-faded-hover 
+          hover:bg-action-fill-positive-faded-hover 
+          disabled:bg-action-outline-positive-disabled
+          disabled:text-action-ink-positive-disabled
+          disabled:border-action-outline-positive-disabled
+          active:border-action-outline-positive-faded-activated
+          active:bg-action-fill-positive-faded-activated
+          `,
         },
         {
             variant: "secondary",
             color: "negative",
-            class: "border-action-outline-negative-faded text-action-ink-negative-normal hover:border-action-outline-negative-faded-hover disabled:bg-action-outline-negative-disabled",
+            class: `
+          border-action-outline-negative-faded 
+          text-action-ink-negative-normal 
+          hover:border-action-outline-negative-faded-hover 
+          hover:bg-action-fill-negative-faded-hover 
+          disabled:bg-action-outline-negative-disabled
+          disabled:text-action-ink-negative-disabled
+          disabled:border-action-outline-negative-disabled
+          active:border-action-outline-negative-faded-activated
+          active:bg-action-fill-negative-faded-activated
+          `,
         },
         {
             variant: "secondary",
             color: "notice",
-            class: "border-action-outline-notice-faded text-action-ink-notice-normal hover:border-action-outline-notice-faded-hover disabled:bg-action-outline-notice-disabled",
+            class: `
+          border-action-outline-notice-faded 
+          text-action-ink-notice-normal 
+          hover:border-action-outline-notice-faded-hover 
+          hover:bg-action-fill-notice-faded-hover 
+          disabled:bg-action-outline-notice-disabled
+          disabled:text-action-ink-notice-disabled
+          disabled:border-action-outline-notice-disabled
+          active:border-action-outline-notice-faded-activated
+          active:bg-action-fill-notice-faded-activated
+          `,
         },
         {
             variant: "secondary",
             color: "info",
-            class: "border-action-outline-info-faded text-action-ink-info-normal hover:border-action-outline-info-faded-hover disabled:bg-action-outline-info-disabled",
+            class: `border-action-outline-info-faded 
+          text-action-ink-info-normal 
+          hover:border-action-outline-info-faded-hover 
+          hover:bg-action-fill-info-faded-hover 
+          disabled:bg-action-outline-info-disabled
+          disabled:text-action-ink-info-disabled
+          disabled:border-action-outline-info-disabled
+          active:border-action-outline-info-faded-activated
+          active:bg-action-fill-info-faded-activated
+          `,
         },
         {
             variant: "secondary",
             color: "neutral",
-            class: "border-action-outline-neutral-faded text-action-ink-neutral-normal hover:bg-action-outline-neutral-faded-hover",
+            class: `border-action-outline-neutral-faded 
+          text-action-ink-neutral-normal 
+          hover:bg-action-outline-neutral-faded-hover 
+          hover:bg-action-fill-neutral-faded-hover 
+          disabled:text-action-ink-neutral-disabled
+          disabled:border-action-outline-neutral-disabled
+          active:border-action-outline-neutral-faded-activated
+          active:bg-action-fill-neutral-faded-activated
+          `,
         },
         // Tertiary variant colors
         {
@@ -169,6 +366,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-primary-normal 
           hover:bg-action-fill-primary-faded 
           disabled:text-action-ink-on-primary-muted
+          active:bg-action-fill-primary-faded-activated
           `,
         },
         {
@@ -177,6 +375,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-positive-normal 
           hover:bg-action-fill-positive-faded 
           disabled:text-action-ink-on-positive-muted
+          active:bg-action-fill-positive-faded-activated
           `,
         },
         {
@@ -185,6 +384,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-negative-normal 
           hover:bg-action-fill-negative-faded 
           disabled:text-action-ink-on-negative-muted
+          active:bg-action-fill-negative-faded-activated
           `,
         },
         {
@@ -193,6 +393,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-notice-normal 
           hover:bg-action-fill-notice-faded 
           disabled:text-action-ink-on-notice-muted
+          active:bg-action-fill-notice-faded-activated
           `,
         },
         {
@@ -201,6 +402,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-info-normal 
           hover:bg-action-fill-info-faded 
           disabled:text-action-ink-on-notice-muted
+          active:bg-action-fill-info-faded-activated
           `,
         },
         {
@@ -209,6 +411,7 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             class: `text-action-ink-neutral-normal 
           hover:bg-action-fill-neutral-faded 
           disabled:text-action-ink-on-notice-muted
+          active:bg-action-fill-neutral-faded-activated
           `,
         },
         // Icon only sizing
@@ -258,174 +461,533 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
 });
 Button.displayName = "Button";
 
-const textVariants = cva("", {
+// Helper function to get the text utility class name
+function getTextClassName(variant = "body", size = "medium", weight = "regular", color = "default") {
+    // Build the base class name
+    let baseClass = `text-${variant}`;
+    // Add size
+    if (size) {
+        baseClass += `-${size}`;
+    }
+    // Add weight
+    if (weight) {
+        baseClass += `-${weight}`;
+    }
+    // Add color class separately
+    const colorClass = `text-color-${color}`;
+    return `${baseClass} ${colorClass}`;
+}
+const Text = React.forwardRef(({ className, variant = "body", size = "medium", weight = "regular", color = "default", as = "p", children, ...props }, ref) => {
+    const Component = as;
+    const textClass = getTextClassName(variant, size, weight, color);
+    return React.createElement(Component, {
+        className: cn(textClass, className),
+        ref,
+        ...props,
+    }, children);
+});
+Text.displayName = "Text";
+
+const FormFooter = React.forwardRef(({ helperText, trailingText, validationState = "default", size = "medium", isDisabled = false, className, helperTextClassName, trailingTextClassName, }, ref) => {
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            textSize: "xsmall",
+            iconSize: 12,
+            gap: "gap-1",
+        },
+        medium: {
+            textSize: "small",
+            iconSize: 14,
+            gap: "gap-1",
+        },
+        large: {
+            textSize: "medium",
+            iconSize: 16,
+            gap: "gap-1.5",
+        },
+    };
+    const config = sizeConfig[size];
+    // Determine text color based on validation state and disabled state
+    const getTextColor = () => {
+        if (isDisabled)
+            return "disabled";
+        if (validationState === "positive")
+            return "positive";
+        if (validationState === "negative")
+            return "negative";
+        if (validationState === "default")
+            return "default";
+        return "default";
+    };
+    // Don't render anything if there's no content
+    if (!helperText && !trailingText) {
+        return null;
+    }
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [helperText && (jsxs("div", { className: cn("flex items-center", config.gap), children: [validationState === "positive" && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), validationState === "negative" && (jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: getTextColor(), className: cn("italic font-size-100 leading-100", helperTextClassName), children: helperText })] })), trailingText && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", color: isDisabled ? "disabled" : "muted", className: cn("font-size-100 leading-100 shrink-0", trailingTextClassName), children: trailingText }))] }));
+});
+FormFooter.displayName = "FormFooter";
+
+/**
+ * ==============================================
+ * HOW TO ADD A NEW ICON:
+ * ==============================================
+ *
+ * 1. Add your SVG file to: src/assets/icons/{iconName}.svg
+ *
+ * 2. Copy the SVG content from the file
+ *
+ * 3. Add it to the iconRegistry below:
+ *    iconName: `<svg>...</svg>`,
+ *
+ * 4. Use it anywhere in your app:
+ *    <Icon name="iconName" size={24} />
+ *
+ * The Icon component will automatically:
+ * - Replace hardcoded colors with currentColor
+ * - Allow you to control color via className or style
+ * - Resize based on the size prop
+ * ==============================================
+ */
+/**
+ * Icon registry - maps icon names to their SVG content
+ * Add your icons here by copying the SVG content from your icon files
+ */
+const iconRegistry = {
+    // Tick/Check icon
+    tick: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.364 15.1924L19.5564 6L20.9706 7.41421L10.364 18.0208L4 11.6569L5.41422 10.2427L10.364 15.1924Z" fill="#081416"/>
+</svg>`,
+    // Alias: check points to the same icon as tick
+    check: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.364 15.1924L19.5564 6L20.9706 7.41421L10.364 18.0208L4 11.6569L5.41422 10.2427L10.364 15.1924Z" fill="#081416"/>
+</svg>`,
+};
+const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
+    const svgContent = iconRegistry[name];
+    if (!svgContent) {
+        console.warn(`Icon "${String(name)}" not found in registry.\n` +
+            `Available icons: ${Object.keys(iconRegistry).join(", ")}`);
+        return null;
+    }
+    // Parse the SVG content
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
+    const svgElement = svgDoc.querySelector("svg");
+    if (!svgElement) {
+        console.error(`Invalid SVG content for icon "${String(name)}"`);
+        return null;
+    }
+    // Extract viewBox attribute
+    const viewBox = svgElement.getAttribute("viewBox") || "0 0 24 24";
+    let innerHTML = svgElement.innerHTML;
+    // Replace hardcoded fill and stroke colors with currentColor
+    // This allows the icon color to be controlled via CSS color property
+    innerHTML = innerHTML
+        .replace(/fill="[^"]*"/g, 'fill="currentColor"')
+        .replace(/stroke="[^"]*"/g, 'stroke="currentColor"');
+    return (jsx("svg", { width: size, height: size, viewBox: viewBox, fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, ...props, dangerouslySetInnerHTML: { __html: innerHTML } }));
+};
+Icon.displayName = "Icon";
+/**
+ * Get all available icon names from the registry
+ * @returns Array of registered icon names
+ *
+ * @example
+ * ```tsx
+ * const icons = getAvailableIcons();
+ * console.log(icons); // ['tick', 'check', ...]
+ * ```
+ */
+function getAvailableIcons() {
+    return Object.keys(iconRegistry);
+}
+/**
+ * Check if an icon exists in the registry
+ * @param name - Icon name to check
+ * @returns true if the icon exists
+ *
+ * @example
+ * ```tsx
+ * if (hasIcon('tick')) {
+ *   // Icon exists
+ * }
+ * ```
+ */
+function hasIcon(name) {
+    return name in iconRegistry;
+}
+
+const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer", {
     variants: {
-        variant: {
-            display: "font-functional font-medium",
-            heading: "font-display",
-            body: "font-display",
-            caption: "font-display font-semibold",
+        size: {
+            small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
+            medium: "w-[16px] h-[16px] rounded-small border-[1.5px]",
+            large: "w-[20px] h-[20px] rounded-medium border-[2px]",
+        },
+        validationState: {
+            none: "",
+            error: "border-action-outline-negative-default hover:border-action-outline-negative-hover focus:ring-2 ring-action-outline-negative-faded-hover",
+        },
+        isChecked: {
+            true: "",
+            false: "",
+        },
+        isIndeterminate: {
+            true: "",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60 border-action-outline-neutral-disabled bg-surface-fill-neutral-subtle",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Unchecked state - none validation
+        {
+            isChecked: false,
+            validationState: "none",
+            isDisabled: false,
+            class: "border-action-outline-neutral-faded hover:bg-action-fill-neutral-faded hover:border-action-outline-neutral-faded",
+        },
+        // Checked state - none validation
+        {
+            isChecked: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover hover:border-action-fill-primary-hover border-action-fill-primary-default",
+        },
+        // Checked or Indeterminate state - error validation
+        {
+            isChecked: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "bg-action-fill-negative-default border-action-fill-negative-default hover:bg-action-fill-negative-hover hover:border-action-fill-negative-hover",
         },
+        // Indeterminate state - none validation
+        {
+            isIndeterminate: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-action-fill-primary-default border-action-fill-primary-default hover:bg-action-fill-primary-hover hover:border-action-fill-primary-hover",
+        },
+        // Indeterminate state - error validation (same as checked error)
+        {
+            isIndeterminate: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "bg-action-fill-negative-default border-action-fill-negative-default hover:bg-action-fill-negative-hover hover:border-action-fill-negative-hover",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isChecked: false,
+        isIndeterminate: false,
+        isDisabled: false,
+    },
+});
+const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, isIndeterminate = false, showErrorText = true, containerClassName, labelClassName, className, checked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const [showRipple, setShowRipple] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const rippleTimeoutRef = React.useRef(null);
+    // Use forwarded ref or internal ref
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const isChecked = checked !== undefined ? checked : internalChecked;
+    // Set indeterminate property on the input element
+    React.useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = isIndeterminate;
+        }
+    }, [isIndeterminate]);
+    // Cleanup timeout on unmount
+    React.useEffect(() => {
+        return () => {
+            if (rippleTimeoutRef.current) {
+                clearTimeout(rippleTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalChecked(e.target.checked);
+        }
+    };
+    const triggerRipple = () => {
+        if (!isDisabled && !showRipple) {
+            // Clear any existing timeout
+            if (rippleTimeoutRef.current) {
+                clearTimeout(rippleTimeoutRef.current);
+            }
+            setShowRipple(true);
+            rippleTimeoutRef.current = setTimeout(() => {
+                setShowRipple(false);
+                rippleTimeoutRef.current = null;
+            }, 400); // Match animation duration (0.4s)
+        }
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            triggerRipple();
+            inputRef.current.click();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+            e.preventDefault();
+            triggerRipple();
+            inputRef.current?.click();
+        }
+    };
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            labelSize: "text-body-small-regular",
+            iconSize: 10,
+        },
+        medium: {
+            gap: "gap-2.5",
+            labelSize: "text-body-medium-regular",
+            iconSize: 12,
+        },
+        large: {
+            gap: "gap-3",
+            labelSize: "text-body-large-regular",
+            iconSize: 14,
+        },
+    };
+    const config = sizeConfig[size];
+    // Determine if we should show the error text
+    const shouldShowError = errorText && showErrorText;
+    return (jsxs("div", { className: cn("inline-flex flex-col", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+                                    ? "bg-action-outline-negative-faded"
+                                    : "bg-action-outline-primary-faded"), style: {
+                                    animation: "var(--animate-checkbox-ripple)",
+                                } })), jsxs("div", { className: cn(checkboxVariants({
+                                    size,
+                                    validationState,
+                                    isChecked: isChecked && !isIndeterminate,
+                                    isIndeterminate,
+                                    isDisabled,
+                                }), className), children: [isChecked && !isIndeterminate && (jsx(Icon, { name: "tick", size: config.iconSize, className: "text-action-ink-on-primary-normal" })), isIndeterminate && (jsx("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-action-ink-on-primary-normal", children: jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }))] })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
+});
+Checkbox.displayName = "Checkbox";
+
+const counterVariants = cva("inline-flex items-center justify-center  transition-colors", {
+    variants: {
         size: {
-            "2xlarge": "font-size-700 leading-700 tracking-[0%] mb-0",
-            xlarge: "font-size-1100 leading-1100 tracking-[0%] mb-0",
-            large: "font-size-1000 leading-1000 tracking-[0%] mb-0",
-            medium: "font-size-900 leading-900 tracking-[0%] mb-0",
-            small: "font-size-800 leading-800 tracking-[0%] mb-0",
-            xsmall: "font-size-25 leading-25 tracking-[0%] mb-[var(--paragraph-spacing-100)]",
-        },
-        weight: {
-            regular: "font-normal",
-            medium: "font-medium",
-            semibold: "font-semibold",
+            small: "text-body-xsmall-medium rounded-small px-1 py-0.5 min-w-[20px] h-[16px]",
+            medium: "text-body-small-medium rounded-medium px-2 py-1 min-w-[24px] h-[20px]",
+            large: "text-body-medium-medium rounded-medium px-2 py-1 min-w-[28px] h-[24px]",
         },
         color: {
-            default: "text-surface-ink-neutral-normal",
-            subtle: "text-surface-ink-neutral-subtle",
-            muted: "text-surface-ink-neutral-muted",
-            disabled: "text-surface-ink-neutral-disabled",
-            primary: "text-surface-ink-primary-normal",
-            onPrimary: "text-action-ink-on-primary-normal",
-        },
-        as: {
-            h1: "",
-            h2: "",
-            h3: "",
-            h4: "",
-            h5: "",
-            h6: "",
-            p: "",
-            span: "",
-            div: "",
-            label: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            information: "",
+            neutral: "",
+            primary: "",
+        },
+        emphasis: {
+            subtle: "",
+            intense: "",
         },
     },
     compoundVariants: [
-        // Display variants use Clash Grotesk with medium weight
+        // Positive - Subtle
         {
-            variant: "display",
-            weight: "regular",
-            class: "font-medium",
+            color: "positive",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-positive-subtle text-feedback-ink-positive-intense",
         },
+        // Positive - Intense
         {
-            variant: "display",
-            weight: "medium",
-            class: "font-medium",
+            color: "positive",
+            emphasis: "intense",
+            class: "bg-feedback-fill-positive-intense text-action-ink-on-primary-normal",
         },
+        // Negative - Subtle
         {
-            variant: "display",
-            weight: "semibold",
-            class: "font-medium",
+            color: "negative",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-negative-subtle text-feedback-ink-negative-subtle",
         },
-        // Caption is always semibold
+        // Negative - Intense
         {
-            variant: "caption",
-            weight: "regular",
-            class: "font-semibold",
+            color: "negative",
+            emphasis: "intense",
+            class: "bg-feedback-fill-negative-intense text-action-ink-on-primary-normal",
         },
+        // Notice - Subtle
         {
-            variant: "caption",
-            weight: "medium",
-            class: "font-semibold",
+            color: "notice",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-notice-subtle text-feedback-ink-notice-subtle",
         },
+        // Notice - Intense
         {
-            variant: "caption",
-            weight: "semibold",
-            class: "font-semibold",
+            color: "notice",
+            emphasis: "intense",
+            class: "bg-feedback-fill-notice-intense text-action-ink-on-primary-normal",
         },
-        // Size-specific styling based on variant
-        // Display sizes
+        // Information - Subtle
         {
-            variant: "display",
-            size: "xlarge",
-            class: "font-size-1100 leading-1100 tracking-[0%] mb-0",
+            color: "information",
+            emphasis: "subtle",
+            class: "bg-feedback-fill-info-subtle text-feedback-ink-info-subtle",
         },
+        // Information - Intense
         {
-            variant: "display",
-            size: "large",
-            class: "font-size-1000 leading-1000 tracking-[0%] mb-0",
+            color: "information",
+            emphasis: "intense",
+            class: "bg-feedback-fill-info-intense text-action-ink-on-primary-normal",
         },
+        // Neutral - Subtle
         {
-            variant: "display",
-            size: "medium",
-            class: "font-size-900 leading-900 tracking-[0%] mb-0",
+            color: "neutral",
+            emphasis: "subtle",
+            class: "bg-surface-fill-neutral-subtle text-surface-ink-neutral-normal",
         },
+        // Neutral - Intense
         {
-            variant: "display",
-            size: "small",
-            class: "font-size-800 leading-800 tracking-[0%] mb-0",
+            color: "neutral",
+            emphasis: "intense",
+            class: "bg-feedback-fill-neutral-intense text-action-ink-on-primary-normal",
+        },
+        // Primary - Subtle
+        {
+            color: "primary",
+            emphasis: "subtle",
+            class: "bg-surface-fill-primary-moderate text-surface-ink-primary-normal",
+        },
+        // Primary - Intense
+        {
+            color: "primary",
+            emphasis: "intense",
+            class: "bg-surface-fill-primary-intense text-action-ink-on-primary-normal",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        color: "neutral",
+        emphasis: "subtle",
+    },
+});
+const Counter = React.forwardRef(({ value, max, size = "medium", color = "neutral", emphasis = "subtle", className, ...props }, ref) => {
+    // Handle max value logic
+    const displayValue = React.useMemo(() => {
+        if (max !== undefined && typeof value === "number" && value > max) {
+            return `${max}+`;
+        }
+        return value;
+    }, [value, max]);
+    return (jsx("span", { ref: ref, className: cn(counterVariants({
+            size,
+            color,
+            emphasis,
+        }), className), ...props, children: displayValue }));
+});
+Counter.displayName = "Counter";
+
+const dividerVariants = cva("", {
+    variants: {
+        orientation: {
+            horizontal: "w-full",
+            vertical: "h-full",
         },
-        // Heading sizes
+        thickness: {
+            thinner: "",
+            thin: "",
+            thick: "",
+            thicker: "",
+        },
+        lineStyle: {
+            solid: "border-solid",
+            dashed: "border-dashed",
+        },
+        variant: {
+            normal: "",
+            subtle: "",
+            muted: "",
+        },
+    },
+    compoundVariants: [
+        // Horizontal orientation with thickness
         {
-            variant: "heading",
-            size: "2xlarge",
-            class: "font-size-700 leading-700 tracking-[0%] mb-0",
+            orientation: "horizontal",
+            thickness: "thinner",
+            class: "border-t-[0.5px]",
         },
         {
-            variant: "heading",
-            size: "xlarge",
-            class: "font-size-600 leading-600 tracking-[0%] mb-0",
+            orientation: "horizontal",
+            thickness: "thin",
+            class: "border-t-[1px]",
         },
         {
-            variant: "heading",
-            size: "large",
-            class: "font-size-500 leading-500 tracking-[0%] mb-0",
+            orientation: "horizontal",
+            thickness: "thick",
+            class: "border-t-[2px]",
         },
         {
-            variant: "heading",
-            size: "medium",
-            class: "font-size-400 leading-400 tracking-[0%] mb-0",
+            orientation: "horizontal",
+            thickness: "thicker",
+            class: "border-t-[3px]",
         },
+        // Vertical orientation with thickness
         {
-            variant: "heading",
-            size: "small",
-            class: "font-size-300 leading-300 tracking-[0%] mb-0",
+            orientation: "vertical",
+            thickness: "thinner",
+            class: "border-l-[0.5px]",
         },
-        // Body sizes
         {
-            variant: "body",
-            size: "large",
-            class: "font-size-200 leading-200 tracking-[0%]",
+            orientation: "vertical",
+            thickness: "thin",
+            class: "border-l-[1px]",
         },
         {
-            variant: "body",
-            size: "medium",
-            class: "font-size-100 leading-100 tracking-[0%]",
+            orientation: "vertical",
+            thickness: "thick",
+            class: "border-l-[2px]",
         },
         {
-            variant: "body",
-            size: "small",
-            class: "font-size-75 leading-75 tracking-[0%]",
+            orientation: "vertical",
+            thickness: "thicker",
+            class: "border-l-[3px]",
         },
+        // Normal variant colors
         {
-            variant: "body",
-            size: "xsmall",
-            class: "font-size-25 leading-25 tracking-[0%]",
+            variant: "normal",
+            class: "border-surface-outline-neutral-normal",
         },
-        // Caption sizes
+        // Subtle variant colors
         {
-            variant: "caption",
-            size: "medium",
-            class: "text-50 leading-50 tracking-[0%] mb-0",
+            variant: "subtle",
+            class: "border-surface-outline-neutral-subtle",
+        },
+        // Muted variant colors
+        {
+            variant: "muted",
+            class: "border-surface-outline-neutral-muted",
         },
     ],
     defaultVariants: {
-        variant: "body",
-        size: "medium",
-        weight: "regular",
-        color: "default",
-        as: "p",
+        orientation: "horizontal",
+        thickness: "thin",
+        lineStyle: "solid",
+        variant: "normal",
     },
 });
-const Text = React.forwardRef(({ className, variant, size, weight, color, as, children, ...props }, ref) => {
-    const Component = as || "p";
-    return React.createElement(Component, {
-        className: cn(textVariants({ variant, size, weight, color, as, className })),
-        ref,
-        ...props,
-    }, children);
+const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
 });
-Text.displayName = "Text";
+Divider.displayName = "Divider";
 
 const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
     variants: {
@@ -657,6 +1219,504 @@ const Tooltip = React.forwardRef(({ children, heading, description, placement =
 });
 Tooltip.displayName = "Tooltip";
 
+const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = false, isRequired = false, infoHeading, infoDescription, linkText, linkHref, onLinkClick, htmlFor, className, labelClassName, linkClassName, }, ref) => {
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            textSize: "xsmall",
+            iconSize: 12,
+            gap: "gap-1.5",
+        },
+        medium: {
+            textSize: "small",
+            iconSize: 14,
+            gap: "gap-2",
+        },
+        large: {
+            textSize: "medium",
+            iconSize: 16,
+            gap: "gap-2.5",
+        },
+    };
+    const config = sizeConfig[size];
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "subtle", children: label }), isRequired && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", className: "text-feedback-ink-negative-subtle ml-0.5", children: "*" })), isOptional && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", className: "text-surface-ink-neutral-muted ml-1", children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-surface-ink-neutral-muted cursor-help", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 6V10M7 4.5V4", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }) }))] }), linkText && (jsx("a", { href: linkHref, onClick: onLinkClick, className: cn("text-surface-ink-primary-normal hover:text-surface-ink-primary-hover transition-colors cursor-pointer font-display font-semibold leading-tight shrink-0", size === "small" && "text-xs", size === "medium" && "text-xs", size === "large" && "text-sm", linkClassName), children: linkText }))] }));
+});
+FormHeader.displayName = "FormHeader";
+
+const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+    variants: {
+        variant: {
+            default: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded
+          focus:ring-2
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
+            primary: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded 
+          focus:ring-2 
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            negative: `hover:bg-action-fill-negative-faded 
+          focus:bg-action-fill-negative-faded 
+          focus:ring-2 ring-action-outline-negative-faded-hover
+          border border-transparent
+          `,
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+        isSelected: {
+            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        isDisabled: false,
+        isSelected: false,
+    },
+});
+const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
+    const [internalSelected, setInternalSelected] = React.useState(isSelected);
+    // Sync internal state with prop
+    React.useEffect(() => {
+        setInternalSelected(isSelected);
+    }, [isSelected]);
+    const handleClick = (e) => {
+        if (isDisabled)
+            return;
+        if (type === "multiple") {
+            const newSelected = !internalSelected;
+            setInternalSelected(newSelected);
+            onSelectionChange?.(newSelected);
+        }
+        onClick?.(e);
+    };
+    const handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        const newSelected = e.target.checked;
+        setInternalSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    };
+    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
+            variant,
+            isDisabled,
+            isSelected: type === "multiple" ? internalSelected : false,
+        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
+                    ? "text-action-ink-primary-normal"
+                    : variant === "negative"
+                        ? "text-action-ink-negative-normal"
+                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
+                            ? "text-action-ink-primary-normal"
+                            : variant === "negative"
+                                ? "text-action-ink-negative-normal"
+                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+});
+ListItem.displayName = "ListItem";
+
+const radioVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer rounded-full", {
+    variants: {
+        size: {
+            small: "w-[14px] h-[14px] border-[1.5px]",
+            medium: "w-[16px] h-[16px] border-[1.5px]",
+            large: "w-[20px] h-[20px] border-[2px]",
+        },
+        validationState: {
+            none: "",
+            error: "border-action-outline-negative-default hover:border-action-outline-negative-hover",
+        },
+        isChecked: {
+            true: "",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60 border-action-outline-neutral-disabled bg-surface-fill-neutral-subtle",
+            false: "",
+        },
+        isFocused: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Unchecked state - none validation
+        {
+            isChecked: false,
+            validationState: "none",
+            isDisabled: false,
+            class: `border-action-outline-neutral-faded 
+          hover:bg-action-fill-neutral-faded 
+          hover:border-action-outline-neutral-faded
+          `,
+        },
+        // Checked state - none validation
+        {
+            isChecked: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-action-fill-primary-default hover:bg-action-fill-primary-hover border-action-fill-primary-default hover:border-action-fill-primary-hover",
+        },
+        // Checked state - error validation
+        {
+            isChecked: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "bg-action-fill-negative-default hover:bg-action-fill-negative-hover border-action-fill-negative-default hover:border-action-fill-negative-hover",
+        },
+        // Focused state - none validation
+        {
+            isFocused: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-primary-faded",
+        },
+        // Focused state - error validation
+        {
+            isFocused: true,
+            validationState: "error",
+            isDisabled: false,
+            class: "ring-2 ring-action-outline-negative-faded",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isChecked: false,
+        isDisabled: false,
+        isFocused: false,
+    },
+});
+const Radio = React.forwardRef(({ label, errorText, size = "medium", validationState = "none", isDisabled = false, showErrorText = true, containerClassName, labelClassName, className, checked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const [showRipple, setShowRipple] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Use forwarded ref or internal ref
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const isChecked = checked !== undefined ? checked : internalChecked;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalChecked(e.target.checked);
+        }
+    };
+    const triggerRipple = () => {
+        if (!isDisabled) {
+            setShowRipple(true);
+            setTimeout(() => {
+                setShowRipple(false);
+            }, 360); // Match animation duration (0.36s)
+        }
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            // Only show ripple when checking (not unchecking)
+            const willBeChecked = !isChecked;
+            if (willBeChecked) {
+                triggerRipple();
+            }
+            inputRef.current.click();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+            e.preventDefault();
+            // Only show ripple when checking (not unchecking)
+            const willBeChecked = !isChecked;
+            if (willBeChecked) {
+                triggerRipple();
+            }
+            inputRef.current?.click();
+        }
+    };
+    const handleFocus = () => {
+        if (!isDisabled) {
+            setIsFocused(true);
+        }
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            labelSize: "text-body-small-regular",
+            innerCircleSize: 6,
+        },
+        medium: {
+            gap: "gap-2.5",
+            labelSize: "text-body-medium-regular",
+            innerCircleSize: 7,
+        },
+        large: {
+            gap: "gap-3",
+            labelSize: "text-body-large-regular",
+            innerCircleSize: 8,
+        },
+    };
+    const config = sizeConfig[size];
+    // Determine if we should show the error text
+    const shouldShowError = errorText && showErrorText;
+    return (jsxs("div", { className: cn("inline-flex flex-col", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, role: "radio", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "radio", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+                                    ? "bg-action-outline-negative-faded"
+                                    : "bg-action-outline-primary-faded"), style: {
+                                    animation: "var(--animate-checkbox-ripple)",
+                                } })), jsx("div", { className: cn(radioVariants({
+                                    size,
+                                    validationState,
+                                    isChecked,
+                                    isDisabled,
+                                    isFocused,
+                                }), className), children: isChecked && (jsx("div", { className: "rounded-full bg-white transition-all", style: {
+                                        width: `${config.innerCircleSize}px`,
+                                        height: `${config.innerCircleSize}px`,
+                                    } })) })] }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }), shouldShowError && (jsx(FormFooter, { helperText: errorText, validationState: "negative", size: size, isDisabled: isDisabled }))] }));
+});
+Radio.displayName = "Radio";
+
+const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
+    variants: {
+        size: {
+            small: "w-[20px] h-[12px]",
+            medium: "w-[28px] h-[16px]",
+            large: "w-[36px] h-[20px]",
+        },
+        isChecked: {
+            true: "bg-action-fill-primary-default ",
+            false: "bg-surface-fill-neutral-subtle",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            isChecked: true,
+            isDisabled: false,
+            class: "hover:bg-action-fill-primary-hover ",
+        },
+        {
+            isChecked: false,
+            isDisabled: false,
+            class: "hover:bg-action-fill-neutral-faded",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        isChecked: false,
+        isDisabled: false,
+    },
+});
+const switchThumbVariants = cva("inline-block rounded-full bg-neutral-00 shadow-sm transition-transform duration-200", {
+    variants: {
+        size: {
+            small: "h-[8px] w-[8px]",
+            medium: "h-[12px] w-[12px]",
+            large: "h-[16px] w-[16px]",
+        },
+        isChecked: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        // Small size translations
+        {
+            size: "small",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "small",
+            isChecked: true,
+            class: "translate-x-[10px]",
+        },
+        // Medium size translations
+        {
+            size: "medium",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "medium",
+            isChecked: true,
+            class: "translate-x-[14px]",
+        },
+        // Large size translations
+        {
+            size: "large",
+            isChecked: false,
+            class: "translate-x-[2px]",
+        },
+        {
+            size: "large",
+            isChecked: true,
+            class: "translate-x-[18px]",
+        },
+    ],
+    defaultVariants: {
+        size: "medium",
+        isChecked: false,
+    },
+});
+const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, containerClassName, labelClassName, trackClassName, thumbClassName, className, checked, onChange, ...props }, ref) => {
+    const [internalChecked, setInternalChecked] = React.useState(false);
+    const inputRef = React.useRef(null);
+    // Use forwarded ref or internal ref
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const isChecked = checked !== undefined ? checked : internalChecked;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalChecked(e.target.checked);
+        }
+    };
+    const handleContainerClick = () => {
+        if (!isDisabled && inputRef.current) {
+            inputRef.current.click();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+            e.preventDefault();
+            inputRef.current?.click();
+        }
+    };
+    // Size-based configurations
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+            labelSize: "text-body-small-regular",
+        },
+        medium: {
+            gap: "gap-2.5",
+            labelSize: "text-body-medium-regular",
+        },
+        large: {
+            gap: "gap-3",
+            labelSize: "text-body-large-regular",
+        },
+    };
+    const config = sizeConfig[size];
+    return (jsx("div", { className: cn("inline-flex flex-col", containerClassName), children: jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "switch", "aria-checked": isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", role: "switch", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsx("div", { className: "relative inline-flex shrink-0", children: jsx("div", { className: cn(switchVariants({
+                            size,
+                            isChecked,
+                            isDisabled,
+                        }), trackClassName, className, "focus-visible:ring-2 focus-visible:ring-action-outline-primary-faded focus-visible:ring-offset-2"), children: jsx("span", { className: cn(switchThumbVariants({
+                                size,
+                                isChecked,
+                            }), thumbClassName) }) }) }), label && (jsx("label", { className: cn(config.labelSize, "select-none inline-flex items-center", isDisabled
+                        ? "text-surface-ink-neutral-disabled"
+                        : "text-surface-ink-neutral-normal", labelClassName), children: label }))] }) }));
+});
+Switch.displayName = "Switch";
+
+const textAreaVariants = cva("relative flex flex-col border rounded-medium transition-all font-display font-size-100 leading-100", {
+    variants: {
+        size: {
+            small: "p-3 min-h-[56px] text-xs gap-2",
+            medium: "p-4 min-h-[56px] text-sm gap-2",
+            large: "p-5 min-h-[64px]text-base gap-3",
+        },
+        validationState: {
+            none: `
+        border-action-outline-neutral-faded 
+        hover:border-action-outline-primary-hover 
+        focus-within:border-action-outline-primary-hover 
+        focus-within:ring-2 
+        ring-action-outline-primary-faded-hover`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover`,
+            negative: `border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover`,
+        },
+        isDisabled: {
+            true: `
+        border-[var(--border-width-thinner)]
+        hover:border-action-outline-neutral-disabled
+        border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
+            false: "bg-surface-fill-neutral-intense",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const TextArea = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, maxChar, showCharCount = true, infoDescription, infoHeading, linkText, linkHref, onLinkClick, containerClassName, labelClassName, textAreaClassName, className, value, onChange, rows = 4, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState("");
+    const textAreaValue = value !== undefined ? value : internalValue;
+    const currentLength = String(textAreaValue).length;
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        // Prevent exceeding maxChar if specified
+        if (maxChar && newValue.length > maxChar) {
+            return;
+        }
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalValue(newValue);
+        }
+    };
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    // Check if we're approaching or at the limit
+    const isNearLimit = maxChar && currentLength >= maxChar * 0.9;
+    const isAtLimit = maxChar && currentLength >= maxChar;
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
+    };
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsx("div", { className: cn(textAreaVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), className), children: jsx("textarea", { ref: ref, value: textAreaValue, onChange: handleChange, disabled: isDisabled, required: isRequired, rows: rows, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled font-display resize-none", size === "small" && "text-xs", size === "medium" && "text-sm", size === "large" && "text-base", textAreaClassName), ...props }) }), jsx(FormFooter, { helperText: displayHelperText, trailingText: maxChar && showCharCount ? `${currentLength}/${maxChar}` : undefined, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1", trailingTextClassName: cn("transition-colors", isAtLimit
+                    ? "text-feedback-ink-negative-subtle"
+                    : isNearLimit
+                        ? "text-feedback-ink-warning-subtle"
+                        : "") })] }));
+});
+TextArea.displayName = "TextArea";
+
 const textFieldVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
     variants: {
         size: {
@@ -666,19 +1726,17 @@ const textFieldVariants = cva("relative flex items-center gap-2 border rounded-m
         },
         validationState: {
             none: `
-        border-action-outline-neutral-default 
+        border-action-outline-neutral-faded 
         hover:border-action-outline-primary-hover 
         focus-within:border-action-outline-primary-hover 
         focus-within:ring-2 
         ring-action-outline-primary-faded-hover`,
             positive: `
           border-action-outline-positive-default 
-          hover:border-action-outline-positive-hover
           focus-within:border-action-outline-positive-hover
           focus-within:ring-2
           ring-action-outline-positive-faded-hover`,
             negative: `border-action-outline-negative-default 
-          hover:border-action-outline-negative-hover 
           focus-within:border-action-outline-negative-hover
           focus-within:ring-2 
           ring-action-outline-negative-faded-hover`,
@@ -698,7 +1756,7 @@ const textFieldVariants = cva("relative flex items-center gap-2 border rounded-m
         isDisabled: false,
     },
 });
-const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
+const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = React.useState("");
     const inputValue = value !== undefined ? value : internalValue;
     const hasValue = inputValue && String(inputValue).length > 0;
@@ -730,7 +1788,18 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
         : successText
             ? "positive"
             : validationState;
-    return (jsxs("div", { className: cn("w-full flex flex-col gap-3", containerClassName), children: [label && (jsxs("div", { className: "flex items-center gap-2 mb-2", children: [jsxs("label", { htmlFor: props.id, className: cn("flex items-center", labelClassName), children: [jsx(Text, { as: "span", variant: "body", size: "small", weight: "semibold", color: isDisabled ? "disabled" : "default", children: label }), isRequired && (jsx(Text, { as: "span", variant: "body", size: "small", weight: "semibold", className: "text-feedback-ink-negative-subtle ml-0.5", children: "*" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-surface-ink-neutral-muted", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 6V10M7 4.5V4", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }) }))] })), jsxs("div", { className: cn(textFieldVariants({
+    const sizeConfig = {
+        small: {
+            gap: "gap-2",
+        },
+        medium: {
+            gap: "gap-2",
+        },
+        large: {
+            gap: "gap-3",
+        },
+    };
+    return (jsxs("div", { className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
                     size,
                     validationState: currentValidationState,
                     isDisabled,
@@ -746,17 +1815,11 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: suffix }))] }), displayHelperText && (jsxs("div", { className: "flex items-center gap-1 mt-1", children: [currentValidationState === "positive" && (jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-positive-intense shrink-0", children: jsx("path", { d: "M3 7L6 10L11 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })), currentValidationState === "negative" && (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-feedback-ink-negative-subtle shrink-0", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 4V7.5M7 10V9.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] })), jsx(Text, { as: "span", variant: "body", size: "small", color: currentValidationState === "positive"
-                            ? "default"
-                            : currentValidationState === "negative"
-                                ? "default"
-                                : isDisabled
-                                    ? "disabled"
-                                    : "subtle", className: cn("italic font-size-100 leading-100", currentValidationState === "positive" &&
-                            "text-feedback-ink-positive-intense", currentValidationState === "negative" &&
-                            "text-feedback-ink-negative-subtle"), children: displayHelperText })] }))] }));
+                                    : "text-surface-ink-neutral-muted"), children: suffix }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
 });
 TextField.displayName = "TextField";
 
-export { Button, Text, TextField, Tooltip, buttonVariants, cn, textFieldVariants, textVariants, tooltipVariants };
+export { Badge, Button, Checkbox, Counter, Divider, FormFooter, FormHeader, Icon, ListItem, Radio, Switch, Text, TextArea, TextField, Tooltip, badgeVariants, buttonVariants, checkboxVariants, cn, counterVariants, getAvailableIcons, hasIcon, iconRegistry, listItemVariants, radioVariants, switchVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map