@cube-dev/ui-kit 0.9.12 → 0.10.4

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

@@ -1,20 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect } from 'react';
 import Prism from 'prismjs';
-import { styled } from '../../../styled';
-import { CONTAINER_STYLES } from '../../../styles/list';
-const RawPre = styled({
-    name: 'CodeBlock',
-    tag: 'pre',
+import { CONTAINER_STYLES, tasty, } from '../../../tasty';
+const PreElement = tasty({
+    as: 'pre',
+    qa: 'CodeBlock',
     styleProps: CONTAINER_STYLES.concat([]),
-    props: { className: 'cube-prism-code' },
+    className: 'cube-prism-code',
     styles: {
         margin: 0,
         Code: {
@@ -27,7 +26,7 @@ function PrismCode(props, ref) {
     useEffect(() => {
         Prism.highlightAll();
     });
-    return (_jsx(RawPre, { ref: ref, className: "cube-prism-code", ...otherProps, children: _jsx("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
+    return (_jsx(PreElement, { ref: ref, className: "cube-prism-code", ...otherProps, children: _jsx("code", { "data-element": "Code", className: `language-${language}`, children: code }, void 0) }, void 0));
 }
 /**
  * Code block with syntax highlighting

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -9,14 +9,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { CheckCircleFilled, CloseCircleFilled, InfoCircleFilled, WarningFilled, } from '@ant-design/icons';
 import { Title } from '../Title';
-import { styled } from '../../../styled';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { wrapNodeIfPlain } from '../../../utils/react';
-const Container = styled({
-    name: 'ResultContainer',
-    tag: 'section',
+const Container = tasty({
+    qa: 'Result_Container',
+    as: 'section',
     styles: {
         display: 'flex',
         flow: 'column',
@@ -35,7 +32,7 @@ const Container = styled({
         },
     },
 });
-const IconWrapper = styled({
+const IconWrapper = tasty({
     styles: {
         fontSize: '10x',
     },

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -12,14 +12,14 @@ import { Space } from '../../layout/Space';
 import { Grid } from '../../layout/Grid';
 const LAYOUT_MAP = {
     page({ lines, children, ...props }) {
-        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsxs(Space, { placeContent: "space-between", children: [_jsx(Placeholder, { width: "100px 25% 300px" }, void 0), _jsx(Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), _jsx(Flow, { gap: "2x", children: children
-                        || Array(lines || 5)
+        return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsxs(Space, { placeContent: "space-between", children: [_jsx(Placeholder, { width: "100px 25% 300px" }, void 0), _jsx(Placeholder, { width: "50px 10% 150px" }, void 0)] }, void 0), _jsx(Flow, { gap: "2x", children: children ||
+                        Array(lines || 5)
                             .fill(0)
                             .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
     },
     content({ children, lines, ...props }) {
-        return (_jsx(Flow, { gap: "2x", ...props, children: children
-                || Array(lines || 5)
+        return (_jsx(Flow, { gap: "2x", ...props, children: children ||
+                Array(lines || 5)
                     .fill(0)
                     .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0));
     },
@@ -39,8 +39,8 @@ const LAYOUT_MAP = {
     tabs({ tabs, children, lines, ...props }) {
         return (_jsxs(Flow, { gap: "4x", ...props, children: [_jsx(Space, { children: Array(tabs || 3)
                         .fill(0)
-                        .map((item, i) => (_jsx(Placeholder, { width: "15x" }, i))) }, void 0), _jsx(Flow, { gap: "2x", children: children
-                        || Array(lines || 5)
+                        .map((item, i) => (_jsx(Placeholder, { width: "15x" }, i))) }, void 0), _jsx(Flow, { gap: "2x", children: children ||
+                        Array(lines || 5)
                             .fill(0)
                             .map((item, i) => _jsx(Placeholder, {}, i)) }, void 0)] }, void 0));
     },

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

@@ -1,23 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
-import { CONTAINER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
 import { Action } from '../../actions/Action';
 import { Suffix } from '../../layout/Suffix';
-import { Block } from '../../Block';
 import { CloseOutlined } from '@ant-design/icons';
-import { styled } from '../../../styled';
-const RawTag = styled({
-    name: 'Tag',
+const TagElement = tasty({
+    qa: 'Tag',
+    role: 'status',
     styles: {
         position: 'relative',
         display: 'inline-flex',
@@ -54,31 +51,34 @@ const RawTag = styled({
                 return map;
             }, {}),
         },
+        Content: {
+            display: 'block',
+            width: 'max 100%',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+        },
     },
-    props: { role: 'status' },
 });
-const DEFAULT_CONTENT_STYLES = {
-    width: 'max 100%',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-};
-const DEFAULT_CLOSE_STYLES = {
-    display: 'grid',
-    placeItems: 'center',
-    color: true,
-    placeSelf: 'center',
-    opacity: {
-        '': 0.85,
-        'pressed | hovered': 1,
+const CloseAction = tasty(Action, {
+    label: 'Close',
+    styles: {
+        display: 'grid',
+        placeItems: 'center',
+        color: true,
+        placeSelf: 'center',
+        opacity: {
+            '': 0.85,
+            'pressed | hovered': 1,
+        },
+        transition: 'opacity',
+        padding: '0 .5x',
     },
-    transition: 'opacity',
-    padding: '0 .5x',
-};
+});
 const Tag = (allProps, ref) => {
-    let { type, isClosable, onClose, children, ...props } = allProps;
+    let { type, isClosable, onClose, closeButtonStyles, children, ...props } = allProps;
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(RawTag, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx(Block, { mods: { closable: isClosable }, styles: DEFAULT_CONTENT_STYLES, children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(Action, { onPress: onClose, styles: DEFAULT_CLOSE_STYLES, label: "Close", children: _jsx(CloseOutlined, { style: {
+    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, "data-type": type, mods: { closable: isClosable }, ref: ref, children: [_jsx("div", { "data-element": "Content", children: children }, void 0), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseOutlined, { style: {
                             fontSize: 'calc(var(--font-size) - (var(--border-width) * 2))',
                         } }, void 0) }, void 0) }, void 0)) : undefined] }, void 0));
 };

package/es/components/content/Text.js

@@ -1,78 +1,74 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { BASE_STYLES, COLOR_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
-import { styled } from '../../styled';
+import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
 const STYLE_LIST = [...BASE_STYLES, ...TEXT_STYLES, ...COLOR_STYLES];
-const DEFAULT_STYLES = {
-    display: {
-        '': 'inline',
-        ellipsis: 'block',
-    },
-    margin: '0',
-    whiteSpace: {
-        '': 'inherit',
-        'nowrap | ellipsis': 'nowrap',
-    },
-    textOverflow: {
-        '': false,
-        ellipsis: 'ellipsis',
-    },
-    overflow: {
-        '': false,
-        ellipsis: 'hidden',
-    },
-    width: {
-        '': false,
-        ellipsis: 'max 100%',
-    },
-};
 export const TEXT_PROP_MAP = {
     transform: 'textTransform',
     weight: 'fontWeight',
     italic: 'fontStyle',
 };
-const RawText = styled({
-    name: 'Text',
-    tag: 'span',
-    styles: DEFAULT_STYLES,
+const TextElement = tasty({
+    qa: 'Text',
+    as: 'span',
+    styles: {
+        display: {
+            '': 'inline',
+            ellipsis: 'block',
+        },
+        margin: '0',
+        whiteSpace: {
+            '': 'inherit',
+            'nowrap | ellipsis': 'nowrap',
+        },
+        textOverflow: {
+            '': false,
+            ellipsis: 'ellipsis',
+        },
+        overflow: {
+            '': false,
+            ellipsis: 'hidden',
+        },
+        width: {
+            '': false,
+            ellipsis: 'max 100%',
+        },
+    },
 });
-const _Text = forwardRef((allProps, ref) => {
+const _Text = forwardRef(function Text(allProps, ref) {
     allProps = useSlotProps(allProps, 'text');
-    const { as, qa, block, styleName, ellipsis, css, nowrap, ...props } = allProps;
+    const { as, qa, block, styleName, ellipsis, nowrap, ...props } = allProps;
     const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
-    return (_jsx(RawText, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
+    return (_jsx(TextElement, { as: as || 'span', qa: qa || 'Text', styleName: styleName, mods: {
             nowrap,
             ellipsis,
-        }, block: !!(block || ellipsis), css: css, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+        }, block: !!(block || ellipsis), ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
 });
 const Text = Object.assign(_Text, {
     Minor: forwardRef(function MinorText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#minor", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#minor", ...props }, void 0);
     }),
     Danger: forwardRef(function DangerText(props, ref) {
-        return _jsx(Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
+        return _jsx(_Text, { role: "alert", ref: ref, color: "#danger-text", ...props }, void 0);
     }),
     Success: forwardRef(function SuccessText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#success-text", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#success-text", ...props }, void 0);
     }),
     Strong: forwardRef(function StrongText(props, ref) {
-        return (_jsx(Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
+        return (_jsx(_Text, { as: "strong", preset: "strong", ref: ref, color: "#dark", ...props }, void 0));
     }),
     Emphasis: forwardRef(function EmphasisText(props, ref) {
-        return _jsx(Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
+        return _jsx(_Text, { as: "em", preset: "em", ref: ref, ...props }, void 0);
     }),
     Selection: forwardRef(function SelectionText(props, ref) {
-        return _jsx(Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
+        return _jsx(_Text, { ref: ref, color: "#dark", fill: "#note.30", ...props }, void 0);
     }),
 });
 export { Text };

package/es/components/content/Title.js

@@ -1,54 +1,47 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { TEXT_PROP_MAP } from './Text';
-import { CONTAINER_STYLES, TEXT_STYLES } from '../../styles/list';
-import { extractStyles } from '../../utils/styles';
-import { filterBaseProps } from '../../utils/filterBaseProps';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, TEXT_STYLES, } from '../../tasty';
 import { useSlotProps } from '../../utils/react';
-import { styled } from '../../styled';
-const DEFAULT_STYLES = {
-    gridArea: 'heading',
-    display: 'block',
-    color: '#dark',
-    preset: {
-        '': 'h6m',
-        '[data-level="1"]': 'h1',
-        '[data-level="2"]': 'h2',
-        '[data-level="3"]': 'h3',
-        '[data-level="4"]': 'h4',
-        '[data-level="5"]': 'h5',
-        '[data-level="6"]': 'h6',
-    },
-    margin: '0',
-    whiteSpace: {
-        '': 'initial',
-        'nowrap | ellipsis': 'nowrap',
-    },
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    width: 'max 100%',
-};
 const STYLE_LIST = [...TEXT_STYLES, ...CONTAINER_STYLES];
-const RawTitle = styled({
-    name: 'Title',
-    tag: 'h1',
-    styles: DEFAULT_STYLES,
-    props: {
-        'data-qa': 'Title',
+const TitleElement = tasty({
+    qa: 'Title',
+    as: 'h1',
+    styles: {
+        gridArea: 'heading',
+        display: 'block',
+        color: '#dark',
+        preset: {
+            '': 'h6m',
+            '[data-level="1"]': 'h1',
+            '[data-level="2"]': 'h2',
+            '[data-level="3"]': 'h3',
+            '[data-level="4"]': 'h4',
+            '[data-level="5"]': 'h5',
+            '[data-level="6"]': 'h6',
+        },
+        margin: '0',
+        whiteSpace: {
+            '': 'initial',
+            'nowrap | ellipsis': 'nowrap',
+        },
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        width: 'max 100%',
     },
 });
 const _Title = forwardRef(({ qa, as, styleName, inline, nowrap, ellipsis, level, ...props }, ref) => {
     props = useSlotProps(props, 'heading');
     const tag = `h${level || 1}`;
     const styles = extractStyles(props, STYLE_LIST, {}, TEXT_PROP_MAP);
-    return (_jsx(RawTitle, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
+    return (_jsx(TitleElement, { qa: qa || 'Title', as: as || tag, styleName: styleName, "data-level": level || 1, mods: {
             nowrap,
             ellipsis,
         }, inline: inline, ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.12
+ * @cube-dev/ui-kit v0.10.4
  * Released under the MIT license.
  */
 
@@ -12,59 +12,62 @@ 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, OUTER_STYLES } from '../../../styles/list';
-import { extractStyles } from '../../../utils/styles';
-import { Base } from '../../Base';
-import { useFocus } from '../../../utils/interactions';
+import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
+import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
-import { filterBaseProps } from '../../../utils/filterBaseProps';
-import { useContextStyles } from '../../../providers/StylesProvider';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
-import { useFormProps } from '../Form/Form';
+import { useFormProps } from '../Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from './context';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
 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 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 CheckboxWrapperElement = tasty({
+    as: 'label',
+    qa: 'CheckboxWrapper',
+    styles: {
+        position: 'relative',
+        display: 'flex',
+        placeItems: 'center start',
+        gap: '1x',
+        flow: 'row',
+        preset: 'default',
+        cursor: 'pointer',
     },
-    color: {
-        '': '#white',
-        'disabled & !checked & !indeterminate': '#clear',
+});
+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',
     },
-    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;
@@ -76,20 +79,10 @@ 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 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,
-    });
+    let styles = extractStyles(props, OUTER_STYLES);
+    let inputStyles = extractStyles(props, BLOCK_STYLES);
     labelStyles = {
         ...(insideForm && !groupState ? LABEL_STYLES : INLINE_LABEL_STYLES),
-        ...labelContextStyles,
         ...labelStyles,
     };
     if (!insideForm) {
@@ -125,15 +118,16 @@ function Checkbox(props, ref) {
             console.warn('CubeUIKit: A <Checkbox> element within a <CheckboxGroup> requires a `value` property.');
         }
     }
-    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));
+    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));
     if (insideForm && !groupState) {
         return (_jsx(FieldWrapper, { ...{
                 as: 'label',
@@ -157,7 +151,7 @@ function Checkbox(props, ref) {
                 ref: domRef,
             } }, void 0));
     }
-    return (_jsxs(Base, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Base, { styles: labelStyles, mods: {
+    return (_jsxs(CheckboxWrapperElement, { as: "label", styles: styles, isHidden: isHidden, ...hoverProps, ...filterBaseProps(otherProps), ref: domRef, children: [checkboxField, label && (_jsx(Element, { styles: labelStyles, mods: {
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
                     disabled: isDisabled,