@cube-dev/ui-kit 0.0.0-canary-423c3d2 → 0.0.0-canary-ed2a55b

package/cjs/components/forms/FieldWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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 RawField = (0, tasty_1.tasty)({
+const FieldElement = (0, tasty_1.tasty)({
     qa: 'Field',
     styles: {
         display: 'grid',
@@ -48,7 +48,7 @@ const RawField = (0, tasty_1.tasty)({
         },
     },
 });
-const RawMessage = (0, tasty_1.tasty)({
+const MessageElement = (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)(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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -15,52 +15,53 @@ const Action_1 = require("../../actions/Action");
 const tasty_1 = require("../../../tasty");
 const utils_1 = require("@react-spectrum/utils");
 const FieldWrapper_1 = require("../FieldWrapper");
-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',
+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,11 +80,6 @@ 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') {
@@ -106,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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -12,12 +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 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 };
@@ -30,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;
@@ -84,7 +86,7 @@ function Form(props, ref) {
         onSubmit: onSubmitCallback,
         onValuesChange,
     });
-    styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, DEFAULT_STYLES);
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     if (labelWidth) {
         styles['@label-width'] = labelWidth;
     }
@@ -110,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, tasty_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.0.0-canary-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -13,7 +13,6 @@ 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',
@@ -54,7 +53,7 @@ exports.LABEL_STYLES = {
         side: '@(label-width, initial)',
     },
 };
-const RawLabel = (0, tasty_1.tasty)({
+const LabelElement = (0, tasty_1.tasty)({
     as: 'label',
     qa: 'Label',
     styles: exports.LABEL_STYLES,
@@ -63,8 +62,7 @@ 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, StyleProvider_1.useContextStyles)('Label', otherProps);
-    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES, contextStyles || {});
+    const styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.CONTAINER_STYLES);
     let formatMessage = (message) => INTL_MESSAGES[message];
     let necessityLabel = isRequired
         ? formatMessage('(required)')
@@ -72,7 +70,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)(RawLabel, { ...(0, tasty_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',

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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * 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-423c3d2
+ * @cube-dev/ui-kit v0.0.0-canary-ed2a55b
  * Released under the MIT license.
  */
 
@@ -15,7 +15,6 @@ 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");
@@ -23,102 +22,110 @@ const Label_1 = require("../Label");
 const HiddenInput_1 = require("../../HiddenInput");
 const RadioGroup_1 = require("./RadioGroup");
 const Form_1 = require("../Form/Form");
-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 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',
     },
-    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',
-    },
-};
-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',
+});
+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',
+        },
     },
-    border: {
-        '': '#dark.30',
-        checked: '#purple-text',
-        invalid: '#danger-text.50',
-        disabled: '#dark.12',
+});
+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',
+        },
     },
-    width: '2x',
-    height: '2x',
-    outline: {
-        '': '#purple-03.0',
-        focused: '#purple-03',
+});
+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,
     },
-    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, {
-        ...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,
-    });
+    let styles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES);
+    const RadioElement = isButton ? RadioButtonElement : RadioNormalElement;
     labelStyles = {
         ...Label_1.INLINE_LABEL_STYLES,
         fontWeight: 400,
-        ...(0, StyleProvider_1.useContextStyles)('Radio_Label', props),
         ...labelStyles,
     };
     let state = (0, context_1.useRadioProvider)();
@@ -133,23 +140,19 @@ function Radio(props, ref) {
         ...props,
         isDisabled,
     }, state, inputRef);
-    return ((0, jsx_runtime_1.jsxs)(Base_1.Base, { as: "label", styles: styles, ...hoverProps, ref: domRef, mods: {
+    return ((0, jsx_runtime_1.jsxs)(RadioWrapperElement, { 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)(Base_1.Base, { 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)(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,
                     hovered: isHovered,
                     focused: isFocused,
-                }, 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: {
+                }, styles: inputStyles, children: !isButton ? RadioCircleElement : children }, void 0), label && !isButton && ((0, jsx_runtime_1.jsx)(RadioLabelElement, { mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,