@cube-dev/ui-kit 0.0.0-canary-23bc0fd → 0.0.0-canary-9ea74e0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Input/Input.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -54,7 +54,7 @@ exports.LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
-const RawLabel = (0, tasty_1.tasty)({
+const LabelElement = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'Label',
     styles: exports.LABEL_STYLES,
@@ -72,7 +72,7 @@ function Label(props, ref) {
     let icon = ((0, jsx_runtime_1.jsx)("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
             : undefined, children: REQUIRED_ICON }, void 0));
-    return ((0, jsx_runtime_1.jsx)(RawLabel, { ...(0, tasty_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return ((0, jsx_runtime_1.jsx)(LabelElement, { ...(0, tasty_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',

package/cjs/components/forms/NumberInput/NumberInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/PasswordInput/PasswordInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,6 @@ const interactions_1 = require("@react-aria/interactions");
 const radio_1 = require("@react-aria/radio");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
-const Base_1 = require("../../Base");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
@@ -23,102 +22,110 @@ const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const RadioGroup_1 = require("./RadioGroup");
 const Form_1 = require("../Form/Form");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
-const STYLES = {
-    position: 'relative',
-    display: 'grid',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'column',
-    preset: 'default',
-    width: 'min-content',
-};
-const BUTTON_STYLES = {
-    radius: true,
-    fill: {
-        '': '#white',
-        hovered: '#purple-text.04',
-        disabled: '#dark.04',
+const RadioWrapperElement = (0, tasty_1.tasty)({
+    as: 'label',
+    qa: 'RadioWrapper',
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'column',
+        preset: 'default',
+        width: 'min-content',
     },
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        disabled: '#dark.40',
-    },
-    fontWeight: 500,
-    preset: 'default',
-    border: {
-        '': true,
-        checked: '#purple-text',
-        'invalid & checked': '#danger-text',
-        'disabled & checked': '#dark.40',
-        disabled: '#border',
-    },
-    padding: '(1x - 1bw) (1.5x - 1bw)',
-    cursor: 'pointer',
-    opacity: {
-        '': 1,
-        disabled: 0.5,
-    },
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
-    },
-};
-const INPUT_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    radius: 'round',
-    fill: {
-        '': '#white',
-        disabled: '#dark.04',
-    },
-    color: {
-        checked: '#purple-text',
-        'invalid & checked': '#danger-text',
-        'disabled | !checked': '#clear',
-        'disabled & checked': '#dark.12',
+});
+const RadioButtonElement = (0, tasty_1.tasty)({
+    styles: {
+        radius: true,
+        fill: {
+            '': '#white',
+            hovered: '#purple-text.04',
+            disabled: '#dark.04',
+        },
+        color: {
+            '': '#dark.85',
+            invalid: '#danger-text',
+            disabled: '#dark.40',
+        },
+        fontWeight: 500,
+        preset: 'default',
+        border: {
+            '': true,
+            checked: '#purple-text',
+            'invalid & checked': '#danger-text',
+            'disabled & checked': '#dark.40',
+            disabled: '#border',
+        },
+        padding: '(1x - 1bw) (1.5x - 1bw)',
+        cursor: 'pointer',
+        opacity: {
+            '': 1,
+            disabled: 0.5,
+        },
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
     },
-    border: {
-        '': '#dark.30',
-        checked: '#purple-text',
-        invalid: '#danger-text.50',
-        disabled: '#dark.12',
+});
+const RadioNormalElement = (0, tasty_1.tasty)({
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        radius: 'round',
+        fill: {
+            '': '#white',
+            disabled: '#dark.04',
+        },
+        color: {
+            checked: '#purple-text',
+            'invalid & checked': '#danger-text',
+            'disabled | !checked': '#clear',
+            'disabled & checked': '#dark.12',
+        },
+        border: {
+            '': '#dark.30',
+            checked: '#purple-text',
+            invalid: '#danger-text.50',
+            disabled: '#dark.12',
+        },
+        width: '2x',
+        height: '2x',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        transition: 'theme',
+        RadioCircle: {
+            display: 'block',
+            radius: 'round',
+            width: '1x',
+            height: '1x',
+            fill: 'currentColor',
+            transition: 'theme',
+        },
     },
-    width: '2x',
-    height: '2x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
+const RadioLabelElement = (0, tasty_1.tasty)({
+    qa: 'RadioLabel',
+    styles: {
+        ...Label_1.INLINE_LABEL_STYLES,
+        fontWeight: 400,
     },
-    transition: 'theme',
-};
-const CIRCLE_STYLES = {
-    radius: 'round',
-    width: '1x',
-    height: '1x',
-    fill: 'currentColor',
-    transition: 'theme',
-};
+});
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type, 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
     label = label || children;
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
-        ...STYLES,
-        ...(0, StyleProvider_1.useContextStyles)('Radio_Wrapper', props),
-    });
-    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
-        ...(isButton ? BUTTON_STYLES : INPUT_STYLES),
-        ...(0, StyleProvider_1.useContextStyles)(isButton ? 'RadioButton' : 'Radio', props),
-        ...inputStyles,
-    });
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES);
+    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
         ...Label_1.INLINE_LABEL_STYLES,
         fontWeight: 400,
-        ...(0, StyleProvider_1.useContextStyles)('Radio_Label', props),
         ...labelStyles,
     };
     let state = (0, context_1.useRadioProvider)();
@@ -133,23 +140,19 @@ function Radio(props, ref) {
         ...props,
         isDisabled,
     }, state, inputRef);
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ref: domRef, mods: {
+    return ((0, jsx_runtime_1.jsxs)(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: {
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
+        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: !isButton ? ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: CIRCLE_STYLES, mods: {
-                        checked: inputProps.checked,
-                        invalid: validationState === 'invalid',
-                        valid: validationState === 'valid',
-                    } }, void 0)) : (children) }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "RadioLabel", styles: labelStyles, mods: {
+                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

package/cjs/components/forms/RadioGroup/RadioGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -11,57 +11,42 @@ exports.RadioGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("@react-spectrum/utils");
-const Label_1 = require("../Label");
 const provider_1 = require("../../../provider");
 const radio_1 = require("@react-aria/radio");
 const radio_2 = require("@react-stately/radio");
 const Form_1 = require("../Form/Form");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
-const Base_1 = require("../../Base");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
-const GROUP_STYLES = {
-    display: 'flex',
-    placeItems: 'start',
-    placeContent: 'start',
-    flow: {
-        '': 'column',
-        horizontal: 'row wrap',
+const RadioGroupElement = (0, tasty_1.tasty)({
+    qa: 'RadioGroup',
+    styles: {
+        display: 'flex',
+        placeItems: 'start',
+        placeContent: 'start',
+        flow: {
+            '': 'column',
+            horizontal: 'row wrap',
+        },
+        gap: {
+            '': '1x',
+            horizontal: '1x 2x',
+        },
+        padding: '(1x - 1bw) 0',
     },
-    gap: {
-        '': '1x',
-        horizontal: '1x 2x',
-    },
-    padding: '(1x - 1bw) 0',
-};
+});
 function RadioGroup(props, ref) {
     props = (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup_Wrapper', props);
-    let groupContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup', props);
-    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('RadioGroup_Label', props);
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
-        ...wrapperContextStyles,
-        ...styles,
-    });
-    groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
-        ...GROUP_STYLES,
-        ...groupContextStyles,
-        ...groupStyles,
-    });
-    labelStyles = {
-        ...Label_1.LABEL_STYLES,
-        ...labelContextStyles,
-        ...labelStyles,
-    };
+    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
+    groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, groupStyles);
     let state = (0, radio_2.useRadioGroupState)(props);
     let { radioGroupProps: fieldProps, labelProps } = (0, radio_1.useRadioGroup)(props, state);
-    let radioGroup = ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "RadioGroup", styles: groupStyles, mods: {
+    let radioGroup = ((0, jsx_runtime_1.jsx)(RadioGroupElement, { styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isRequired,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * 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.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 
@@ -16,7 +16,6 @@ const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
 const provider_1 = require("../../../provider");
 const tasty_1 = require("../../../tasty");
-const Base_1 = require("../../Base");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const HiddenInput_1 = require("../../HiddenInput");
@@ -25,100 +24,100 @@ const icons_1 = require("@ant-design/icons");
 const Form_1 = require("../Form/Form");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const StyleProvider_1 = require("../../../providers/StyleProvider");
-const STYLES = {
-    position: 'relative',
-    display: 'flex',
-    placeItems: 'center start',
-    gap: '1x',
-    flow: 'row',
-    preset: 'input',
-    width: 'min-content',
-    cursor: 'pointer',
-};
-const INPUT_STYLES = {
-    position: 'relative',
-    display: 'grid',
-    placeItems: 'center',
-    radius: 'round',
-    fill: {
-        '': '#dark.50',
-        checked: '#purple',
-        disabled: '#dark.12',
+const BaseSwitchWrapperElement = (0, tasty_1.tasty)({
+    qa: 'SwitchWrapper',
+});
+const SwitchWrapperElement = (0, tasty_1.tasty)({
+    qa: 'SwitchWrapper',
+    styles: {
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'row',
+        preset: 'input',
+        width: 'min-content',
+        cursor: 'pointer',
     },
-    color: '#white',
-    border: false,
-    width: '5.25x 5.25x',
-    height: '3x 3x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+const SwitchElement = (0, tasty_1.tasty)({
+    styles: {
+        position: 'relative',
+        display: 'grid',
+        placeItems: 'center',
+        radius: 'round',
+        fill: {
+            '': '#dark.50',
+            checked: '#purple',
+            disabled: '#dark.12',
+        },
+        color: '#white',
+        border: false,
+        width: '5.25x 5.25x',
+        height: '3x 3x',
+        outline: {
+            '': '#purple-03.0',
+            focused: '#purple-03',
+        },
+        transition: 'theme',
+        cursor: 'pointer',
+        marginTop: {
+            '': null,
+            'inside-form & side-label': '-3px',
+        },
+        placeSelf: {
+            '': null,
+            'inside-form & side-label': 'start',
+        },
     },
-    transition: 'theme',
-    cursor: 'pointer',
-};
-const THUMB_STYLES = {
-    position: 'absolute',
-    width: '2.5x',
-    height: '2.5x',
-    radius: 'round',
-    fill: 'currentColor',
-    shadow: '0px 2px 4px #dark.20;',
-    top: '.25x',
-    left: {
-        '': '.25x',
-        checked: '2.5x',
+});
+const SwitchThumbElement = (0, tasty_1.tasty)({
+    'aria-hidden': 'true',
+    styles: {
+        position: 'absolute',
+        width: '2.5x',
+        height: '2.5x',
+        radius: 'round',
+        fill: 'currentColor',
+        shadow: '0px 2px 4px #dark.20;',
+        top: '.25x',
+        left: {
+            '': '.25x',
+            checked: '2.5x',
+        },
+        transition: 'left',
+        cursor: 'pointer',
     },
-    transition: 'left',
-    cursor: 'pointer',
-};
+});
 function Switch(props, ref) {
     props = (0, nullableValue_1.castNullableIsSelected)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, thumbStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
     label = label || children;
-    let wrapperContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Wrapper', props);
-    let inputContextStyles = (0, StyleProvider_1.useContextStyles)('Switch', props);
-    let labelContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Label', props);
-    let thumbContextStyles = (0, StyleProvider_1.useContextStyles)('Switch_Thumb', props);
-    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES, {
-        ...(insideForm ? {} : STYLES),
-        ...wrapperContextStyles,
-    });
-    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-        ...(insideForm && labelPosition === 'side'
-            ? {
-                marginTop: '-3px',
-                placeSelf: 'start',
-            }
-            : null),
-        ...inputStyles,
-    });
-    thumbStyles = {
-        ...THUMB_STYLES,
-        ...thumbContextStyles,
-        ...thumbStyles,
-    };
-    labelStyles = {
+    const SwitchWrapperElementToUse = insideForm
+        ? BaseSwitchWrapperElement
+        : SwitchWrapperElement;
+    let styles = (0, tasty_1.extractStyles)(props, tasty_1.OUTER_STYLES);
+    inputStyles = (0, tasty_1.extractStyles)(props, tasty_1.BLOCK_STYLES, inputStyles);
+    labelStyles = (0, react_1.useMemo)(() => ({
         ...(insideForm ? Label_1.LABEL_STYLES : Label_1.INLINE_LABEL_STYLES),
-        ...labelContextStyles,
         ...labelStyles,
-    };
+    }), [insideForm, labelStyles]);
     let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled }, true);
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     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);
-    const switchField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: `${qa || 'Switch'}Wrapper`, styles: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Switch', ...(0, react_2.mergeProps)(inputProps, focusProps), ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
+    const switchField = ((0, jsx_runtime_1.jsxs)(SwitchWrapperElement, { qa: qa || 'Switch', 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, { mods: {
+                    'inside-form': insideForm,
+                    'side-label': labelPosition === 'side',
                     checked: inputProps.checked,
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: (0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "SwitchThumb", styles: thumbStyles, "aria-hidden": "true", mods: {
+                }, styles: inputStyles, children: (0, jsx_runtime_1.jsx)(SwitchThumbElement, { styles: thumbStyles, mods: {
                         checked: inputProps.checked,
                     } }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
@@ -140,7 +139,7 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ...(0, tasty_1.filterBaseProps)(otherProps), ref: domRef, children: [switchField, label && ((0, jsx_runtime_1.jsxs)(Base_1.Base, { styles: labelStyles, mods: {
+    return ((0, jsx_runtime_1.jsxs)(tasty_1.Element, { as: "label", styles: styles, ...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))] }, void 0));
 }

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-23bc0fd
+ * @cube-dev/ui-kit v0.0.0-canary-9ea74e0
  * Released under the MIT license.
  */