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

package/cjs/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.
  */
 
@@ -18,7 +18,7 @@ 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 FieldElement = (0, tasty_1.tasty)({
+const RawField = (0, tasty_1.tasty)({
     qa: 'Field',
     styles: {
         display: 'grid',
@@ -48,7 +48,7 @@ const FieldElement = (0, tasty_1.tasty)({
         },
     },
 });
-const MessageElement = (0, tasty_1.tasty)({
+const RawMessage = (0, tasty_1.tasty)({
     qa: 'Field_Message',
     styles: {
         preset: 'default',
@@ -73,7 +73,7 @@ function FieldWrapper(props, ref) {
         invalid: validationState === 'invalid',
         valid: validationState === 'valid',
     };
-    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));
+    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));
 }
 /**
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 
@@ -15,53 +15,52 @@ const Action_1 = require("../../actions/Action");
 const tasty_1 = require("../../../tasty");
 const utils_1 = require("@react-spectrum/utils");
 const FieldWrapper_1 = require("../FieldWrapper");
-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',
+const StyleProvider_1 = require("../../../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) {
@@ -80,6 +79,11 @@ function FileInput(props, ref) {
     let defaultInputRef = (0, react_1.useRef)(null);
     inputRef = inputRef || defaultInputRef;
     let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    inputStyles = {
+        ...DEFAULT_WRAPPER_STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('FileInput', otherProps),
+        ...inputStyles,
+    };
     const onLocalChange = (0, react_1.useCallback)((event) => {
         const value = event.target.value;
         if (type === 'file') {
@@ -102,7 +106,7 @@ function FileInput(props, ref) {
             return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
         },
     }));
-    const fileInput = ((0, jsx_runtime_1.jsxs)(FileInputElement, { qa: qa || 'FileInput', styles: inputStyles, isDisabled: isDisabled, ref: domRef, mods: {
+    const fileInput = ((0, jsx_runtime_1.jsxs)(Action_1.Action, { 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/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.
  */
 
@@ -12,21 +12,12 @@ 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 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 };
@@ -39,9 +30,16 @@ 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;
@@ -86,7 +84,7 @@ function Form(props, ref) {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
     if (labelWidth) {
         styles['@label-width'] = labelWidth;
     }
@@ -112,7 +110,7 @@ function Form(props, ref) {
             form === null || form === void 0 ? void 0 : form.setInitialFieldsValue(defaultValues);
         }
     }, [defaultValues]);
-    return ((0, jsx_runtime_1.jsx)(FormElement, { ...(0, tasty_1.filterBaseProps)(otherProps, { propNames: formPropNames }), onSubmit: onSubmitCallback, noValidate: true, styles: styles, ref: domRef, mods: {
+    return ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "form", qa: "Form", ...(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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * 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.0.0-canary-b916e8d
+ * @cube-dev/ui-kit v0.0.0-canary-5cc6499
  * Released under the MIT license.
  */
 

package/cjs/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/cjs/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/cjs/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/cjs/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.
  */
 
@@ -13,6 +13,7 @@ const utils_1 = require("@react-spectrum/utils");
 const react_1 = require("react");
 const provider_1 = require("../../provider");
 const tasty_1 = require("../../tasty");
+const StyleProvider_1 = require("../../providers/StyleProvider");
 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',
@@ -53,7 +54,7 @@ exports.LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
-const LabelElement = (0, tasty_1.tasty)({
+const RawLabel = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'Label',
     styles: exports.LABEL_STYLES,
@@ -62,7 +63,8 @@ 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 styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
+    const contextStyles = (0, StyleProvider_1.useContextStyles)('Label', otherProps);
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, contextStyles || {});
     let formatMessage = (message) => INTL_MESSAGES[message];
     let necessityLabel = isRequired
         ? formatMessage('(required)')
@@ -70,7 +72,7 @@ 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)(LabelElement, { ...(0, tasty_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
+    return ((0, jsx_runtime_1.jsx)(RawLabel, { ...(0, tasty_1.filterBaseProps)(otherProps), onClick: onClick, ref: domRef, styles: styles, htmlFor: labelFor || htmlFor, mods: {
             side: labelPosition === 'side',
             disabled: isDisabled,
             invalid: validationState === 'invalid',

package/cjs/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/cjs/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/cjs/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.
  */
 

package/cjs/components/forms/RadioGroup/Radio.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,6 +15,7 @@ const interactions_1 = require("@react-aria/interactions");
 const radio_1 = require("@react-aria/radio");
 const context_1 = require("./context");
 const tasty_1 = require("../../../tasty");
+const Base_1 = require("../../Base");
 const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const provider_1 = require("../../../provider");
@@ -22,110 +23,102 @@ const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const RadioGroup_1 = require("./RadioGroup");
 const Form_1 = require("../Form/Form");
-const RadioWrapperElement = (0, tasty_1.tasty)({
-    as: 'label',
-    qa: 'RadioWrapper',
-    styles: {
-        position: 'relative',
-        display: 'grid',
-        placeItems: 'center start',
-        gap: '1x',
-        flow: 'column',
-        preset: 'default',
-        width: 'min-content',
+const StyleProvider_1 = require("../../../providers/StyleProvider");
+const STYLES = {
+    position: 'relative',
+    display: 'grid',
+    placeItems: 'center start',
+    gap: '1x',
+    flow: 'column',
+    preset: 'default',
+    width: 'min-content',
+};
+const BUTTON_STYLES = {
+    radius: true,
+    fill: {
+        '': '#white',
+        hovered: '#purple-text.04',
+        disabled: '#dark.04',
     },
-});
-const RadioButtonElement = (0, tasty_1.tasty)({
-    styles: {
-        radius: true,
-        fill: {
-            '': '#white',
-            hovered: '#purple-text.04',
-            disabled: '#dark.04',
-        },
-        color: {
-            '': '#dark.85',
-            invalid: '#danger-text',
-            disabled: '#dark.40',
-        },
-        fontWeight: 500,
-        preset: 'default',
-        border: {
-            '': true,
-            checked: '#purple-text',
-            'invalid & checked': '#danger-text',
-            'disabled & checked': '#dark.40',
-            disabled: '#border',
-        },
-        padding: '(1x - 1bw) (1.5x - 1bw)',
-        cursor: 'pointer',
-        opacity: {
-            '': 1,
-            disabled: 0.5,
-        },
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-        },
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        disabled: '#dark.40',
     },
-});
-const RadioNormalElement = (0, tasty_1.tasty)({
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        radius: 'round',
-        fill: {
-            '': '#white',
-            disabled: '#dark.04',
-        },
-        color: {
-            checked: '#purple-text',
-            'invalid & checked': '#danger-text',
-            'disabled | !checked': '#clear',
-            'disabled & checked': '#dark.12',
-        },
-        border: {
-            '': '#dark.30',
-            checked: '#purple-text',
-            invalid: '#danger-text.50',
-            disabled: '#dark.12',
-        },
-        width: '2x',
-        height: '2x',
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-        },
-        transition: 'theme',
-        RadioCircle: {
-            display: 'block',
-            radius: 'round',
-            width: '1x',
-            height: '1x',
-            fill: 'currentColor',
-            transition: 'theme',
-        },
+    fontWeight: 500,
+    preset: 'default',
+    border: {
+        '': true,
+        checked: '#purple-text',
+        'invalid & checked': '#danger-text',
+        'disabled & checked': '#dark.40',
+        disabled: '#border',
     },
-});
-const RadioCircleElement = (0, jsx_runtime_1.jsx)("div", { "data-element": "RadioCircle" }, void 0);
-const RadioLabelElement = (0, tasty_1.tasty)({
-    qa: 'RadioLabel',
-    styles: {
-        ...Label_1.INLINE_LABEL_STYLES,
-        fontWeight: 400,
+    padding: '(1x - 1bw) (1.5x - 1bw)',
+    cursor: 'pointer',
+    opacity: {
+        '': 1,
+        disabled: 0.5,
     },
-});
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+};
+const INPUT_STYLES = {
+    display: 'grid',
+    placeItems: 'center',
+    radius: 'round',
+    fill: {
+        '': '#white',
+        disabled: '#dark.04',
+    },
+    color: {
+        checked: '#purple-text',
+        'invalid & checked': '#danger-text',
+        'disabled | !checked': '#clear',
+        'disabled & checked': '#dark.12',
+    },
+    border: {
+        '': '#dark.30',
+        checked: '#purple-text',
+        invalid: '#danger-text.50',
+        disabled: '#dark.12',
+    },
+    width: '2x',
+    height: '2x',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    transition: 'theme',
+};
+const CIRCLE_STYLES = {
+    radius: 'round',
+    width: '1x',
+    height: '1x',
+    fill: 'currentColor',
+    transition: 'theme',
+};
 function Radio(props, ref) {
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
     let { qa, isDisabled, validationState, children, label, autoFocus, labelStyles, labelProps, inputStyles, type, 'aria-label': ariaLabel, ...otherProps } = props;
     let isButton = type === 'button';
     label = label || children;
-    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES);
-    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, {
+        ...STYLES,
+        ...(0, StyleProvider_1.useContextStyles)('Radio_Wrapper', props),
+    });
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
+        ...(isButton ? BUTTON_STYLES : INPUT_STYLES),
+        ...(0, StyleProvider_1.useContextStyles)(isButton ? 'RadioButton' : 'Radio', props),
+        ...inputStyles,
+    });
     labelStyles = {
         ...Label_1.INLINE_LABEL_STYLES,
         fontWeight: 400,
+        ...(0, StyleProvider_1.useContextStyles)('Radio_Label', props),
         ...labelStyles,
     };
     let state = (0, context_1.useRadioProvider)();
@@ -140,19 +133,23 @@ function Radio(props, ref) {
         ...props,
         isDisabled,
     }, state, inputRef);
-    return ((0, jsx_runtime_1.jsxs)(RadioWrapperElement, { styles: styles, ...hoverProps, ref: domRef, mods: {
+    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ref: domRef, mods: {
             disabled: isDisabled,
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(RadioElement, { mods: {
+        }, children: [(0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...(0, react_2.mergeProps)(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
+                }, styles: inputStyles, children: !isButton ? ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: CIRCLE_STYLES, mods: {
+                        checked: inputProps.checked,
+                        invalid: validationState === 'invalid',
+                        valid: validationState === 'valid',
+                    } }, void 0)) : (children) }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(Base_1.Base, { qa: "RadioLabel", styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,