@cube-dev/ui-kit 0.26.3 → 0.27.0

package/es/components/forms/Form/validation.js

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

package/es/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ import { NumberInput } from '../NumberInput/NumberInput';
 import { FileInput } from '../FileInput/FileInput';
 import { TextArea } from '../TextArea/TextArea';
 export const Input = Object.assign(forwardRef(function Input(props, ref) {
-    return _jsx(TextInput, { ref: ref, ...props }, void 0);
+    return _jsx(TextInput, { ref: ref, ...props });
 }), {
     Text: TextInput,
     Password: PasswordInput,

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

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

package/es/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const REQUIRED_ICON = (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", versio
         width: '.8em',
         height: '.8em',
         transform: 'rotate(-5deg)',
-    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }, void 0) }, void 0) }, void 0) }, void 0));
+    }, children: _jsx("switch", { children: _jsx("g", { children: _jsx("polygon", { fill: "currentColor", points: "97.5,47.5 90.5,26.1 61.3,35.6 61.3,4.8 38.7,4.8 38.7,35.6 9.5,26.1 2.5,47.5 31.8,57 13.7,82 31.9,95.2     50,70.3 68.1,95.2 86.3,82 68.2,57" }) }) }) }));
 const INTL_MESSAGES = {
     '(required)': '(required)',
     '(optional)': '(optional)',
@@ -58,7 +58,7 @@ function Label(props, ref) {
         : formatMessage('(optional)');
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
-            : undefined, children: REQUIRED_ICON }, void 0));
+            : undefined, children: REQUIRED_ICON }));
     return (_jsx(LabelElement, { ...filterBaseProps(otherProps), ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
@@ -68,7 +68,7 @@ function Label(props, ref) {
                     (necessityIndicator === 'icon' && isRequired)) &&
                     ' \u200b', necessityIndicator === 'label' && (_jsx("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
-                        : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
+                        : undefined, children: necessityLabel })), necessityIndicator === 'icon' && isRequired && icon] })) }));
 }
 let _Label = forwardRef(Label);
 export { _Label as Label };

package/es/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -41,8 +41,8 @@ function NumberInput(props, ref) {
     let defaultInputRef = useRef(null);
     inputRef = inputRef || defaultInputRef;
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = useNumberField(props, state, inputRef);
-    const steppers = showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : undefined;
-    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? (_jsxs(_Fragment, { children: [suffix, steppers] }, void 0)) : (_jsxs(_Fragment, { children: [steppers, suffix] }, void 0))) : (suffix) }, void 0));
+    const steppers = showStepper ? (_jsxs(StepperContainer, { children: [_jsx(StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), _jsx(StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : undefined;
+    return (_jsx(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? (_jsxs(_Fragment, { children: [suffix, steppers] })) : (_jsxs(_Fragment, { children: [steppers, suffix] }))) : (suffix) }));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -32,10 +32,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), mods: {
+    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? (_jsx(CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } })) : (_jsx(CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } })), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
-        }, label: `Step ${props.direction}`, ...props }, void 0));
+        }, label: `Step ${props.direction}`, ...props }));
 }
 
         

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -34,8 +34,8 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
-    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }, void 0));
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}) : _jsx(EyeOutlined, {}), onPress: toggleType })] }));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...rest }));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -125,7 +125,7 @@ const RadioNormalElement = tasty({
         },
     },
 });
