infinity-ui-elements 1.9.13 → 1.9.16

package/dist/index.esm.js

@@ -198,10 +198,10 @@ const buttonVariants = cva("items-center gap-3 justify-center whitespace-nowrap
             white: "",
         },
         size: {
-            xsmall: "md:h-[28px] px-3 rounded-medium text-body-small-medium",
-            small: "md:h-[32px] px-4 rounded-medium text-body-small-medium",
-            medium: "md:h-[36px] px-5 py-2 rounded-large text-body-medium-medium",
-            large: "md:h-[44px] px-6 rounded-large text-body-large-medium",
+            xsmall: "h-[28px] px-3 rounded-medium text-body-small-medium",
+            small: "h-[32px] px-4 rounded-medium text-body-small-medium",
+            medium: "h-[36px] px-5 py-2 rounded-large text-body-medium-medium",
+            large: "h-[44px] px-6 rounded-large text-body-large-medium",
         },
         isIconOnly: {
             true: "aspect-square p-0",
@@ -498,7 +498,7 @@ const Button = React.forwardRef(({ className, variant = "primary", color = "prim
         }
         return `var(--color-action-ink-${color}-normal)`;
     };
-    const buttonContent = (jsxs(Fragment, { children: [isLoading && !isIconOnly && (jsx(PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsx(ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && jsx("span", { children: leadingIcon }), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsx("span", { children: trailingIcon })] }));
+    const buttonContent = (jsxs(Fragment, { children: [isLoading && !isIconOnly && (jsx(PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsx(ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && (jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsx("span", { children: trailingIcon })] }));
     return (jsx(Comp, { className: cn(buttonVariants({
             variant,
             color,
@@ -1317,6 +1317,183 @@ const Badge = React.forwardRef(({ className, variant, size, color, showDot = fal
 });
 Badge.displayName = "Badge";
 
+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 BottomSheet = React.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
+    const sheetRef = React.useRef(null);
+    const contentRef = ref || sheetRef;
+    const [isClosing, setIsClosing] = React.useState(false);
+    const [touchStart, setTouchStart] = React.useState(null);
+    const [touchEnd, setTouchEnd] = React.useState(null);
+    // Handle escape key
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape || !onClose)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape, onClose]);
+    // Prevent body scroll when bottom sheet is open
+    React.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Reset closing state when opening
+    React.useEffect(() => {
+        if (isOpen) {
+            setIsClosing(false);
+        }
+    }, [isOpen]);
+    // Handle close with animation
+    const handleClose = () => {
+        if (!onClose)
+            return;
+        setIsClosing(true);
+        // Wait for animation to complete before calling onClose
+        setTimeout(() => {
+            onClose();
+            setIsClosing(false);
+        }, 300); // Match animation duration
+    };
+    // Handle overlay click
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+        }
+    };
+    // Handle touch events for swipe down
+    const handleTouchStart = (e) => {
+        if (!closeOnSwipeDown)
+            return;
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientY);
+    };
+    const handleTouchMove = (e) => {
+        if (!closeOnSwipeDown)
+            return;
+        setTouchEnd(e.targetTouches[0].clientY);
+    };
+    const handleTouchEnd = () => {
+        if (!closeOnSwipeDown || !touchStart || !touchEnd)
+            return;
+        const distance = touchEnd - touchStart;
+        const isSwipeDown = distance > 100; // Minimum swipe distance
+        if (isSwipeDown) {
+            handleClose();
+        }
+        setTouchStart(null);
+        setTouchEnd(null);
+    };
+    // Don't render if not open and not closing
+    if (!isOpen && !isClosing)
+        return null;
+    const hasHeader = title || description;
+    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-end justify-center", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", contentClassName), style: { maxHeight }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsx("div", { className: "flex justify-center pt-3 pb-2", children: jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && !showDragHandle && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && "pt-2 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
+});
+BottomSheet.displayName = "BottomSheet";
+
 const buttonGroupVariants = cva("inline-flex", {
     variants: {
         variant: {
@@ -1655,175 +1832,6 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
 });
 Checkbox.displayName = "Checkbox";
 
-const chipVariants = cva("inline-flex items-center justify-center whitespace-nowrap rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none", {
-    variants: {
-        intent: {
-            primary: "",
-            positive: "",
-            negative: "",
-        },
-        selection: {
-            default: "",
-            light: "",
-            intense: "",
-        },
-        size: {
-            xsmall: "h-[24px] px-3 gap-2 text-body-small-medium",
-            small: "h-[28px] px-4 gap-2 text-body-medium-medium",
-            medium: "h-[36px] px-5 gap-3 text-body-large-medium",
-            large: "h-[44px] px-6 gap-3 text-heading-medium-medium",
-        },
-        isDisabled: {
-            true: "cursor-not-allowed",
-            false: "cursor-pointer",
-        },
-    },
-    compoundVariants: [
-        // Selection: default (neutral chip, intent influences focus ring/border)
-        {
-            selection: "default",
-            class: `
-          bg-surface-fill-neutral-intense
-          text-action-ink-neutral-normal
-          border-action-outline-neutral-faded
-          hover:bg-action-fill-neutral-faded-hover
-          hover:border-action-outline-neutral-faded-hover
-          active:bg-action-fill-neutral-faded-activated
-          active:border-action-outline-neutral-faded-activated
-          disabled:bg-surface-fill-neutral-moderate
-          disabled:text-surface-ink-neutral-disabled
-          disabled:border-action-outline-neutral-disabled
-        `,
-        },
-        {
-            selection: "default",
-            intent: "primary",
-            class: "focus-visible:ring-action-outline-primary-faded-hover focus-visible:border-action-outline-primary-faded-hover",
-        },
-        {
-            selection: "default",
-            intent: "positive",
-            class: "focus-visible:ring-action-outline-positive-faded-hover focus-visible:border-action-outline-positive-faded-hover",
-        },
-        {
-            selection: "default",
-            intent: "negative",
-            class: "focus-visible:ring-action-outline-negative-faded-hover focus-visible:border-action-outline-negative-faded-hover",
-        },
-        // Selection: light
-        {
-            selection: "light",
-            intent: "primary",
-            class: `
-          bg-action-fill-primary-faded
-          text-action-ink-primary-normal
-          border-action-outline-primary-faded
-          hover:bg-action-fill-primary-faded-hover
-          hover:border-action-outline-primary-faded-hover
-          active:bg-action-fill-primary-faded-activated
-          active:border-action-outline-primary-faded-activated
-          focus-visible:ring-action-outline-primary-faded-hover
-          disabled:bg-action-fill-primary-disabled
-          disabled:text-action-ink-primary-disabled
-          disabled:border-action-outline-primary-disabled
-        `,
-        },
-        {
-            selection: "light",
-            intent: "positive",
-            class: `
-          bg-action-fill-positive-faded
-          text-action-ink-positive-normal
-          border-action-outline-positive-faded
-          hover:bg-action-fill-positive-faded-hover
-          hover:border-action-outline-positive-faded-hover
-          active:bg-action-fill-positive-faded-activated
-          active:border-action-outline-positive-faded-activated
-          focus-visible:ring-action-outline-positive-faded-hover
-          disabled:bg-action-fill-positive-disabled
-          disabled:text-action-ink-positive-disabled
-          disabled:border-action-outline-positive-disabled
-        `,
-        },
-        {
-            selection: "light",
-            intent: "negative",
-            class: `
-          bg-action-fill-negative-faded
-          text-action-ink-negative-normal
-          border-action-outline-negative-faded
-          hover:bg-action-fill-negative-faded-hover
-          hover:border-action-outline-negative-faded-hover
-          active:bg-action-fill-negative-faded-activated
-          active:border-action-outline-negative-faded-activated
-          focus-visible:ring-action-outline-negative-faded-hover
-          disabled:bg-action-fill-negative-disabled
-          disabled:text-action-ink-negative-disabled
-          disabled:border-action-outline-negative-disabled
-        `,
-        },
-        // Selection: intense
-        {
-            selection: "intense",
-            intent: "primary",
-            class: `
-          bg-action-fill-primary-default
-          text-action-ink-on-primary-normal
-          border-transparent
-          hover:bg-action-fill-primary-hover
-          active:bg-action-fill-primary-activated
-          focus-visible:ring-action-outline-primary-faded-hover
-          disabled:bg-action-fill-primary-disabled
-          disabled:text-action-ink-primary-disabled
-        `,
-        },
-        {
-            selection: "intense",
-            intent: "positive",
-            class: `
-          bg-action-fill-positive-default
-          text-action-ink-on-primary-normal
-          border-transparent
-          hover:bg-action-fill-positive-hover
-          active:bg-action-fill-positive-activated
-          focus-visible:ring-action-outline-positive-faded-hover
-          disabled:bg-action-fill-positive-disabled
-          disabled:text-action-ink-positive-disabled
-        `,
-        },
-        {
-            selection: "intense",
-            intent: "negative",
-            class: `
-          bg-action-fill-negative-default
-          text-action-ink-on-primary-normal
-          border-transparent
-          hover:bg-action-fill-negative-hover
-          active:bg-action-fill-negative-activated
-          focus-visible:ring-action-outline-negative-faded-hover
-          disabled:bg-action-fill-negative-disabled
-          disabled:text-action-ink-negative-disabled
-        `,
-        },
-    ],
-    defaultVariants: {
-        intent: "primary",
-        selection: "default",
-        size: "medium",
-        isDisabled: false,
-    },
-});
-const Chip = React.forwardRef(({ className, intent = "primary", selection = "default", size = "medium", isDisabled = false, leadingComponent, trailingComponent, disabled, children, type, ...props }, ref) => {
-    const finalDisabled = Boolean(disabled || isDisabled);
-    return (jsxs("button", { ref: ref, type: type ?? "button", disabled: finalDisabled, className: cn(chipVariants({
-            intent,
-            selection,
-            size,
-            isDisabled: finalDisabled,
-        }), className), ...props, children: [leadingComponent && (jsx("span", { className: "inline-flex items-center", children: leadingComponent })), jsx("span", { className: "inline-flex items-center", children: children }), trailingComponent && (jsx("span", { className: "inline-flex items-center", children: trailingComponent }))] }));
-});
-Chip.displayName = "Chip";
-
 const counterVariants = cva("inline-flex items-center justify-center  transition-colors", {
     variants: {
         size: {
@@ -2613,7 +2621,7 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
 });
 DatePicker.displayName = "DatePicker";
 
-const listItemVariants = cva("flex  gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+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
@@ -2679,7 +2687,7 @@ const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, ti
             variant,
             isDisabled,
             isSelected: type === "multiple" ? internalSelected : false,
-        }), description ? "items-start" : "items-center", 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"
+        }), 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"
@@ -2814,7 +2822,7 @@ const formatMonthYear = (date) => {
         year: "numeric",
     });
 };
-const DateRangePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select date range", isDisabled = false, size = "medium", trigger, renderTrigger, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, presets = defaultPresets, showPresets = true, selectedPresetLabel, ...props }, ref) => {
+const DateRangePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select date range", isDisabled = false, size = "medium", triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, presets = defaultPresets, showPresets = true, selectedPresetLabel, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue || { startDate: null, endDate: null });
     const [tempValue, setTempValue] = React.useState(defaultValue || { startDate: null, endDate: null });
     const [isOpen, setIsOpen] = React.useState(false);
@@ -3037,19 +3045,14 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
         }
         return placeholder;
     };
-    const displayText = getDisplayText();
-    // Render custom trigger if provided
-    const triggerElement = renderTrigger ? (renderTrigger({ displayText, isOpen, onClick: toggleOpen })) : trigger ? (jsx("div", { onClick: !isDisabled ? toggleOpen : undefined, children: trigger })) : (
-    // Default trigger
-    jsxs("div", { className: cn(dateRangePickerVariants({
-            size,
-            isDisabled,
-        }), "cursor-pointer", triggerClassName), 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"
-                    : "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: displayText }), jsx(Icon, { name: "chevronDown", size: 16, className: cn("shrink-0 transition-transform", isDisabled
-                    ? "text-surface-ink-neutral-disabled"
-                    : "text-surface-ink-neutral-muted", isOpen && "rotate-180") })] }));
-    return (jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [triggerElement, typeof document !== "undefined" &&
+    return (jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [jsxs("div", { className: cn(dateRangePickerVariants({
+                    size,
+                    isDisabled,
+                }), "cursor-pointer", triggerClassName), 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"
+                            : "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: getDisplayText() }), jsx(Icon, { name: "chevronDown", size: 16, className: cn("shrink-0 transition-transform", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-muted", isOpen && "rotate-180") })] }), typeof document !== "undefined" &&
                 isOpen &&
                 !isDisabled &&
                 (() => {
@@ -3068,7 +3071,7 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
                                 ? `${window.innerHeight - position.bottom - gap - 10}px`
                                 : `${position.top - gap - 10}px`,
                             overflowY: "auto",
-                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg border-[0.5px] border-surface-outline-neutral-subtle", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxs("div", { className: "flex flex-col", children: [jsxs("div", { className: "flex flex-row p-7 gap-7", children: [showPresets && presets.length > 0 && (jsx("div", { className: "w-[160px] flex flex-col gap-2", children: presets.map((preset) => (jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "px-4 py-3" }, preset.value))) })), jsxs("div", { className: "flex gap-7", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
+                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg border border-surface-outline-neutral-subtle", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxs("div", { className: "flex", children: [showPresets && presets.length > 0 && (jsx("div", { className: "w-48 border-r border-surface-outline-neutral-subtle p-4 flex flex-col", children: presets.map((preset) => (jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "mb-1 last:mb-0" }, preset.value))) })), jsxs("div", { className: "p-4", children: [jsxs("div", { className: "flex gap-6", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
                                                                             ? tempValue.endDate
                                                                             : maxDateParsed ?? undefined, activeStartDate: startMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
                                                                             if (activeStartDate)
@@ -3100,113 +3103,20 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
                                                                                 "SAT",
                                                                             ];
                                                                             return weekdayNames[date.getDay()];
-                                                                        } }) })] })] })] })] }), jsxs("div", { className: "border-t-[0.5px] border-surface-outline-neutral-subtle flex  px-8 py-5 items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsx("span", { className: "text-sm text-surface-ink-neutral-normal", children: tempValue.startDate && tempValue.endDate
-                                                        ? isSameDay(tempValue.startDate, tempValue.endDate)
-                                                            ? "Today"
-                                                            : `${formatDate(tempValue.startDate)} - ${formatDate(tempValue.endDate)}`
-                                                        : tempValue.startDate
-                                                            ? `From ${formatDate(tempValue.startDate)}`
-                                                            : tempValue.endDate
-                                                                ? `Until ${formatDate(tempValue.endDate)}`
-                                                                : "No selection" })] }), jsxs("div", { className: "flex items-center gap-4", children: [jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] }) }));
+                                                                        } }) })] })] })] }), jsxs("div", { className: "mt-4 pt-4 border-t border-surface-outline-neutral-subtle flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsx("span", { className: "text-sm text-surface-ink-neutral-normal", children: tempValue.startDate && tempValue.endDate
+                                                                ? isSameDay(tempValue.startDate, tempValue.endDate)
+                                                                    ? "Today"
+                                                                    : `${formatDate(tempValue.startDate)} - ${formatDate(tempValue.endDate)}`
+                                                                : tempValue.startDate
+                                                                    ? `From ${formatDate(tempValue.startDate)}`
+                                                                    : tempValue.endDate
+                                                                        ? `Until ${formatDate(tempValue.endDate)}`
+                                                                        : "No selection" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] })] }) }));
                     return createPortal(calendarPopup, document.body);
                 })()] }));
 });
 DateRangePicker.displayName = "DateRangePicker";
 
