@cube-dev/ui-kit 0.77.2 → 0.77.4

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

@@ -1,22 +1,23 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
-import { Section as BaseSection, Item } from 'react-stately';
+import { Section as BaseSection, Item as ReactAriaItem, } from 'react-stately';
+import { useEvent } from '../../../_internal';
 import { useWarn } from '../../../_internal/hooks/use-warn';
-import { DirectionIcon, LoadingIcon } from '../../../icons';
+import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps } from '../../../utils/react';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemButton } from '../../actions';
+import { ItemAction, ItemButton } from '../../actions';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
@@ -62,7 +63,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Generate a unique ID for this FilterPicker instance
     const filterPickerId = useMemo(() => generateRandomId(), []);
@@ -232,7 +233,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                         if (!child || typeof child !== 'object')
                             return;
                         const element = child;
-                        if (element.type === Item) {
+                        if (element.type === ReactAriaItem) {
                             const props = element.props;
                             const label = props.textValue ||
                                 (typeof props.children === 'string' ? props.children : '') ||
@@ -300,7 +301,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     if (!child || typeof child !== 'object')
                         return;
                     const element = child;
-                    if (element.type === Item) {
+                    if (element.type === ReactAriaItem) {
                         const childKey = String(element.key);
                         if (selectedSet.has(normalizeKeyValue(childKey))) {
                             const props = element.props;
@@ -430,7 +431,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                     sectionChildren.forEach((sectionChild) => {
                         if (sectionChild && typeof sectionChild === 'object') {
                             const sectionElement = sectionChild;
-                            if (sectionElement.type === Item ||
+                            if (sectionElement.type === ReactAriaItem ||
                                 sectionElement.type?.displayName === 'Item') {
                                 const clonedItem = cloneWithNormalizedKey(sectionElement);
                                 if (isItemSelected(sectionElement)) {
@@ -603,7 +604,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
         }
         return (_jsx(Text, { ellipsis: true, style: { opacity: hasSelection ? 1 : 'var(--disabled-opacity)' }, children: content }));
     };
-    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(false);
+    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
     // The trigger is rendered as a function so we can access the dialog state
     const renderTrigger = (state) => {
         // Listen for other menus opening and close this one if needed
@@ -645,16 +646,47 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             },
         });
         useEffect(() => {
-            // Disable the update of the position while the popover is open (with a delay) to avoid jumping
-            setShouldUpdatePosition(!state.isOpen);
+            // Allow initial positioning & flipping when opening, then lock placement after transition
+            // Popover transition is ~120ms, give it a bit more time to finalize placement
+            if (state.isOpen) {
+                setShouldUpdatePosition(true);
+                const id = window.setTimeout(() => setShouldUpdatePosition(false), 160);
+                return () => window.clearTimeout(id);
+            }
+            else {
+                setShouldUpdatePosition(true);
+            }
         }, [state.isOpen]);
+        // Clear button logic
+        let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+        // Clear function
+        let clearValue = useEvent(() => {
+            if (selectionMode === 'multiple') {
+                if (!isControlledMultiple) {
+                    setInternalSelectedKeys([]);
+                }
+                onSelectionChange?.([]);
+            }
+            else {
+                if (!isControlledSingle) {
+                    setInternalSelectedKey(null);
+                }
+                onSelectionChange?.(null);
+            }
+            if (state.isOpen) {
+                state.close();
+            }
+            triggerRef?.current?.focus?.();
+            props.onClear?.();
+            return false;
+        });
         return (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "FilterPickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
-    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
+    const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip && shouldUpdatePosition, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
                 const menuTriggerEl = el.closest('[data-popover-trigger]');
                 // If no menu trigger was clicked, allow closing
                 if (!menuTriggerEl)

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 
@@ -11,33 +11,25 @@ import { useSearchField } from 'react-aria';
 import { useSearchFieldState } from 'react-stately';
 import { CloseIcon, SearchIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
-import { tasty } from '../../../tasty';
 import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-import { Button } from '../../actions';
+import { ItemAction } from '../../actions';
 import { TextInputBase } from '../TextInput';
 export { useSearchFieldState, useSearchField };
-const ClearButton = tasty(Button, {
-    icon: _jsx(CloseIcon, {}),
-    styles: {
-        radius: 'right (1r - 1bw)',
-        width: {
-            '': '3x',
-            '[data-size="large"]': '4x',
-        },
-        height: 'auto',
-        placeSelf: 'stretch',
-    },
-});
 export const SearchInput = forwardRef(function SearchInput(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    let { isClearable, validationState } = props;
+    let { isClearable, validationState, onClear } = props;
     let inputRef = useRef(null);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }))] })) : undefined }));
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchIcon, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: props.size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps), onPress: (e) => {
+                        // Call the original clear functionality
+                        clearButtonProps.onPress?.();
+                        // Call the onClear callback
+                        onClear?.();
+                    } }))] })) : undefined }));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 
@@ -10,7 +10,8 @@ import { cloneElement, useEffect, useMemo, useRef, } from 'react';
 import { DismissButton, FocusScope, HiddenSelect, useButton, useHover, useListBox, useListBoxSection, useOption, useOverlay, useOverlayPosition, useSelect, } from 'react-aria';
 import { Section as BaseSection, useSelectState } from 'react-stately';
 import styled from 'styled-components';
