infinity-ui-elements 1.8.8 → 1.8.10

package/dist/index.esm.js

@@ -5,7 +5,9 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ExternalLink, Calendar, Loader2, Search, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
+import Calendar$1 from 'react-calendar';
+import 'react-calendar/dist/Calendar.css';
 import { createPortal } from 'react-dom';
 import { flexRender } from '@tanstack/react-table';
 
@@ -1688,374 +1690,113 @@ const Counter = React.forwardRef(({ value, max, size = "medium", color = "neutra
 });
 Counter.displayName = "Counter";
 
-const dividerVariants = cva("", {
+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: {
-        orientation: {
-            horizontal: "w-full",
-            vertical: "h-full",
-        },
-        thickness: {
-            thinner: "",
-            thin: "",
-            thick: "",
-            thicker: "",
-        },
-        lineStyle: {
-            solid: "border-solid",
-            dashed: "border-dashed",
-        },
-        variant: {
-            normal: "",
-            subtle: "",
-            muted: "",
+        isVisible: {
+            true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
+            false: "opacity-0 pointer-events-none",
         },
     },
-    compoundVariants: [
-        // Horizontal orientation with thickness
-        {
-            orientation: "horizontal",
-            thickness: "thinner",
-            class: "border-t-[0.5px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thin",
-            class: "border-t-[1px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thick",
-            class: "border-t-[2px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thicker",
-            class: "border-t-[3px]",
-        },
-        // Vertical orientation with thickness
-        {
-            orientation: "vertical",
-            thickness: "thinner",
-            class: "border-l-[0.5px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thin",
-            class: "border-l-[1px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thick",
-            class: "border-l-[2px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thicker",
-            class: "border-l-[3px]",
-        },
-        // Normal variant colors
-        {
-            variant: "normal",
-            class: "border-surface-outline-neutral-normal",
-        },
-        // Subtle variant colors
-        {
-            variant: "subtle",
-            class: "border-surface-outline-neutral-subtle",
-        },
-        // Muted variant colors
-        {
-            variant: "muted",
-            class: "border-surface-outline-neutral-muted",
-        },
-    ],
     defaultVariants: {
-        orientation: "horizontal",
-        thickness: "thin",
-        lineStyle: "solid",
-        variant: "normal",
+        isVisible: false,
     },
 });
-const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
-    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
-});
-Divider.displayName = "Divider";
-
-const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+const tooltipArrowVariants = cva("absolute w-0 h-0 border-solid border-[6px] -translate-x-1/2", {
     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: "",
+        placement: {
+            "top-start": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            top: "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            "top-end": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
+            "bottom-start": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
+            bottom: "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
+            "bottom-end": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
         },
     },
     defaultVariants: {
-        variant: "default",
-        isDisabled: false,
-        isSelected: false,
+        placement: "top",
     },
 });