-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 DropdownMenu = React.forwardRef(({ items = [], customContent, customContentClassName, 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", maxHeight = "400px", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
@@ -3429,7 +3339,7 @@ const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, c
     if (!isOpen)
         return null;
     const hasHeader = title || description;
-    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center p-4", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative transition-all z-10", "flex flex-col max-h-[90vh]", variant === "default" && "w-full bg-white rounded-large shadow-xl", variant === "default" && sizeConfig[size], contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4 px-6 pt-6", !description && "pb-4", description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: "absolute top-4 right-4 z-10", children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && "pt-6 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 pt-5 pb-6", footerClassName), children: footer })] }))] })] }));
+    return (jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center p-4", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxs("div", { ref: contentRef, className: cn("relative transition-all z-10", "flex flex-col max-h-[90vh]", variant === "default" && "w-full bg-white rounded-large shadow-xl", variant === "default" && sizeConfig[size], contentClassName), children: [hasHeader && (jsxs("div", { className: cn("flex items-start justify-between gap-4", variant === "default" && "px-6 pt-6", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal" }) })), jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && "pt-6 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 Modal.displayName = "Modal";
 
@@ -4788,7 +4698,7 @@ const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-po
             false: "",
         },
         isDisabled: {
-            true: "cursor-not-allowed bg-surface-fill-neutral-moderate",
+            true: "cursor-not-allowed opacity-60",
             false: "",
         },
         isFocused: {
@@ -5224,12 +5134,11 @@ function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className,
     return (jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsx("div", { className: cn("w-10 h-10 rounded-full flex items-center justify-center text-body-medium-medium", `bg-${color}`), children: initials || name.charAt(0).toUpperCase() })), jsxs("div", { className: "flex flex-col", children: [jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
 }
 
-const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer`, {
+const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative cursor-pointer -mb-[1.5px]`, {
     variants: {
         variant: {
-            bordered: "border-b-[1.5px] -mb-[1.5px]",
-            borderless: "border-b-[1.5px] -mb-[1.5px]",
-            segmented: "rounded-lg",
+            bordered: "border-b-[1.5px]",
+            borderless: "border-b-[1.5px]",
         },
         size: {
             small: "px-2 py-3 h-9",
@@ -5302,44 +5211,6 @@ const tabItemVariants = cva(`inline-flex items-center justify-center gap-3 white
             isDisabled: true,
             class: "text-text-body-disabled border-b-transparent",
         },
-        // Segmented variant - not selected
-        {
-            variant: "segmented",
-            isSelected: false,
-            isDisabled: false,
-            class: `text-action-ink-neutral-muted
-          hover:text-action-ink-neutral-subtle
-          hover:bg-action-fill-neutral-faded-hover`,
-        },
-        // Segmented variant - selected
-        {
-            variant: "segmented",
-            isSelected: true,
-            isDisabled: false,
-            class: "bg-action-fill-primary-faded text-action-ink-primary-subtle hover:text-action-ink-primary-normal",
-        },
-        // Segmented variant - disabled
-        {
-            variant: "segmented",
-            isDisabled: true,
-            class: "text-text-body-disabled bg-transparent",
-        },
-        // Segmented variant - size overrides (more compact)
-        {
-            variant: "segmented",
-            size: "small",
-            class: "px-3 py-1.5 h-auto! rounded-[4px]",
-        },
-        {
-            variant: "segmented",
-            size: "medium",
-            class: "px-4 py-2 h-auto! rounded-[4px]",
-        },
-        {
-            variant: "segmented",
-            size: "large",
-            class: "py-2 px-4 h-auto! rounded-[4px]",
-        },
     ],
     defaultVariants: {
         variant: "bordered",
@@ -5375,11 +5246,9 @@ const Tabs = React.forwardRef(({ tabs, selectedTabId, defaultSelectedTabId, onTa
     };
     // Get the active tab content
     const activeTab = tabs.find((tab) => tab.id === activeTabId);
-    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsx("div", { role: "tablist", className: cn("inline-flex items-center", {
+    return (jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsx("div", { role: "tablist", className: cn("inline-flex items-center gap-4", {
                     "w-full": isFullWidth,
-                    "gap-4": variant === "bordered" || variant === "borderless",
-                    "border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
-                    "gap-1 p-1 rounded-xl bg-surface-background-neutral-faded-default": variant === "segmented",
+                    "border-b border-b-[1.5px] border-surface-outline-neutral-muted": variant === "bordered",
                 }, tabListClassName), children: tabs.map((tab) => (jsx(TabItem, { id: String(tab.id), leadingComponent: tab.leadingComponent, title: tab.title, trailingComponent: tab.trailingComponent, isSelected: tab.id === activeTabId, isDisabled: tab.isDisabled, variant: variant, size: size, isFullWidth: isFullWidth, onClick: () => !tab.isDisabled && handleTabClick(tab.id) }, tab.id))) }), renderContent && activeTab?.content && (jsx("div", { role: "tabpanel", className: cn("mt-4", contentClassName), "aria-labelledby": String(activeTabId), children: activeTab.content }))] }));
 });
 Tabs.displayName = "Tabs";
@@ -6163,5 +6032,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Chip, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, chipVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
+export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map