infinity-ui-elements 1.7.12 → 1.8.0

package/dist/index.esm.js

@@ -1,14 +1,120 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 import { ExternalLink, Loader2, Search, X, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { flexRender } from '@tanstack/react-table';
 
+/**
+ * ==============================================
+ * 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>`,
+    add: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<path d="M12.9 11.0999L21 11.0997V12.8997L12.9 12.8999V21H11.1V12.8999L3.00004 12.9001L3 11.1001L11.1 11.0999L11.0999 3.00001L12.8999 3L12.9 11.0999Z" fill="#081416"/>
+</svg>`,
+    // Info icon
+    info: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22.5C6.20101 22.5 1.5 17.7989 1.5 12C1.5 6.20101 6.20101 1.5 12 1.5C17.7989 1.5 22.5 6.20101 22.5 12C22.5 17.7989 17.7989 22.5 12 22.5ZM12 20.4C16.6392 20.4 20.4 16.6392 20.4 12C20.4 7.36081 16.6392 3.6 12 3.6C7.36081 3.6 3.6 7.36081 3.6 12C3.6 16.6392 7.36081 20.4 12 20.4ZM10.95 6.75H13.05V8.85H10.95V6.75ZM10.95 10.95H13.05V17.25H10.95V10.95Z" fill="#081416"/>
+</svg>
+`,
+    // Exclamation/Warning icon
+    exclamation: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V15H13V17ZM13 13H11V7H13V13Z" fill="#081416"/>
+</svg>`,
+    // Close/X icon
+    close: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 6L6 18M6 6L18 18" stroke="#081416" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</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;
+    }
+    // Get the viewBox for proper scaling
+    const viewBox = svgElement.getAttribute("viewBox") || "0 0 24 24";
+    // Get all SVG content as string and replace hardcoded colors with currentColor
+    let innerSVG = svgElement.innerHTML;
+    // Replace common hardcoded colors with currentColor
+    // This allows the icon to inherit text color from parent
+    innerSVG = innerSVG
+        .replace(/fill="[^"]*"/g, 'fill="currentColor"')
+        .replace(/stroke="[^"]*"/g, 'stroke="currentColor"');
+    return (jsx("svg", { width: size, height: size, viewBox: viewBox, className: className, style: style, xmlns: "http://www.w3.org/2000/svg", ...props, dangerouslySetInnerHTML: { __html: innerSVG } }));
+};
+/**
+ * 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;
+}
+
 // Define patterns for custom classes that should be preserved
 // This approach is more scalable than hardcoding individual class names
 const CUSTOM_CLASS_PATTERNS = [
@@ -48,123 +154,12 @@ function cn(...inputs) {
     return clsx(mergedStandard, customClasses);
 }
 
-// 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 inverseColorClasses = {
-    a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
-    a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
-    a3: "bg-avatar-fill-a3-on-bg text-avatar-fill-a3-bg",
-    a4: "bg-avatar-fill-a4-on-bg text-avatar-fill-a4-bg",
-    a5: "bg-avatar-fill-a5-on-bg text-avatar-fill-a5-bg",
-};
-const avatarVariants = cva("inline-flex items-center justify-center font-medium text-center select-none", {
-    variants: {
-        color: {
-            a1: "bg-avatar-fill-a1-bg text-avatar-fill-a1-on-bg",
-            a2: "bg-avatar-fill-a2-bg text-avatar-fill-a2-on-bg",
-            a3: "bg-avatar-fill-a3-bg text-avatar-fill-a3-on-bg",
-            a4: "bg-avatar-fill-a4-bg text-avatar-fill-a4-on-bg",
-            a5: "bg-avatar-fill-a5-bg text-avatar-fill-a5-on-bg",
-        },
-        size: {
-            small: "h-[24px] w-[24px] text-body-medium-regular rounded-large",
-            medium: "h-[32px] w-[32px] text-body-medium-regular rounded-xlarge",
-            xlarge: "h-[36px] w-[36px] text-body-medium-regular rounded-xlarge",
-        },
-    },
-    defaultVariants: {
-        color: "a1",
-        size: "medium",
-    },
-});
-const statusVariants = cva("absolute flex items-center justify-center rounded-full border-2 border-surface-fill-neutral-intense", {
-    variants: {
-        size: {
-            small: "h-5 w-5 -bottom-0.5 -right-0.5",
-            medium: "h-6 w-6 -bottom-1 -right-1",
-            xlarge: "h-6 w-6 -bottom-1 -right-1",
-        },
-        statusColor: {
-            positive: "bg-action-fill-positive-default",
-            negative: "bg-action-fill-negative-default",
-            notice: "bg-action-fill-notice-default",
-            info: "bg-action-fill-info-default",
-            neutral: "bg-action-fill-neutral-default",
-        },
-    },
-    defaultVariants: {
-        size: "medium",
-        statusColor: "notice",
-    },
-});
-const Avatar = React.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
-    const [imageError, setImageError] = React.useState(false);
-    const handleImageError = () => {
-        setImageError(true);
-    };
-    const getStatusIconSize = () => {
-        switch (size) {
-            case "small":
-                return "h-3.5 w-3.5";
-            case "medium":
-                return "h-4 w-4";
-            default:
-                return "h-4 w-4";
-        }
-    };
-    const getTextSize = () => {
-        switch (size) {
-            case "small":
-                return "small";
-            case "medium":
-                return "medium";
-            default:
-                return "medium";
-        }
-    };
-    const resolvedColor = color ?? "a1";
-    const avatarElement = (jsxs("div", { className: "relative inline-block", children: [jsx("div", { className: cn(avatarVariants({ color: resolvedColor, size }), appearance === "inverse"
-                    ? inverseColorClasses[resolvedColor]
-                    : undefined, className), ...props, children: src && !imageError ? (jsx("img", { src: src, alt: alt || "Avatar", className: cn("h-full w-full object-cover", size === "small" ? "rounded-large" : "rounded-xlarge"), onError: handleImageError })) : (children) }), showStatus && (jsx("div", { className: cn(statusVariants({ size, statusColor })), children: statusIcon && (jsx("span", { className: cn("text-action-ink-on-primary-normal", getStatusIconSize()), children: statusIcon })) }))] }));
-    // If no label or trailing component, return just the avatar
-    if (!label && !trailingComponent) {
-        return jsx("div", { ref: ref, children: avatarElement });
-    }
-    // Otherwise, return avatar with label and/or trailing component
-    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label && (jsx(Text, { variant: "body", size: getTextSize(), weight: "medium", color: "default", as: "span", children: label })), trailingComponent && (jsx("span", { className: "ml-auto", children: trailingComponent }))] }));
-});
-Avatar.displayName = "Avatar";
-
-const badgeVariants = cva("inline-flex items-center whitespace-nowrap transition-colors", {
+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: {
-            light: "",
-            filled: "",
+            primary: "bg-action-fill-primary-default text-action-ink-on-primary-normal hover:bg-action-fill-primary-hover",
+            secondary: "border",
+            tertiary: "hover:bg-accent hover:text-accent-foreground",
         },
         color: {
             primary: "",
@@ -173,171 +168,45 @@ const badgeVariants = cva("inline-flex items-center whitespace-nowrap transition
             notice: "",
             info: "",
             neutral: "",
+            white: "",
         },
         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",
+            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-5 py-2 rounded-large text-body-medium-medium",
+            large: "md:h-[44px] px-6 rounded-large text-body-large-medium",
+        },
+        isIconOnly: {
+            true: "aspect-square p-0",
+            false: "",
+        },
+        isLoading: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "cursor-pointer",
+        },
+        isFullWidth: {
+            true: "flex w-full",
+            false: "flex w-fit",
         },
     },
     compoundVariants: [
-        // Light variant colors
+        // Primary variant colors
         {
-            variant: "light",
+            variant: "primary",
             color: "primary",
-            class: "bg-action-fill-primary-faded text-action-ink-primary-normal",
+            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,
+          active:bg-action-fill-primary-activated
+          `,
         },
         {
-            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",
-            secondary: "border",
-            tertiary: "hover:bg-accent hover:text-accent-foreground",
-        },
-        color: {
-            primary: "",
-            positive: "",
-            negative: "",
-            notice: "",
-            info: "",
-            neutral: "",
-        },
-        size: {
-            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-5 py-2 rounded-large text-body-medium-medium",
-            large: "md:h-[44px] px-6 rounded-large text-body-large-medium",
-        },
-        isIconOnly: {
-            true: "aspect-square p-0",
-            false: "",
-        },
-        isLoading: {
-            true: "cursor-not-allowed",
-            false: "",
-        },
-        isDisabled: {
-            true: "cursor-not-allowed",
-            false: "cursor-pointer",
-        },
-        isFullWidth: {
-            true: "flex w-full",
-            false: "flex w-fit",
-        },
-    },
-    compoundVariants: [
-        // Primary variant colors
-        {
-            variant: "primary",
-            color: "primary",
-            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,
-          active:bg-action-fill-primary-activated
-          `,
-        },
-        {
-            variant: "primary",
+            variant: "primary",
             color: "positive",
             class: `bg-action-fill-positive-default text-action-ink-on-primary-normal 
           hover:bg-action-fill-positive-hover 
@@ -386,6 +255,16 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           active:bg-action-fill-neutral-activated
           `,
         },
+        {
+            variant: "primary",
+            color: "white",
+            class: `bg-action-fill-white-default text-action-ink-neutral-subtle
+          hover:bg-action-fill-white-hover 
+          disabled:bg-action-fill-white-disabled
+          disabled:text-action-ink-neutral-disabled
+          active:bg-action-fill-white-activated
+          `,
+        },
         // Secondary variant colors
         {
             variant: "secondary",
@@ -474,6 +353,19 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           active:bg-action-fill-neutral-faded-activated
           `,
         },
+        {
+            variant: "secondary",
+            color: "white",
+            class: `border-action-outline-white-faded 
+          text-action-ink-on-primary-subtle
+          hover:border-action-outline-white-faded-hover 
+          hover:bg-action-fill-white-faded-hover
+          disabled:text-surface-ink-white-disabled
+          disabled:border-action-outline-white-disabled
+          active:border-action-outline-white-faded-activated
+          active:bg-action-fill-white-faded-activated
+          `,
+        },
         // Tertiary variant colors
         {
             variant: "tertiary",
@@ -529,6 +421,16 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
           active:bg-action-fill-neutral-faded-activated
           `,
         },
+        {
+            variant: "tertiary",
+            color: "white",
+            class: `text-action-ink-white-subtle
+          hover:bg-action-white-faded-hover
+          disabled:text-action-ink-white-disabled
+          disabled:bg-action-fill-white-disabled
+          active:bg-action-white-faded-activated
+          `,
+        },
         // Icon only sizing
         {
             isIconOnly: true,
@@ -563,7 +465,13 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
 const Button = React.forwardRef(({ className, variant = "primary", color = "primary", size, isIconOnly, isLoading, asChild = false, leadingIcon, trailingIcon, isFullWidth = false, children, disabled, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const isDisabled = disabled || isLoading || false;
-    const buttonContent = (jsxs(Fragment, { children: [isLoading && !isIconOnly && (jsx(PulseLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 10 })), isLoading && isIconOnly && (jsx(ClipLoader, { color: `var(--color-action-ink-${color}-normal)`, size: 20 })), !isLoading && leadingIcon && (jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsx("span", { children: trailingIcon })] }));
+    const getLoaderColor = () => {
+        if (color === "white") {
+            return "var(--color-surface-ink-neutral-normal)";
+        }
+        return `var(--color-action-ink-${color}-normal)`;
+    };
+    const buttonContent = (jsxs(Fragment, { children: [isLoading && !isIconOnly && (jsx(PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsx(ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && (jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsx("span", { children: trailingIcon })] }));
     return (jsx(Comp, { className: cn(buttonVariants({
             variant,
             color,
@@ -574,7 +482,752 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
             isFullWidth,
         }), className), ref: ref, disabled: isDisabled, ...props, children: buttonContent }));
 });
-Button.displayName = "Button";
+Button.displayName = "Button";
+
+const iconButtonVariants = cva("inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none p-0 border-0 bg-transparent", {
+    variants: {
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+            white: "",
+        },
+        size: {
+            xsmall: "",
+            small: "",
+            medium: "",
+            large: "",
+        },
+        isLoading: {
+            true: "cursor-not-allowed",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed",
+            false: "cursor-pointer",
+        },
+    },
+    defaultVariants: {
+        color: "primary",
+        size: "medium",
+        isLoading: false,
+    },
+});
+const IconButton = React.forwardRef(({ className, color = "primary", size = "medium", isLoading, asChild = false, icon, iconElement, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const isDisabled = disabled || isLoading || false;
+    const getLoaderColor = () => {
+        if (color === "white") {
+            return "var(--color-surface-ink-neutral-normal)";
+        }
+        return `var(--color-action-ink-${color}-normal)`;
+    };
+    const getIconSize = () => {
+        switch (size) {
+            case "xsmall":
+                return 16;
+            case "small":
+                return 18;
+            case "medium":
+                return 20;
+            case "large":
+                return 24;
+            default:
+                return 20;
+        }
+    };
+    const getIconColorClass = () => {
+        // Color classes with normal, hover, focus, and disabled states
+        const colorMap = {
+            primary: "text-action-ink-primary-normal hover:text-action-ink-primary-subtle focus-visible:text-action-ink-primary-subtle disabled:text-action-ink-primary-muted",
+            positive: "text-action-ink-positive-normal hover:text-action-ink-positive-subtle focus-visible:text-action-ink-positive-subtle disabled:text-action-ink-positive-muted",
+            negative: "text-action-ink-negative-normal hover:text-action-ink-negative-subtle focus-visible:text-action-ink-negative-subtle disabled:text-action-ink-negative-muted",
+            notice: "text-action-ink-notice-normal hover:text-action-ink-notice-subtle focus-visible:text-action-ink-notice-subtle disabled:text-action-ink-notice-muted",
+            info: "text-action-ink-info-normal hover:text-action-ink-info-subtle focus-visible:text-action-ink-info-subtle disabled:text-action-ink-info-muted",
+            neutral: "text-action-ink-neutral-normal hover:text-action-ink-neutral-subtle focus-visible:text-action-ink-neutral-subtle disabled:text-action-ink-neutral-muted",
+            white: "text-surface-ink-white-subtle hover:text-surface-ink-white-normal focus-visible:text-surface-ink-white-normal disabled:text-surface-ink-white-muted",
+        };
+        return colorMap[color] || colorMap.primary;
+    };
+    const buttonContent = (jsx(Fragment, { children: isLoading ? (jsx(ClipLoader, { color: getLoaderColor(), size: getIconSize() })) : icon ? (jsx(Icon, { name: icon, size: getIconSize(), className: getIconColorClass() })) : iconElement ? (jsx("span", { className: getIconColorClass(), children: iconElement })) : null }));
+    return (jsx(Comp, { className: cn(iconButtonVariants({
+            color,
+            size,
+            isLoading,
+            isDisabled,
+        }), className), ref: ref, disabled: isDisabled, ...props, children: buttonContent }));
+});
+IconButton.displayName = "IconButton";
+
+const linkVariants = cva("inline-flex items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none  decoration-1 underline-offset-4", {
+    variants: {
+        type: {
+            anchor: "hover:underline",
+            action: "no-underline cursor-pointer",
+        },
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+            white: "",
+        },
+        size: {
+            xsmall: "text-body-xsmall-medium gap-1",
+            small: "text-body-small-medium gap-1",
+            medium: "text-body-medium-medium gap-1.5",
+            large: "text-body-large-medium gap-1.5",
+        },
+        isIconOnly: {
+            true: "no-underline",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: "cursor-pointer",
+        },
+    },
+    compoundVariants: [
+        // Primary color variants
+        {
+            color: "primary",
+            class: `text-action-ink-primary-normal 
+          hover:text-action-ink-primary-subtle
+          hover:decoration-action-outline-primary-hover 
+          disabled:text-action-ink-primary-disabled
+          focus:text-action-ink-primary-hover
+          `,
+        },
+        // Positive color variants
+        {
+            color: "positive",
+            class: `text-action-ink-positive-normal 
+          hover:text-action-ink-positive-subtle
+          hover:decoration-action-outline-positive-hover 
+          hover:text-action-ink-positive-hover 
+          disabled:text-action-ink-positive-disabled
+          focus:text-action-ink-positive-hover
+          `,
+        },
+        // Negative color variants
+        {
+            color: "negative",
+            class: `text-action-ink-negative-normal 
+          hover:text-action-ink-negative-subtle
+          hover:decoration-action-outline-negative-hover 
+          hover:text-action-ink-negative-hover 
+          disabled:text-action-ink-negative-disabled
+          focus:text-action-ink-negative-hover
+          `,
+        },
+        // Notice color variants
+        {
+            color: "notice",
+            class: `text-action-ink-notice-normal 
+          hover:text-action-ink-notice-subtle
+          hover:decoration-action-outline-notice-hover 
+          hover:text-action-ink-notice-hover 
+          disabled:text-action-ink-notice-disabled
+          focus:text-action-ink-notice-hover
+          `,
+        },
+        // Info color variants
+        {
+            color: "info",
+            class: `text-action-ink-info-normal 
+          hover:text-action-ink-info-subtle
+          hover:decoration-action-outline-info-hover 
+          hover:text-action-ink-info-hover 
+          disabled:text-action-ink-info-disabled
+          focus:text-action-ink-info-hover
+          `,
+        },
+        // Neutral color variants
+        {
+            color: "neutral",
+            class: `text-action-ink-neutral-normal 
+          hover:text-action-ink-neutral-subtle
+          hover:decoration-action-outline-neutral-hover 
+          hover:text-action-ink-neutral-hover 
+          disabled:text-action-ink-neutral-disabled
+          focus:text-action-ink-neutral-hover
+          `,
+        },
+        {
+            color: "white",
+            class: `text-action-ink-white-subtle 
+          hover:text-action-ink-white-subtle
+          hover:decoration-action-outline-white-hover 
+          hover:text-action-ink-white-hover 
+          disabled:text-action-ink-white-disabled
+          focus:text-action-ink-white-hover
+          `,
+        },
+    ],
+    defaultVariants: {
+        type: "anchor",
+        color: "primary",
+        size: "medium",
+        isIconOnly: false,
+        isDisabled: false,
+    },
+});
+const Link = React.forwardRef(({ className, type = "anchor", color = "primary", size = "medium", isIconOnly = false, isDisabled = false, asChild = false, showIcon = false, icon, leadingIcon, trailingIcon, children, onClick, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // Icon size based on link size
+    const iconSize = {
+        xsmall: 12,
+        small: 14,
+        medium: 16,
+        large: 18,
+    }[size];
+    // Determine what to show as trailing icon
+    // Priority: trailingIcon > (showIcon && icon) > (showIcon && default ExternalLink)
+    const finalTrailingIcon = trailingIcon || (showIcon && (icon || jsx(ExternalLink, { size: iconSize })));
+    const linkContent = (jsxs(Fragment, { children: [leadingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: leadingIcon })), !isIconOnly && children, isIconOnly && children, finalTrailingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: finalTrailingIcon })), isIconOnly &&
+                (leadingIcon || finalTrailingIcon || (jsx(ExternalLink, { size: iconSize })))] }));
+    return (jsx(Comp, { className: cn(linkVariants({
+            type,
+            color,
+            size,
+            isIconOnly,
+            isDisabled,
+        }), className), ref: ref, onClick: handleClick, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, ...props, children: linkContent }));
+});
+Link.displayName = "Link";
+
+const alertVariants = cva("relative flex gap-4 p-4 rounded-large transition-colors", {
+    variants: {
+        emphasis: {
+            subtle: "",
+            intense: "",
+        },
+        intent: {
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+    },
+    compoundVariants: [
+        // Subtle emphasis
+        {
+            emphasis: "subtle",
+            intent: "positive",
+            class: "bg-feedback-fill-positive-subtle",
+        },
+        {
+            emphasis: "subtle",
+            intent: "negative",
+            class: "bg-feedback-fill-negative-subtle",
+        },
+        {
+            emphasis: "subtle",
+            intent: "notice",
+            class: "bg-feedback-fill-notice-subtle",
+        },
+        {
+            emphasis: "subtle",
+            intent: "info",
+            class: "bg-feedback-fill-info-subtle",
+        },
+        {
+            emphasis: "subtle",
+            intent: "neutral",
+            class: "bg-feedback-fill-neutral-subtle",
+        },
+        // Intense emphasis
+        {
+            emphasis: "intense",
+            intent: "positive",
+            class: "bg-feedback-fill-positive-intense",
+        },
+        {
+            emphasis: "intense",
+            intent: "negative",
+            class: "bg-feedback-fill-negative-intense",
+        },
+        {
+            emphasis: "intense",
+            intent: "notice",
+            class: "bg-feedback-fill-notice-intense",
+        },
+        {
+            emphasis: "intense",
+            intent: "info",
+            class: "bg-feedback-fill-info-intense",
+        },
+        {
+            emphasis: "intense",
+            intent: "neutral",
+            class: "bg-feedback-fill-neutral-intense",
+        },
+    ],
+    defaultVariants: {
+        emphasis: "subtle",
+        intent: "info",
+    },
+});
+const alertIconVariants = cva("flex-shrink-0 rounded-full flex items-center justify-center mt-1", {
+    variants: {
+        emphasis: {
+            subtle: "",
+            intense: "text-white",
+        },
+        intent: {
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+    },
+    compoundVariants: [
+        // Subtle emphasis - colored backgrounds with white icons
+        {
+            emphasis: "subtle",
+            intent: "positive",
+            class: "text-action-ink-positive-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "negative",
+            class: " text-action-ink-negative-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "notice",
+            class: " text-action-ink-notice-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "info",
+            class: " text-action-ink-info-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "neutral",
+            class: " text-action-ink-neutral-normal",
+        },
+        // Intense emphasis - white backgrounds with colored icons
+        {
+            emphasis: "intense",
+            intent: "positive",
+            class: " text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "negative",
+            class: " text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "notice",
+            class: " text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "info",
+            class: " text-action-fill-info-default",
+        },
+        {
+            emphasis: "intense",
+            intent: "neutral",
+            class: " text-action-fill-neutral-default",
+        },
+    ],
+    defaultVariants: {
+        emphasis: "subtle",
+        intent: "info",
+    },
+});
+const alertTextVariants = cva("", {
+    variants: {
+        emphasis: {
+            subtle: "",
+            intense: "",
+        },
+        intent: {
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+    },
+    compoundVariants: [
+        // Subtle emphasis - dark text
+        {
+            emphasis: "subtle",
+            intent: "positive",
+            class: "text-surface-ink-neutral-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "negative",
+            class: "text-surface-ink-neutral-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "notice",
+            class: "text-surface-ink-neutral-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "info",
+            class: "text-surface-ink-neutral-normal",
+        },
+        {
+            emphasis: "subtle",
+            intent: "neutral",
+            class: "text-surface-ink-neutral-normal",
+        },
+        // Intense emphasis - white text
+        {
+            emphasis: "intense",
+            intent: "positive",
+            class: "text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "negative",
+            class: "text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "notice",
+            class: "text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "info",
+            class: "text-action-ink-on-primary-normal",
+        },
+        {
+            emphasis: "intense",
+            intent: "neutral",
+            class: "text-action-ink-on-primary-normal",
+        },
+    ],
+    defaultVariants: {
+        emphasis: "subtle",
+        intent: "info",
+    },
+});
+const getDefaultIcon = (intent, emphasis) => {
+    const iconSize = 16;
+    switch (emphasis) {
+        case "intense":
+            return (jsx(Icon, { name: "info", size: iconSize, className: "text-white", "aria-hidden": "true" }));
+        default:
+            return jsx(Icon, { name: "info", size: iconSize, "aria-hidden": "true" });
+    }
+};
+const getButtonColor = (intent) => {
+    switch (intent) {
+        case "positive":
+            return "positive";
+        case "negative":
+            return "negative";
+        case "notice":
+            return "notice";
+        case "info":
+            return "info";
+        case "neutral":
+            return "neutral";
+        default:
+            return "neutral";
+    }
+};
+const getActionButton = (actionButtonText, onActionButtonClick, emphasis, intent) => {
+    if (!actionButtonText)
+        return null;
+    // For intense emphasis: secondary variant with white border and white text
+    // For subtle emphasis: secondary variant with colored border and colored text (default behavior)
+    if (emphasis === "intense") {
+        return (jsx(Button, { variant: "secondary", color: "white", size: "small", onClick: onActionButtonClick, children: actionButtonText }));
+    }
+    // Subtle emphasis: use default secondary variant styling
+    return (jsx(Button, { variant: "secondary", color: intent, size: "small", onClick: onActionButtonClick, children: actionButtonText }));
+};
+const getActionLink = (actionButtonText, onActionLinkClick, emphasis, intent) => {
+    if (!actionButtonText)
+        return null;
+    // For intense emphasis: secondary variant with white border and white text
+    // For subtle emphasis: secondary variant with colored border and colored text (default behavior)
+    if (emphasis === "intense") {
+        return (jsx(Link, { type: "action", color: "white", size: "small", onClick: onActionLinkClick, children: actionButtonText }));
+    }
+    // Subtle emphasis: use default secondary variant styling
+    return (jsx(Link, { type: "action", color: intent, size: "small", onClick: onActionLinkClick, children: actionButtonText }));
+};
+const Alert = React.forwardRef(({ className, emphasis = "subtle", intent = "info", title, children, isFullWidth = false, onClose, icon, actionButtonText, onActionButtonClick, actionLinkText, onActionLinkClick, ...props }, ref) => {
+    const displayIcon = icon ?? getDefaultIcon(intent, emphasis);
+    const actionButton = getActionButton(actionButtonText, onActionButtonClick, emphasis, intent);
+    const actionLink = getActionLink(actionLinkText, onActionLinkClick, emphasis, intent);
+    const hasActions = actionButton || actionLink;
+    return (jsxs("div", { ref: ref, className: cn(alertVariants({ emphasis, intent }), className), role: "alert", ...props, children: [jsx("div", { className: cn(alertIconVariants({ emphasis, intent }), "h-5 w-5 shrink-0"), children: displayIcon }), isFullWidth ? (
+            /* Full Width Layout: Icon, Content, Actions/Close in one row */
+            jsxs("div", { className: "flex-1 min-w-0 flex items-center justify-between gap-4", children: [jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [title && (jsx("div", { className: cn("text-body-medium-semibold", alertTextVariants({ emphasis, intent })), children: title })), jsx("div", { className: cn("text-body-small-regular", alertTextVariants({ emphasis, intent })), children: children })] }), jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [hasActions && (jsxs(Fragment, { children: [actionButton, actionLink] })), onClose && (jsx(IconButton, { icon: "close", color: emphasis === "intense" ? "white" : getButtonColor(intent), size: "xsmall", onClick: onClose, className: cn("shrink-0 h-5 w-5", emphasis === "intense"
+                                    ? "hover:bg-white/20"
+                                    : "hover:bg-black/10"), "aria-label": "Close alert" }))] })] })) : (
+            /* Not Full Width Layout: Icon and Content in row, Actions below, Close top-right */
+            jsxs("div", { className: "flex-1 min-w-0 relative", children: [onClose && (jsx("div", { className: "absolute top-0 right-0", children: jsx(IconButton, { icon: "close", color: emphasis === "intense" ? "white" : getButtonColor(intent), size: "xsmall", onClick: onClose, className: cn("shrink-0 h-5 w-5", emphasis === "intense"
+                                ? "hover:bg-white/20"
+                                : "hover:bg-black/10"), "aria-label": "Close alert" }) })), jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [title && (jsx("div", { className: cn("text-body-medium-semibold", alertTextVariants({ emphasis, intent })), children: title })), jsx("div", { className: cn("text-body-small-regular", alertTextVariants({ emphasis, intent })), children: children }), hasActions && (jsxs("div", { className: "flex items-center gap-3", children: [actionButton, actionLink] }))] })] }))] }));
+});
+Alert.displayName = "Alert";
+
+// 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 inverseColorClasses = {
+    a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
+    a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
+    a3: "bg-avatar-fill-a3-on-bg text-avatar-fill-a3-bg",
+    a4: "bg-avatar-fill-a4-on-bg text-avatar-fill-a4-bg",
+    a5: "bg-avatar-fill-a5-on-bg text-avatar-fill-a5-bg",
+};
+const avatarVariants = cva("inline-flex items-center justify-center font-medium text-center select-none", {
+    variants: {
+        color: {
+            a1: "bg-avatar-fill-a1-bg text-avatar-fill-a1-on-bg",
+            a2: "bg-avatar-fill-a2-bg text-avatar-fill-a2-on-bg",
+            a3: "bg-avatar-fill-a3-bg text-avatar-fill-a3-on-bg",
+            a4: "bg-avatar-fill-a4-bg text-avatar-fill-a4-on-bg",
+            a5: "bg-avatar-fill-a5-bg text-avatar-fill-a5-on-bg",
+        },
+        size: {
+            small: "h-[24px] w-[24px] text-body-medium-regular rounded-large",
+            medium: "h-[32px] w-[32px] text-body-medium-regular rounded-xlarge",
+            xlarge: "h-[36px] w-[36px] text-body-medium-regular rounded-xlarge",
+        },
+    },
+    defaultVariants: {
+        color: "a1",
+        size: "medium",
+    },
+});
+const statusVariants = cva("absolute flex items-center justify-center rounded-full border-2 border-surface-fill-neutral-intense", {
+    variants: {
+        size: {
+            small: "h-5 w-5 -bottom-0.5 -right-0.5",
+            medium: "h-6 w-6 -bottom-1 -right-1",
+            xlarge: "h-6 w-6 -bottom-1 -right-1",
+        },
+        statusColor: {
+            positive: "bg-action-fill-positive-default",
+            negative: "bg-action-fill-negative-default",
+            notice: "bg-action-fill-notice-default",
+            info: "bg-action-fill-info-default",
+            neutral: "bg-action-fill-neutral-default",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        statusColor: "notice",
+    },
+});
+const Avatar = React.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
+    const [imageError, setImageError] = React.useState(false);
+    const handleImageError = () => {
+        setImageError(true);
+    };
+    const getStatusIconSize = () => {
+        switch (size) {
+            case "small":
+                return "h-3.5 w-3.5";
+            case "medium":
+                return "h-4 w-4";
+            default:
+                return "h-4 w-4";
+        }
+    };
+    const getTextSize = () => {
+        switch (size) {
+            case "small":
+                return "small";
+            case "medium":
+                return "medium";
+            default:
+                return "medium";
+        }
+    };
+    const resolvedColor = color ?? "a1";
+    const avatarElement = (jsxs("div", { className: "relative inline-block", children: [jsx("div", { className: cn(avatarVariants({ color: resolvedColor, size }), appearance === "inverse"
+                    ? inverseColorClasses[resolvedColor]
+                    : undefined, className), ...props, children: src && !imageError ? (jsx("img", { src: src, alt: alt || "Avatar", className: cn("h-full w-full object-cover", size === "small" ? "rounded-large" : "rounded-xlarge"), onError: handleImageError })) : (children) }), showStatus && (jsx("div", { className: cn(statusVariants({ size, statusColor })), children: statusIcon && (jsx("span", { className: cn("text-action-ink-on-primary-normal", getStatusIconSize()), children: statusIcon })) }))] }));
+    // If no label or trailing component, return just the avatar
+    if (!label && !trailingComponent) {
+        return jsx("div", { ref: ref, children: avatarElement });
+    }
+    // Otherwise, return avatar with label and/or trailing component
+    return (jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label && (jsx(Text, { variant: "body", size: getTextSize(), weight: "medium", color: "default", as: "span", children: label })), trailingComponent && (jsx("span", { className: "ml-auto", children: trailingComponent }))] }));
+});
+Avatar.displayName = "Avatar";
+
+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 buttonGroupVariants = cva("inline-flex", {
     variants: {
@@ -756,99 +1409,6 @@ const FormFooter = React.forwardRef(({ helperText, trailingText, validationState
 });
 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>`,
-    add: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-<path d="M12.9 11.0999L21 11.0997V12.8997L12.9 12.8999V21H11.1V12.8999L3.00004 12.9001L3 11.1001L11.1 11.0999L11.0999 3.00001L12.8999 3L12.9 11.0999Z" 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;
-    }
-    // Get the viewBox for proper scaling
-    const viewBox = svgElement.getAttribute("viewBox") || "0 0 24 24";
-    // Get all SVG content as string and replace hardcoded colors with currentColor
-    let innerSVG = svgElement.innerHTML;
-    // Replace common hardcoded colors with currentColor
-    // This allows the icon to inherit text color from parent
-    innerSVG = innerSVG
-        .replace(/fill="[^"]*"/g, 'fill="currentColor"')
-        .replace(/stroke="[^"]*"/g, 'stroke="currentColor"');
-    return (jsx("svg", { width: size, height: size, viewBox: viewBox, className: className, style: style, xmlns: "http://www.w3.org/2000/svg", ...props, dangerouslySetInnerHTML: { __html: innerSVG } }));
-};
-/**
- * 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: {
         size: {
@@ -1298,141 +1858,6 @@ const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, ti
 });
 ListItem.displayName = "ListItem";
 
-const linkVariants = cva("inline-flex items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none  decoration-1 underline-offset-4", {
-    variants: {
-        type: {
-            anchor: "hover:underline",
-            action: "no-underline cursor-pointer",
-        },
-        color: {
-            primary: "",
-            positive: "",
-            negative: "",
-            notice: "",
-            info: "",
-            neutral: "",
-        },
-        size: {
-            xsmall: "text-body-xsmall-medium gap-1",
-            small: "text-body-small-medium gap-1",
-            medium: "text-body-medium-medium gap-1.5",
-            large: "text-body-large-medium gap-1.5",
-        },
-        isIconOnly: {
-            true: "no-underline",
-            false: "",
-        },
-        isDisabled: {
-            true: "cursor-not-allowed opacity-50",
-            false: "cursor-pointer",
-        },
-    },
-    compoundVariants: [
-        // Primary color variants
-        {
-            color: "primary",
-            class: `text-action-ink-primary-normal 
-          hover:text-action-ink-primary-subtle
-          hover:decoration-action-outline-primary-hover 
-          disabled:text-action-ink-primary-disabled
-          focus:text-action-ink-primary-hover
-          `,
-        },
-        // Positive color variants
-        {
-            color: "positive",
-            class: `text-action-ink-positive-normal 
-          hover:text-action-ink-positive-subtle
-          hover:decoration-action-outline-positive-hover 
-          hover:text-action-ink-positive-hover 
-          disabled:text-action-ink-positive-disabled
-          focus:text-action-ink-positive-hover
-          `,
-        },
-        // Negative color variants
-        {
-            color: "negative",
-            class: `text-action-ink-negative-normal 
-          hover:text-action-ink-negative-subtle
-          hover:decoration-action-outline-negative-hover 
-          hover:text-action-ink-negative-hover 
-          disabled:text-action-ink-negative-disabled
-          focus:text-action-ink-negative-hover
-          `,
-        },
-        // Notice color variants
-        {
-            color: "notice",
-            class: `text-action-ink-notice-normal 
-          hover:text-action-ink-notice-subtle
-          hover:decoration-action-outline-notice-hover 
-          hover:text-action-ink-notice-hover 
-          disabled:text-action-ink-notice-disabled
-          focus:text-action-ink-notice-hover
-          `,
-        },
-        // Info color variants
-        {
-            color: "info",
-            class: `text-action-ink-info-normal 
-          hover:text-action-ink-info-subtle
-          hover:decoration-action-outline-info-hover 
-          hover:text-action-ink-info-hover 
-          disabled:text-action-ink-info-disabled
-          focus:text-action-ink-info-hover
-          `,
-        },
-        // Neutral color variants
-        {
-            color: "neutral",
-            class: `text-action-ink-neutral-normal 
-          hover:text-action-ink-neutral-subtle
-          hover:decoration-action-outline-neutral-hover 
-          hover:text-action-ink-neutral-hover 
-          disabled:text-action-ink-neutral-disabled
-          focus:text-action-ink-neutral-hover
-          `,
-        },
-    ],
-    defaultVariants: {
-        type: "anchor",
-        color: "primary",
-        size: "medium",
-        isIconOnly: false,
-        isDisabled: false,
-    },
-});
-const Link = React.forwardRef(({ className, type = "anchor", color = "primary", size = "medium", isIconOnly = false, isDisabled = false, asChild = false, showIcon = false, icon, leadingIcon, trailingIcon, children, onClick, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-    const handleClick = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            return;
-        }
-        onClick?.(e);
-    };
-    // Icon size based on link size
-    const iconSize = {
-        xsmall: 12,
-        small: 14,
-        medium: 16,
-        large: 18,
-    }[size];
-    // Determine what to show as trailing icon
-    // Priority: trailingIcon > (showIcon && icon) > (showIcon && default ExternalLink)
-    const finalTrailingIcon = trailingIcon || (showIcon && (icon || jsx(ExternalLink, { size: iconSize })));
-    const linkContent = (jsxs(Fragment, { children: [leadingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: leadingIcon })), !isIconOnly && children, isIconOnly && children, finalTrailingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: finalTrailingIcon })), isIconOnly &&
-                (leadingIcon || finalTrailingIcon || (jsx(ExternalLink, { size: iconSize })))] }));
-    return (jsx(Comp, { className: cn(linkVariants({
-            type,
-            color,
-            size,
-            isIconOnly,
-            isDisabled,
-        }), className), ref: ref, onClick: handleClick, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, ...props, children: linkContent }));
-});
-Link.displayName = "Link";
-
 const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
@@ -2839,7 +3264,7 @@ const tableCellVariants = cva("text-body-medium-regular border-b border-surface-
     },
 });
 
-function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, getColumnStyle, }) {
     const headerHeight = {
         small: 32,
         medium: 40,
@@ -2848,20 +3273,18 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
     return (jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup, groupIndex) => {
             const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
             return (jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky z-20", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), style: { top: stickyTop }, children: jsx(Checkbox, { checked: isAllRowsSelected, isIndeterminate: isSomeRowsSelected, onChange: onToggleAllRows, "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => {
-                        const shouldHideColumn = isDetailPanelOpen && index >= visibleHeadersCount;
-                        const isLastVisibleColumn = isDetailPanelOpen
-                            ? index === visibleHeadersCount - 1
-                            : index === headerGroup.headers.length - 1;
+                        const isFirstColumn = index === 0;
+                        const isLastColumn = index === headerGroup.headers.length - 1;
                         return (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                                "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastVisibleColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
-                                ? "opacity-0 translate-x-8 pointer-events-none"
-                                : "opacity-100 translate-x-0"), style: {
+                                "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName), style: {
                                 ...getColumnStyle(header.column.id, {
                                     width: header.getSize(),
                                     minWidth: header.column.columnDef.minSize,
                                     maxWidth: header.column.columnDef.maxSize,
                                 }),
                                 top: stickyTop,
+                                ...(isFirstColumn && { paddingLeft: "24px" }),
+                                ...(isLastColumn && { paddingRight: "24px" }),
                             }, children: header.isPlaceholder ? null : (jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() &&
                                     "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "text-surface-ink-neutral-muted", children: {
                                             asc: "↑",
@@ -2871,42 +3294,41 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         }) }));
 }
 
-function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, onRowClick, getRowClassName, handleRowClick, getColumnStyle, }) {
     const [focusedCell, setFocusedCell] = React.useState(null);
     const [hoveredRow, setHoveredRow] = React.useState(null);
     return (jsx("tbody", { className: cn("bg-surface-fill-neutral-intense"), children: rows.map((row) => {
-            const isRowSelected = row.id === effectiveSelectedRowId;
             const isRowHovered = hoveredRow === row.id;
-            const handleClick = () => handleRowClick(row.original, row.id);
+            const handleClick = () => handleRowClick(row.original);
             return (jsxs("tr", { className: cn(variant === "striped" &&
                     row.index % 2 === 1 &&
-                    "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowSelected && "bg-action-fill-primary-faded", isRowHovered &&
+                    "bg-surface-fill-neutral-moderate", onRowClick && "cursor-pointer", isRowHovered &&
                     showRowHover &&
-                    "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), children: jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
-                        const shouldHideColumn = isDetailPanelOpen && cellIndex >= visibleHeadersCount;
+                    "bg-surface-fill-neutral-moderate", getRowClassName(row.original)), onClick: handleClick, onMouseEnter: () => setHoveredRow(row.id), onMouseLeave: () => setHoveredRow(null), children: [enableRowSelection && (jsx("td", { className: cn(tableCellVariants({ size }), "w-10", cellClassName), style: {
+                            paddingTop: "20px",
+                            paddingBottom: "20px",
+                        }, children: jsx(Checkbox, { checked: row.getIsSelected(), isIndeterminate: row.getIsSomeSelected(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), "aria-label": `Select row ${row.id}` }) })), row.getVisibleCells().map((cell, cellIndex) => {
                         const isCellFocused = focusedCell?.rowId === row.id &&
                             focusedCell?.cellId === cell.id;
                         const cellState = isCellFocused ? "focus" : "default";
-                        return (jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName, "transition-all duration-300 ease-in-out", shouldHideColumn
-                                ? "opacity-0 translate-x-8 pointer-events-none"
-                                : "opacity-100 translate-x-0"), style: getColumnStyle(cell.column.id, {
-                                width: cell.column.getSize(),
-                                minWidth: cell.column.columnDef.minSize,
-                                maxWidth: cell.column.columnDef.maxSize,
-                            }), tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                        const visibleCells = row.getVisibleCells();
+                        const isFirstCell = cellIndex === 0;
+                        const isLastCell = cellIndex === visibleCells.length - 1;
+                        return (jsx("td", { className: cn(tableCellVariants({ size, state: cellState }), cell.column.columnDef.meta?.cellClassName, cellClassName), style: {
+                                ...getColumnStyle(cell.column.id, {
+                                    width: cell.column.getSize(),
+                                    minWidth: cell.column.columnDef.minSize,
+                                    maxWidth: cell.column.columnDef.maxSize,
+                                }),
+                                paddingTop: "20px",
+                                paddingBottom: "20px",
+                                ...(isFirstCell && { paddingLeft: "24px" }),
+                                ...(isLastCell && { paddingRight: "24px" }),
+                            }, tabIndex: 0, onFocus: () => setFocusedCell({ rowId: row.id, cellId: cell.id }), onBlur: () => setFocusedCell(null), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                     })] }, row.id));
         }) }));
 }
 
-function DetailPanel({ isOpen, content, data, onClose, }) {
-    return (jsx("div", { className: cn("absolute top-0 right-0 h-full z-20 transition-all duration-300 ease-in-out", isOpen
-            ? "translate-x-0 opacity-100"
-            : "translate-x-full opacity-0 pointer-events-none"), style: { width: "332px", paddingLeft: "12px" }, children: jsx("div", { className: "w-full h-full bg-white border border-surface-outline-neutral-muted rounded-tr-xlarge rounded-br-xlarge overflow-hidden", children: jsx("div", { className: "w-full h-full overflow-auto", children: data && (jsxs("div", { className: "relative h-full", children: [jsx("button", { onClick: (e) => {
-                                e.stopPropagation();
-                                onClose();
-                            }, className: "absolute top-4 right-4 z-10 p-2 rounded-medium hover:bg-surface-fill-neutral-faded transition-colors", "aria-label": "Close detail panel", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }), content(data)] })) }) }) }));
-}
-
 function renderDefaultLoadingState({ colSpan }) {
     return (jsx("tr", { children: jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: jsxs("div", { className: "flex items-center justify-center gap-2", children: [jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-b-2 border-action-fill-primary-default" }), jsx("span", { children: "Loading..." })] }) }) }));
 }
@@ -2915,47 +3337,10 @@ function renderDefaultEmptyState({ colSpan }) {
 }
 
 // ==================== Component ====================
-function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
-    // ==================== State ====================
-    const [internalSelectedRowId, setInternalSelectedRowId] = React.useState(null);
-    const selectedRowIdRef = React.useRef(null);
-    const effectiveSelectedRowId = selectedRowId !== undefined ? selectedRowId : internalSelectedRowId;
-    const isDetailPanelOpen = Boolean(effectiveSelectedRowId);
-    // ==================== Effects ====================
-    // Keep ref in sync
-    React.useEffect(() => {
-        selectedRowIdRef.current = effectiveSelectedRowId;
-    }, [effectiveSelectedRowId]);
-    // Clear selection if selected row is not in current data
-    React.useEffect(() => {
-        if (effectiveSelectedRowId) {
-            const rowExists = table
-                .getRowModel()
-                .rows.some((r) => r.id === effectiveSelectedRowId);
-            if (!rowExists) {
-                if (selectedRowId === undefined) {
-                    setInternalSelectedRowId(null);
-                }
-                if (onRowSelectionChange) {
-                    onRowSelectionChange(null);
-                }
-            }
-        }
-    }, [
-        table.getRowModel().rows,
-        effectiveSelectedRowId,
-        selectedRowId,
-        onRowSelectionChange,
-    ]);
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
     // ==================== Computed Values ====================
     const hasData = table.getRowModel().rows?.length > 0;
     const headerGroups = table.getHeaderGroups();
-    const headers = headerGroups[0]?.headers || [];
-    const visibleHeadersCount = React.useMemo(() => {
-        return isDetailPanelOpen
-            ? headers.length - hideColumnsOnDetailOpen
-            : headers.length;
-    }, [isDetailPanelOpen, headers.length, hideColumnsOnDetailOpen]);
     const normalizeSizeValue = (value) => {
         if (value === undefined)
             return undefined;
@@ -3022,42 +3407,18 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         }
         return rowClassName || "";
     }, [rowClassName]);
-    const handleRowClickInternal = React.useCallback((row, rowId) => {
-        const currentSelectedId = selectedRowIdRef.current;
-        const newSelectedId = currentSelectedId === rowId ? null : rowId;
-        if (selectedRowId === undefined) {
-            setInternalSelectedRowId(newSelectedId);
-        }
-        if (onRowSelectionChange) {
-            onRowSelectionChange(newSelectedId);
-        }
+    const handleRowClickInternal = React.useCallback((row) => {
         if (onRowClick) {
             onRowClick(row);
         }
-    }, [selectedRowId, onRowSelectionChange, onRowClick]);
-    const getSelectedRowData = () => {
-        if (!effectiveSelectedRowId)
-            return null;
-        const row = table
-            .getRowModel()
-            .rows.find((r) => r.id === effectiveSelectedRowId);
-        return row ? row.original : null;
-    };
-    const handleDetailPanelClose = () => {
-        if (selectedRowId === undefined) {
-            setInternalSelectedRowId(null);
-        }
-        if (onRowSelectionChange) {
-            onRowSelectionChange(null);
-        }
-    };
+    }, [onRowClick]);
     const renderEmptyState = () => {
         if (emptyComponent)
             return emptyComponent;
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
 }
 // ==================== Export ====================
 const Table = React.forwardRef(TableComponent);
@@ -3305,5 +3666,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map