infinity-ui-elements 1.9.12 → 1.9.15

package/dist/index.js

@@ -219,10 +219,10 @@ const buttonVariants = classVarianceAuthority.cva("items-center gap-3 justify-ce
             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",
@@ -519,7 +519,7 @@ const Button = React__namespace.forwardRef(({ className, variant = "primary", co
         }
         return `var(--color-action-ink-${color}-normal)`;
     };
-    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(reactSpinners.PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(reactSpinners.ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && jsxRuntime.jsx("span", { children: leadingIcon }), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
+    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && !isIconOnly && (jsxRuntime.jsx(reactSpinners.PulseLoader, { color: getLoaderColor(), size: 10 })), isLoading && isIconOnly && (jsxRuntime.jsx(reactSpinners.ClipLoader, { color: getLoaderColor(), size: 20 })), !isLoading && leadingIcon && (jsxRuntime.jsx("span", { className: "mr-2", children: leadingIcon })), !isIconOnly && !isLoading && children, isIconOnly && !isLoading && children, !isLoading && trailingIcon && jsxRuntime.jsx("span", { children: trailingIcon })] }));
     return (jsxRuntime.jsx(Comp, { className: cn(buttonVariants({
             variant,
             color,
@@ -1676,175 +1676,6 @@ const Checkbox = React__namespace.forwardRef(({ label, errorText, size = "medium
 });
 Checkbox.displayName = "Checkbox";
 
-const chipVariants = classVarianceAuthority.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__namespace.forwardRef(({ className, intent = "primary", selection = "default", size = "medium", isDisabled = false, leadingComponent, trailingComponent, disabled, children, type, ...props }, ref) => {
-    const finalDisabled = Boolean(disabled || isDisabled);
-    return (jsxRuntime.jsxs("button", { ref: ref, type: type ?? "button", disabled: finalDisabled, className: cn(chipVariants({
-            intent,
-            selection,
-            size,
-            isDisabled: finalDisabled,
-        }), className), ...props, children: [leadingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: leadingComponent })), jsxRuntime.jsx("span", { className: "inline-flex items-center", children: children }), trailingComponent && (jsxRuntime.jsx("span", { className: "inline-flex items-center", children: trailingComponent }))] }));
-});
-Chip.displayName = "Chip";
-
 const counterVariants = classVarianceAuthority.cva("inline-flex items-center justify-center  transition-colors", {
     variants: {
         size: {
@@ -2634,7 +2465,7 @@ const DatePicker = React__namespace.forwardRef(({ className, value: controlledVa
 });
 DatePicker.displayName = "DatePicker";
 
-const listItemVariants = classVarianceAuthority.cva("flex  gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+const listItemVariants = classVarianceAuthority.cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
     variants: {
         variant: {
             default: `hover:bg-action-fill-neutral-faded
@@ -2700,7 +2531,7 @@ const ListItem = React__namespace.forwardRef(({ className, type = "single", lead
             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" && (jsxRuntime.jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsxRuntime.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" && (jsxRuntime.jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsxRuntime.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"
@@ -2835,7 +2666,7 @@ const formatMonthYear = (date) => {
         year: "numeric",
     });
 };
-const DateRangePicker = React__namespace.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__namespace.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__namespace.useState(defaultValue || { startDate: null, endDate: null });
     const [tempValue, setTempValue] = React__namespace.useState(defaultValue || { startDate: null, endDate: null });
     const [isOpen, setIsOpen] = React__namespace.useState(false);
@@ -3058,19 +2889,14 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
         }
         return placeholder;
     };
-    const displayText = getDisplayText();
-    // Render custom trigger if provided
-    const triggerElement = renderTrigger ? (renderTrigger({ displayText, isOpen, onClick: toggleOpen })) : trigger ? (jsxRuntime.jsx("div", { onClick: !isDisabled ? toggleOpen : undefined, children: trigger })) : (
-    // Default trigger
-    jsxRuntime.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: [jsxRuntime.jsx(lucideReact.Calendar, { className: cn("shrink-0 w-4 h-4", isDisabled
-                    ? "text-surface-ink-neutral-disabled"
-                    : "text-surface-ink-neutral-muted") }), jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: displayText }), jsxRuntime.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 (jsxRuntime.jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [triggerElement, typeof document !== "undefined" &&
+    return (jsxRuntime.jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [jsxRuntime.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: [jsxRuntime.jsx(lucideReact.Calendar, { className: cn("shrink-0 w-4 h-4", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-muted") }), jsxRuntime.jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: getDisplayText() }), jsxRuntime.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 &&
                 (() => {
@@ -3089,7 +2915,7 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
                                 ? `${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: jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsxs("div", { className: "flex flex-row p-7 gap-7", children: [showPresets && presets.length > 0 && (jsxRuntime.jsx("div", { className: "w-[160px] flex flex-col gap-2", children: presets.map((preset) => (jsxRuntime.jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "px-4 py-3" }, preset.value))) })), jsxRuntime.jsxs("div", { className: "flex gap-7", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col px-3", children: jsxRuntime.jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsxRuntime.jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsxRuntime.jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsxRuntime.jsx("div", { className: "date-range-calendar-wrapper", children: jsxRuntime.jsx(Calendar, { 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: jsxRuntime.jsxs("div", { className: "flex", children: [showPresets && presets.length > 0 && (jsxRuntime.jsx("div", { className: "w-48 border-r border-surface-outline-neutral-subtle p-4 flex flex-col", children: presets.map((preset) => (jsxRuntime.jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "mb-1 last:mb-0" }, preset.value))) })), jsxRuntime.jsxs("div", { className: "p-4", children: [jsxRuntime.jsxs("div", { className: "flex gap-6", children: [jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [jsxRuntime.jsx("div", { className: "flex flex-col px-3", children: jsxRuntime.jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxRuntime.jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsxRuntime.jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsxRuntime.jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsxRuntime.jsx("div", { className: "date-range-calendar-wrapper", children: jsxRuntime.jsx(Calendar, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
                                                                             ? tempValue.endDate
                                                                             : maxDateParsed ?? undefined, activeStartDate: startMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
                                                                             if (activeStartDate)
@@ -3121,15 +2947,15 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
                                                                                 "SAT",
                                                                             ];
                                                                             return weekdayNames[date.getDay()];
-                                                                        } }) })] })] })] })] }), jsxRuntime.jsxs("div", { className: "border-t-[0.5px] border-surface-outline-neutral-subtle flex  px-8 py-5 items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] }) }));
+                                                                        } }) })] })] })] }), jsxRuntime.jsxs("div", { className: "mt-4 pt-4 border-t border-surface-outline-neutral-subtle flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsxRuntime.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" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsxRuntime.jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] })] }) }));
                     return reactDom.createPortal(calendarPopup, document.body);
                 })()] }));
 });