-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)
+const Tooltip = React.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [position, setPosition] = React.useState({ top: 0, left: 0 });
+    const [arrowPosition, setArrowPosition] = React.useState({ left: 0 });
+    const [actualPlacement, setActualPlacement] = React.useState(placement);
+    const timeoutRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const calculatePosition = React.useCallback(() => {
+        if (!triggerRef.current || !tooltipRef.current)
             return;
-        if (type === "multiple") {
-            const newSelected = !internalSelected;
-            setInternalSelected(newSelected);
-            onSelectionChange?.(newSelected);
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const gap = 8; // 8px gap between trigger and tooltip
+        const arrowSize = 6; // Size of the arrow
+        const viewportPadding = 8; // Minimum padding from viewport edges
+        let top = 0;
+        let left = 0;
+        let currentPlacement = placement;
+        // Calculate initial position based on placement
+        switch (placement) {
+            case "top-start":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.left;
+                break;
+            case "top":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left =
+                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "top-end":
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.right - tooltipRect.width;
+                break;
+            case "bottom-start":
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.left;
+                break;
+            case "bottom":
+                top = triggerRect.bottom + gap + arrowSize;
+                left =
+                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case "bottom-end":
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.right - tooltipRect.width;
+                break;
         }
-        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 DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
-    const renderContent = () => {
-        if (isLoading) {
-            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" }) }));
+        // Get viewport dimensions
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Adjust horizontal position to keep tooltip within viewport
+        if (left < viewportPadding) {
+            // Tooltip would overflow on the left
+            left = viewportPadding;
         }
-        if (customContent) {
-            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-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", children: customContent })] }));
+        else if (left + tooltipRect.width > viewportWidth - viewportPadding) {
+            // Tooltip would overflow on the right
+            left = viewportWidth - tooltipRect.width - viewportPadding;
         }
-        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.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
-                            item.onClick?.();
-                            onClose?.();
-                        }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
-    };
-    const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
-    const footerVisible = showFooter ?? !disableFooter;
-    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(), footerVisible && (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";
-
-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 = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...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, customContent: customContent, 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, showFooter: showFooter, 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: {
-            true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
-            false: "opacity-0 pointer-events-none",
-        },
-    },
-    defaultVariants: {
-        isVisible: false,
-    },
-});
-const tooltipArrowVariants = cva("absolute w-0 h-0 border-solid border-[6px] -translate-x-1/2", {
-    variants: {
-        placement: {
-            "top-start": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            top: "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            "top-end": "top-full border-t-popup-fill-intense border-x-transparent border-b-transparent",
-            "bottom-start": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
-            bottom: "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
-            "bottom-end": "bottom-full border-b-popup-fill-intense border-x-transparent border-t-transparent",
-        },
-    },
-    defaultVariants: {
-        placement: "top",
-    },
-});
-const Tooltip = React.forwardRef(({ children, heading, description, placement = "top", showArrow = true, className, delay = 200, disabled = false, }, ref) => {
-    const [isVisible, setIsVisible] = React.useState(false);
-    const [position, setPosition] = React.useState({ top: 0, left: 0 });
-    const [arrowPosition, setArrowPosition] = React.useState({ left: 0 });
-    const [actualPlacement, setActualPlacement] = React.useState(placement);
-    const timeoutRef = React.useRef(null);
-    const triggerRef = React.useRef(null);
-    const tooltipRef = React.useRef(null);
-    const calculatePosition = React.useCallback(() => {
-        if (!triggerRef.current || !tooltipRef.current)
-            return;
-        const triggerRect = triggerRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const gap = 8; // 8px gap between trigger and tooltip
-        const arrowSize = 6; // Size of the arrow
-        const viewportPadding = 8; // Minimum padding from viewport edges
-        let top = 0;
-        let left = 0;
-        let currentPlacement = placement;
-        // Calculate initial position based on placement
-        switch (placement) {
-            case "top-start":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left = triggerRect.left;
-                break;
-            case "top":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left =
-                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-                break;
-            case "top-end":
-                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
-                left = triggerRect.right - tooltipRect.width;
-                break;
-            case "bottom-start":
-                top = triggerRect.bottom + gap + arrowSize;
-                left = triggerRect.left;
-                break;
-            case "bottom":
-                top = triggerRect.bottom + gap + arrowSize;
-                left =
-                    triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-                break;
-            case "bottom-end":
-                top = triggerRect.bottom + gap + arrowSize;
-                left = triggerRect.right - tooltipRect.width;
-                break;
-        }
-        // Get viewport dimensions
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        // Adjust horizontal position to keep tooltip within viewport
-        if (left < viewportPadding) {
-            // Tooltip would overflow on the left
-            left = viewportPadding;
-        }
-        else if (left + tooltipRect.width > viewportWidth - viewportPadding) {
-            // Tooltip would overflow on the right
-            left = viewportWidth - tooltipRect.width - viewportPadding;
-        }
-        // Adjust vertical position to keep tooltip within viewport
-        if (top < viewportPadding) {
-            // Tooltip would overflow at the top
-            // Try to flip to bottom if there's more space there
-            const spaceBelow = viewportHeight - triggerRect.bottom;
-            const spaceAbove = triggerRect.top;
-            if (spaceBelow > spaceAbove) {
-                // Flip to bottom
-                top = triggerRect.bottom + gap + arrowSize;
-                // Update placement to reflect the flip
-                if (placement === "top-start")
-                    currentPlacement = "bottom-start";
-                else if (placement === "top")
-                    currentPlacement = "bottom";
-                else if (placement === "top-end")
-                    currentPlacement = "bottom-end";
-            }
-            else {
-                // Keep at top but adjust to stay in viewport
-                top = viewportPadding;
-            }
+        // Adjust vertical position to keep tooltip within viewport
+        if (top < viewportPadding) {
+            // Tooltip would overflow at the top
+            // Try to flip to bottom if there's more space there
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            if (spaceBelow > spaceAbove) {
+                // Flip to bottom
+                top = triggerRect.bottom + gap + arrowSize;
+                // Update placement to reflect the flip
+                if (placement === "top-start")
+                    currentPlacement = "bottom-start";
+                else if (placement === "top")
+                    currentPlacement = "bottom";
+                else if (placement === "top-end")
+                    currentPlacement = "bottom-end";
+            }
+            else {
+                // Keep at top but adjust to stay in viewport
+                top = viewportPadding;
+            }
         }
         else if (top + tooltipRect.height > viewportHeight - viewportPadding) {
             // Tooltip would overflow at the bottom
@@ -2208,6 +1949,497 @@ const FormHeader = React.forwardRef(({ label, size = "medium", isOptional = fals
 });
 FormHeader.displayName = "FormHeader";
 
+const datePickerVariants = cva("relative flex items-center gap-2 border rounded-large 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,
+    },
+});
+// Helper functions
+const parseDate = (date) => {
+    if (!date)
+        return null;
+    if (date instanceof Date)
+        return date;
+    if (typeof date === "string") {
+        const parsed = new Date(date);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+};
+const formatDateDefault = (date) => {
+    return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+};
+const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate(defaultValue));
+    const [isOpen, setIsOpen] = React.useState(false);
+    const datePickerRef = React.useRef(null);
+    const calendarRef = React.useRef(null);
+    const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const value = controlledValue !== undefined
+        ? parseDate(controlledValue)
+        : uncontrolledValue;
+    const hasValue = value !== null;
+    // Determine which helper text to show
+    const displayHelperText = errorText || successText || helperText;
+    const currentValidationState = errorText
+        ? "negative"
+        : successText
+            ? "positive"
+            : validationState;
+    const handleOpenChange = (newOpen) => {
+        if (!isDisabled) {
+            setIsOpen(newOpen);
+        }
+    };
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
+    };
+    const handleCalendarChange = (value, event) => {
+        // react-calendar can return Date, Date[], or null
+        // We only support single date selection, so we take the first date if it's an array
+        if (!value) {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(null);
+            }
+            onChange?.(null);
+            setIsOpen(false);
+            return;
+        }
+        const selectedDate = Array.isArray(value) ? value[0] : value;
+        // Ensure we have a valid Date object
+        if (selectedDate instanceof Date) {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(selectedDate);
+            }
+            onChange?.(selectedDate);
+            setIsOpen(false);
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (onClear) {
+            onClear();
+        }
+        else {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(null);
+            }
+            onChange?.(null);
+        }
+    };
+    const updateDropdownPlacement = React.useCallback(() => {
+        if (typeof window === "undefined")
+            return;
+        const trigger = datePickerRef.current;
+        if (!trigger)
+            return;
+        const triggerRect = trigger.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        const calendarHeight = calendarRef.current
+            ? calendarRef.current.offsetHeight
+            : 0;
+        if (calendarHeight === 0) {
+            setDropdownPlacement(spaceBelow >= spaceAbove ? "bottom" : "top");
+            return;
+        }
+        if (spaceBelow >= calendarHeight || spaceBelow >= spaceAbove) {
+            setDropdownPlacement("bottom");
+        }
+        else {
+            setDropdownPlacement("top");
+        }
+    }, []);
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        if (typeof window === "undefined")
+            return;
+        let rafId = requestAnimationFrame(updateDropdownPlacement);
+        const handleUpdate = () => updateDropdownPlacement();
+        window.addEventListener("resize", handleUpdate);
+        window.addEventListener("scroll", handleUpdate, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            window.removeEventListener("resize", handleUpdate);
+            window.removeEventListener("scroll", handleUpdate, true);
+        };
+    }, [isOpen, updateDropdownPlacement]);
+    React.useEffect(() => {
+        if (isOpen) {
+            updateDropdownPlacement();
+        }
+    }, [isOpen, updateDropdownPlacement]);
+    // Close calendar when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (datePickerRef.current &&
+                !datePickerRef.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 minDateParsed = parseDate(minDate);
+    const maxDateParsed = parseDate(maxDate);
+    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: datePickerRef, className: cn(datePickerVariants({
+                    size,
+                    validationState: currentValidationState,
+                    isDisabled,
+                }), "relative w-full cursor-pointer", className), onClick: !isDisabled ? toggleOpen : undefined, role: "button", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [jsx(Calendar, { className: cn("shrink-0 w-4 h-4", 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") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: hasValue && value ? formatDate(value) : placeholder }), 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" }) }) })), isOpen && !isDisabled && (jsx("div", { ref: calendarRef, className: cn("absolute z-50 left-0 bg-surface-fill-neutral-intense rounded-large shadow-lg p-4", dropdownPlacement === "bottom"
+                            ? "top-full mt-1"
+                            : "bottom-full mb-1", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
+                                    const weekdayNames = [
+                                        "Su",
+                                        "Mo",
+                                        "Tu",
+                                        "We",
+                                        "Th",
+                                        "Fr",
+                                        "Sa",
+                                    ];
+                                    return weekdayNames[date.getDay()];
+                                } }) }) }))] }), jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    ? "default"
+                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+});
+DatePicker.displayName = "DatePicker";
+
+const dividerVariants = cva("", {
+    variants: {
+        orientation: {
+            horizontal: "w-full",
+            vertical: "h-full",
+        },
+        thickness: {
+            thinner: "",
+            thin: "",
+            thick: "",
+            thicker: "",
+        },
+        lineStyle: {
+            solid: "border-solid",
+            dashed: "border-dashed",
+        },
+        variant: {
+            normal: "",
+            subtle: "",
+            muted: "",
+        },
+    },
+    compoundVariants: [
+        // Horizontal orientation with thickness
+        {
+            orientation: "horizontal",
+            thickness: "thinner",
+            class: "border-t-[0.5px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thin",
+            class: "border-t-[1px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thick",
+            class: "border-t-[2px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thicker",
+            class: "border-t-[3px]",
+        },
+        // Vertical orientation with thickness
+        {
+            orientation: "vertical",
+            thickness: "thinner",
+            class: "border-l-[0.5px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thin",
+            class: "border-l-[1px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thick",
+            class: "border-l-[2px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thicker",
+            class: "border-l-[3px]",
+        },
+        // Normal variant colors
+        {
+            variant: "normal",
+            class: "border-surface-outline-neutral-normal",
+        },
+        // Subtle variant colors
+        {
+            variant: "subtle",
+            class: "border-surface-outline-neutral-subtle",
+        },
+        // Muted variant colors
+        {
+            variant: "muted",
+            class: "border-surface-outline-neutral-muted",
+        },
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        thickness: "thin",
+        lineStyle: "solid",
+        variant: "normal",
+    },
+});
+const Divider = React.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+});
+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 DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
+    const renderContent = () => {
+        if (isLoading) {
+            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 (customContent) {
+            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-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", children: customContent })] }));
+        }
+        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.label, description: item.description, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, showChevron: showChevron, isDisabled: item.isDisabled, isSelected: index === focusedIndex, variant: item.variant, onClick: () => {
+                            item.onClick?.();
+                            onClose?.();
+                        }, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.value))) })] }));
+    };
+    const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
+    const footerVisible = showFooter ?? !disableFooter;
+    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(), footerVisible && (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";
+
+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 = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...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, customContent: customContent, 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, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
+});
+Dropdown.displayName = "Dropdown";
+
 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;
@@ -3713,5 +3945,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map