@cube-dev/ui-kit 0.26.3 → 0.27.0

package/cjs/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.
  */
 
@@ -44,8 +44,8 @@ function NumberInput(props, ref) {
     let defaultInputRef = (0, react_1.useRef)(null);
     inputRef = inputRef || defaultInputRef;
     let { groupProps, labelProps, inputProps, incrementButtonProps, decrementButtonProps, } = (0, numberfield_2.useNumberField)(props, state, inputRef);
-    const steppers = showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }, void 0), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size }, void 0)] }, void 0)) : undefined;
-    return ((0, jsx_runtime_1.jsx)(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, steppers] }, void 0)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [steppers, suffix] }, void 0))) : (suffix) }, void 0));
+    const steppers = showStepper ? ((0, jsx_runtime_1.jsxs)(StepperContainer, { children: [(0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "up", ...incrementButtonProps, size: otherProps.size }), (0, jsx_runtime_1.jsx)(StepButton_1.StepButton, { isDisabled: props.isDisabled, direction: "down", ...decrementButtonProps, size: otherProps.size })] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(StyledTextInputBase, { ...otherProps, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, wrapperProps: groupProps, suffixPosition: "after", suffix: showStepper ? (props.suffixPosition === 'before' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, steppers] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [steppers, suffix] }))) : (suffix) }));
 }
 /**
  * NumberFields allow users to enter a number, and increment or decrement the value using stepper buttons.

package/cjs/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.
  */
 
@@ -35,10 +35,10 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 function StepButton(props) {
-    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CaretDownOutlined, { style: { fontSize: 'var(--icon-size)' } }, void 0)), mods: {
+    return ((0, jsx_runtime_1.jsx)(actions_1.Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? ((0, jsx_runtime_1.jsx)(icons_1.CaretUpOutlined, { style: { fontSize: 'var(--icon-size)' } })) : ((0, jsx_runtime_1.jsx)(icons_1.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 }));
 }
 exports.StepButton = StepButton;
 

package/cjs/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.
  */
 
@@ -37,8 +37,8 @@ function PasswordInput(props, ref) {
     const toggleType = (0, react_1.useCallback)(() => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}, void 0) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [suffix, (0, jsx_runtime_1.jsx)(actions_1.Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? (0, jsx_runtime_1.jsx)(icons_1.EyeInvisibleOutlined, {}) : (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), onPress: toggleType })] }));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.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/cjs/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.
  */
 
@@ -128,7 +128,7 @@ const RadioNormalElement = (0, tasty_1.tasty)({
         },
     },
 });
-const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
+const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" });
 const RadioLabelElement = (0, tasty_1.tasty)({
     qa: 'RadioLabel',
     styles: Label_1.INLINE_LABEL_STYLES,
@@ -146,7 +146,10 @@ function Radio(props, ref) {
         ...Label_1.INLINE_LABEL_STYLES,
         ...labelStyles,
     };
-    let state = (0, context_1.useRadioProvider)();
+    let radioGroupProps = (0, context_1.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.');
     }
@@ -154,33 +157,34 @@ function Radio(props, ref) {
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
-    let { inputProps } = (0, radio_1.useRadio)({
+    let { inputProps, isDisabled: isRadioDisabled, isSelected: isRadioSelected, } = (0, radio_1.useRadio)({
+        name,
         ...props,
         isDisabled,
     }, state, inputRef);
     const mods = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { "data-element": "Input", mods: mods, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: mods, styles: labelStyles, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: mods, "data-type": type, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef, isButton: isButton }), (0, jsx_runtime_1.jsx)(RadioElement, { "data-element": "Input", mods: mods, "data-type": type, styles: inputStyles, children: !isButton ? RadioCircleElement : children }), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: mods, styles: labelStyles, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }))] }));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" }, void 0);
+    return (0, jsx_runtime_1.jsx)(Radio, { ...props, ref: ref, type: "button" });
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

package/cjs/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.
  */
 
