@cube-dev/ui-kit 0.11.2 → 0.12.2

package/es/components/content/Title.js

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

package/es/components/forms/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -77,7 +77,7 @@ function Checkbox(props, ref) {
     let originalProps = props;
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, ...otherProps } = props;
+    let { qa, isIndeterminate = false, isDisabled = false, insideForm, isRequired, autoFocus, children, label, extra, validationState, labelProps, labelStyles, labelPosition, necessityLabel, necessityIndicator, message, description, requiredMark = true, tooltip, isHidden, labelSuffix, ...otherProps } = props;
     label = label || children;
     // Swap hooks depending on whether this checkbox is inside a CheckboxGroup.
     // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
@@ -150,6 +150,7 @@ function Checkbox(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: checkboxField,
                 ref: domRef,
             } }, void 0));

package/es/components/forms/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -49,7 +49,7 @@ function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
     let groupStyles = extractStyles(otherProps, BLOCK_STYLES);
@@ -78,6 +78,7 @@ function CheckboxGroup(props, ref) {
             description,
             requiredMark,
             tooltip,
+            labelSuffix,
             Component: radioGroup,
             ref: domRef,
         } }, void 0));

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

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

package/es/components/forms/FieldWrapper.js

@@ -1,20 +1,21 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Text } from '../content/Text';
 import { Label } from './Label';
-import { Grid } from '../layout/Grid';
 import { Paragraph } from '../content/Paragraph';
 import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { wrapNodeIfPlain } from '../../utils/react';
