infinity-ui-elements 1.9.12 → 1.9.15

package/dist/index.d.ts

@@ -5,7 +5,6 @@ export * from "./components/Badge";
 export * from "./components/Button";
 export * from "./components/ButtonGroup";
 export * from "./components/Checkbox";
-export * from "./components/Chip";
 export * from "./components/Counter";
 export * from "./components/DatePicker";
 export * from "./components/DateRangePicker";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}

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,
@@ -1655,175 +1655,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 +2444,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 +2510,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 +2645,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 +2868,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 +2894,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,15 +2926,15 @@ 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);
                 })()] }));
 });
@@ -3429,7 +3255,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 +4614,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 +5050,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 +5127,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-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",
@@ -5375,11 +5162,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 +5948,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, 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