@cube-dev/ui-kit 0.0.0-canary-b916e8d → 0.0.0-canary-5cc6499

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -12,62 +12,57 @@ import { useCheckbox, useCheckboxGroupItem } from '@react-aria/checkbox';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
 import { useProviderProps } from '../../../provider';
-import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, } from '../../../tasty';
+import { Base } from '../../Base';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form';
+import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
+import { useContextStyles } from '../../../providers/StyleProvider';
 const CheckOutlined = () => (_jsx("svg", { width: "10", height: "8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M3.417 7.604l-.017.018-3.4-3.4 1.433-1.433 1.985 1.985L8.192 0l1.432 1.433-6.189 6.189-.018-.018z", fill: "currentColor" }, void 0) }, void 0));
 const IndeterminateOutline = () => (_jsx("svg", { width: "9", height: "3", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 .044v2.001l.026.025h8.063V.044H0z", fill: "#fff" }, void 0) }, void 0));
-const CheckboxWrapperElement = tasty({
-    as: 'label',
-    qa: 'CheckboxWrapper',
-    styles: {
-        position: 'relative',
-        display: 'flex',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'row',
-        preset: 'default',
-        cursor: 'pointer',
+const DEFAULT_STYLES = {
+    position: 'relative',
+    display: 'flex',
+    placeItems: 'center start',
+    gap: '1x',
+    flow: 'row',
+    preset: 'default',
+    cursor: 'pointer',
+};
+const INPUT_STYLES = {
+    display: 'grid',
+    placeItems: 'center',
+    radius: '.5r',
+    fill: {
+        '': '#white',
+        'checked | indeterminate': '#purple-text',
+        'invalid & !checked': '#white',
+        'invalid & checked': '#danger-text',
+        disabled: '#dark.12',
     },
-});
-const CheckboxElement = tasty({
-    qa: 'Checkbox',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        radius: '.5r',
-        fill: {
-            '': '#white',
-            'checked | indeterminate': '#purple-text',
-            'invalid & !checked': '#white',
-            'invalid & checked': '#danger-text',
-            disabled: '#dark.12',
-        },
-        color: {
-            '': '#white',
-            'disabled & !checked & !indeterminate': '#clear',
-        },
-        border: {
-            '': '#dark.30',
-            invalid: '#danger-text.50',
-            'disabled | ((indeterminate | checked) & !invalid)': '#clear',
-        },
-        width: '(2x - 2bw)',
-        height: '(2x - 2bw)',
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-        },
-        transition: 'theme',
+    color: {
+        '': '#white',
+        'disabled & !checked & !indeterminate': '#clear',
     },
-});
+    border: {
+        '': '#dark.30',
+        invalid: '#danger-text.50',
+        'disabled | ((indeterminate | checked) & !invalid)': '#clear',
+    },
+    width: '(2x - 2bw)',
+    height: '(2x - 2bw)',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    transition: 'theme',
+};
 function Checkbox(props, ref) {
     props = castNullableIsSelected(props);
     let originalProps = props;
@@ -79,10 +74,20 @@ function Checkbox(props, ref) {
     // This is a bit unorthodox. Typically, hooks cannot be called in a conditional,
     // but since the checkbox won't move in and out of a group, it should be safe.
     let groupState = useContext(CheckboxGroupContext);
-    let styles = extractStyles(props, OUTER_STYLES);
-    let inputStyles = extractStyles(props, BLOCK_STYLES);
+    let wrapperContextStyles = useContextStyles('Checkbox_Wrapper', props);
+    let inputContextStyles = useContextStyles('Checkbox', props);
+    let labelContextStyles = useContextStyles('Checkbox_Label', props);
+    let styles = extractStyles(props, OUTER_STYLES, {
+        ...(insideForm && !groupState ? {} : DEFAULT_STYLES),
+        ...wrapperContextStyles,
+    });
+    let inputStyles = extractStyles(props, BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...inputContextStyles,
+    });
     labelStyles = {
         ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
+        ...labelContextStyles,
         ...labelStyles,
     };
     if (!insideForm) {
@@ -118,16 +123,15 @@ function Checkbox(props, ref) {
             console.warn('CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
         }
     }
-    const mods = {
-        checked: inputProps.checked,
-        indeterminate: isIndeterminate,
-        invalid: validationState === 'invalid',
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        hovered: isHovered,
-        focused: isFocused,
-    };
-    const checkboxField = (_jsxs(CheckboxWrapperElement, { isHidden: isHidden, mods: mods, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(CheckboxElement, { qa: "Checkbox", mods: mods, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
+    let checkboxField = (_jsxs(Base, { qa: "CheckboxContainer", isHidden: isHidden, styles: { position: 'relative' }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Checkbox', ...mergeProps(inputProps, focusProps), ref: inputRef }, void 0), _jsx(Base, { qa: "CheckboxIcon", mods: {
+                    checked: inputProps.checked,
+                    indeterminate: isIndeterminate,
+                    invalid: validationState === 'invalid',
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }, styles: inputStyles, children: markIcon }, void 0)] }, void 0));
     if (insideForm && !groupState) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -151,7 +155,7 @@ function Checkbox(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Element, { styles: labelStyles, mods: {
+    return (_jsxs(Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Base, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,

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

@@ -1,22 +1,25 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
+import { LABEL_STYLES } from '../Label';
 import { useProviderProps } from '../../../provider';
 import { useCheckboxGroup } from '@react-aria/checkbox';
 import { useCheckboxGroupState } from '@react-stately/checkbox';
 import { FormContext, useFormProps } from '../Form/Form';
 import { CheckboxGroupContext } from './context';
-import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
+import { BLOCK_STYLES, extractStyles, OUTER_STYLES, } from '../../../tasty';
+import { Base } from '../../Base';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableArrayValue, } from '../../../utils/react/nullableValue';
-const WRAPPER_STYLES = {
+import { useContextStyles } from '../../../providers/StyleProvider';
+const STYLES = {
     display: 'grid',
     gridColumns: {
         '': '1fr',
@@ -28,34 +31,45 @@ const WRAPPER_STYLES = {
     },
     placeItems: 'baseline start',
 };
-const CheckGroupElement = tasty({
-    qa: 'CheckboxGroup',
-    styles: {
-        display: 'flex',
-        placeItems: 'start',
-        placeContent: 'start',
-        flow: {
-            '': 'column',
-            horizontal: 'row wrap',
-        },
-        gap: {
-            '': '1x',
-            horizontal: '1x 2x',
-        },
-        padding: '(1x - 1bw) 0',
+const GROUP_STYLES = {
+    display: 'flex',
+    placeItems: 'start',
+    placeContent: 'start',
+    flow: {
+        '': 'column',
+        horizontal: 'row wrap',
     },
-});
+    gap: {
+        '': '1x',
+        horizontal: '1x 2x',
+    },
+    padding: '(1x - 1bw) 0',
+};
 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 domRef = useDOMRef(ref);
-    let styles = extractStyles(otherProps, OUTER_STYLES, WRAPPER_STYLES);
-    let groupStyles = extractStyles(otherProps, BLOCK_STYLES);
+    let wrapperContextStyles = useContextStyles('CheckboxGroup_Wrapper', props);
+    let groupContextStyles = useContextStyles('CheckboxGroup', props);
+    let labelContextStyles = useContextStyles('CheckboxGroup_Label', props);
+    let styles = extractStyles(otherProps, OUTER_STYLES, {
+        ...STYLES,
+        ...wrapperContextStyles,
+    });
+    let groupStyles = extractStyles(otherProps, BLOCK_STYLES, {
+        ...GROUP_STYLES,
+        ...groupContextStyles,
+    });
+    labelStyles = {
+        ...LABEL_STYLES,
+        ...labelContextStyles,
+        ...labelStyles,
+    };
     let state = useCheckboxGroupState(props);
     let { groupProps, labelProps } = useCheckboxGroup(props, state);
-    let radioGroup = (_jsx(CheckGroupElement, { styles: groupStyles, mods: {
+    let radioGroup = (_jsx(Base, { qa: "CheckboxGroup", styles: groupStyles, mods: {
             horizontal: orientation === 'horizontal',
         }, children: _jsx(FormContext.Provider, { value: {
                 isDisabled,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/es/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -15,7 +15,7 @@ import { tasty } from '../../tasty';
 import { TooltipProvider } from '../overlays/Tooltip/TooltipProvider';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { wrapNodeIfPlain } from '../../utils/react';
-const FieldElement = tasty({
+const RawField = tasty({
     qa: 'Field',
     styles: {
         display: 'grid',
@@ -45,7 +45,7 @@ const FieldElement = tasty({
         },
     },
 });
-const MessageElement = tasty({
+const RawMessage = tasty({
     qa: 'Field_Message',
     styles: {
         preset: 'default',
@@ -70,7 +70,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    return (_jsxs(FieldElement, { 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(MessageElement, { mods: mods, 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -9,56 +9,55 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useImperativeHandle, useRef, useState, } from 'react';
 import { useProviderProps } from '../../../provider';
 import { Action } from '../../actions/Action';
-import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
+import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
 import { createFocusableRef } from '@react-spectrum/utils';
 import { FieldWrapper } from '../FieldWrapper';
-const FileInputElement = tasty(Action, {
-    styles: {
-        display: 'inline-flex',
-        position: 'relative',
-        preset: 't3',
-        padding: '.75x 1x',
-        gap: '1x',
-        flow: 'row',
-        placeItems: 'center start',
+import { useContextStyles } from '../../../providers/StyleProvider';
+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',
         fill: {
-            '': '#white',
-            'drag-hover': '#purple.16',
+            '': '#light',
+            'hovered | focused | pressed': '#purple-04',
+            disabled: '#light',
         },
-        border: true,
-        radius: true,
+        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',
-        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,
-        },
+        zIndex: 10,
     },
-});
+};
 function extractContents(element, callback) {
     const files = element === null || element === void 0 ? void 0 : element.files;
     if (files && files.length > 0) {
@@ -77,6 +76,11 @@ function FileInput(props, ref) {
     let defaultInputRef = useRef(null);
     inputRef = inputRef || defaultInputRef;
     let styles = extractStyles(otherProps, CONTAINER_STYLES);
+    inputStyles = {
+        ...DEFAULT_WRAPPER_STYLES,
+        ...useContextStyles('FileInput', otherProps),
+        ...inputStyles,
+    };
     const onLocalChange = useCallback((event) => {
         const value = event.target.value;
         if (type === 'file') {
@@ -99,7 +103,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = (_jsxs(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = (_jsxs(Action, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
             selected: !!value,
             'drag-hover': dragHover,
         }, onKeyDown: (e) => {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -9,21 +9,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
 import { Provider, useProviderProps } from '../../../provider';
 import { createContext, forwardRef, useContext, useEffect, useRef, } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
+import { Base } from '../../Base';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { useForm } from './useForm';
 import { useCombinedRefs } from '../../../utils/react';
 import { timeout } from '../../../utils/promise';
 export const FormContext = createContext({});
-const FormElement = tasty({
-    as: 'form',
-    qa: 'Form',
-    styles: {
-        display: 'block',
-        flow: 'column',
-        gap: '2x',
-        '@label-width': '25x',
-    },
-});
 export function useFormProps(props) {
     const ctx = useContext(FormContext);
     return { ...ctx, ...props };
@@ -35,9 +26,16 @@ const formPropNames = new Set([
     'method',
     'target',
 ]);
+const DEFAULT_STYLES = {
+    display: 'block',
+    flow: 'column',
+    gap: '2x',
+    '@label-width': '25x',
+};
 function Form(props, ref) {
     props = 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 = useRef(true);
     ref = useCombinedRefs(ref);
     let onSubmitCallback;
@@ -82,7 +80,7 @@ function Form(props, ref) {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
-    let styles = extractStyles(otherProps, CONTAINER_STYLES);
+    styles = extractStyles(otherProps, CONTAINER_STYLES, DEFAULT_STYLES);
     if (labelWidth) {
         styles['@label-width'] = labelWidth;
     }
@@ -108,7 +106,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: {
+    return (_jsx(Base, { as: "form", qa: "Form", ...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));
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -10,6 +10,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import { forwardRef } from 'react';
 import { useProviderProps } from '../../provider';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../tasty';
+import { useContextStyles } from '../../providers/StyleProvider';
 const REQUIRED_ICON = (_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',
@@ -50,7 +51,7 @@ export const LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
-const LabelElement = tasty({
+const RawLabel = tasty({
     as: 'label',
     qa: 'Label',
     styles: LABEL_STYLES,
@@ -59,7 +60,8 @@ function Label(props, ref) {
     props = 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 = useDOMRef(ref);
-    const styles = extractStyles(otherProps, CONTAINER_STYLES);
+    const contextStyles = useContextStyles('Label', otherProps);
+    const styles = extractStyles(otherProps, CONTAINER_STYLES, contextStyles || {});
     let formatMessage = (message) => INTL_MESSAGES[message];
     let necessityLabel = isRequired
         ? formatMessage('(required)')
@@ -67,7 +69,7 @@ function Label(props, ref) {
     let icon = (_jsx("span", { "aria-label": includeNecessityIndicatorInAccessibilityName
             ? formatMessage('(required)')
             : undefined, children: REQUIRED_ICON }, void 0));
-    return (_jsx(LabelElement, { ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return (_jsx(RawLabel, { ...filterBaseProps(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',

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

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