@cube-dev/ui-kit 0.9.8 → 0.9.11

package/es/components/content/Card/Card.js

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

package/es/components/content/Content.js

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

package/es/components/content/Divider.js

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

package/es/components/content/Footer.js

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

package/es/components/content/Header.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -80,7 +80,8 @@ const statusIconMap = {
     },
 };
 function Result(props, ref) {
-    const { children, icon, status, subTitle, title, ...otherProps } = props;
+    let { children, icon, status, subTitle, subtitle, title, ...otherProps } = props;
+    subtitle = subtitle !== null && subtitle !== void 0 ? subtitle : subTitle;
     if (icon && status) {
         console.warn('Don\'t use "icon" and "status" together, it can lead to possible errors.');
     }
@@ -94,7 +95,7 @@ function Result(props, ref) {
         return (_jsx(IconWrapper, { "data-element": "IconWrapper", styles: { color }, children: _jsx(Component, { "data-element": "Icon" }, void 0) }, void 0));
     }, [icon, status]);
     const styles = extractStyles(otherProps, CONTAINER_STYLES);
-    return (_jsxs(Container, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subTitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: "h4", children: title }, void 0))), wrapNodeIfPlain(subTitle, () => (_jsx(Title, { level: 3, preset: "h5m", children: subTitle }, void 0)))] }, void 0)), children && _jsx("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
+    return (_jsxs(Container, { ...filterBaseProps(otherProps, { eventProps: true }), ref: ref, styles: styles, children: [iconNode, (title || subtitle) && (_jsxs("div", { "data-element": "Title", children: [wrapNodeIfPlain(title, () => (_jsx(Title, { level: 2, preset: "h4", children: title }, void 0))), wrapNodeIfPlain(subtitle, () => (_jsx(Title, { level: 3, preset: "h5m", children: subtitle }, void 0)))] }, void 0)), children && _jsx("div", { "data-element": "Content", children: children }, void 0)] }, void 0));
 }
 const _Result = forwardRef(Result);
 export { _Result as Result };

package/es/components/content/Skeleton/Skeleton.js

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

package/es/components/content/Tag/Tag.js

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

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES } from '../../styles/list';
 import { extractStyles } from '../../utils/styles';
 import { filterBaseProps } from '../../utils/filterBaseProps';
 import { styled } from '../../styled';
