@cube-dev/ui-kit 0.9.11 → 0.10.2

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -11,19 +11,15 @@ exports.CheckboxGroup = 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 checkbox_1 = require("@react-aria/checkbox");
 const checkbox_2 = require("@react-stately/checkbox");
 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 STYLES = {
+const WRAPPER_STYLES = {
     display: 'grid',
     gridColumns: {
         '': '1fr',
@@ -35,45 +31,34 @@ const STYLES = {
     },
     placeItems: 'baseline start',
 };
-const GROUP_STYLES = {
-    display: 'flex',
-    placeItems: 'start',
-    placeContent: 'start',
-    flow: {
-        '': 'column',
-        horizontal: 'row wrap',
+const CheckGroupElement = (0, tasty_1.tasty)({
+    qa: 'CheckboxGroup',
+    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 CheckboxGroup(props, ref) {
     props = (0, nullableValue_1.castNullableArrayValue)(props);
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { isDisabled, isRequired, necessityIndicator, necessityLabel, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    let wrapperContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup_Wrapper', props);
-    let groupContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup', props);
-    let labelContextStyles = (0, StylesProvider_1.useContextStyles)('CheckboxGroup_Label', props);
-    let styles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
-        ...STYLES,
-        ...wrapperContextStyles,
-    });
-    let groupStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
-        ...GROUP_STYLES,
-        ...groupContextStyles,
-    });
-    labelStyles = {
-        ...Label_1.LABEL_STYLES,
-        ...labelContextStyles,
-        ...labelStyles,
-    };
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, WRAPPER_STYLES);
+    let groupStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES);
     let state = (0, checkbox_2.useCheckboxGroupState)(props);
     let { groupProps, labelProps } = (0, checkbox_1.useCheckboxGroup)(props, state);
-    let radioGroup = ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
+    let radioGroup = ((0, jsx_runtime_1.jsx)(CheckGroupElement, { styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: (0, jsx_runtime_1.jsx)(Form_1.FormContext.Provider, { value: {
                 isDisabled,

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

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

package/cjs/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -14,14 +14,12 @@ const Text_1 = require("../content/Text");
 const Label_1 = require("./Label");
 const Grid_1 = require("../layout/Grid");
 const Paragraph_1 = require("../content/Paragraph");
+const tasty_1 = require("../../tasty");
 const TooltipProvider_1 = require("../overlays/Tooltip/TooltipProvider");
 const icons_1 = require("@ant-design/icons");
 const react_2 = require("../../utils/react");
-const styled_1 = require("../../styled");
-const RawField = (0, styled_1.styled)({
-    props: {
-        qa: 'Field',
-    },
+const FieldElement = (0, tasty_1.tasty)({
+    qa: 'Field',
     styles: {
         display: 'grid',
         gridColumns: {
@@ -50,10 +48,8 @@ const RawField = (0, styled_1.styled)({
         },
     },
 });
-const RawMessage = (0, styled_1.styled)({
-    props: {
-        qa: 'Field_Message',
-    },
+const MessageElement = (0, tasty_1.tasty)({
+    qa: 'Field_Message',
     styles: {
         preset: 'default',
         color: {
@@ -77,7 +73,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return ((0, jsx_runtime_1.jsxs)(RawField, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(RawMessage, { mods: mods, styles: messageStyles, role: validationState === 'invalid' ? 'alert' : undefined, children: message }, void 0))] }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(FieldElement, { as: as || 'div', ref: ref, mods: mods, isHidden: isHidden, styles: styles, ...fieldProps, children: [labelComponent || descriptionComponent ? ((0, jsx_runtime_1.jsxs)("div", { "data-element": "LabelArea", children: [labelComponent, descriptionComponent] }, void 0)) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "InputArea", children: [Component, message && !isDisabled && ((0, jsx_runtime_1.jsx)(MessageElement, { 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/cjs/components/forms/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -12,56 +12,56 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const provider_1 = require("../../../provider");
 const Action_1 = require("../../actions/Action");
+const tasty_1 = require("../../../tasty");
 const utils_1 = require("@react-spectrum/utils");
 const FieldWrapper_1 = require("../FieldWrapper");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const StylesProvider_1 = require("../../../providers/StylesProvider");
-const DEFAULT_WRAPPER_STYLES = {
-    display: 'inline-flex',
-    position: 'relative',
-    preset: 't3',
-    padding: '.75x 1x',
-    gap: '1x',
-    flow: 'row',
-    placeItems: 'center start',
-    fill: {
-        '': '#white',
-        'drag-hover': '#purple.16',
-    },
-    border: true,
-    radius: true,
-    cursor: 'pointer',
-    overflow: 'hidden',
-    Button: {
-        radius: 'round',
+const FileInputElement = (0, tasty_1.tasty)(Action_1.Action, {
+    styles: {
+        display: 'inline-flex',
+        position: 'relative',
+        preset: 't3',
+        padding: '.75x 1x',
+        gap: '1x',
+        flow: 'row',
+        placeItems: 'center start',
         fill: {
-            '': '#light',
-            'hovered | focused | pressed': '#purple-04',
-            disabled: '#light',
+            '': '#white',
+            'drag-hover': '#purple.16',
         },
-        color: '#dark',
-        padding: '.5x 1x',
-        transition: 'fill',
-    },
-    Placeholder: {
-        color: '#dark-02',
-    },
-    Value: {
-        color: '#dark-02',
-    },
-    Input: {
-        position: 'absolute',
-        top: '-50px',
-        right: 0,
-        bottom: 0,
-        left: 0,
-        radius: '@content-radius',
-        // opacity: 0,
+        border: true,
+        radius: true,
         cursor: 'pointer',
-        zIndex: 10,
+        overflow: 'hidden',
+        Button: {
+            radius: 'round',
+            fill: {
+                '': '#light',
+                'hovered | focused | pressed': '#purple-04',
+                disabled: '#light',
+            },
+            color: '#dark',
+            padding: '.5x 1x',
+            transition: 'fill',
+        },
+        Placeholder: {
+            color: '#dark-02',
+        },
+        Value: {
+            color: '#dark-02',
+        },
+        Input: {
+            position: 'absolute',
+            top: '-50px',
+            right: 0,
+            bottom: 0,
+            left: 0,
+            radius: '@content-radius',
+            // opacity: 0,
+            cursor: 'pointer',
+            zIndex: 10,
+        },
     },
-};
+});
 function extractContents(element, callback) {
     const files = element === null || element === void 0 ? void 0 : element.files;
     if (files && files.length > 0) {
@@ -79,12 +79,7 @@ function FileInput(props, ref) {
     let domRef = (0, react_1.useRef)(null);
     let defaultInputRef = (0, react_1.useRef)(null);
     inputRef = inputRef || defaultInputRef;
-    let styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES);
-    inputStyles = {
-        ...DEFAULT_WRAPPER_STYLES,
-        ...(0, StylesProvider_1.useContextStyles)('FileInput', otherProps),
-        ...inputStyles,
-    };
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     const onLocalChange = (0, react_1.useCallback)((event) => {
         const value = event.target.value;
         if (type === 'file') {
@@ -107,7 +102,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = ((0, jsx_runtime_1.jsxs)(Action_1.Action, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = ((0, jsx_runtime_1.jsxs)(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -86,7 +86,7 @@ function getValueProps(type, value, onChange) {
 }
 function Field(allProps) {
     const props = (0, Form_1.useFormProps)(allProps);
-    let { defaultValue, type: inputType, id, idPrefix, children, name, form, rules, label, extra, 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, styles, } = props;
     const nonInput = !name;
     const fieldName = name != null ? (Array.isArray(name) ? name.join('.') : name) : '';
     let firstRunRef = (0, react_1.useRef)(true);
@@ -107,25 +107,20 @@ function Field(allProps) {
         };
     }, []);
     let field = form === null || form === void 0 ? void 0 : form.getFieldInstance(fieldName);
+    if (field) {
+        field.rules = rules;
+    }
     let isRequired = rules && !!rules.find((rule) => rule.required);
     (0, react_1.useEffect)(() => {
         if (!form)
             return;
         if (field) {
-            field.rules = rules;
             form.forceReRender();
         }
         else {
             form.createField(fieldName);
         }
     }, [field]);
-    (0, react_1.useEffect)(() => {
-        if (!form)
-            return;
-        if (field) {
-            field.rules = rules;
-        }
-    }, [rules]);
     if (typeof children === 'function') {
         children = children(form);
     }
@@ -133,7 +128,7 @@ function Field(allProps) {
         return null;
     let child = react_1.Children.only(children);
     if (nonInput) {
-        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.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));
+        return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { isHidden: isHidden, validationState: validationState, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isRequired: isRequired, label: label, extra: extra, tooltip: tooltip, message: message, description: description, Component: child, styles: styles }, void 0));
     }
     if (!fieldName) {
         console.error('invalid form name:', fieldName);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -12,14 +12,21 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
 const provider_1 = require("../../../provider");
 const react_1 = require("react");
-const Base_1 = require("../../Base");
-const styles_1 = require("../../../utils/styles");
-const list_1 = require("../../../styles/list");
-const filterBaseProps_1 = require("../../../utils/filterBaseProps");
+const tasty_1 = require("../../../tasty");
 const useForm_1 = require("./useForm");
 const react_2 = require("../../../utils/react");
 const promise_1 = require("../../../utils/promise");
 exports.FormContext = (0, react_1.createContext)({});
+const FormElement = (0, tasty_1.tasty)({
+    as: 'form',
+    qa: 'Form',
+    styles: {
+        display: 'block',
+        flow: 'column',
+        gap: '2x',
+        '@label-width': '25x',
+    },
+});
 function useFormProps(props) {
     const ctx = (0, react_1.useContext)(exports.FormContext);
     return { ...ctx, ...props };
@@ -32,16 +39,9 @@ const formPropNames = new Set([
     'method',
     'target',
 ]);
-const DEFAULT_STYLES = {
-    display: 'block',
-    flow: 'column',
-    gap: '2x',
-    '@label-width': '25x',
-};
 function Form(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     let { qa, name, children, labelPosition = 'top', isRequired, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
-    let styles;
     const firstRunRef = (0, react_1.useRef)(true);
     ref = (0, react_2.useCombinedRefs)(ref);
     let onSubmitCallback;
@@ -52,8 +52,8 @@ function Form(props, ref) {
                 e && (e === null || e === void 0 ? void 0 : e.stopPropagation) && (e === null || e === void 0 ? void 0 : e.stopPropagation());
                 if (e.nativeEvent) {
                     const evt = e.nativeEvent;
-                    if (evt.submitter
-                        && evt.submitter.getAttribute('type') !== 'submit') {
+                    if (evt.submitter &&
+                        evt.submitter.getAttribute('type') !== 'submit') {
                         return;
                     }
                 }
@@ -86,7 +86,7 @@ function Form(props, ref) {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
-    styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES, DEFAULT_STYLES);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     if (labelWidth) {
         styles['@label-width'] = labelWidth;
     }
@@ -112,7 +112,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "form", qa: "Form", ...(0, filterBaseProps_1.filterBaseProps)(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
+    return ((0, jsx_runtime_1.jsx)(FormElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
             'has-sider': labelPosition === 'side',
         }, children: (0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: ctx, children: (0, jsx_runtime_1.jsx)(provider_1.Provider, { insideForm: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, validationState: validationState, children: children }, void 0) }, void 0) }, void 0));
 }

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useForm = exports.CubeFormInstance = void 0;
 const react_1 = require("react");
-const dotize_1 = require("../../../utils/dotize");
+const tasty_1 = require("../../../tasty");
 const validation_1 = require("./validation");
 function setValue(obj, path, value) {
     let a = path.split('.');
@@ -112,15 +112,17 @@ class CubeFormInstance {
             return map;
         }, {});
     }
-    setFieldValue(name, value, touched = false, skipRender) {
+    setFieldValue(name, value, touched = false, skipRender = false) {
         const field = this.fields[name];
-        if (!field || isEqual(value, field.value))
+        if (!field || isEqual(value, field.value)) {
             return;
+        }
         field.value = value;
         if (touched) {
             field.touched = touched;
         }
         if (!skipRender) {
+            field.errors = [];
             this.forceReRender();
         }
         if (touched) {
@@ -131,7 +133,7 @@ class CubeFormInstance {
         return this.fields[name];
     }
     setInitialFieldsValue(values) {
-        this.initialFields = dotize_1.dotize.convert(values) || {};
+        this.initialFields = tasty_1.dotize.convert(values) || {};
     }
     resetFields(names, skipRender) {
         const fieldsValue = this.getFieldsValue();
@@ -266,12 +268,12 @@ function useForm(form, ref, options = {}) {
             form = formRef.current = new CubeFormInstance(forceReRender);
         }
         form.ref = ref;
-        if (onSubmit) {
-            form.onSubmit = onSubmit;
-        }
-        if (onValuesChange) {
-            form.onValuesChange = onValuesChange;
-        }
+    }
+    if (onSubmit) {
+        formRef.current.onSubmit = onSubmit;
+    }
+    if (onValuesChange) {
+        formRef.current.onValuesChange = onValuesChange;
     }
     return [formRef.current];
 }

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

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

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

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TextInput_1 = require("../TextInput/TextInput");
+const PasswordInput_1 = require("../PasswordInput/PasswordInput");
+const NumberInput_1 = require("../NumberInput/NumberInput");
+const FileInput_1 = require("../FileInput/FileInput");
+const TextArea_1 = require("../TextArea/TextArea");
+exports.Input = Object.assign((0, react_1.forwardRef)(function Input(props, ref) {
+    return (0, jsx_runtime_1.jsx)(TextInput_1.TextInput, { ref: ref, ...props }, void 0);
+}), {
+    Text: TextInput_1.TextInput,
+    Password: PasswordInput_1.PasswordInput,
+    Number: NumberInput_1.NumberInput,
+    TextArea: TextArea_1.TextArea,
+    File: FileInput_1.FileInput,
+});
+
+        

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

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.10.2
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Input"), exports);
+
+        

package/cjs/components/forms/Label.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -12,11 +12,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
 const provider_1 = require("../../provider");
-const styles_1 = require("../../utils/styles");
-const list_1 = require("../../styles/list");
-const Base_1 = require("../Base");
-const StylesProvider_1 = require("../../providers/StylesProvider");
-const filterBaseProps_1 = require("../../utils/filterBaseProps");
+const tasty_1 = require("../../tasty");
 const REQUIRED_ICON = ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", style: {
         // @ts-ignore
         enableBackground: 'new 0 0 100 100',
@@ -57,15 +53,16 @@ exports.LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
+const LabelElement = (0, tasty_1.tasty)({
+    as: 'label',
+    qa: 'Label',
+    styles: exports.LABEL_STYLES,
+});
 function Label(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     let { as, qa, children, labelPosition = 'top', isRequired, necessityIndicator = isRequired != null ? 'icon' : null, includeNecessityIndicatorInAccessibilityName = false, htmlFor, isDisabled, validationState, for: labelFor, onClick, ...otherProps } = props;
     let domRef = (0, utils_1.useDOMRef)(ref);
-    const contextStyles = (0, StylesProvider_1.useContextStyles)('Label', otherProps);
-    const styles = (0, styles_1.extractStyles)(otherProps, list_1.CONTAINER_STYLES, {
-        ...exports.LABEL_STYLES,
-        ...contextStyles,
-    });
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     let formatMessage = (message) => INTL_MESSAGES[message];
     let necessityLabel = isRequired
         ? formatMessage('(required)')
@@ -73,14 +70,14 @@ 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)(Base_1.Base, { as: as || 'label', qa: qa || 'Label', ...(0, filterBaseProps_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',
             valid: validationState === 'valid',
-        }, children: typeof children !== 'string' ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (necessityIndicator === 'label'
-                    || (necessityIndicator === 'icon' && isRequired))
-                    && ' \u200b', necessityIndicator === 'label' && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
+        }, children: typeof children !== 'string' ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, (necessityIndicator === 'label' ||
+                    (necessityIndicator === 'icon' && isRequired)) &&
+                    ' \u200b', necessityIndicator === 'label' && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": !includeNecessityIndicatorInAccessibilityName
                         ? isRequired
                         : undefined, children: necessityLabel }, void 0)), necessityIndicator === 'icon' && isRequired && icon] }, void 0)) }, void 0));
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.11
+ * @cube-dev/ui-kit v0.10.2
  * Released under the MIT license.
  */
 
@@ -10,16 +10,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Form_1 = require("../Form/Form");
+const Form_1 = require("../Form");
 const provider_1 = require("../../../provider");
 const i18n_1 = require("@react-aria/i18n");
 const TextInputBase_1 = require("../TextInput/TextInputBase");
 const numberfield_1 = require("@react-stately/numberfield");
 const numberfield_2 = require("@react-aria/numberfield");
 const StepButton_1 = require("./StepButton");
-const styled_1 = require("../../../styled");
+const tasty_1 = require("../../../tasty");
 const nullableValue_1 = require("../../../utils/react/nullableValue");
-const StepperContainer = (0, styled_1.styled)({
+const StepperContainer = (0, tasty_1.tasty)({
     styles: {
         display: 'grid',
         gridColumns: '1fr',

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

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