infinity-ui-elements 1.4.1-beta.2 → 1.4.1-beta.4

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
-import { ExternalLink } from 'lucide-react';
+import { ExternalLink, Loader2, Search } from 'lucide-react';
 
 // Define patterns for custom classes that should be preserved
 // This approach is more scalable than hardcoding individual class names
@@ -990,6 +990,303 @@ const Divider = React.forwardRef(({ className, orientation = "horizontal", thick
 });
 Divider.displayName = "Divider";
 
+const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+    variants: {
+        variant: {
+            default: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded
+          focus:ring-2
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
+            primary: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded 
+          focus:ring-2 
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            negative: `hover:bg-action-fill-negative-faded 
+          focus:bg-action-fill-negative-faded 
+          focus:ring-2 ring-action-outline-negative-faded-hover
+          border border-transparent
+          `,
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+        isSelected: {
+            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        isDisabled: false,
+        isSelected: false,
+    },
+});
+const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
+    const [internalSelected, setInternalSelected] = React.useState(isSelected);
+    // Sync internal state with prop
+    React.useEffect(() => {
+        setInternalSelected(isSelected);
+    }, [isSelected]);
+    const handleClick = (e) => {
+        if (isDisabled)
+            return;
+        if (type === "multiple") {
+            const newSelected = !internalSelected;
+            setInternalSelected(newSelected);
+            onSelectionChange?.(newSelected);
+        }
+        onClick?.(e);
+    };
+    const handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        const newSelected = e.target.checked;
+        setInternalSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    };
+    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
+            variant,
+            isDisabled,
+            isSelected: type === "multiple" ? internalSelected : false,
+        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
+                    ? "text-action-ink-primary-normal"
+                    : variant === "negative"
+                        ? "text-action-ink-negative-normal"
+                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
+                            ? "text-action-ink-primary-normal"
+                            : variant === "negative"
+                                ? "text-action-ink-negative-normal"
+                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+});
+ListItem.displayName = "ListItem";
+
+const linkVariants = cva("inline-flex items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none  decoration-1 underline-offset-4", {
+    variants: {
+        type: {
+            anchor: "hover:underline",
+            action: "no-underline cursor-pointer",
+        },
+        color: {
+            primary: "",
+            positive: "",
+            negative: "",
+            notice: "",
+            info: "",
+            neutral: "",
+        },
+        size: {
+            xsmall: "text-body-xsmall-medium gap-1",
+            small: "text-body-small-medium gap-1",
+            medium: "text-body-medium-medium gap-1.5",
+            large: "text-body-large-medium gap-1.5",
+        },
+        isIconOnly: {
+            true: "no-underline",
+            false: "",
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-50",
+            false: "cursor-pointer",
+        },
+    },
+    compoundVariants: [
+        // Primary color variants
+        {
+            color: "primary",
+            class: `text-action-ink-primary-normal 
+          hover:text-action-ink-primary-subtle
+          hover:decoration-action-outline-primary-hover 
+          disabled:text-action-ink-primary-disabled
+          focus:text-action-ink-primary-hover
+          `,
+        },
+        // Positive color variants
+        {
+            color: "positive",
+            class: `text-action-ink-positive-normal 
+          hover:text-action-ink-positive-subtle
+          hover:decoration-action-outline-positive-hover 
+          hover:text-action-ink-positive-hover 
+          disabled:text-action-ink-positive-disabled
+          focus:text-action-ink-positive-hover
+          `,
+        },
+        // Negative color variants
+        {
+            color: "negative",
+            class: `text-action-ink-negative-normal 
+          hover:text-action-ink-negative-subtle
+          hover:decoration-action-outline-negative-hover 
+          hover:text-action-ink-negative-hover 
+          disabled:text-action-ink-negative-disabled
+          focus:text-action-ink-negative-hover
+          `,
+        },
+        // Notice color variants
+        {
+            color: "notice",
+            class: `text-action-ink-notice-normal 
+          hover:text-action-ink-notice-subtle
+          hover:decoration-action-outline-notice-hover 
+          hover:text-action-ink-notice-hover 
+          disabled:text-action-ink-notice-disabled
+          focus:text-action-ink-notice-hover
+          `,
+        },
+        // Info color variants
+        {
+            color: "info",
+            class: `text-action-ink-info-normal 
+          hover:text-action-ink-info-subtle
+          hover:decoration-action-outline-info-hover 
+          hover:text-action-ink-info-hover 
+          disabled:text-action-ink-info-disabled
+          focus:text-action-ink-info-hover
+          `,
+        },
+        // Neutral color variants
+        {
+            color: "neutral",
+            class: `text-action-ink-neutral-normal 
+          hover:text-action-ink-neutral-subtle
+          hover:decoration-action-outline-neutral-hover 
+          hover:text-action-ink-neutral-hover 
+          disabled:text-action-ink-neutral-disabled
+          focus:text-action-ink-neutral-hover
+          `,
+        },
+    ],
+    defaultVariants: {
+        type: "anchor",
+        color: "primary",
+        size: "medium",
+        isIconOnly: false,
+        isDisabled: false,
+    },
+});
+const Link = React.forwardRef(({ className, type = "anchor", color = "primary", size = "medium", isIconOnly = false, isDisabled = false, asChild = false, showIcon = false, icon, leadingIcon, trailingIcon, children, onClick, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    const handleClick = (e) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // Icon size based on link size
+    const iconSize = {
+        xsmall: 12,
+        small: 14,
+        medium: 16,
+        large: 18,
+    }[size];
+    // Determine what to show as trailing icon
+    // Priority: trailingIcon > (showIcon && icon) > (showIcon && default ExternalLink)
+    const finalTrailingIcon = trailingIcon || (showIcon && (icon || jsx(ExternalLink, { size: iconSize })));
+    const linkContent = (jsxs(Fragment, { children: [leadingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: leadingIcon })), !isIconOnly && children, isIconOnly && children, finalTrailingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: finalTrailingIcon })), isIconOnly &&
+                (leadingIcon || finalTrailingIcon || (jsx(ExternalLink, { size: iconSize })))] }));
+    return (jsx(Comp, { className: cn(linkVariants({
+            type,
+            color,
+            size,
+            isIconOnly,
+            isDisabled,
+        }), className), ref: ref, onClick: handleClick, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, ...props, children: linkContent }));
+});
+Link.displayName = "Link";
+
+const DropdownMenu = React.forwardRef(({ items = [], 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 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" }) }));
+        }
+        if (isEmpty || items.length === 0) {
+            return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
+        }
+        return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "flex flex-col gap-1", children: items.map((item, index) => (jsx(ListItem, { title: item.title, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, onClick: () => {
+                            item.onClick?.();
+                            onClose?.();
+                        }, 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: {
+            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 })] })] }))] }));
+});
+DropdownMenu.displayName = "DropdownMenu";
+
+const dropdownVariants = cva("bg-surface-fill-primary-normal border border-surface-outline-neutral-subtle rounded-large", {
+    variants: {
+        size: {
+            small: "w-64",
+            medium: "w-80",
+            large: "w-96",
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+    },
+});
+const Dropdown = React.forwardRef(({ className, trigger, 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, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
+    const dropdownRef = React.useRef(null);
+    const handleOpenChange = (newOpen) => {
+        if (controlledOpen === undefined) {
+            setUncontrolledOpen(newOpen);
+        }
+        onOpenChange?.(newOpen);
+    };
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
+    };
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.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]);
+    const sizeMap = {
+        small: "w-64",
+        medium: "w-80",
+        large: "w-96",
+    };
+    return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx(DropdownMenu, { ref: ref, items: items, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+});
+Dropdown.displayName = "Dropdown";
+
 const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
     variants: {
         isVisible: {
@@ -1239,218 +1536,10 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
             gap: "gap-2.5",
         },
     };
-    const config = sizeConfig[size];
-    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-1", config.gap, className), children: [jsxs("div", { className: cn("flex items-center", config.gap), children: [jsxs("label", { htmlFor: htmlFor, className: cn("flex items-center", labelClassName), children: [jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", color: "subtle", children: label }), isRequired && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "semibold", className: "text-feedback-ink-negative-subtle ml-0.5", children: "*" })), isOptional && (jsx(Text, { as: "span", variant: "body", size: config.textSize, weight: "regular", className: "text-surface-ink-neutral-muted ml-1", children: "(optional)" }))] }), infoDescription && (jsx(Tooltip, { description: infoDescription, heading: infoHeading, children: jsxs("svg", { width: config.iconSize, height: config.iconSize, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "text-surface-ink-neutral-muted cursor-help", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1" }), jsx("path", { d: "M7 6V10M7 4.5V4", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }) }))] }), linkText && (jsx("a", { href: linkHref, onClick: onLinkClick, className: cn("text-surface-ink-primary-normal hover:text-surface-ink-primary-hover transition-colors cursor-pointer font-display font-semibold leading-tight shrink-0", size === "small" && "text-xs", size === "medium" && "text-xs", size === "large" && "text-sm", linkClassName), children: linkText }))] }));
-});
-FormHeader.displayName = "FormHeader";
-
-const linkVariants = cva("inline-flex items-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none underline decoration-1 underline-offset-4", {
-    variants: {
-        type: {
-            anchor: "",
-            action: "cursor-pointer",
-        },
-        color: {
-            primary: "",
-            positive: "",
-            negative: "",
-            notice: "",
-            info: "",
-            neutral: "",
-        },
-        size: {
-            xsmall: "text-body-xsmall-medium gap-1",
-            small: "text-body-small-medium gap-1",
-            medium: "text-body-medium-medium gap-1.5",
-            large: "text-body-large-medium gap-1.5",
-        },
-        isIconOnly: {
-            true: "no-underline",
-            false: "",
-        },
-        isDisabled: {
-            true: "cursor-not-allowed opacity-50",
-            false: "cursor-pointer",
-        },
-    },
-    compoundVariants: [
-        // Primary color variants
-        {
-            color: "primary",
-            class: `text-action-ink-primary-normal 
-          hover:text-action-ink-primary-hover 
-          disabled:text-action-ink-primary-disabled
-          active:text-action-ink-primary-activated
-          focus:text-action-ink-primary-hover
-          `,
-        },
-        // Positive color variants
-        {
-            color: "positive",
-            class: `text-action-ink-positive-normal 
-          hover:text-action-ink-positive-hover 
-          disabled:text-action-ink-positive-disabled
-          active:text-action-ink-positive-activated
-          focus:text-action-ink-positive-hover
-          `,
-        },
-        // Negative color variants
-        {
-            color: "negative",
-            class: `text-action-ink-negative-normal 
-          hover:text-action-ink-negative-hover 
-          disabled:text-action-ink-negative-disabled
-          active:text-action-ink-negative-activated
-          focus:text-action-ink-negative-hover
-          `,
-        },
-        // Notice color variants
-        {
-            color: "notice",
-            class: `text-action-ink-notice-normal 
-          hover:text-action-ink-notice-hover 
-          disabled:text-action-ink-notice-disabled
-          active:text-action-ink-notice-activated
-          focus:text-action-ink-notice-hover
-          `,
-        },
-        // Info color variants
-        {
-            color: "info",
-            class: `text-action-ink-info-normal 
-          hover:text-action-ink-info-hover 
-          disabled:text-action-ink-info-disabled
-          active:text-action-ink-info-activated
-          focus:text-action-ink-info-hover
-          `,
-        },
-        // Neutral color variants
-        {
-            color: "neutral",
-            class: `text-action-ink-neutral-normal 
-          hover:text-action-ink-neutral-hover 
-          disabled:text-action-ink-neutral-disabled
-          active:text-action-ink-neutral-activated
-          focus:text-action-ink-neutral-hover
-          `,
-        },
-    ],
-    defaultVariants: {
-        type: "anchor",
-        color: "primary",
-        size: "medium",
-        isIconOnly: false,
-        isDisabled: false,
-    },
-});
-const Link = React.forwardRef(({ className, type = "anchor", color = "primary", size = "medium", isIconOnly = false, isDisabled = false, asChild = false, showIcon = false, icon, leadingIcon, trailingIcon, children, onClick, ...props }, ref) => {
-    const Comp = asChild ? Slot : "a";
-    const handleClick = (e) => {
-        if (isDisabled) {
-            e.preventDefault();
-            return;
-        }
-        onClick?.(e);
-    };
-    // Icon size based on link size
-    const iconSize = {
-        xsmall: 12,
-        small: 14,
-        medium: 16,
-        large: 18,
-    }[size];
-    // Determine what to show as trailing icon
-    // Priority: trailingIcon > (showIcon && icon) > (showIcon && default ExternalLink)
-    const finalTrailingIcon = trailingIcon || (showIcon && (icon || jsx(ExternalLink, { size: iconSize })));
-    const linkContent = (jsxs(Fragment, { children: [leadingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: leadingIcon })), !isIconOnly && children, isIconOnly && children, finalTrailingIcon && !isIconOnly && (jsx("span", { className: "inline-flex items-center", children: finalTrailingIcon })), isIconOnly &&
-                (leadingIcon || finalTrailingIcon || (jsx(ExternalLink, { size: iconSize })))] }));
-    return (jsx(Comp, { className: cn(linkVariants({
-            type,
-            color,
-            size,
-            isIconOnly,
-            isDisabled,
-        }), className), ref: ref, onClick: handleClick, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : undefined, ...props, children: linkContent }));
-});
-Link.displayName = "Link";
-
-const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
-    variants: {
-        variant: {
-            default: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded
-          focus:ring-2
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
-            primary: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded 
-          focus:ring-2 
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            negative: `hover:bg-action-fill-negative-faded 
-          focus:bg-action-fill-negative-faded 
-          focus:ring-2 ring-action-outline-negative-faded-hover
-          border border-transparent
-          `,
-        },
-        isDisabled: {
-            true: "cursor-not-allowed opacity-60",
-            false: "",
-        },
-        isSelected: {
-            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        isDisabled: false,
-        isSelected: false,
-    },
-});
-const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
-    const [internalSelected, setInternalSelected] = React.useState(isSelected);
-    // Sync internal state with prop
-    React.useEffect(() => {
-        setInternalSelected(isSelected);
-    }, [isSelected]);
-    const handleClick = (e) => {
-        if (isDisabled)
-            return;
-        if (type === "multiple") {
-            const newSelected = !internalSelected;
-            setInternalSelected(newSelected);
-            onSelectionChange?.(newSelected);
-        }
-        onClick?.(e);
-    };
-    const handleCheckboxChange = (e) => {
-        e.stopPropagation();
-        if (isDisabled)
-            return;
-        const newSelected = e.target.checked;
-        setInternalSelected(newSelected);
-        onSelectionChange?.(newSelected);
-    };
-    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
-            variant,
-            isDisabled,
-            isSelected: type === "multiple" ? internalSelected : false,
-        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
-                    ? "text-action-ink-primary-normal"
-                    : variant === "negative"
-                        ? "text-action-ink-negative-normal"
-                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
-                            ? "text-action-ink-primary-normal"
-                            : variant === "negative"
-                                ? "text-action-ink-negative-normal"
-                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+    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 }))] }));
 });
