infinity-ui-elements 1.8.58 → 1.8.60

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Calendar, X, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ExternalLink, Calendar, X, Loader2, Search, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Calendar$1 from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
@@ -38,9 +38,10 @@ import { flexRender } from '@tanstack/react-table';
  */
 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>`,
+    tick: `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99907 1.77063L8.63188 2.42981L8.69829 2.49915L8.63188 2.56848L3.88188 7.50891L3.80962 7.58411L3.73833 7.50891L0.887741 4.54504L0.821335 4.47571L0.887741 4.40637L1.52153 3.74719L1.5938 3.672L1.66508 3.74719L3.80962 5.97766L7.85454 1.77063L7.9268 1.69543L7.99907 1.77063Z" fill="white" stroke="white" stroke-width="0.2"/>
+</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"/>
@@ -68,6 +69,14 @@ const iconRegistry = {
     file: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M19.1111 21H4.88889C4.39797 21 4 20.5971 4 20.1V3.9C4 3.40295 4.39797 3 4.88889 3H19.1111C19.602 3 20 3.40295 20 3.9V20.1C20 20.5971 19.602 21 19.1111 21ZM18.2222 19.2V4.8H5.77778V19.2H18.2222ZM8.44444 9.3H15.5556V11.1H8.44444V9.3ZM8.44444 12.9H15.5556V14.7H8.44444V12.9Z" fill="#081416"/>
 </svg>
+`,
+    chevronDown: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13.7272L17.4445 8L19 9.63635L12 17L5 9.63635L6.55555 8L12 13.7272Z" fill="#081416"/>
+</svg>
+`,
+    chevronUp: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 11.2727L6.55555 17L5 15.3637L12 8L19 15.3637L17.4445 17L12 11.2727Z" fill="#081416"/>
+</svg>
 `,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
@@ -1485,9 +1494,9 @@ FormFooter.displayName = "FormFooter";
 const checkboxVariants = cva("relative inline-flex items-center justify-center shrink-0 transition-all cursor-pointer box-border", {
     variants: {
         size: {
-            small: "w-[10px] h-[10px] rounded-small border-[1.5px]",
-            medium: "w-[12px] h-[12px] rounded-small border-[1.5px]",
-            large: "w-[16px] h-[16px] rounded-medium border-[2px]",
+            small: "w-[14px] h-[14px] rounded-small border-[1.5px]",
+            medium: "w-[16px] h-[16px] rounded-small border-[1.5px]",
+            large: "w-[20px] h-[20px] rounded-medium border-[2px]",
         },
         validationState: {
             none: "",
@@ -1555,7 +1564,6 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
     const [internalChecked, setInternalChecked] = React.useState(false);
     const [showRipple, setShowRipple] = React.useState(false);
     const inputRef = React.useRef(null);
-    const rippleTimeoutRef = React.useRef(null);
     // Use forwarded ref or internal ref
     React.useImperativeHandle(ref, () => inputRef.current);
     const isChecked = checked !== undefined ? checked : internalChecked;
@@ -1565,14 +1573,6 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
             inputRef.current.indeterminate = isIndeterminate;
         }
     }, [isIndeterminate]);
-    // Cleanup timeout on unmount
-    React.useEffect(() => {
-        return () => {
-            if (rippleTimeoutRef.current) {
-                clearTimeout(rippleTimeoutRef.current);
-            }
-        };
-    }, []);
     const handleChange = (e) => {
         if (onChange) {
             onChange(e);
@@ -1582,28 +1582,31 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         }
     };
     const triggerRipple = () => {
-        if (!isDisabled && !showRipple) {
-            // Clear any existing timeout
-            if (rippleTimeoutRef.current) {
-                clearTimeout(rippleTimeoutRef.current);
-            }
+        if (!isDisabled) {
             setShowRipple(true);
-            rippleTimeoutRef.current = setTimeout(() => {
+            setTimeout(() => {
                 setShowRipple(false);
-                rippleTimeoutRef.current = null;
-            }, 400); // Match animation duration (0.4s)
+            }, 360); // Match animation duration (0.36s)
         }
     };
     const handleContainerClick = () => {
         if (!isDisabled && inputRef.current) {
-            triggerRipple();
+            // Only show ripple when checking or entering indeterminate state (not unchecking)
+            const willBeChecked = !isChecked || isIndeterminate;
+            if (willBeChecked) {
+                triggerRipple();
+            }
             inputRef.current.click();
         }
     };
     const handleKeyDown = (e) => {
         if ((e.key === " " || e.key === "Enter") && !isDisabled) {
             e.preventDefault();
-            triggerRipple();
+            // Only show ripple when checking or entering indeterminate state (not unchecking)
+            const willBeChecked = !isChecked || isIndeterminate;
+            if (willBeChecked) {
+                triggerRipple();
+            }
             inputRef.current?.click();
         }
     };
@@ -1612,23 +1615,23 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         small: {
             gap: "gap-2",
             labelSize: "text-body-small-regular",
-            iconSize: 10,
+            iconSize: 7,
         },
         medium: {
             gap: "gap-2",
             labelSize: "text-body-small-regular",
-            iconSize: 12,
+            iconSize: 9.6,
         },
         large: {
             gap: "gap-3",
             labelSize: "text-body-medium-regular",
-            iconSize: 14,
+            iconSize: 13.33,
         },
     };
     const config = sizeConfig[size];
     // Determine if we should show the error text
     const shouldShowError = errorText && showErrorText;
-    return (jsxs("div", { className: cn("inline-flex flex-col px-2", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
+    return (jsxs("div", { className: cn("inline-flex flex-col py-0.5", containerClassName), children: [jsxs("div", { className: cn("inline-flex items-center", config.gap, isDisabled ? "cursor-not-allowed" : "cursor-pointer"), onClick: handleContainerClick, onKeyDown: handleKeyDown, role: "checkbox", "aria-checked": isIndeterminate ? "mixed" : isChecked, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, children: [jsx("input", { ref: inputRef, type: "checkbox", className: "sr-only", checked: isChecked, onChange: handleChange, disabled: isDisabled, ...props }), jsxs("div", { className: "relative inline-flex shrink-0", children: [showRipple && (jsx("div", { className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full pointer-events-none w-full h-full", validationState === "error"
                                     ? "bg-action-outline-negative-faded"
                                     : "bg-action-outline-primary-faded"), style: {
                                     animation: "var(--animate-checkbox-ripple)",
@@ -2830,7 +2833,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
 });
 Modal.displayName = "Modal";
 
-const selectVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100", {
+const textFieldVariants = cva("relative flex items-center gap-3 border rounded-large transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "h-[28px] px-3 text-xs gap-2",
@@ -2840,10 +2843,11 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
         validationState: {
             none: `
         border-action-outline-neutral-faded 
-        hover:border-action-outline-primary-hover 
-        focus-within:border-action-outline-primary-hover 
+        hover:border-action-outline-neutral-faded-hover 
+        hover:bg-action-fill-neutral-faded-hover
+        focus-within:border-action-outline-primary-default 
         focus-within:ring-2 
-        ring-action-outline-primary-faded-hover`,
+        ring-surface-outline-primary-muted`,
             positive: `
           border-action-outline-positive-default 
           focus-within:border-action-outline-positive-hover
@@ -2856,11 +2860,13 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
         },
         isDisabled: {
             true: `
-        border-[var(--border-width-thinner)]
-        hover:border-action-outline-neutral-disabled
+        border
         border-action-outline-neutral-disabled
-        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
-            false: "bg-surface-fill-neutral-intense",
+        hover:border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense 
+        hover:bg-surface-fill-neutral-intense 
+        cursor-not-allowed`,
+            false: "",
         },
     },
     defaultVariants: {
@@ -2869,23 +2875,83 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
         isDisabled: false,
     },
 });
+const TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isLoading = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState("");
+    const inputValue = value !== undefined ? value : internalValue;
+    const hasValue = inputValue && String(inputValue).length > 0;
+    const handleChange = (e) => {
+        if (onChange) {
+            onChange(e);
+        }
+        else {
+            setInternalValue(e.target.value);
+        }
+    };
+    const handleClear = () => {
+        if (onClear) {
+            onClear();
+        }
+        else {
+            setInternalValue("");
+        }
+        // Focus the input after clearing
+        const input = document.getElementById(props.id || "");
+        if (input) {
+            input.focus();
+        }
+    };
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    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, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), isLoading && "text-field-loading", className), 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("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (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 && (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(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+TextField.displayName = "TextField";
+
 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, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
-    const selectRef = React.useRef(null);
+    const containerRef = React.useRef(null);
     const dropdownContainerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => inputRef.current);
     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);
@@ -2900,9 +2966,9 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
         }
         onChange?.(option.value, option);
         setIsOpen(false);
+        inputRef.current?.focus();
     };
-    const handleClear = (e) => {
-        e.stopPropagation();
+    const handleClear = () => {
         if (onClear) {
             onClear();
         }
@@ -2916,7 +2982,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     const updateDropdownPlacement = React.useCallback(() => {
         if (typeof window === "undefined")
             return;
-        const trigger = selectRef.current;
+        const trigger = containerRef.current;
         if (!trigger)
             return;
         const triggerRect = trigger.getBoundingClientRect();
@@ -2965,8 +3031,10 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     // Close dropdown when clicking outside
     React.useEffect(() => {
         const handleClickOutside = (event) => {
-            if (selectRef.current &&
-                !selectRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target) &&
+                dropdownContainerRef.current &&
+                !dropdownContainerRef.current.contains(event.target)) {
                 handleOpenChange(false);
             }
         };
@@ -2992,35 +3060,27 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
         }
     }, [isOpen]);
     // Handle keyboard navigation
-    React.useEffect(() => {
-        const handleKeyDown = (event) => {
-            if (isDisabled || isLoading)
-                return;
-            if (!isOpen && (event.key === "Enter" || event.key === " ")) {
+    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();
-                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]);
-                    }
+                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) => ({
         value: option.value,
@@ -3033,50 +3093,20 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
         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, LinkComponent: LinkComponent, 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 })) : showLeadingIcon && selectedOption?.leadingIcon ? (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: selectedOption.leadingIcon })) : null, 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 || 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", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
-                            ? "top-full mt-1"
-                            : "bottom-full mb-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" })] }));
+    // Get the display value for the TextField
+    const displayValue = isLoading ? "Loading..." : selectedOption?.label || "";
+    // Build the prefix: either provided prefix or selected option's leadingIcon
+    const displayPrefix = prefix
+        ? prefix
+        : showLeadingIcon && selectedOption?.leadingIcon
+            ? selectedOption.leadingIcon
+            : undefined;
+    // Build the suffix: include both the optional suffix and the chevron icon
+    const chevronIcon = (jsx(Icon, { name: isOpen ? "chevronUp" : "chevronDown", size: 16, className: "shrink-0 transition-colors" }));
+    const displaySuffix = suffix ? (jsxs(Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
+    return (jsxs("div", { ref: containerRef, className: "relative", children: [jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: containerClassName, labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+                    ? "top-full mt-1"
+                    : "bottom-full mb-1"), children: jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }));
 });
 Select.displayName = "Select";
 
@@ -3504,110 +3534,6 @@ const RadioGroup = React.forwardRef(({ value: controlledValue, defaultValue, onC
 });
 RadioGroup.displayName = "RadioGroup";
 
-const textFieldVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-functional 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 TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isLoading = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
-    const [internalValue, setInternalValue] = React.useState("");
-    const inputValue = value !== undefined ? value : internalValue;
-    const hasValue = inputValue && String(inputValue).length > 0;
-    const handleChange = (e) => {
-        if (onChange) {
-            onChange(e);
-        }
-        else {
-            setInternalValue(e.target.value);
-        }
-    };
-    const handleClear = () => {
-        if (onClear) {
-            onClear();
-        }
-        else {
-            setInternalValue("");
-        }
-        // Focus the input after clearing
-        const input = document.getElementById(props.id || "");
-        if (input) {
-            input.focus();
-        }
-    };
-    // Determine which helper text to show
-    const displayHelperText = errorText || successText || helperText;
-    const currentValidationState = errorText
-        ? "negative"
-        : successText
-            ? "positive"
-            : validationState;
-    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, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
-                    size,
-                    validationState: currentValidationState,
-                    isDisabled,
-                }), isLoading && "text-field-loading", className), 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("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (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 && (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(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
-                    ? "default"
-                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
-});
-TextField.displayName = "TextField";
-
 const defaultFilter = (item, query) => {
     const searchQuery = query?.toLowerCase();
     return (item.label?.toLowerCase()?.includes(searchQuery) ||
@@ -5181,5 +5107,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants };
 //# sourceMappingURL=index.esm.js.map