@cube-dev/ui-kit 0.9.10 → 0.10.1

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -14,113 +14,118 @@ const react_1 = require("react");
 const interactions_1 = require("@react-aria/interactions");
 const radio_1 = require("@react-aria/radio");
 const context_1 = require("./context");
-const styles_1 = require("../../../utils/styles");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const list_1 = require("../../../styles/list");
-const Base_1 = require("../../Base");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const interactions_2 = require("../../../utils/interactions");
+const tasty_1 = require("../../../tasty");
+const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
 const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const RadioGroup_1 = require("./RadioGroup");
 const Form_1 = require("../Form/Form");
-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, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('Radio_Wrapper', props),
-    });
-    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...(isButton ? BUTTON_STYLES : INPUT_STYLES),
-        ...(0, StylesProvider_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, StylesProvider_1.useContextStyles)('Radio_Label', props),
         ...labelStyles,
     };
     let state = (0, context_1.useRadioProvider)();
@@ -135,27 +140,23 @@ 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,
-                }, ...(0, filterBaseProps_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
+                }, ...(0, tasty_1.filterBaseProps)(labelProps), children: label }, void 0))] }, void 0));
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -11,58 +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 styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const Base_1 = require("../../Base");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
+const tasty_1 = require("../../../tasty");
 const FieldWrapper_1 = require("../FieldWrapper");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-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, StylesProvider_1.useContextStyles)('RadioGroup_Wrapper', props);
-    let groupContextStyles = (0, StylesProvider_1.useContextStyles)('RadioGroup', props);
-    let labelContextStyles = (0, StylesProvider_1.useContextStyles)('RadioGroup_Label', props);
-    styles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...wrapperContextStyles,
-        ...styles,
-    });
-    groupStyles = (0, styles_1.extractStyles)(otherProps, list_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.9.10
+ * @cube-dev/ui-kit v0.10.1
  * 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.9.10
+ * @cube-dev/ui-kit v0.10.1
  * 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.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -15,112 +15,109 @@ const switch_1 = require("@react-aria/switch");
 const interactions_1 = require("@react-aria/interactions");
 const toggle_1 = require("@react-stately/toggle");
 const provider_1 = require("../../../provider");
-const list_1 = require("../../../styles/list");
-const styles_1 = require("../../../utils/styles");
-const Base_1 = require("../../Base");
-const interactions_2 = require("../../../utils/interactions");
+const tasty_1 = require("../../../tasty");
+const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
 const HiddenInput_1 = require("../../HiddenInput");
 const Label_1 = require("../Label");
 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 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',
+    styles: {
+        position: 'relative',
     },
-    color: '#white',
-    border: false,
-    width: '5.25x 5.25x',
-    height: '3x 3x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+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',
     },
-    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 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: 'left',
-    cursor: 'pointer',
-};
+});
+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',
+    },
+});
 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, StylesProvider_1.useContextStyles)('Switch_Wrapper', props);
-    let inputContextStyles = (0, StylesProvider_1.useContextStyles)('Switch', props);
-    let labelContextStyles = (0, StylesProvider_1.useContextStyles)('Switch_Label', props);
-    let thumbContextStyles = (0, StylesProvider_1.useContextStyles)('Switch_Thumb', props);
-    let styles = (0, styles_1.extractStyles)(props, list_1.OUTER_STYLES, {
-        ...(insideForm ? {} : STYLES),
-        ...wrapperContextStyles,
-    });
-    inputStyles = (0, styles_1.extractStyles)(props, list_1.BLOCK_STYLES, {
-        ...INPUT_STYLES,
-        ...inputContextStyles,
-        ...(insideForm && labelPosition === 'side'
-            ? {
-                marginTop: '-3px',
-                placeSelf: 'start',
-            }
-            : null),
-        ...inputStyles,
-    });
-    thumbStyles = {
-        ...THUMB_STYLES,
-        ...thumbContextStyles,
-        ...thumbStyles,
-    };
-    labelStyles = {
+    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)(BaseSwitchWrapperElement, { 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) {
@@ -142,9 +139,9 @@ function Switch(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ...(0, filterBaseProps_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)(SwitchWrapperElement, { 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, filterBaseProps_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));
+                }, ...(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));
 }
 /**
  * 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.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -32,10 +32,10 @@ function TextArea(props, ref) {
             input.style.height = 'auto';
             input.style.height = input.scrollHeight
                 ? `calc(${input.scrollHeight}px + (2 * var(--border-width)))`
-                : `${parseFloat(computedStyle.paddingTop)
-                    + parseFloat(computedStyle.paddingBottom)
-                    + parseFloat(computedStyle.lineHeight) * (rows || 3)
-                    + 2}px`;
+                : `${parseFloat(computedStyle.paddingTop) +
+                    parseFloat(computedStyle.paddingBottom) +
+                    parseFloat(computedStyle.lineHeight) * (rows || 3) +
+                    2}px`;
             input.style.alignSelf = prevAlignment;
         }
     }, [inputRef]);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.10
+ * @cube-dev/ui-kit v0.10.1
  * Released under the MIT license.
  */
 
@@ -14,20 +14,18 @@ const TextInputBase_1 = require("./TextInputBase");
 const provider_1 = require("../../../provider");
 const textfield_1 = require("@react-aria/textfield");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-function TextInput(props, ref) {
+exports.TextInput = (0, react_1.forwardRef)(function TextInput(props, ref) {
     (0, nullableValue_1.castNullableStringValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     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, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
-}
+});
 /**
  * TextInputs are text inputs that allow users to input custom text entries
  * with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
  */
-const _TextInput = (0, react_1.forwardRef)(TextInput);
-exports.TextInput = _TextInput;
-_TextInput.cubeInputType = 'Text';
+exports.TextInput.cubeInputType = 'Text';