infinity-ui-elements 1.3.1 → 1.4.0

package/dist/index.esm.js

@@ -11,6 +11,18 @@ import { twMerge } from 'tailwind-merge';
 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,7 @@ 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 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 +61,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 +91,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 +102,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 +112,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 +122,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 +132,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 +142,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 +240,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 +249,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 +258,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 +267,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 +276,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 +285,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 +335,318 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
 });
 Button.displayName = "Button";
 
-const textVariants = cva("", {
-    variants: {
-        variant: {
-            display: "font-functional font-medium",
-            heading: "font-display",
-            body: "font-display",
-            caption: "font-display font-semibold",
-        },
-        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",
-        },
-        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: "",
-        },
-    },
-    compoundVariants: [
-        // Display variants use Clash Grotesk with medium weight
-        {
-            variant: "display",
-            weight: "regular",
-            class: "font-medium",
-        },
-        {
-            variant: "display",
-            weight: "medium",
-            class: "font-medium",
-        },
-        {
-            variant: "display",
-            weight: "semibold",
-            class: "font-medium",
-        },
-        // Caption is always semibold
-        {
-            variant: "caption",
-            weight: "regular",
-            class: "font-semibold",
-        },
-        {
-            variant: "caption",
-            weight: "medium",
-            class: "font-semibold",
-        },
-        {
-            variant: "caption",
-            weight: "semibold",
-            class: "font-semibold",
-        },
-        // Size-specific styling based on variant
-        // Display sizes
-        {
-            variant: "display",
-            size: "xlarge",
-            class: "font-size-1100 leading-1100 tracking-[0%] mb-0",
+// 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",
         },
-        {
-            variant: "display",
-            size: "large",
-            class: "font-size-1000 leading-1000 tracking-[0%] mb-0",
+        medium: {
+            textSize: "small",
+            iconSize: 14,
+            gap: "gap-1",
         },
-        {
-            variant: "display",
-            size: "medium",
-            class: "font-size-900 leading-900 tracking-[0%] mb-0",
+        large: {
+            textSize: "medium",
+            iconSize: 16,
+            gap: "gap-1.5",
         },
-        {
-            variant: "display",
-            size: "small",
-            class: "font-size-800 leading-800 tracking-[0%] mb-0",
-        },
-        // Heading sizes
-        {
-            variant: "heading",
-            size: "2xlarge",
-            class: "font-size-700 leading-700 tracking-[0%] mb-0",
+    };
+    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 border transition-all cursor-pointer", {
+    variants: {
+        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]",
         },
-        {
-            variant: "heading",
-            size: "xlarge",
-            class: "font-size-600 leading-600 tracking-[0%] mb-0",
+        validationState: {
+            none: "",
+            error: "border-action-outline-negative-default hover:border-action-outline-negative-hover focus:ring-2 ring-action-outline-negative-faded-hover",
         },
-        {
-            variant: "heading",
-            size: "large",
-            class: "font-size-500 leading-500 tracking-[0%] mb-0",
+        isChecked: {
+            true: "",
+            false: "",
         },
-        {
-            variant: "heading",
-            size: "medium",
-            class: "font-size-400 leading-400 tracking-[0%] mb-0",
+        isIndeterminate: {
+            true: "",
+            false: "",
         },
-        {
-            variant: "heading",
-            size: "small",
-            class: "font-size-300 leading-300 tracking-[0%] mb-0",
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60 border-action-outline-neutral-disabled bg-surface-fill-neutral-subtle",
+            false: "",
         },
-        // Body sizes
+    },
+    compoundVariants: [
+        // Unchecked state - none validation
         {
-            variant: "body",
-            size: "large",
-            class: "font-size-200 leading-200 tracking-[0%]",
+            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
         {
-            variant: "body",
-            size: "medium",
-            class: "font-size-100 leading-100 tracking-[0%]",
+            isChecked: true,
+            validationState: "none",
+            isDisabled: false,
+            class: "bg-action-fill-primary-hover border-surface-outline-neutral-muted",
         },
+        // Checked or Indeterminate state - error validation
         {
-            variant: "body",
-            size: "small",
-            class: "font-size-75 leading-75 tracking-[0%]",
+            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
         {
-            variant: "body",
-            size: "xsmall",
-            class: "font-size-25 leading-25 tracking-[0%]",
+            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",
         },
-        // Caption sizes
+        // Indeterminate state - error validation (same as checked error)
         {
-            variant: "caption",
-            size: "medium",
-            class: "text-50 leading-50 tracking-[0%] mb-0",
+            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: {
-        variant: "body",
         size: "medium",
-        weight: "regular",
-        color: "default",
-        as: "p",
+        validationState: "none",
+        isChecked: false,
+        isIndeterminate: false,
+        isDisabled: false,
     },
 });
-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 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);
+    // 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]);
+    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 && !isIndeterminate;
+            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 && !isIndeterminate;
+            if (willBeChecked) {
+                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 }))] }));
 });
-Text.displayName = "Text";
+Checkbox.displayName = "Checkbox";
 
 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 +878,112 @@ 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 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-default 
+        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`,
+        },
+        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;
+    return (jsxs("div", { className: cn("w-full flex flex-col gap-3", 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 +993,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 +1023,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 +1055,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 +1082,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 { Button, Checkbox, FormFooter, FormHeader, Icon, Text, TextArea, TextField, Tooltip, buttonVariants, checkboxVariants, cn, getAvailableIcons, hasIcon, iconRegistry, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map