@@ -3450,7 +3276,7 @@ const Modal = React__namespace.forwardRef(({ isOpen, onClose, title, description
     if (!isOpen)
         return null;
     const hasHeader = title || description;
-    return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4 px-6 pt-6", !description && "pb-4", description && "pb-2", headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal" }) })), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" })), jsxRuntime.jsx("div", { className: cn("flex items-center justify-end gap-3 px-6 pt-5 pb-6", footerClassName), children: footer })] }))] })] }));
+    return (jsxRuntime.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: [jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.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 && (jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex-1", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: onClose, color: "neutral", size: "small", "aria-label": "Close modal" }) })), jsxRuntime.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 && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" })), jsxRuntime.jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
 });
 Modal.displayName = "Modal";
 
@@ -4809,7 +4635,7 @@ const switchVariants = classVarianceAuthority.cva("relative inline-flex items-ce
             false: "",
         },
         isDisabled: {
-            true: "cursor-not-allowed bg-surface-fill-neutral-moderate",
+            true: "cursor-not-allowed opacity-60",
             false: "",
         },
         isFocused: {
@@ -5245,12 +5071,11 @@ function AvatarCell({ name, initials, avatar, subtitle, color = "a1", className,
     return (jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3", className), children: [avatar ? (jsxRuntime.jsx("img", { src: avatar, alt: name, className: "w-10 h-10 rounded-full object-cover" })) : (jsxRuntime.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() })), jsxRuntime.jsxs("div", { className: "flex flex-col", children: [jsxRuntime.jsx("div", { className: "text-body-medium-medium text-surface-ink-neutral-normal", children: name }), subtitle && (jsxRuntime.jsx("div", { className: "text-body-small-regular text-surface-ink-neutral-muted", children: subtitle }))] })] }));
 }
 
-const tabItemVariants = classVarianceAuthority.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 = classVarianceAuthority.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",
@@ -5323,44 +5148,6 @@ const tabItemVariants = classVarianceAuthority.cva(`inline-flex items-center jus
             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-8",
-        },
-        {
-            variant: "segmented",
-            size: "medium",
-            class: "px-4 py-2 h-9",
-        },
-        {
-            variant: "segmented",
-            size: "large",
-            class: "px-4 py-2.5 h-10",
-        },
     ],
     defaultVariants: {
         variant: "bordered",
@@ -5396,11 +5183,9 @@ const Tabs = React__namespace.forwardRef(({ tabs, selectedTabId, defaultSelected
     };
     // Get the active tab content
     const activeTab = tabs.find((tab) => tab.id === activeTabId);
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxRuntime.jsx("div", { role: "tablist", className: cn("inline-flex items-center", {
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("w-full", className), ...props, children: [jsxRuntime.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) => (jsxRuntime.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 && (jsxRuntime.jsx("div", { role: "tabpanel", className: cn("mt-4", contentClassName), "aria-labelledby": String(activeTabId), children: activeTab.content }))] }));
 });
 Tabs.displayName = "Tabs";
@@ -6192,7 +5977,6 @@ exports.Badge = Badge;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Checkbox = Checkbox;
-exports.Chip = Chip;
 exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
@@ -6236,7 +6020,6 @@ exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
 exports.checkboxVariants = checkboxVariants;
-exports.chipVariants = chipVariants;
 exports.cn = cn;
 exports.counterVariants = counterVariants;
 exports.datePickerVariants = datePickerVariants;