+import { Space } from '../layout/Space';
+import { Flex } from '../layout/Flex';
 const FieldElement = tasty({
     qa: 'Field',
     styles: {
@@ -65,8 +66,8 @@ const MessageElement = tasty({
     },
 });
 function FieldWrapper(props, ref) {
-    const { as, labelPosition, label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, } = props;
-    const labelComponent = label ? (_jsxs(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: [extra ? (_jsxs(Grid, { placeContent: "baseline space-between", flow: "column", children: [_jsx("div", { children: label }, void 0), _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0)) : (label), tooltip ? (_jsxs(_Fragment, { children: ["\u00A0", _jsx(TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)] }, void 0)) : null] }, void 0)) : null;
+    const { as, labelPosition = 'top', label, extra, styles, isRequired, isDisabled, labelStyles, necessityIndicator, labelProps, fieldProps, message, messageStyles, description, Component, validationState, requiredMark = true, tooltip, isHidden, labelSuffix, } = props;
+    const labelComponent = label ? (_jsx(Label, { as: as === 'label' ? 'div' : 'label', styles: labelStyles, labelPosition: labelPosition, isRequired: requiredMark ? isRequired : false, isDisabled: isDisabled, necessityIndicator: necessityIndicator, validationState: validationState, "aria-label": label, ...labelProps, children: _jsxs(Flex, { placeContent: "baseline space-between", width: "100%", children: [tooltip || labelSuffix || extra ? (_jsxs(Space, { placeItems: "baseline", gap: "0.5x", children: [label ? (tooltip || labelSuffix || extra ? (_jsx("div", { children: label }, void 0)) : (label)) : null, tooltip ? (_jsx(TooltipProvider, { title: tooltip, activeWrap: true, width: "initial max-content 40x", children: _jsx(InfoCircleOutlined, { style: { color: 'var(--primary-color)' } }, void 0) }, void 0)) : null, labelSuffix && _jsx("div", { children: labelSuffix }, void 0)] }, void 0)) : (_jsx("div", { children: label }, void 0)), extra && _jsx(Text, { preset: "t3", children: extra }, void 0)] }, void 0) }, void 0)) : null;
     let descriptionComponent = description ? (_jsx("div", { "data-element": "Description", children: wrapNodeIfPlain(description, () => (_jsx(Paragraph, { children: description }, void 0))) }, void 0)) : null;
     const mods = {
         'has-sider': labelPosition === 'side',

package/es/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -70,7 +70,7 @@ function extractContents(element, callback) {
     }
 }
 function FileInput(props, ref) {
-    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, type = 'file', ...otherProps } = useProviderProps(props);
+    let { id, name, qa, qaVal, onChange, placeholder, inputRef, label, extra, labelPosition, isRequired, necessityIndicator, necessityLabel, labelStyles, labelProps, isDisabled, validationState, message, description, requiredMark, tooltip, isHidden, inputStyles, labelSuffix, type = 'file', ...otherProps } = useProviderProps(props);
     const [value, setValue] = useState();
     const [dragHover, setDragHover] = useState(false);
     let domRef = useRef(null);
@@ -131,6 +131,7 @@ function FileInput(props, ref) {
             requiredMark,
             tooltip,
             isHidden,
+            labelSuffix,
             Component: fileInput,
             ref: domRef,
         } }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -84,7 +84,7 @@ function getValueProps(type, value, onChange) {
 }
 export function Field(allProps) {
     const props = useFormProps(allProps);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition, labelStyles, } = props;
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, isDisabled, isLoading, styles, labelPosition = 'top', labelStyles, labelSuffix, } = props;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
     let firstRunRef = useRef(true);
@@ -126,7 +126,7 @@ export function Field(allProps) {
         return null;
     let child = Children.only(children);
     if (nonInput) {
-        return (_jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles }, void 0));
+        return (_jsx(FieldWrapper, { isHidden: isHidden, isDisabled: isDisabled, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles, labelPosition: labelPosition, labelStyles: labelStyles, labelSuffix: labelSuffix }, void 0));
     }
     if (!form) {
         warn('Form Field requires declared form instance if field name is specified');
@@ -181,7 +181,7 @@ export function Field(allProps) {
         name: fieldName,
         onBlur() {
             if (validateTrigger === 'onBlur') {
-                // We need timeout so the change event can be done.
+                // We need a timeout so the change event can be done.
                 setTimeout(() => {
                     form.validateField(fieldName).catch(() => { }); // do nothing on fail
                 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -108,9 +108,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
-            'has-sider': labelPosition === 'side',
-        }, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
+    return (_jsx(FormElement, { ...filterBaseProps(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: { 'has-sider': labelPosition === 'side' }, children: _jsx(FormContext.Provider, { value: ctx, children: _jsx(Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
 import { Field } from './Field';
 import { useForm } from './useForm';
-import { useFormProps, Form as _Form } from './Form';
+import { useFormProps, FormContext, Form as _Form } from './Form';
 const Form = Object.assign(_Form, { Item: Field, useForm });
-export { useFormProps, Form, Field, useForm };
+export { useFormProps, Form, Field, useForm, FormContext };
 
         

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.12.2
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -23,7 +23,7 @@ function isEqual(v1, v2) {
     return JSON.stringify(v1) === JSON.stringify(v2);
 }
 export class CubeFormInstance {
-    constructor(forceReRender) {
+    constructor(forceReRender = () => { }) {
         this.forceReRender = () => { };
         this.initialFields = {};
         this.fields = {};
@@ -31,12 +31,40 @@ export class CubeFormInstance {
         this.isSubmitting = false;
         this.onValuesChange = () => { };
         this.onSubmit = () => { };
-        this.forceReRender = forceReRender || (() => { });
-        this.initialFields = {};
-        this.fields = {};
+        this.setFieldsValue = (newData, touched, skipRender, createFields = false) => {
+            let flag = false;
+            Object.keys(newData).forEach((name) => {
+                let field = this.fields[name];
+                if (!field && createFields) {
+                    this.createField(name, skipRender);
+                    field = this.fields[name];
+                }
+                if (!field || isEqual(field.value, newData[name])) {
+                    if (field && touched === false) {
+                        field.errors = [];
+                    }
+                    return;
+                }
+                flag = true;
+                field.value = newData[name];
+                if (touched === true) {
+                    field.touched = touched;
+                }
+                else if (touched === false) {
+                    field.touched = false;
+                    field.errors = [];
+                }
+            });
+            if (flag && !skipRender) {
+                this.forceReRender();
+                if (touched) {
+                    this.onValuesChange && this.onValuesChange(this.getFormData());
+                }
+            }
+        };
+        this.forceReRender = forceReRender;
         this.getFieldValue = this.getFieldValue.bind(this);
         this.getFieldsValue = this.getFieldsValue.bind(this);
-        this.setFieldsValue = this.setFieldsValue.bind(this);
         this.setFieldValue = this.setFieldValue.bind(this);
         this.getFieldError = this.getFieldError.bind(this);
         this.getFieldInstance = this.getFieldInstance.bind(this);
@@ -51,50 +79,18 @@ export class CubeFormInstance {
         this.setFields = this.setFields.bind(this);
     }
     async submit() {
-        if (this.onSubmit) {
-            return this.onSubmit(this.getFormData());
-        }
-    }
-    setFieldsValue(newData, touched, skipRender, createFields = false) {
-        let flag = false;
-        Object.keys(newData).forEach((name) => {
-            let field = this.fields[name];
-            if (!field && createFields) {
-                this.createField(name, skipRender);
-                field = this.fields[name];
-            }
-            if (!field || isEqual(field.value, newData[name])) {
-                if (field && touched === false) {
-                    field.errors = [];
-                }
-                return;
-            }
-            flag = true;
-            field.value = newData[name];
-            if (touched === true) {
-                field.touched = touched;
-            }
-            else if (touched === false) {
-                field.touched = false;
-                field.errors = [];
-            }
-        });
-        if (flag && !skipRender) {
-            this.forceReRender();
-            if (touched) {
-                this.onValuesChange && this.onValuesChange(this.getFormData());
-            }
-        }
+        var _a;
+        return (_a = this.onSubmit) === null || _a === void 0 ? void 0 : _a.call(this, this.getFormData());
     }
     getFieldValue(name) {
-        return this.fields[name] && this.fields[name].value;
+        var _a;
+        return (_a = this.fields[name]) === null || _a === void 0 ? void 0 : _a.value;
     }
     getFieldsValue() {
-        const data = {};
         return Object.values(this.fields).reduce((map, field) => {
             map[field.name] = field.value;
             return map;
-        }, data);
+        }, {});
     }
     /**
      * Similar to getFieldsValue() but respects '.' notation and creates nested objects.
@@ -130,7 +126,8 @@ export class CubeFormInstance {
         return this.fields[name];
     }
     setInitialFieldsValue(values) {
-        this.initialFields = dotize.convert(values) || {};
+        var _a;
+        this.initialFields = (_a = dotize.convert(values)) !== null && _a !== void 0 ? _a : {};
     }
     resetFields(names, skipRender) {
         const fieldsValue = this.getFieldsValue();
@@ -168,8 +165,8 @@ export class CubeFormInstance {
             return Promise.reject([err]);
         });
     }
-    validateFields(list) {
-        const fieldsList = list || Object.keys(this.fields);
+    validateFields(names) {
+        const fieldsList = names || Object.keys(this.fields);
         const errorList = [];
         return Promise.allSettled(fieldsList.map((name) => {
             return this.validateField(name).catch((errors) => {
@@ -240,7 +237,6 @@ export class CubeFormInstance {
     _createField(name, data) {
         return {
             name,
-            value: undefined,
             validating: false,
             touched: false,
             errors: [],

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
 import { RadioGroup } from './RadioGroup';
-import { useFormProps } from '../Form/Form';
+import { useFormProps } from '../Form';
 const RadioWrapperElement = tasty({
     as: 'label',
     qa: 'RadioWrapper',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -11,7 +11,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { useProviderProps } from '../../../provider';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
-import { FormContext, useFormProps } from '../Form/Form';
+import { FormContext, useFormProps } from '../Form';
 import { RadioContext } from './context';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
@@ -40,7 +40,7 @@ function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
     groupStyles = extractStyles(otherProps, BLOCK_STYLES, groupStyles);
@@ -74,6 +74,7 @@ function RadioGroup(props, ref) {
             isHidden,
             Component: radioGroup,
             ref: domRef,
+            labelSuffix,
         } }, void 0));
 }
 /**

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * 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.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -31,7 +31,7 @@ export const SearchInput = forwardRef((props, ref) => {
     }, [combinedRef, value]);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    return (_jsx(TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: "search", prefix: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+    return (_jsx(TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, type: "search", prefix: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
             !props.isReadOnly && (_jsx(Button, { type: "clear", ...ariaToCubeButtonProps(clearButtonProps), color: {
                 '': '#dark.50',

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
@@ -70,31 +70,31 @@ const SwitchElement = tasty({
             '': null,
             'inside-form & side-label': 'start',
         },
-    },
-});
-const SwitchThumbElement = 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',
+        Thumb: {
+            position: 'absolute',
+            width: '2.5x',
+            height: '2.5x',
+            radius: 'round',
+            fill: {
+                '': 'currentColor',
+                disabled: '#white.5',
+            },
+            shadow: '0px 2px 4px #dark.20;',
+            top: '.25x',
+            left: {
+                '': '.25x',
+                checked: '2.5x',
+            },
+            transition: 'left, theme',
+            cursor: 'pointer',
         },
-        transition: 'left',
-        cursor: 'pointer',
     },
 });
 function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = 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;
+    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     label = label || children;
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
@@ -116,9 +116,7 @@ function Switch(props, ref) {
         hovered: isHovered,
         focused: isFocused,
     };
-    const switchField = (_jsxs(SwitchWrapperElement, { qa: qa || 'Switch', mods: mods, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { mods: mods, styles: inputStyles, children: _jsx(SwitchThumbElement, { styles: thumbStyles, mods: {
-                        checked: inputProps.checked,
-                    } }, void 0) }, void 0)] }, void 0));
+    const switchField = (_jsxs(SwitchWrapperElement, { qa: qa || 'Switch', mods: mods, children: [_jsx(HiddenInput, { "data-qa": "HiddenInput", ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(SwitchElement, { mods: mods, styles: inputStyles, children: _jsx("div", { "data-element": "Thumb", "aria-hidden": "true" }, void 0) }, void 0)] }, void 0));
     if (insideForm) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -134,6 +132,7 @@ function Switch(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: switchField,
                 ref: domRef,
             } }, void 0));

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

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useControlledState } from '@react-stately/utils';
 import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
-import { chain } from '@react-aria/utils';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { chain, useLayoutEffect } from '../../../utils/react';
 function TextArea(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);

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

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