@@ -60,7 +60,7 @@ function RadioGroup(props, ref) {
                 isRequired,
                 validationState,
                 isDisabled,
-            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: { ...state, isSolid }, children: children }, void 0) }, void 0) }, void 0));
+            }, children: (0, jsx_runtime_1.jsx)(context_1.RadioContext.Provider, { value: { state, name: props.name, isSolid }, children: children }) }) }));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
@@ -82,7 +82,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/cjs/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/cjs/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.
  */
 
@@ -20,7 +20,7 @@ const mapProps_1 = require("../../../utils/react/mapProps");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
 const tasty_1 = require("../../../tasty");
 const ClearButton = (0, tasty_1.tasty)(actions_1.Button, {
-    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0),
+    icon: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}),
     styles: {
         radius: 'right (1r - 1bw)',
         width: '4x',
@@ -36,7 +36,7 @@ exports.SearchInput = (0, react_1.forwardRef)(function SearchInput(props, ref) {
     let state = (0, searchfield_1.useSearchFieldState)(props);
     let { inputProps, clearButtonProps } = (0, searchfield_2.useSearchField)(props, state, inputRef);
     let showClearButton = isClearable && state.value !== '' && !props.isReadOnly;
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}, void 0), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }, void 0))] }, void 0)) : undefined }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: (0, jsx_runtime_1.jsx)(icons_1.SearchOutlined, {}), suffixPosition: "after", ...props, suffix: props.suffix || showClearButton ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.suffix, showClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...(0, mapProps_1.ariaToCubeButtonProps)(clearButtonProps) }))] })) : undefined }));
 });
 
         

package/cjs/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.
  */
 
@@ -21,7 +21,7 @@ function Gradation(props) {
     };
     return ((0, jsx_runtime_1.jsx)(elements_1.SliderGradationElement, { children: values.map((value, idx) => ((0, jsx_runtime_1.jsx)(elements_1.SliderGradeElement, { mods: {
                 active: getIsActive(value, idx),
-            }, children: value }, value))) }, void 0));
+            }, children: value }, value))) }));
 }
 exports.Gradation = Gradation;
 

package/cjs/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/cjs/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.
  */
 
@@ -21,8 +21,8 @@ const INTL_MESSAGES = {
 function RangeSlider(props, ref) {
     let { isDisabled, styles, gradation, ...otherProps } = props;
     return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, "aria-label": INTL_MESSAGES['minimum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 1, "aria-label": INTL_MESSAGES['maximum'], state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _RangeSlider = (0, react_1.forwardRef)(RangeSlider);
 const __RangeSlider = Object.assign(_RangeSlider, {

package/cjs/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.
  */
 
@@ -32,8 +32,8 @@ function Slider(props, ref) {
     };
     const extractedStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     return ((0, jsx_runtime_1.jsx)(SliderBase_1.SliderBase, { ...otherProps, ...baseProps, ref: ref, orientation: orientation, styles: extractedStyles, children: ({ trackRef, inputRef, state }) => {
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }, void 0), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }, void 0), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled }, void 0)] }, void 0));
-        } }, void 0));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Gradation_1.Gradation, { state: state, ranges: [0, 1], values: gradation }), (0, jsx_runtime_1.jsx)(SliderTrack_1.SliderTrack, { state: state, isDisabled: isDisabled, orientation: orientation }), (0, jsx_runtime_1.jsx)(SliderThumb_1.SliderThumb, { index: 0, state: state, inputRef: inputRef, trackRef: trackRef, isDisabled: isDisabled })] }));
+        } }));
 }
 const _Slider = (0, react_1.forwardRef)(Slider);
 const __Slider = Object.assign(_Slider, {

package/cjs/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.
  */
 
@@ -105,7 +105,7 @@ function SliderBase(allProps, ref) {
                     width: `${maxLabelLength + 1}ch`,
                     minWidth: `${maxLabelLength + 1}ch`,
                 }
-                : undefined, children: displayValue }, void 0));
+                : undefined, children: displayValue }));
     const sliderField = ((0, jsx_runtime_1.jsx)(elements_1.SliderElement, { ref: domRef, ...groupProps, mods: {
             'side-label': labelPosition === 'side',
             horizontal: orientation === 'horizontal',
@@ -115,7 +115,7 @@ function SliderBase(allProps, ref) {
                 trackRef,
                 inputRef,
                 state,
-            }) }, void 0) }, void 0));
+            }) }) }));
     styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