-ListItem.displayName = "ListItem";
+FormHeader.displayName = "FormHeader";
 
 const radioVariants = cva("relative inline-flex items-center justify-center shrink-0 border transition-all cursor-pointer rounded-full", {
     variants: {
@@ -1617,6 +1706,214 @@ const Radio = React.forwardRef(({ label, errorText, size = "medium", validationS
 });
 Radio.displayName = "Radio";
 
+const textFieldVariants = 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 TextField = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
+    const [internalValue, setInternalValue] = React.useState("");
+    const inputValue = value !== undefined ? value : internalValue;
+    const hasValue = inputValue && String(inputValue).length > 0;
+    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, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), 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 font-display", 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.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 [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);
+    React.useImperativeHandle(ref, () => inputRef.current);
+    const searchValue = controlledSearchValue !== undefined
+        ? controlledSearchValue
+        : uncontrolledSearchValue;
+    const handleSearchChange = (e) => {
+        const newValue = e.target.value;
+        if (controlledSearchValue === undefined) {
+            setUncontrolledSearchValue(newValue);
+        }
+        onSearchChange?.(newValue);
+        // Show dropdown if minimum search length is met
+        if (newValue.length >= minSearchLength) {
+            setIsOpen(true);
+        }
+        else {
+            setIsOpen(false);
+        }
+    };
+    const handleFocus = () => {
+        if (showOnFocus && searchValue.length >= minSearchLength) {
+            setIsOpen(true);
+        }
+    };
+    const handleItemSelect = (item) => {
+        onItemSelect?.(item);
+        if (controlledSearchValue === undefined) {
+            setUncontrolledSearchValue(item.value || item.title);
+        }
+        setIsOpen(false);
+        inputRef.current?.focus();
+    };
+    // Filter items based on search
+    const filteredItems = React.useMemo(() => {
+        if (!searchValue)
+            return items;
+        return items.filter((item) => filterFunction(item, searchValue));
+    }, [items, searchValue, filterFunction]);
+    // Close dropdown when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isOpen]);
+    // Handle keyboard navigation
+    const handleKeyDown = (e) => {
+        if (!isOpen) {
+            if (e.key === "ArrowDown" || e.key === "Enter") {
+                setIsOpen(true);
+                e.preventDefault();
+            }
+            return;
+        }
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                setFocusedIndex((prev) => prev < filteredItems.length - 1 ? prev + 1 : prev);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                setFocusedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (focusedIndex >= 0 && filteredItems[focusedIndex]) {
+                    handleItemSelect(filteredItems[focusedIndex]);
+                }
+                break;
+            case "Escape":
+                e.preventDefault();
+                setIsOpen(false);
+                setFocusedIndex(-1);
+                break;
+        }
+    };
+    // Update items with onClick handlers that call handleItemSelect
+    const itemsWithHandlers = filteredItems.map((item) => ({
+        ...item,
+        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" }))] }));
+});
+SearchableDropdown.displayName = "SearchableDropdown";
+
 const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-pointer rounded-full transition-all duration-200", {
     variants: {
         size: {
@@ -1959,109 +2256,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-const textFieldVariants = cva("relative flex items-center gap-2 border rounded-medium transition-all font-display font-size-100 leading-100", {
-    variants: {
-        size: {
-            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, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
-    const [internalValue, setInternalValue] = React.useState("");
-    const inputValue = value !== undefined ? value : internalValue;
-    const hasValue = inputValue && String(inputValue).length > 0;
-    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, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, htmlFor: props.id, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(textFieldVariants({
-                    size,
-                    validationState: currentValidationState,
-                    isDisabled,
-                }), 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 font-display", 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";
-
-export { Badge, Button, Checkbox, Counter, Divider, FormFooter, FormHeader, Icon, Link, ListItem, Radio, Switch, TabItem, Tabs, Text, TextArea, TextField, Tooltip, badgeVariants, buttonVariants, checkboxVariants, cn, counterVariants, getAvailableIcons, hasIcon, iconRegistry, linkVariants, listItemVariants, radioVariants, switchVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+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 };
 //# sourceMappingURL=index.esm.js.map