-const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" }, void 0);
+const RadioCircleElement = _jsx("div", { "data-element": "RadioCircle" });
 const RadioLabelElement = tasty({
     qa: 'RadioLabel',
     styles: INLINE_LABEL_STYLES,
@@ -143,7 +143,10 @@ function Radio(props, ref) {
         ...INLINE_LABEL_STYLES,
         ...labelStyles,
     };
-    let state = useRadioProvider();
+    let radioGroupProps = useRadioProvider();
+    let state = radioGroupProps && radioGroupProps.state;
+    let name = radioGroupProps && radioGroupProps.name;
+    let isSolid = (radioGroupProps && radioGroupProps.isSolid) || false;
     if (!state) {
         throw new Error('CubeUI: The Radio button is used outside the RadioGroup.');
     }
@@ -151,33 +154,34 @@ function Radio(props, ref) {
     let { hoverProps, isHovered } = useHover({ isDisabled });
     let inputRef = useRef(null);
     let domRef = useFocusableRef(ref, inputRef);
-    let { inputProps } = useRadio({
+    let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected, } = useRadio({
+        name,
         ...props,
         isDisabled,
     }, state, inputRef);
     const mods = useMemo(() => ({
-        checked: inputProps.checked,
+        checked: isRadioSelected,
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
-        disabled: isDisabled,
+        disabled: isRadioDisabled,
         hovered: isHovered,
         button: isButton,
         focused: isFocused,
-        solid: !!state?.isSolid,
+        solid: isSolid,
     }), [
-        inputProps.checked,
+        isRadioSelected,
         validationState,
-        isDisabled,
+        isRadioDisabled,
         isHovered,
         isButton,
         isFocused,
-        state?.isSolid,
+        isSolid,
     ]);
-    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), _jsx(RadioElement, { "data-element": "Input", mods: mods, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }, void 0))] }, void 0));
+    return (_jsxs(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }), _jsx(RadioElement, { "data-element": "Input", mods: mods, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && (_jsx(RadioLabelElement, { mods: mods, styles: labelStyles, ...filterBaseProps(labelProps), children: label }))] }));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return _jsx(Radio, { ...props, ref: ref, type: "button" }, void 0);
+    return _jsx(Radio, { ...props, ref: ref, type: "button" });
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -57,7 +57,7 @@ function RadioGroup(props, ref) {
                 isRequired,
                 validationState,
                 isDisabled,
-            }, children: _jsx(RadioContext.Provider, { value: { ...state, isSolid }, children: children }, void 0) }, void 0) }, void 0));
+            }, children: _jsx(RadioContext.Provider, { value: { state, name: props.name, isSolid }, children: children }) }) }));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -79,7 +79,7 @@ function RadioGroup(props, ref) {
             Component: radioGroup,
             ref: domRef,
             labelSuffix,
-        } }, void 0));
+        } }));
 }
 /**
  * Radio groups allow users to select a single option from a list of mutually exclusive options.

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

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

package/es/components/forms/SearchInput/SearchInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -17,7 +17,7 @@ import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { tasty } from '../../../tasty';
 const ClearButton = tasty(Button, {
-    icon: _jsx(CloseOutlined, {}, void 0),
+    icon: _jsx(CloseOutlined, {}),
     styles: {
         radius: 'right (1r - 1bw)',
         width: '4x',
@@ -33,7 +33,7 @@ export const SearchInput = forwardRef(function SearchInput(props, ref) {
     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(SearchOutlined, {}, void 0), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }, void 0))] }, void 0)) : undefined }, void 0));
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? (_jsxs(_Fragment, { children: [props.suffix, showClearButton && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }))] })) : undefined }));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ export function Gradation(props) {
     };
     return (_jsx(SliderGradationElement, { children: values.map((value, idx) => (_jsx(SliderGradeElement, { mods: {
                 active: getIsActive(value, idx),
-            }, children: value }, value))) }, void 0));
+            }, children: value }, value))) }));
 }
 
         

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -18,8 +18,8 @@ const INTL_MESSAGES = {
 function RangeSlider(props, ref) {
     let { isDisabled, styles, gradation, ...otherProps } = props;
     return (_jsx(SliderBase, { ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), _jsx(SliderTrack, { state: state, isDisabled: isDisabled }, void 0), _jsx(SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0), _jsx(SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled }), _jsx(SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }), _jsx(SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _RangeSlider = forwardRef(RangeSlider);
 const __RangeSlider = Object.assign(_RangeSlider, {

package/es/components/forms/Slider/Slider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -29,8 +29,8 @@ function Slider(props, ref) {
     };
     const extractedStyles = extractStyles(otherProps, OUTER_STYLES, styles);
     return (_jsx(SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
-            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }, void 0), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return (_jsxs(_Fragment, { children: [_jsx(Gradation, { state: state, ranges: [0, 1], values: gradation }), _jsx(SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), _jsx(SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _Slider = forwardRef(Slider);
 const __Slider = Object.assign(_Slider, {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -102,7 +102,7 @@ function SliderBase(allProps, ref) {
                     width: `${maxLabelLength + 1}ch`,
                     minWidth: `${maxLabelLength + 1}ch`,
                 }
-                : undefined, children: displayValue }, void 0));
+                : undefined, children: displayValue }));
     const sliderField = (_jsx(SliderElement, { ref: domRef, ...groupProps, mods: {
             'side-label': labelPosition === 'side',
             horizontal: orientation === 'horizontal',
@@ -112,7 +112,7 @@ function SliderBase(allProps, ref) {
                 trackRef,
                 inputRef,
                 state,
-            }) }, void 0) }, void 0));
+            }) }) }));
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
@@ -131,7 +131,7 @@ function SliderBase(allProps, ref) {
             labelSuffix,
             Component: sliderField,
             ref: ref,
-        } }, void 0));
+        } }));
 }
 const _SliderBase = forwardRef(SliderBase);
 export { _SliderBase as SliderBase };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -28,7 +28,7 @@ export function SliderInput(props) {
     const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
     return (_jsx(NumberInput, { insideForm: false, labelPosition: "top", ...otherProps, hideStepper: true, size: "small", wrapperStyles: {
             width: inputWidth,
-        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }, void 0));
+        }, textAlign: "center", formatOptions: formatOptions, value: value, minValue: state.getThumbMinValue(index), maxValue: state.getThumbMaxValue(index), maxLength: maxLength, onChange: onChange }));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -26,7 +26,7 @@ export function SliderThumb(props) {
             dragged: isDragging,
             focused: !isDragging && isFocused,
             disabled: isDisabled,
-        }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: inputRef, ...inputProps }, void 0) }, void 0) }, void 0));
+        }, ...mergeProps(thumbProps, hoverProps), role: "presentation", children: _jsx(VisuallyHidden, { children: _jsx("input", { ref: inputRef, ...inputProps }) }) }));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -22,7 +22,7 @@ export function SliderTrack(props) {
                 '--slider-range-start': `${selectedTrack[0] * 100}%`,
                 '--slider-range-end': `${selectedTrack[1] * 100}%`,
             }
-            : {} }, void 0));
+            : {} }));
 }
 
         

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

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

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

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

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

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

package/es/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -133,7 +133,12 @@ function Switch(props, ref) {
     let inputRef = useRef(null);
     let domRef = useFocusableRef(ref, inputRef);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    let { inputProps } = useSwitch(props, useToggleState(props), inputRef);
+    let { inputProps } = useSwitch({
+        ...props,
+        ...(typeof label === 'string' && label.trim()
+            ? { 'aria-label': label }
+            : {}),
+    }, useToggleState(props), inputRef);
     const mods = {
         'inside-form': insideForm,
         'side-label': labelPosition === 'side',
@@ -142,7 +147,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, "data-size": size, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }, void 0) }, void 0), children ? _jsx(Text, { nowrap: true, children: children }, void 0) : null] }, void 0));
+    const switchField = (_jsxs(SwitchWrapperElement, { mods: mods, "data-size": size, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }), _jsx(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? _jsx(Text, { nowrap: true, children: children }) : null] }));
     if (insideForm) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -161,11 +166,11 @@ function Switch(props, ref) {
                 labelSuffix,
                 Component: switchField,
                 ref: domRef,
-            } }, void 0));
+            } }));
     }
     return (_jsxs(SwitchLabelElement, { styles: styles, mods: mods, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [switchField, label ? (_jsxs(Element, { styles: labelStyles, mods: {
                     disabled: isDisabled,
-                }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }, void 0) : null, _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0)) : null] }, void 0));
+                }, ...filterBaseProps(labelProps), children: [label, isLoading ? (_jsxs(_Fragment, { children: [label ? _jsx(_Fragment, { children: "\u00A0" }) : null, _jsx(LoadingOutlined, {})] })) : null] })) : null] }));
 }
 /**
  * Switches allow users to turn an individual option on or off.

package/es/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -54,7 +54,7 @@ function TextArea(props, ref) {
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }));
 }
 /**
  * TextInputs are text inputs that allow users to input custom text entries

package/es/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -24,7 +24,7 @@ export const TextInput = forwardRef(function TextInput(props, ref) {
     });
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
+    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));
 });
 /**
  * TextInputs are text inputs that allow users to input custom text entries

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -177,9 +177,9 @@ function TextInputBase(props, ref) {
         inputProps.placeholder = ' ';
     }
     if (icon) {
-        icon = _jsx("div", { "data-element": "InputIcon", children: icon }, void 0);
+        icon = _jsx("div", { "data-element": "InputIcon", children: icon });
         if (prefix) {
-            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }, void 0));
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }));
         }
         else {
             prefix = icon;
@@ -215,7 +215,7 @@ function TextInputBase(props, ref) {
             WebkitTextSecurity: 'disc',
         }
         : {};
-    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: textSecurityStyles, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled, maxLength: maxLength, minLength: minLength }, void 0), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, { "data-element": "InputIcon" }, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)) : null] }, void 0));
+    const textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: textSecurityStyles, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled, maxLength: maxLength, minLength: minLength }), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, (validationState && !isLoading) || isLoading || suffix ? (_jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, { "data-element": "InputIcon" })] })) : null, suffixPosition === 'after' ? suffix : null] })) : null] }));
     return wrapWithField(textField, domRef, {
         ...props,
         styles,

package/es/components/forms/index.js

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

package/es/components/forms/wrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -30,7 +30,7 @@ export function wrapWithField(component, ref, props) {
             children,
             Component: component,
             ref,
-        } }, void 0));
+        } }));
 }
 
         

package/es/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.26.3
+ * @cube-dev/ui-kit v0.27.0
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ const FlexElement = tasty({
 });
 export const Flex = forwardRef(function Flex(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
+    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }));
 });