@@ -134,7 +134,7 @@ function SliderBase(allProps, ref) {
             labelSuffix,
             Component: sliderField,
             ref: ref,
-        } }, void 0));
+        } }));
 }
 const _SliderBase = (0, react_1.forwardRef)(SliderBase);
 exports.SliderBase = _SliderBase;

package/cjs/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.
  */
 
@@ -31,7 +31,7 @@ function SliderInput(props) {
     const maxLength = typeof max !== 'undefined' ? String(max).length : undefined;
     return ((0, jsx_runtime_1.jsx)(__1.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 }));
 }
 exports.SliderInput = SliderInput;
 

package/cjs/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.
  */
 
@@ -29,7 +29,7 @@ function SliderThumb(props) {
             dragged: isDragging,
             focused: !isDragging && isFocused,
             disabled: isDisabled,
-        }, ...(0, react_2.mergeProps)(thumbProps, hoverProps), role: "presentation", children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...inputProps }, void 0) }, void 0) }, void 0));
+        }, ...(0, react_2.mergeProps)(thumbProps, hoverProps), role: "presentation", children: (0, jsx_runtime_1.jsx)(visually_hidden_1.VisuallyHidden, { children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, ...inputProps }) }) }));
 }
 exports.SliderThumb = SliderThumb;
 

package/cjs/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.
  */
 
@@ -25,7 +25,7 @@ function SliderTrack(props) {
                 '--slider-range-start': `${selectedTrack[0] * 100}%`,
                 '--slider-range-end': `${selectedTrack[1] * 100}%`,
             }
-            : {} }, void 0));
+            : {} }));
 }
 exports.SliderTrack = SliderTrack;
 

package/cjs/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/cjs/components/forms/Slider/index.js

@@ -1,14 +1,18 @@
 /**
  * @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.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/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/cjs/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.
  */
 
@@ -136,7 +136,12 @@ function Switch(props, ref) {
     let inputRef = (0, react_1.useRef)(null);
     let domRef = (0, utils_1.useFocusableRef)(ref, inputRef);
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    let { inputProps } = (0, switch_1.useSwitch)(props, (0, toggle_1.useToggleState)(props), inputRef);
+    let { inputProps } = (0, switch_1.useSwitch)({
+        ...props,
+        ...(typeof label === 'string' && label.trim()
+            ? { 'aria-label': label }
+            : {}),
+    }, (0, toggle_1.useToggleState)(props), inputRef);
     const mods = {
         'inside-form': insideForm,
         'side-label': labelPosition === 'side',
@@ -145,7 +150,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }, void 0) }, void 0), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children }, void 0) : null] }, void 0));
+    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { mods: mods, "data-size": size, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": "HiddenInput", ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }), (0, jsx_runtime_1.jsx)(SwitchElement, { qa: qa || 'Switch', mods: mods, "data-size": size, styles: inputStyles, children: (0, jsx_runtime_1.jsx)("div", { "data-element": "Thumb", "aria-hidden": "true" }) }), children ? (0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, children: children }) : null] }));
     if (insideForm) {
         return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
                 as: 'label',
@@ -164,11 +169,11 @@ function Switch(props, ref) {
                 labelSuffix,
                 Component: switchField,
                 ref: domRef,
-            } }, void 0));
+            } }));
     }
     return ((0, jsx_runtime_1.jsxs)(SwitchLabelElement, { styles: styles, mods: mods, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [switchField, label ? ((0, jsx_runtime_1.jsxs)(tasty_1.Element, { styles: labelStyles, mods: {
                     disabled: isDisabled,
-                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: [label, isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }, void 0) : null, (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null] }, void 0)) : null] }, void 0));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: [label, isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }) : null, (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {})] })) : null] })) : null] }));
 }
 /**
  * Switches allow users to turn an individual option on or off.

package/cjs/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.
  */
 
