@cube-dev/ui-kit 0.69.1 → 0.69.3

package/es/components/fields/FilterPicker/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Input/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/ListBox/ListBox.js

@@ -1,18 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useHover } from '@react-aria/interactions';
+import { IconMinus } from '@tabler/icons-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { forwardRef, useEffect, useMemo, useRef, } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
 import { useKeyboard, useListBox, useListBoxSection, useOption, } from 'react-aria';
 import { Section as BaseSection, Item, useListState } from 'react-stately';
 import { useWarn } from '../../../_internal/hooks/use-warn';
 import { CheckIcon } from '../../../icons';
+import { Icon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { SIZES } from '../../../tokens';
@@ -26,7 +28,7 @@ const ListBoxWrapperElement = tasty({
     styles: {
         display: 'grid',
         gridColumns: '1sf',
-        gridRows: 'max-content 1sf max-content',
+        gridRows: 'max-content max-content max-content 1sf max-content',
         flow: 'column',
         gap: 0,
         position: 'relative',
@@ -57,7 +59,7 @@ const ListElement = tasty({
         boxSizing: 'border-box',
         margin: {
             '': '.5x .5x 0 .5x',
-            sections: '0 .5x',
+            sections: '.5x .5x 0 .5x',
         },
         height: 'max-content',
     },
@@ -84,6 +86,7 @@ const OptionElement = tasty({
         margin: {
             '': '0 0 1bw 0',
             ':last-of-type': '0',
+            all: '.5x',
         },
         height: {
             '': 'min @size-md',
@@ -133,13 +136,13 @@ const OptionElement = tasty({
             transition: 'theme',
             opacity: {
                 '': 0,
-                'selected | :hover | focused': 1,
+                'selected | indeterminate | :hover | focused': 1,
             },
             fill: {
                 '': '#white',
-                selected: '#purple-text',
-                'invalid & !selected': '#white',
-                'invalid & selected': '#danger',
+                'selected | indeterminate': '#purple-text',
+                'invalid & !(selected | indeterminate)': '#white',
+                'invalid & (selected | indeterminate)': '#danger',
                 disabled: '#dark.12',
             },
             color: {
@@ -149,7 +152,7 @@ const OptionElement = tasty({
             border: {
                 '': '#dark.30',
                 invalid: '#danger',
-                'disabled | (selected & !invalid)': '#clear',
+                'disabled | ((selected | indeterminate) & !invalid)': '#clear',
             },
         },
         Content: {
@@ -202,6 +205,44 @@ const SectionListElement = tasty({
     },
 });
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
+const SelectAllOption = ({ label = 'Select All', isSelected, isIndeterminate, isDisabled, isCheckable, size = 'medium', state, lastFocusSourceRef, onClick, }) => {
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const markIcon = isIndeterminate ? (_jsx(Icon, { size: 12, stroke: 3, children: _jsx(IconMinus, {}) })) : (_jsx(CheckIcon, { size: 12, stroke: 3 }));
+    const localRef = useRef(null);
+    const handleOptionClick = (e) => {
+        // Mark focus changes from mouse clicks
+        if (lastFocusSourceRef) {
+            lastFocusSourceRef.current = 'mouse';
+        }
+        // If there's an onOptionClick callback and this is checkable in multiple mode,
+        // we need to distinguish between checkbox and content clicks
+        if (state.selectionManager.selectionMode === 'multiple') {
+            // Check if the click target is within the checkbox area
+            const clickTarget = e.target;
+            const checkboxElement = localRef.current?.querySelector('[data-element="CheckboxWrapper"]');
+            if (checkboxElement &&
+                (checkboxElement === clickTarget ||
+                    checkboxElement.contains(clickTarget))) {
+                onClick?.(false);
+            }
+            else {
+                // Then call the callback (which will close the popover in FilterPicker)
+                onClick?.(true);
+            }
+        }
+        else {
+            onClick?.(true);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(OptionElement, { ref: localRef, as: "div", ...hoverProps, "data-size": size, role: "option", "aria-selected": isSelected, mods: {
+                    selected: isSelected,
+                    disabled: isDisabled,
+                    checkable: isCheckable,
+                    hovered: isHovered,
+                    indeterminate: isIndeterminate,
+                    all: true,
+                }, style: { cursor: isDisabled ? 'not-allowed' : 'pointer' }, onClick: handleOptionClick, children: [isCheckable && (_jsx("div", { "data-element": "CheckboxWrapper", children: _jsx("div", { "data-element": "Checkbox", children: (isIndeterminate || isSelected) && markIcon }) })), _jsx("div", { "data-element": "Content", children: _jsx("div", { "data-element": "Label", children: label }) })] }), _jsx(StyledDivider, {})] }));
+};
 export const ListBox = forwardRef(function ListBox(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -225,7 +266,8 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, escapeKeyBehavior, onEscape, isCheckable, onOptionClick, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, listStyles, optionStyles, sectionStyles, headingStyles, listRef, message, description, styles, mods: externalMods, size = 'medium', labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, shouldUseVirtualFocus, onSelectionChange, stateRef, focusOnHover, header, footer, headerStyles, footerStyles, onEscape, isCheckable, onOptionClick, showSelectAll, selectAllLabel, ...otherProps } = props;
+    const [, forceUpdate] = useState({});
     // Wrap onSelectionChange to prevent selection when disabled and handle React Aria's Set format
     const externalSelectionHandler = onSelectionChange || props.onChange;
     const wrappedOnSelectionChange = useMemo(() => {
@@ -237,8 +279,11 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                 return;
             }
             // React Aria always passes a Set for selection changes
-            // For single selection mode, we extract the first (and only) key
-            if (keys instanceof Set) {
+            // Handle the special "all" case and convert to our public API format
+            if (keys === 'all') {
+                externalSelectionHandler('all');
+            }
+            else if (keys instanceof Set) {
                 if (keys.size === 0) {
                     externalSelectionHandler(props.selectionMode === 'multiple' ? [] : null);
                 }
@@ -253,7 +298,12 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                 externalSelectionHandler(keys);
             }
         };
-    }, [externalSelectionHandler, isDisabled, props.selectionMode]);
+    }, [
+        externalSelectionHandler,
+        isDisabled,
+        props.selectionMode,
+        showSelectAll,
+    ]);
     // Prepare props for useListState with correct selection props
     const listStateProps = {
         ...props,
@@ -264,10 +314,16 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     // Set selection props based on mode
     if (listStateProps.selectionMode === 'multiple') {
         if (selectedKeys !== undefined) {
-            listStateProps.selectedKeys = new Set(selectedKeys);
+            // Handle "all" selection by passing it directly to React Aria
+            listStateProps.selectedKeys =
+                selectedKeys === 'all' ? 'all' : new Set(selectedKeys);
         }
         if (defaultSelectedKeys !== undefined) {
-            listStateProps.defaultSelectedKeys = new Set(defaultSelectedKeys);
+            // Handle "all" default selection
+            listStateProps.defaultSelectedKeys =
+                defaultSelectedKeys === 'all'
+                    ? 'all'
+                    : new Set(defaultSelectedKeys);
         }
         // Remove single-selection props if any
         delete listStateProps.selectedKey;
@@ -291,6 +347,55 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
     const listState = useListState({
         ...listStateProps,
     });
+    // Calculate select all state for multiple selection mode
+    const selectAllState = useMemo(() => {
+        // Select-all only makes sense for multiple selection mode *and* when the UI is enabled
+        if (props.selectionMode !== 'multiple' || !showSelectAll) {
+            return { isSelected: false, isIndeterminate: false };
+        }
+        // React Stately exposes the raw selection value which is either the string "all"
+        // (when `selectAll(true)` was used) **or** a Set of item keys.
+        const rawSelection = listState.selectionManager.rawSelection;
+        // Fast path – user pressed our "Select All" control previously.
+        if (rawSelection === 'all') {
+            return { isSelected: true, isIndeterminate: false };
+        }
+        const selectedKeys = listState.selectionManager.selectedKeys;
+        // When there is nothing selected, we are in a clear state
+        if (selectedKeys.size === 0) {
+            return { isSelected: false, isIndeterminate: false };
+        }
+        // Otherwise it must be a partial (indeterminate) selection.
+        return { isSelected: false, isIndeterminate: true };
+    }, [
+        props.selectionMode,
+        showSelectAll,
+        listState.collection,
+        listState.disabledKeys,
+        listState.selectionManager.selectedKeys,
+        listState.selectionManager.rawSelection,
+    ]);
+    // Handle select all click
+    const handleSelectAllClick = (propagate) => {
+        if (isDisabled || props.selectionMode !== 'multiple')
+            return;
+        if (selectAllState.isSelected) {
+            // All selected, deselect all
+            listState.selectionManager.clearSelection();
+            // Manually call the wrapped handler since React Aria might not trigger it
+            wrappedOnSelectionChange?.(new Set());
+        }
+        else {
+            // Some or none selected, select all
+            listState.selectionManager.selectAll(true);
+            // Manually call the wrapped handler since React Aria might not trigger it
+            wrappedOnSelectionChange?.('all');
+            forceUpdate({});
+        }
+        if (propagate && !selectAllState.isSelected) {
+            onOptionClick?.('__ALL__');
+        }
+    };
     // Track whether the last focus change was due to keyboard navigation
     const lastFocusSourceRef = useRef('other');
     // Expose the list state instance via the provided ref (if any)
@@ -412,8 +517,9 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         valid: validationState === 'valid',
         disabled: isDisabled,
         focused: isFocused,
-        header: !!header,
+        header: !!header || (showSelectAll && props.selectionMode === 'multiple'),
         footer: !!footer,
+        selectAll: showSelectAll && props.selectionMode === 'multiple',
         ...externalMods,
     }), [
         isInvalid,
@@ -422,9 +528,11 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
         isFocused,
         header,
         footer,
+        showSelectAll,
+        props.selectionMode,
         externalMods,
     ]);
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: _jsx(ListElement, { ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
+    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', mods: mods, styles: styles, children: [header ? (_jsx(StyledHeader, { styles: headerStyles, "data-size": size, children: header })) : (_jsx("div", { role: "presentation" })), showSelectAll && props.selectionMode === 'multiple' ? (_jsx(SelectAllOption, { label: selectAllLabel || 'Select All', state: listState, lastFocusSourceRef: lastFocusSourceRef, isSelected: selectAllState.isSelected, isIndeterminate: selectAllState.isIndeterminate, isDisabled: isDisabled, isCheckable: isCheckable, size: size, onClick: handleSelectAllClick })) : (_jsxs(_Fragment, { children: [_jsx("div", { role: "presentation" }), _jsx("div", { role: "presentation" })] })), _jsx(ListBoxScrollElement, { ref: scrollRef, mods: mods, ...focusProps, children: _jsx(ListElement, { ...mergedListBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, mods: { sections: hasSections }, style: shouldVirtualize
                         ? {
                             position: 'relative',
                             height: `${rowVirtualizer.getTotalSize() + 3}px`,
@@ -441,7 +549,7 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                                     left: 0,
                                     right: 0,
                                     transform: `translateY(${virtualItem.start}px)`,
-                                }, virtualIndex: virtualItem.index, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, virtualItem.key));
+                                }, virtualIndex: virtualItem.index, lastFocusSourceRef: lastFocusSourceRef, onClick: onOptionClick }, virtualItem.key));
                         })
                         : (() => {
                             const renderedItems = [];
@@ -451,18 +559,18 @@ export const ListBox = forwardRef(function ListBox(props, ref) {
                                     if (!isFirstSection) {
                                         renderedItems.push(_jsx(StyledDivider, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
                                     }
-                                    renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, size: size, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, item.key));
+                                    renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, size: size, lastFocusSourceRef: lastFocusSourceRef, onClick: onOptionClick }, item.key));
                                     isFirstSection = false;
                                 }
                                 else {
-                                    renderedItems.push(_jsx(Option, { size: size, item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, item.key));
+                                    renderedItems.push(_jsx(Option, { size: size, item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onClick: onOptionClick }, item.key));
                                 }
                             }
                             return renderedItems;
                         })() }) }), footer ? (_jsx(StyledFooter, { styles: footerStyles, "data-size": size, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
     return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
 });
-function Option({ size = 'medium', item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, }) {
+function Option({ size = 'medium', item, state, styles, isParentDisabled, validationState, focusOnHover = false, isCheckable, onClick: onOptionClick, virtualStyle, virtualRef, virtualIndex, lastFocusSourceRef, }) {
     const localRef = useRef(null);
     // Merge local ref with react-virtual measure ref when provided
     const combinedRef = useCombinedRefs(localRef, virtualRef);
@@ -536,7 +644,7 @@ function Option({ size = 'medium', item, state, styles, isParentDisabled, valida
         }, styles: styles, onClick: handleOptionClick, children: [isCheckable && state.selectionManager.selectionMode === 'multiple' && (_jsx("div", { "data-element": "CheckboxWrapper", children: _jsx("div", { "data-element": "Checkbox", children: _jsx(CheckIcon, { size: 12, stroke: 3 }) }) })), _jsxs("div", { "data-element": "Content", children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? (_jsx("div", { "data-element": "Description", children: description })) : null] })] }));
 }
 function ListBoxSection(props) {
-    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onOptionClick, lastFocusSourceRef, } = props;
+    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, validationState, focusOnHover, isCheckable, onClick: onOptionClick, lastFocusSourceRef, } = props;
     const heading = item.rendered;
     const { itemProps, headingProps, groupProps } = useListBoxSection({
         heading,
@@ -544,7 +652,7 @@ function ListBoxSection(props) {
     });
     return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(StyledSectionHeading, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
                     .filter((node) => state.collection.getItem(node.key))
-                    .map((node) => (_jsx(Option, { size: props.size, item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onOptionClick: onOptionClick }, node.key))) })] }));
+                    .map((node) => (_jsx(Option, { size: props.size, item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled, validationState: validationState, focusOnHover: focusOnHover, isCheckable: isCheckable, lastFocusSourceRef: lastFocusSourceRef, onClick: onOptionClick }, node.key))) })] }));
 }
 const ListBoxSectionComponent = Object.assign(BaseSection, {
     displayName: 'Section',

package/es/components/fields/ListBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/NumberInput/StepButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/Radio.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/RadioGroup/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/SearchInput/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { cloneElement, forwardRef, useEffect, useMemo, useRef, } from 'react';
 import { DismissButton, FocusScope, HiddenSelect, useButton, useHover, useListBox, useListBoxSection, useOption, useOverlay, useOverlayPosition, useSelect, } from 'react-aria';
 import { Section as BaseSection, Item, useSelectState } from 'react-stately';
 import styled from 'styled-components';
-import { DownIcon, LoadingIcon } from '../../../icons/index';
+import { DirectionIcon, LoadingIcon } from '../../../icons/index';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty/index';
 import { generateRandomId } from '../../../utils/random';
@@ -24,7 +24,7 @@ import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES } from '../index';
+import { INPUT_WRAPPER_STYLES } from '../index';
 const SelectWrapperElement = tasty({
     styles: {
         display: 'grid',
@@ -41,42 +41,6 @@ const SelectWrapperElement = tasty({
             invalid: '#danger-text',
             disabled: '#dark.30',
         },
-        Value: {
-            ...DEFAULT_INPUT_STYLES,
-            display: 'grid',
-            placeItems: 'center stretch',
-            preset: {
-                '': 't3',
-                '[data-type="primary"]': 't3m',
-            },
-            color: 'inherit',
-            opacity: {
-                '': 1,
-                placeholder: '.6',
-            },
-            textAlign: 'left',
-            fill: '#clear',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-        },
-        CaretIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: {
-                '': '4x',
-                '[data-size="small"]': '@size-xs',
-                '[data-size="medium"]': '@size-sm',
-            },
-            cursor: 'pointer',
-            fontSize: 'inherit',
-        },
-        ButtonIcon: {
-            display: 'grid',
-            placeItems: 'center',
-            width: 'min @size-sm',
-            color: 'inherit',
-            fontSize: '@icon-size',
-        },
     },
 });
 function WithValidationState(styles) {
@@ -95,8 +59,61 @@ const SelectElement = tasty({
     styles: {
         ...INPUT_WRAPPER_STYLES,
         ...DEFAULT_BUTTON_STYLES,
-        padding: 0,
+        backgroundClip: 'initial',
         gap: 0,
+        Prefix: {
+            display: 'flex',
+            placeContent: 'center start',
+            placeItems: 'center',
+            placeSelf: 'center start',
+            flexShrink: 0,
+        },
+        Suffix: {
+            display: 'flex',
+            placeContent: 'center start',
+            placeItems: 'center',
+            placeSelf: 'center end',
+            flexShrink: 0,
+        },
+        ButtonIcon: {
+            display: 'grid',
+            placeItems: 'center',
+            color: 'inherit',
+            fontSize: '@icon-size',
+        },
+        Value: {
+            display: 'block',
+            width: 'max 100%',
+            placeItems: 'center stretch',
+            preset: {
+                '': 't3',
+                '[data-type="primary"]': 't3m',
+            },
+            padding: {
+                '': 0,
+                prefix: '.5x left',
+                suffix: '.5x right',
+                'prefix & suffix': '.5x left right',
+            },
+            color: 'inherit',
+            opacity: {
+                '': 1,
+                placeholder: '.6',
+            },
+            textAlign: 'left',
+            fill: '#clear',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            flexGrow: 1,
+        },
+        '& [data-element="Prefix"] [data-element="ButtonIcon"]': {
+            marginLeft: -4,
+            placeSelf: 'center start',
+        },
+        '& [data-element="Suffix"] [data-element="ButtonIcon"]': {
+            marginRight: -4,
+            placeSelf: 'center end',
+        },
     },
     variants: {
         // Default theme
@@ -295,7 +312,7 @@ function Select(props, ref) {
     ]);
     let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: { ...wrapperStyles, ...styles }, "data-size": size, "data-type": type, "data-theme": theme, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, "data-menu-trigger": true, styles: { ...inputStyles, ...triggerStyles }, variant: `${theme}.${type}`, "data-theme": theme, "data-size": size, "data-type": type, mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
                             ? state.selectedItem.rendered
-                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, {}), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "CaretIcon", children: _jsx(DownIcon, {}) })] })] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth, triggerRef: triggerRef }) })] }));
+                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingIcon, {}), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "ButtonIcon", children: _jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' }) })] })] }), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth, triggerRef: triggerRef }) })] }));
     return wrapWithField(selectField, ref, mergeProps({
         ...props,
         styles,

package/es/components/fields/Select/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Gradation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/RangeSlider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/SliderBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Slider/SliderInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.69.1
+ * @cube-dev/ui-kit v0.69.3
  * Released under the MIT license.
  */