+import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES];
 const DEFAULT_STYLES = {
     display: {
@@ -46,7 +47,8 @@ const RawText = styled({
     styles: DEFAULT_STYLES,
 });
 const _Text = forwardRef((allProps, ref) => {
-    let { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
+    allProps = useSlotProps(allProps, 'text');
+    const { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
     const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
     return (_jsx(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * 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.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -70,7 +70,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, 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, ...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,
@@ -139,6 +139,7 @@ function Checkbox(props, ref) {
                 as: 'label',
                 labelPosition,
                 label,
+                extra,
                 styles,
                 isRequired,
                 labelStyles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -50,7 +50,7 @@ function CheckboxGroup(props, ref) {
     props = castNullableArrayValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, 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, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     let wrapperContextStyles = useContextStyles('CheckboxGroup_Wrapper', props);
     let groupContextStyles = useContextStyles('CheckboxGroup', props);
@@ -79,6 +79,7 @@ function CheckboxGroup(props, ref) {
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

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

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

package/es/components/forms/FieldWrapper.js

@@ -1,60 +1,72 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Base } from '../Base';
+import { Text } from '../content/Text';
 import { Label } from './Label';
+import { Grid } from '../layout/Grid';
 import { Paragraph } from '../content/Paragraph';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { wrapNodeIfPlain } from '../../utils/react';
-const FIELD_STYLES = {
-    display: 'grid',
-    gridColumns: {
-        '': '1fr',
-        'has-sider': '@(label-width, auto) 1fr',
+import { styled } from '../../styled';
+const RawField = styled({
+    props: {
+        qa: 'Field',
     },
-    gap: {
-        '': '1x',
-        'has-sider': '@(column-gap, 1x)',
-    },
-    placeItems: 'baseline stretch',
-    LabelArea: {
-        display: 'block',
-        width: {
-            '': 'initial',
-            'has-sider': '@label-width',
+    styles: {
+        display: 'grid',
+        gridColumns: {
+            '': '1fr',
+            'has-sider': '@(label-width, auto) 1fr',
         },
-    },
-    InputArea: {
-        display: 'block',
-        flow: 'column',
-        gridColumn: {
-            '': 'initial',
-            'has-sider': 2,
+        gap: {
+            '': '1x',
+            'has-sider': '@(column-gap, 1x)',
+        },
+        placeItems: 'baseline stretch',
+        LabelArea: {
+            display: 'block',
+            width: {
+                '': 'initial',
+                'has-sider': '@label-width',
+            },
         },
+        InputArea: {
+            display: 'block',
+            flow: 'column',
+            gridColumn: {
+                '': 'initial',
+                'has-sider': 2,
+            },
+        },
+    },
+});
+const RawMessage = styled({
+    props: {
+        qa: 'Field_Message',
     },
-};
-const MESSAGE_STYLES = {
-    preset: 'default',
-    color: {
-        '': '#dark.75',
-        invalid: '#danger-text',
-        valid: '#success-text',
-        disabled: '#dark.40',
+    styles: {
+        preset: 'default',
+        color: {
+            '': '#dark.75',
+            invalid: '#danger-text',
+            valid: '#success-text',
+            disabled: '#dark.40',
+        },
+        fontWeight: 400,
+        textAlign: 'left',
+        userSelect: 'none',
     },
-    fontWeight: 400,
-    textAlign: 'left',
-    userSelect: 'none',
-};
+});
 function FieldWrapper(props, ref) {
-    const { as, labelPosition, label, 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, ...labelProps, children: [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, 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;
     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',
@@ -62,13 +74,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(Base, { as: as || 'div', qa: "Field", ref: ref, mods: mods, isHidden: isHidden, styles: {
-            ...FIELD_STYLES,
-            ...styles,
-        }, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(Base, { qa: "Field_Message", mods: mods, styles: {
-                            ...MESSAGE_STYLES,
-                            ...messageStyles,
-                        }, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return (_jsxs(RawField, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? (_jsxs("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, _jsxs("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && (_jsx(RawMessage, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
 }
 /**
  * A wrapper for form fields to provide additional decoration for inputs.

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * 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, 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, type = 'file', ...otherProps } = useProviderProps(props);
     const [value, setValue] = useState();
     const [dragHover, setDragHover] = useState(false);
     let domRef = useRef(null);
@@ -122,6 +122,7 @@ function FileInput(props, ref) {
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -83,7 +83,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, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, } = props;
+    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, validateTrigger, validationState, necessityLabel, necessityIndicator, shouldUpdate, message, description, tooltip, isHidden, } = props;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
     let firstRunRef = useRef(true);
@@ -116,6 +116,13 @@ export function Field(allProps) {
             form.createField(fieldName);
         }
     }, [field]);
+    useEffect(() => {
+        if (!form)
+            return;
+        if (field) {
+            field.rules = rules;
+        }
+    }, [rules]);
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -123,7 +130,7 @@ export function Field(allProps) {
         return null;
     let child = Children.only(children);
     if (nonInput) {
-        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
+        return (_jsx(FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child }, void 0));
     }
     if (!fieldName) {
         console.error('invalid form name:', fieldName);
@@ -133,8 +140,8 @@ export function Field(allProps) {
         console.error('form field requires declared form instance');
         return null;
     }
-    // @ts-ignore
-    inputType = inputType || child.type.cubeInputType || 'Text';
+    inputType =
+        inputType || child.type.cubeInputType || 'Text';
     const defaultValidateTrigger = getDefaultValidateTrigger(inputType);
     if (firstRunRef.current && defaultValue != null) {
         if (!field) {
@@ -172,8 +179,8 @@ export function Field(allProps) {
             }
         }
         form.setFieldValue(fieldName, val, true);
-        if (validateTrigger === 'onChange'
-            || (field && field.errors && field.errors.length)) {
+        if (validateTrigger === 'onChange' ||
+            (field && field.errors && field.errors.length)) {
             form.validateField(fieldName).catch(() => { }); // do nothing on fail
         }
     }
@@ -204,6 +211,9 @@ export function Field(allProps) {
     if (label) {
         newProps.label = label;
     }
+    if (extra) {
+        newProps.extra = extra;
+    }
     if (tooltip) {
         newProps.tooltip = tooltip;
     }

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -38,7 +38,7 @@ function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, label, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, ...otherProps } = 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 = useDOMRef(ref);
     let wrapperContextStyles = useContextStyles('RadioGroup_Wrapper', props);
     let groupContextStyles = useContextStyles('RadioGroup', props);
@@ -69,6 +69,7 @@ function RadioGroup(props, ref) {
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.8
+ * @cube-dev/ui-kit v0.9.11
  * Released under the MIT license.
  */
 
@@ -75,7 +75,7 @@ function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, isDisabled = false, autoFocus, children, label, 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, thumbStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
     label = label || children;
     let wrapperContextStyles = useContextStyles('Switch_Wrapper', props);
     let inputContextStyles = useContextStyles('Switch', props);
@@ -125,6 +125,7 @@ function Switch(props, ref) {
                 as: 'label',
                 labelPosition,
                 label,
+                extra,
                 styles,
                 labelStyles,
                 labelProps,

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

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

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

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