@@ -57,7 +57,7 @@ function TextArea(props, ref) {
         onChange: (0, react_2.chain)(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.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/cjs/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.
  */
 
@@ -27,7 +27,7 @@ exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
     });
     let inputRef = (0, react_1.useRef)(null);
     let { labelProps, inputProps } = (0, textfield_1.useTextField)(props, inputRef);
-    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
+    return ((0, jsx_runtime_1.jsx)(TextInputBase_1.TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }));
 });
 /**
  * TextInputs are text inputs that allow users to input custom text entries

package/cjs/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.
  */
 
@@ -180,9 +180,9 @@ function TextInputBase(props, ref) {
         inputProps.placeholder = ' ';
     }
     if (icon) {
-        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "InputIcon", children: icon }, void 0);
+        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "InputIcon", children: icon });
         if (prefix) {
-            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }, void 0));
+            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }));
         }
         else {
             prefix = icon;
@@ -218,7 +218,7 @@ function TextInputBase(props, ref) {
             WebkitTextSecurity: 'disc',
         }
         : {};
-    const textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { as: ElementType, ...(0, react_2.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 ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (validationState && !isLoading) || isLoading || suffix ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, { "data-element": "InputIcon" }, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)) : null] }, void 0));
+    const textField = ((0, jsx_runtime_1.jsxs)(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [(0, jsx_runtime_1.jsx)(InputElement, { as: ElementType, ...(0, react_2.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 ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }) : null, (validationState && !isLoading) || isLoading || suffix ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, { "data-element": "InputIcon" })] })) : null, suffixPosition === 'after' ? suffix : null] })) : null] }));
     return (0, wrapper_1.wrapWithField)(textField, domRef, {
         ...props,
         styles,

package/cjs/components/forms/index.js

@@ -1,14 +1,18 @@
 /**
  * @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.
  */
 
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/cjs/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.
  */
 
@@ -33,7 +33,7 @@ function wrapWithField(component, ref, props) {
             children,
             Component: component,
             ref,
-        } }, void 0));
+        } }));
 }
 exports.wrapWithField = wrapWithField;
 

package/cjs/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.
  */
 
@@ -19,7 +19,7 @@ const FlexElement = (0, tasty_1.tasty)({
 });
 exports.Flex = (0, react_1.forwardRef)(function Flex(props, ref) {
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
-    return ((0, jsx_runtime_1.jsx)(FlexElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
+    return ((0, jsx_runtime_1.jsx)(FlexElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }));
 });
 
         

package/cjs/components/layout/Flow.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.
  */
 
@@ -20,7 +20,7 @@ const FlowElement = (0, tasty_1.tasty)({
 const STYLE_PROPS = tasty_1.CONTAINER_STYLES;
 exports.Flow = (0, react_1.forwardRef)(function Flow(props, ref) {
     const styles = (0, tasty_1.extractStyles)(props, STYLE_PROPS);
-    return ((0, jsx_runtime_1.jsx)(FlowElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
+    return ((0, jsx_runtime_1.jsx)(FlowElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }));
 });
 
         

package/cjs/components/layout/Grid.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.
  */
 
@@ -25,7 +25,7 @@ const PROP_MAP = {
 };
 exports.Grid = (0, react_1.forwardRef)(function Grid(props, ref) {
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES, undefined, PROP_MAP);
-    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
+    return ((0, jsx_runtime_1.jsx)(GridElement, { ...(0, tasty_1.filterBaseProps)(props, { eventProps: true }), ref: ref, styles: styles }));
 });