infinity-ui-elements 1.5.1-beta.0 → 1.5.1-beta.2

package/dist/index.esm.js

@@ -5,7 +5,9 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
-import { ExternalLink, Loader2, Search } from 'lucide-react';
+import { ExternalLink, Loader2, Search, X, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { flexRender } from '@tanstack/react-table';
 
 // Define patterns for custom classes that should be preserved
 // This approach is more scalable than hardcoding individual class names
@@ -46,6 +48,106 @@ 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 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",
+        },
+    },
+    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",
+        },
+        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, 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 avatarElement = (jsxs("div", { className: "relative inline-block", children: [jsx("div", { className: cn(avatarVariants({ color, size }), 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: {
@@ -462,32 +564,145 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
 });
 Button.displayName = "Button";
 
-// 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);
+const buttonGroupVariants = cva("inline-flex", {
+    variants: {
+        variant: {
+            attached: "",
+            separated: "",
+        },
+        orientation: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+        size: {
+            xsmall: "",
+            small: "",
+            medium: "",
+            large: "",
+        },
+        isFullWidth: {
+            true: "w-full",
+            false: "w-fit",
+        },
+        isDisabled: {
+            true: "pointer-events-none opacity-50",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "separated",
+            orientation: "horizontal",
+            class: "gap-2",
+        },
+        {
+            variant: "separated",
+            orientation: "vertical",
+            class: "gap-2",
+        },
+    ],
+    defaultVariants: {
+        variant: "attached",
+        orientation: "horizontal",
+        size: "medium",
+        isFullWidth: false,
+        isDisabled: false,
+    },
 });
-Text.displayName = "Text";
+const ButtonGroup = React.forwardRef(({ className, variant = "attached", orientation = "horizontal", size = "medium", isDisabled = false, isFullWidth = false, value, onChange, children, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(children);
+    const isControlled = value !== undefined && onChange !== undefined;
+    return (jsx("div", { ref: ref, className: cn(buttonGroupVariants({
+            variant,
+            orientation,
+            size,
+            isDisabled,
+            isFullWidth,
+        }), className), role: "group", ...props, children: childrenArray.map((child, index) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
+            const isFirst = index === 0;
+            const isLast = index === childrenArray.length - 1;
+            const isMiddle = !isFirst && !isLast;
+            // Get value from child props for controlled mode
+            const childValue = child.props.value;
+            const isSelected = isControlled && childValue === value;
+            // Build classes to apply border radius removal and borders
+            let groupClasses = "";
+            // Only apply connected styling for "attached" variant
+            if (variant === "attached") {
+                if (orientation === "horizontal") {
+                    if (isFirst) {
+                        groupClasses = "rounded-r-none border-r-0";
+                    }
+                    else if (isLast) {
+                        groupClasses = "rounded-l-none";
+                    }
+                    else if (isMiddle) {
+                        groupClasses = "rounded-none border-r-0";
+                    }
+                }
+                else {
+                    // vertical
+                    if (isFirst) {
+                        groupClasses = "rounded-b-none border-b-0";
+                    }
+                    else if (isLast) {
+                        groupClasses = "rounded-t-none";
+                    }
+                    else if (isMiddle) {
+                        groupClasses = "rounded-none border-b-0";
+                    }
+                }
+            }
+            // Determine the variant to use
+            const childVariant = child.props.variant;
+            const hasExplicitVariant = childVariant !== undefined;
+            // For controlled mode with explicit variant, maintain the variant
+            // and add styling classes for selected state
+            let finalVariant = childVariant;
+            let selectedStateClasses = "";
+            if (isControlled) {
+                if (hasExplicitVariant) {
+                    // Keep the child's variant and add selected state styling
+                    if (isSelected && childVariant === "tertiary") {
+                        selectedStateClasses = "bg-action-fill-primary-faded";
+                    }
+                    else if (isSelected && childVariant === "secondary") {
+                        selectedStateClasses =
+                            "bg-action-fill-primary-faded border-action-outline-primary-faded";
+                    }
+                }
+                else {
+                    // No explicit variant: use primary for selected, secondary for unselected
+                    finalVariant = isSelected ? "primary" : "secondary";
+                }
+            }
+            // Clone child and add our classes and handlers
+            return React.cloneElement(child, {
+                ...child.props,
+                className: cn(child.props.className, groupClasses, isFullWidth && "flex-1", 
+                // For attached variant, ensure proper layering
+                variant === "attached" && "relative", variant === "attached" && !isSelected && "hover:z-10 focus:z-10", variant === "attached" && isSelected && "z-20", 
+                // Apply selected state classes for explicit variants
+                selectedStateClasses),
+                disabled: isDisabled || child.props.disabled,
+                size: size || child.props.size,
+                // If controlled and has value, handle click
+                onClick: isControlled && childValue !== undefined
+                    ? (e) => {
+                        child.props.onClick?.(e);
+                        if (!isDisabled && !child.props.disabled) {
+                            onChange(childValue);
+                        }
+                    }
+                    : child.props.onClick,
+                variant: finalVariant,
+            });
+        }) }));
+});
+ButtonGroup.displayName = "ButtonGroup";
 
 const FormFooter = React.forwardRef(({ helperText, trailingText, validationState = "default", size = "medium", isDisabled = false, className, helperTextClassName, trailingTextClassName, }, ref) => {
     // Size-based configurations
@@ -562,6 +777,9 @@ const iconRegistry = {
     // 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 }) => {
@@ -579,17 +797,17 @@ const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
         console.error(`Invalid SVG content for icon "${String(name)}"`);
         return null;
     }
-    // Extract viewBox attribute
+    // Get the viewBox for proper scaling
     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
+    // 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, fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, ...props, dangerouslySetInnerHTML: { __html: innerHTML } }));
+    return (jsx("svg", { width: size, height: size, viewBox: viewBox, className: className, style: style, xmlns: "http://www.w3.org/2000/svg", ...props, dangerouslySetInnerHTML: { __html: innerSVG } }));
 };
-Icon.displayName = "Icon";
 /**
  * Get all available icon names from the registry
  * @returns Array of registered icon names
@@ -1203,7 +1421,7 @@ const Link = React.forwardRef(({ className, type = "anchor", color = "primary",
 });
 Link.displayName = "Link";
 
-const DropdownMenu = React.forwardRef(({ items = [], 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, onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
+const DropdownMenu = React.forwardRef(({ items = [], 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, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
             return (jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsx(Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
@@ -1217,10 +1435,12 @@ const DropdownMenu = React.forwardRef(({ items = [], sectionHeading, isLoading =
                         }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.id))) })] }));
     };
     const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
-    return (jsxs("div", { ref: ref, className: cn("bg-surface-fill-primary-normal  rounded-large overflow-hidden", widthClass, className), style: {
+    return (jsxs("div", { ref: ref, className: cn("bg-white  rounded-large overflow-hidden", widthClass, className), style: {
             boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
             ...(width !== "full" && width !== "auto" ? { width } : {}),
-        }, children: [renderContent(), !disableFooter && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: "flex items-center gap-3 p-4", children: [jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
+        }, children: [renderContent(), !disableFooter && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
+                            ? "flex-col"
+                            : "items-center flex-row"), children: [jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
 });
 DropdownMenu.displayName = "DropdownMenu";
 
@@ -1537,10 +1757,370 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
         },
     };
     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 }))] }));
+    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", color: "negative", className: "ml-0.5", children: "*" })), isOptional && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", className: "text-surface-ink-neutral-muted italic 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", 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 Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, children, size = "medium", showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
+    const modalRef = React.useRef(null);
+    const contentRef = ref || modalRef;
+    // Size configurations
+    const sizeConfig = {
+        small: "max-w-sm",
+        medium: "max-w-md",
+        large: "max-w-lg",
+        xlarge: "max-w-2xl",
+    };
+    // Handle escape key
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape, onClose]);
+    // Prevent body scroll when modal is open
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Handle overlay click
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    // Don't render if not open
+    if (!isOpen)
+        return null;
+    const hasHeader = title || description;
+    return (jsxs("div", { className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative w-full bg-white rounded-large shadow-xl transition-all", "flex flex-col max-h-[90vh]", sizeConfig[size], contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4 px-6 pt-6", !description && "pb-4", description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && (jsx("button", { type: "button", onClick: onClose, className: cn("shrink-0 rounded-medium p-1.5 transition-colors", "text-surface-ink-neutral-muted hover:text-surface-ink-neutral-default", "hover:bg-surface-fill-neutral-faded focus:outline-none focus:ring-2", "focus:ring-action-outline-primary-default focus:ring-offset-2"), "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] })), !hasHeader && showCloseButton && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx("button", { type: "button", onClick: onClose, className: cn("shrink-0 rounded-medium p-1.5 transition-colors", "text-surface-ink-neutral-muted hover:text-surface-ink-neutral-default", "hover:bg-surface-fill-neutral-faded focus:outline-none focus:ring-2", "focus:ring-action-outline-primary-default focus:ring-offset-2"), "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }) })), jsx("div", { className: cn("flex-1 overflow-y-auto px-6", hasHeader ? "py-4" : "pt-6 pb-4", !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 py-4", footerClassName), children: footer })] }))] })] }));
+});
+Modal.displayName = "Modal";
+
+const selectVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
+    variants: {
+        size: {
+            small: "h-[28px] px-3 text-xs gap-2",
+            medium: "h-[36px] px-4 text-sm gap-2",
+            large: "h-[44px] px-5 text-base gap-3",
+        },
+        validationState: {
+            none: `
+        border-action-outline-neutral-faded 
+        hover:border-action-outline-primary-hover 
+        focus-within:border-action-outline-primary-hover 
+        focus-within:ring-2 
+        ring-action-outline-primary-faded-hover`,
+            positive: `
+          border-action-outline-positive-default 
+          focus-within:border-action-outline-positive-hover
+          focus-within:ring-2
+          ring-action-outline-positive-faded-hover`,
+            negative: `border-action-outline-negative-default 
+          focus-within:border-action-outline-negative-hover
+          focus-within:ring-2 
+          ring-action-outline-negative-faded-hover`,
+        },
+        isDisabled: {
+            true: `
+        border-[var(--border-width-thinner)]
+        hover:border-action-outline-neutral-disabled
+        border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
+            false: "bg-surface-fill-neutral-intense",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        validationState: "none",
+        isDisabled: false,
+    },
+});
+const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, linkText, linkHref, onLinkClick, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const selectRef = React.useRef(null);
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    // Find the selected option
+    const selectedOption = options.find((opt) => opt.value === value);
+    const hasValue = value !== undefined && value !== "";
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const handleOpenChange = (newOpen) => {
+        if (!isDisabled && !isLoading) {
+            setIsOpen(newOpen);
+        }
+    };
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
+    };
+    const handleSelect = (option) => {
+        if (controlledValue === undefined) {
+            setUncontrolledValue(option.value);
+        }
+        onChange?.(option.value, option);
+        setIsOpen(false);
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (onClear) {
+            onClear();
+        }
+        else {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(undefined);
+            }
+            onChange?.("", {});
+        }
+    };
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (selectRef.current &&
+                !selectRef.current.contains(event.target)) {
+                handleOpenChange(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isOpen]);
+    // Close on escape key
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                handleOpenChange(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => {
+                document.removeEventListener("keydown", handleEscape);
+            };
+        }
+    }, [isOpen]);
+    // Handle keyboard navigation
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (isDisabled || isLoading)
+                return;
+            if (!isOpen && (event.key === "Enter" || event.key === " ")) {
+                event.preventDefault();
+                setIsOpen(true);
+                return;
+            }
+            if (isOpen) {
+                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    event.preventDefault();
+                    const currentIndex = options.findIndex((opt) => opt.value === value);
+                    const nextIndex = event.key === "ArrowDown"
+                        ? Math.min(currentIndex + 1, options.length - 1)
+                        : Math.max(currentIndex - 1, 0);
+                    if (options[nextIndex] && !options[nextIndex].isDisabled) {
+                        handleSelect(options[nextIndex]);
+                    }
+                }
+            }
+        };
+        if (selectRef.current) {
+            selectRef.current.addEventListener("keydown", handleKeyDown);
+            return () => {
+                selectRef.current?.removeEventListener("keydown", handleKeyDown);
+            };
+        }
+    }, [isOpen, value, options, isDisabled, isLoading]);
+    // Transform options to dropdown menu items
+    const menuItems = options.map((option) => ({
+        ...option,
+        onClick: () => handleSelect(option),
+    }));
+    const widthStyle = menuWidth === "full" ? "100%" : menuWidth === "auto" ? "auto" : menuWidth;
+    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", { ref: selectRef, className: cn(selectVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading
+                            ? "Loading..."
+                            : selectedOption?.label || selectedOption?.title || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted"), children: suffix })), jsx(ChevronDown, { className: cn("shrink-0 w-4 h-4 transition-transform", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted", isOpen && "transform rotate-180") }), isOpen && !isDisabled && !isLoading && (jsx("div", { className: "absolute z-50 left-0 right-0 top-full mt-1", children: jsx(DropdownMenu, { ref: ref, items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+Select.displayName = "Select";
+
+const paginationVariants = cva("flex items-center gap-4 font-display text-body-medium-medium", {
+    variants: {
+        size: {
+            small: "text-xs gap-2",
+            medium: "text-sm gap-4",
+            large: "text-base gap-5",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const Pagination = React.forwardRef(({ className, currentPage: controlledCurrentPage, totalPages, rowsPerPage: controlledRowsPerPage, rowsPerPageOptions = [5, 10, 15, 20, 25, 50, 100], showRowsPerPage = true, onPageChange, onRowsPerPageChange, size = "medium", isDisabled = false, rowsPerPageLabel = "Row per page", ofLabel = "of", prevLabel = "Prev", nextLabel = "Next", showPrevNext = true, showPageJumper = true, showPageNumber = true, pageStatus, maxPageButtons = 5, ...props }, ref) => {
+    const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = React.useState(1);
+    const [uncontrolledRowsPerPage, setUncontrolledRowsPerPage] = React.useState(rowsPerPageOptions[0] || 10);
+    const currentPage = controlledCurrentPage !== undefined
+        ? controlledCurrentPage
+        : uncontrolledCurrentPage;
+    const rowsPerPage = controlledRowsPerPage !== undefined
+        ? controlledRowsPerPage
+        : uncontrolledRowsPerPage;
+    // Generate rows per page options
+    const rowsPerPageSelectOptions = rowsPerPageOptions.map((value) => {
+        const valueStr = String(value);
+        // Pad with leading zero if needed (manual implementation for compatibility)
+        const label = valueStr.length < 2 ? "0" + valueStr : valueStr;
+        return {
+            id: `rows-${valueStr}`,
+            value: valueStr,
+            label: label,
+            title: valueStr,
+        };
+    });
+    // Generate page options
+    const pageOptions = Array.from({ length: totalPages }, (_, i) => {
+        const pageNum = i + 1;
+        const pageStr = String(pageNum);
+        return {
+            id: `page-${pageStr}`,
+            value: pageStr,
+            label: pageStr,
+            title: `Page ${pageNum}`,
+        };
+    });
+    const handlePageChange = (newPage) => {
+        if (newPage < 1 || newPage > totalPages)
+            return;
+        if (controlledCurrentPage === undefined) {
+            setUncontrolledCurrentPage(newPage);
+        }
+        onPageChange?.(newPage);
+    };
+    const handleRowsPerPageChange = (value) => {
+        const newRowsPerPage = typeof value === "string" ? parseInt(value) : value;
+        if (controlledRowsPerPage === undefined) {
+            setUncontrolledRowsPerPage(newRowsPerPage);
+        }
+        onRowsPerPageChange?.(newRowsPerPage);
+        // Reset to first page when rows per page changes
+        handlePageChange(1);
+    };
+    const handlePrevPage = () => {
+        handlePageChange(currentPage - 1);
+    };
+    const handleNextPage = () => {
+        handlePageChange(currentPage + 1);
+    };
+    const isPrevDisabled = currentPage <= 1 || isDisabled;
+    const isNextDisabled = currentPage >= totalPages || isDisabled;
+    const selectSize = size === "small" ? "small" : size === "large" ? "large" : "medium";
+    // Map pagination size to button size
+    const buttonSize = size === "small" ? "xsmall" : size === "large" ? "large" : "small";
+    // Generate page numbers to display
+    const getPageNumbers = () => {
+        if (totalPages <= maxPageButtons) {
+            // Show all pages if total is less than max
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        // Determine page status if not provided
+        const effectivePageStatus = pageStatus ||
+            (currentPage <= 2
+                ? "first"
+                : currentPage >= totalPages - 1
+                    ? "last"
+                    : "middle");
+        if (effectivePageStatus === "first") {
+            // Show first pages: 1, 2, 3, 4, 5
+            return Array.from({ length: Math.min(maxPageButtons, totalPages) }, (_, i) => i + 1);
+        }
+        else if (effectivePageStatus === "last") {
+            // Show last pages
+            const start = totalPages - maxPageButtons + 1;
+            return Array.from({ length: maxPageButtons }, (_, i) => start + i);
+        }
+        else if (effectivePageStatus === "middle") {
+            // Show pages around current page
+            const halfMax = Math.floor(maxPageButtons / 2);
+            let start = currentPage - halfMax;
+            let end = currentPage + halfMax;
+            // Adjust if at boundaries
+            if (start < 1) {
+                end += 1 - start;
+                start = 1;
+            }
+            if (end > totalPages) {
+                start -= end - totalPages;
+                end = totalPages;
+            }
+            start = Math.max(1, start);
+            end = Math.min(totalPages, end);
+            return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        }
+        // pageStatus === "none" - don't show any page numbers
+        return [];
+    };
+    const pageNumbers = getPageNumbers();
+    return (jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsx("div", { className: "w-[80px]", children: jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsx(ChevronLeft, { className: "w-4 h-4" }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
+                    // Show page dropdown selector
+                    jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "w-[80px]", children: jsx(Select, { value: currentPage.toString(), options: pageOptions, onChange: (value) => handlePageChange(typeof value === "string" ? parseInt(value) : value), size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) }), jsxs("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: [ofLabel, " ", totalPages] })] })) : (
+                    // Show numbered page buttons
+                    showPageNumber &&
+                        pageNumbers.length > 0 && (jsx(ButtonGroup, { variant: "separated", size: buttonSize, isDisabled: isDisabled, value: currentPage, onChange: (value) => handlePageChange(value), children: pageNumbers.map((pageNum) => (jsx(Button, { value: pageNum, variant: "tertiary", color: "primary", "aria-label": `Page ${pageNum}`, "aria-current": pageNum === currentPage ? "page" : undefined, children: pageNum }, pageNum))) }))), showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handleNextPage, isDisabled: isNextDisabled, trailingIcon: jsx(ChevronRight, { className: "w-4 h-4" }), "aria-label": "Next page", children: nextLabel }))] })] }));
+});
+Pagination.displayName = "Pagination";
+
 const radioVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer rounded-full", {
     variants: {
         size: {
@@ -1815,13 +2395,30 @@ const defaultFilter = (item, query) => {
     return (item.title.toLowerCase().includes(searchQuery) ||
         (item.description?.toLowerCase().includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = 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, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, containerClassName, ...textFieldProps }, ref) => {
+const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = 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, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, containerClassName, ...textFieldProps }, ref) => {
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
     const dropdownRef = React.useRef(null);
     const inputRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const [position, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+    });
     React.useImperativeHandle(ref, () => inputRef.current);
+    // Update position when dropdown opens or window resizes
+    React.useEffect(() => {
+        if (isOpen && dropdownRef.current) {
+            const rect = dropdownRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    }, [isOpen]);
     const searchValue = controlledSearchValue !== undefined
         ? controlledSearchValue
         : uncontrolledSearchValue;
@@ -1847,7 +2444,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     const handleItemSelect = (item) => {
         onItemSelect?.(item);
         if (controlledSearchValue === undefined) {
-            setUncontrolledSearchValue(item.value || item.title);
+            setUncontrolledSearchValue(item.title);
         }
         setIsOpen(false);
         inputRef.current?.focus();
@@ -1862,7 +2459,9 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     React.useEffect(() => {
         const handleClickOutside = (event) => {
             if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
+                !dropdownRef.current.contains(event.target) &&
+                menuRef.current &&
+                !menuRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };
@@ -1910,7 +2509,16 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         onClick: () => handleItemSelect(item),
     }));
     const showDropdown = isOpen && searchValue.length >= minSearchLength;
-    return (jsxs("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: [jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }), showDropdown && (jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: filteredItems.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: cn("absolute z-50 mt-2", dropdownClassName), width: dropdownWidth === "full" ? "full" : "auto" }))] }));
+    const dropdownMenu = showDropdown && (jsx("div", { ref: menuRef, style: {
+            position: "absolute",
+            top: `${position.top + 8}px`,
+            left: `${position.left}px`,
+            width: dropdownWidth === "full" ? `${position.width}px` : "auto",
+            zIndex: 9999,
+        }, children: jsx(DropdownMenu, { items: itemsWithHandlers, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: filteredItems.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: dropdownWidth === "full" ? "full" : "auto" }) }));
+    return (jsxs(Fragment, { children: [jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
+                dropdownMenu &&
+                createPortal(dropdownMenu, document.body)] }));
 });
 SearchableDropdown.displayName = "SearchableDropdown";
 
@@ -2054,6 +2662,249 @@ const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, c
 });
 Switch.displayName = "Switch";
 
+const tableVariants = cva("w-full border-collapse", {
+    variants: {
+        variant: {
+            default: "border-separate border-spacing-0",
+            bordered: "border-separate border-spacing-0",
+            striped: "border-separate border-spacing-0",
+        },
+        size: {
+            small: "text-body-small-medium",
+            medium: "text-body-medium-medium",
+            large: "text-body-large-medium",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "medium",
+    },
+});
+const tableHeaderVariants = cva("text-body-medium-regular text-left text-surface-ink-neutral-normal border-b border-surface-outline-neutral-muted", {
+    variants: {
+        size: {
+            small: "px-3 py-2 h-[32px]",
+            medium: "px-4 py-3 h-[40px]",
+            large: "px-6 py-4 h-[48px]",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const tableCellVariants = cva("text-body-medium-regular border-b border-surface-outline-neutral-muted text-surface-ink-neutral-normal transition-colors duration-150", {
+    variants: {
+        size: {
+            small: "px-3 py-2 h-[40px]",
+            medium: "px-4 py-3 h-[72px]",
+            large: "px-6 py-4 h-[56px]",
+        },
+        state: {
+            default: "",
+            focus: "",
+            // focus:
+            //   "outline outline-2 outline-action-outline-primary-default outline-offset-[-2px]",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        state: "default",
+    },
+});
+
+function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHeaderBackground, stickyHeader, size, headerClassName, isDetailPanelOpen, visibleHeadersCount, onToggleAllRows, isAllRowsSelected, isSomeRowsSelected, }) {
+    return (jsx("thead", { className: cn(showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup) => (jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), 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;
+                    return (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
+                            "bg-surface-fill-neutral-moderate border-none", !enableRowSelection &&
+                            index === 0 &&
+                            "rounded-tl-xlarge rounded-bl-xlarge", isLastVisibleColumn && "rounded-tr-xlarge rounded-br-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: {
+                            width: header.getSize(),
+                            minWidth: header.column.columnDef.minSize,
+                            maxWidth: header.column.columnDef.maxSize,
+                        }, 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: "↑",
+                                        desc: "↓",
+                                    }[header.column.getIsSorted()] ?? "↕" }))] })) }, header.id));
+                })] }, headerGroup.id))) }));
+}
+
+function TableBody({ rows, enableRowSelection, size, variant, showRowHover, cellClassName, isDetailPanelOpen, visibleHeadersCount, effectiveSelectedRowId, onRowClick, getRowClassName, handleRowClick, }) {
+    const [focusedCell, setFocusedCell] = React.useState(null);
+    const [hoveredRow, setHoveredRow] = React.useState(null);
+    return (jsx("tbody", { className: "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);
+            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 &&
+                    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;
+                        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: {
+                                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));
+                    })] }, 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..." })] }) }) }));
+}
+function renderDefaultEmptyState({ colSpan }) {
+    return (jsx("tr", { children: jsx("td", { colSpan: colSpan, className: "text-center py-12 text-surface-ink-neutral-muted", children: "No data available" }) }));
+}
+
+// ==================== Component ====================
+function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, ...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,
+    ]);
+    // ==================== 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]);
+    // ==================== Callbacks ====================
+    const getRowClassName = React.useCallback((row) => {
+        if (typeof rowClassName === "function") {
+            return rowClassName(row);
+        }
+        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);
+        }
+        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);
+        }
+    };
+    // ==================== Render Helpers ====================
+    const renderLoadingState = () => {
+        if (loadingComponent)
+            return loadingComponent;
+        return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
+    };
+    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 overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: maxHeight ? { maxHeight } : undefined, 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() }), isLoading ? (jsx("tbody", { children: renderLoadingState() })) : !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 }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
+}
+// ==================== Export ====================
+const Table = React.forwardRef(TableComponent);
+Table.displayName = "Table";
+
+const TableDetailPanel = React.forwardRef(({ isOpen, onClose, children, className, width = "400px" }, ref) => {
+    return (jsx("div", { ref: ref, className: cn("absolute top-0 right-0 h-full bg-white border  border-surface-outline-neutral-muted  transition-transform duration-300 ease-in-out overflow-auto", isOpen ? "translate-x-0" : "translate-x-full", className), style: { width }, children: children }));
+});
+TableDetailPanel.displayName = "TableDetailPanel";
+
+function NumberCell({ value, currency, subtitle, className, }) {
+    return (jsxs("div", { className: cn("flex flex-col", className), children: [jsxs("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: [currency, " ", value.toLocaleString("en-IN", {
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 2,
+                    })] }), subtitle && (jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] }));
+}
+function IconCell({ icon, background = "neutral", className, }) {
+    const backgrounds = {
+        neutral: "bg-surface-fill-neutral-faded",
+        primary: "bg-action-fill-primary-faded",
+        success: "bg-action-fill-positive-faded",
+        warning: "bg-action-fill-warning-faded",
+        danger: "bg-action-fill-negative-faded",
+    };
+    return (jsx("div", { className: cn("inline-flex items-center justify-center w-10 h-10 rounded-medium", backgrounds[background], className), children: icon }));
+}
+// ==================== Spacer Cell ====================
+function SpacerCell() {
+    return jsx("div", { className: "w-full h-full" });
+}
+function SlotCell({ onDragStart, onDragEnd, className }) {
+    return (jsx("div", { draggable: true, onDragStart: onDragStart, onDragEnd: onDragEnd, className: cn("flex items-center justify-center cursor-grab active:cursor-grabbing", className), children: jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-surface-ink-neutral-muted", children: [jsx("path", { d: "M6 4C6 3.44772 5.55228 3 5 3C4.44772 3 4 3.44772 4 4C4 4.55228 4.44772 5 5 5C5.55228 5 6 4.55228 6 4Z", fill: "currentColor" }), jsx("path", { d: "M6 8C6 7.44772 5.55228 7 5 7C4.44772 7 4 7.44772 4 8C4 8.55228 4.44772 9 5 9C5.55228 9 6 8.55228 6 8Z", fill: "currentColor" }), jsx("path", { d: "M6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13C5.55228 13 6 12.5523 6 12Z", fill: "currentColor" }), jsx("path", { d: "M12 4C12 3.44772 11.5523 3 11 3C10.4477 3 10 3.44772 10 4C10 4.55228 10.4477 5 11 5C11.5523 5 12 4.55228 12 4Z", fill: "currentColor" }), jsx("path", { d: "M12 8C12 7.44772 11.5523 7 11 7C10.4477 7 10 7.44772 10 8C10 8.55228 10.4477 9 11 9C11.5523 9 12 8.55228 12 8Z", fill: "currentColor" }), jsx("path", { d: "M12 12C12 11.4477 11.5523 11 11 11C10.4477 11 10 11.4477 10 12C10 12.5523 10.4477 13 11 13C11.5523 13 12 12.5523 12 12Z", fill: "currentColor" })] }) }));
+}
+function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className, }) {
+    return (jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsx("div", { className: cn("w-10 h-10 rounded-full flex items-center justify-center text-body-medium-medium", `bg-${color}`), children: initials || name.charAt(0).toUpperCase() })), jsxs("div", { className: "flex flex-col", children: [jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
+}
+
 const tabItemVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer", {
     variants: {
         variant: {
@@ -2256,5 +3107,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Badge, Button, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, Link, ListItem, Radio, SearchableDropdown, Switch, TabItem, Tabs, Text, TextArea, TextField, Tooltip, badgeVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconRegistry, linkVariants, listItemVariants, radioVariants, switchVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, 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 };
 //# sourceMappingURL=index.esm.js.map