@caratlogic/design-system 0.1.40 → 0.1.42

package/dist/ui.esm.js

@@ -3162,7 +3162,7 @@ function MultiSelect({ children, values, defaultValues, onValuesChange, }) {
 }
 function MultiSelectTrigger({ className, children, ...props }) {
     const { open } = useMultiSelectContext();
-    return (jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { ...props, variant: props.variant ?? 'outline', role: props.role ?? 'combobox', "aria-expanded": props['aria-expanded'] ?? open, className: cn("flex h-auto min-h-9 w-fit items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), children: [children, jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" })] }) }));
+    return (jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { ...props, variant: props.variant ?? 'outline', role: props.role ?? 'combobox', "aria-expanded": props['aria-expanded'] ?? open, className: cn("flex h-auto min-h-9 w-fit items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm whitespace-nowrap shadow-xs has-[[data-selected-item]]:p-[3px] transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), children: [children, jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" })] }) }));
 }
 function MultiSelectValue({ placeholder, clickToRemove = true, className, overflowBehavior = 'wrap-when-open', ...props }) {
     const { selectedValues, toggleValue, items, open } = useMultiSelectContext();
@@ -3207,16 +3207,16 @@ function MultiSelectValue({ placeholder, clickToRemove = true, className, overfl
     if (selectedValues.size === 0 && placeholder) {
         return (jsx("span", { className: "min-w-0 overflow-hidden font-normal text-muted-foreground", children: placeholder }));
     }
-    return (jsxs("div", { ...props, ref: handleResize, className: cn('flex w-full gap-1.5 overflow-hidden', shouldWrap && 'h-full flex-wrap', className), children: [[...selectedValues]
+    return (jsxs("div", { ...props, ref: handleResize, className: cn('flex w-full gap-1 overflow-hidden', shouldWrap && 'h-full flex-wrap', className), children: [[...selectedValues]
                 .filter((value) => items.has(value))
-                .map((value) => (jsxs(Badge, { variant: "outline", "data-selected-item": true, className: cn('group flex items-center gap-1', clickToRemove && 'cursor-pointer'), onClick: clickToRemove
+                .map((value) => (jsxs(Badge, { variant: "outline", "data-selected-item": true, className: cn('group flex h-7 items-center gap-1.5 px-3 text-sm', clickToRemove && 'cursor-pointer'), onClick: clickToRemove
                     ? (e) => {
                         e.stopPropagation();
                         toggleValue(value);
                     }
-                    : undefined, children: [items.get(value), clickToRemove && (jsx(X$1, { className: "size-2 text-muted-foreground group-hover:text-destructive" }))] }, value))), jsxs(Badge, { style: {
+                    : undefined, children: [items.get(value), clickToRemove && (jsx(X$1, { className: "size-3.5 text-muted-foreground group-hover:text-destructive" }))] }, value))), jsxs(Badge, { style: {
                     display: overflowAmount > 0 && !shouldWrap ? 'block' : 'none',
-                }, variant: "outline", ref: overflowRef, children: ["+", overflowAmount] })] }));
+                }, variant: "outline", className: "h-7 items-center px-3 text-sm", ref: overflowRef, children: ["+", overflowAmount] })] }));
 }
 function MultiSelectContent({ search = true, children, ...props }) {
     const canSearch = typeof search === 'object' ? true : search;