-import { DirectionIcon, LoadingIcon } from '../../../icons/index';
+import { useEvent } from '../../../_internal';
+import { CloseIcon, 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';
@@ -18,6 +19,7 @@ import { forwardRefWithGenerics, mergeProps, useCombinedRefs, } from '../../../u
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
+import { ItemAction } from '../../actions';
 import { StyledDivider as ListDivider, StyledSectionHeading as ListSectionHeading, StyledSection as ListSectionWrapper, } from '../../actions/Menu/styled';
 import { ItemBase } from '../../content/ItemBase';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
@@ -116,7 +118,7 @@ function Select(props, ref) {
             onSelectionChange: onChange,
         }),
     });
-    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, triggerStyles, optionStyles, wrapperStyles, listBoxStyles, overlayStyles, suffix, message, description, descriptionPlacement, hotkeys, direction = 'bottom', shouldFlip = true, placeholder, tooltip, size = 'medium', styles, type = 'outline', theme = 'default', labelSuffix, suffixPosition = 'before', isClearable, ...otherProps } = props;
     let state = useSelectState(props);
     // Generate a unique ID for this select instance
     const selectId = useMemo(() => generateRandomId(), []);
@@ -161,6 +163,21 @@ function Select(props, ref) {
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
     let validation = cloneElement(validationIcon);
+    // Clear button logic
+    let hasSelection = state.selectedItem != null;
+    let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+    // Clear function
+    let clearValue = useEvent(() => {
+        props.onSelectionChange?.(null);
+        state.setSelectedKey(null);
+        // Close the popup if it's open
+        if (state.isOpen) {
+            state.close();
+        }
+        // Return focus to the trigger for better UX
+        triggerRef.current?.focus?.();
+        props.onClear?.();
+    });
     let triggerWidth = triggerRef?.current?.offsetWidth;
     const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;
     const modifiers = useMemo(() => ({
@@ -192,7 +209,7 @@ function Select(props, ref) {
                 // Ensure this button never submits a surrounding form in tests or runtime
                 htmlType: "button", 
                 // Preserve visual variant via data attribute instead of conflicting with HTML attribute
-                type: type, mods: modifiers, prefix: prefix, suffix: suffix, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: description, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, labelProps: valueProps, children: state.selectedItem
+                type: type, mods: modifiers, prefix: prefix, suffix: suffix, icon: icon, rightIcon: rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "SelectClearButton", mods: { pressed: false }, onPress: clearValue })) : isLoading ? (_jsx(LoadingIcon, {})) : (_jsx(DirectionIcon, { to: state.isOpen ? 'up' : 'down' })), description: description, descriptionPlacement: descriptionPlacement, hotkeys: hotkeys, tooltip: tooltip, labelProps: valueProps, children: state.selectedItem
                     ? state.selectedItem.rendered
                     : placeholder || _jsx(_Fragment, { children: "\u00A0" }) }), _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({

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * 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.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 

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

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

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

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

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

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

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

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

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

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

package/es/components/fields/Switch/Switch.js

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

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

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

package/es/components/fields/TextArea/TextArea.js

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

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

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

package/es/components/fields/TextInput/TextInput.js

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

package/es/components/fields/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.2
+ * @cube-dev/ui-kit v0.77.4
  * Released under the MIT license.
  */
 
@@ -73,14 +73,14 @@ export const INPUT_WRAPPER_STYLES = {
     transition: 'theme',
     backgroundClip: 'content-box',
     height: {
-        '': '$size-md $size-md',
-        '[data-size="small"]': '$size-sm $size-sm',
-        '[data-size="medium"]': '$size-md $size-md',
-        '[data-size="large"]': '$size-lg $size-lg',
-        multiline: 'min $size-md',
-        '[data-size="small"] & multiline': 'min $size-sm',
-        '[data-size="medium"] & multiline': 'min $size-md',
-        '[data-size="large"] & multiline': 'min $size-lg',
+        '': '$size $size',
+        multiline: 'min $size',
+    },
+    $size: {
+        '': '$size-md',
+        '[data-size="small"]': '$size-sm',
+        '[data-size="medium"]': '$size-md',
+        '[data-size="large"]': '$size-lg',
     },
     Prefix: ADD_STYLES,
     Suffix: ADD_STYLES,

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

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

package/es/components/fields/TextInputMapper/TextInputMapper.js

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

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

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

package/es/components/fields/index.js

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

package/es/components/form/FieldWrapper/FieldWrapper.js

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