@peculiar/react-components 0.3.14 → 0.3.15-alpha.1

package/dist/esnext/Button/button.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
 import { ButtonBase } from '../ButtonBase';
 /**
  *
@@ -7,50 +7,44 @@ import { ButtonBase } from '../ButtonBase';
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'Button',
+const ButtonRoot = styled(ButtonBase)((props) => ({
     borderRadius: '4px',
-});
-const stylesSizeSmall = (props) => css({
-    label: 'small',
-    height: 'var(--pv-size-base-6)',
-    minWidth: 'var(--pv-size-base-6)',
-    ...(props.circled && {
-        borderRadius: 'var(--pv-size-base-6)',
-    }),
-    ...(!props.withoutPadding && {
-        padding: '0 var(--pv-size-base-2)',
+    ...(props.size === 'small' && {
+        height: 'var(--pv-size-base-6)',
+        minWidth: 'var(--pv-size-base-6)',
+        ...(props.circled && {
+            borderRadius: 'var(--pv-size-base-6)',
+        }),
+        ...(!props.withoutPadding && {
+            padding: '0 var(--pv-size-base-2)',
+        }),
     }),
-});
-const stylesSizeMedium = (props) => css({
-    label: 'medium',
-    height: 'var(--pv-size-base-7)',
-    minWidth: 'var(--pv-size-base-7)',
-    ...(props.circled && {
-        borderRadius: 'var(--pv-size-base-7)',
+    ...(props.size === 'medium' && {
+        height: 'var(--pv-size-base-7)',
+        minWidth: 'var(--pv-size-base-7)',
+        ...(props.circled && {
+            borderRadius: 'var(--pv-size-base-7)',
+        }),
+        ...(!props.withoutPadding && {
+            padding: '0 var(--pv-size-base-3)',
+        }),
     }),
-    ...(!props.withoutPadding && {
-        padding: '0 var(--pv-size-base-3)',
+    ...(props.size === 'large' && {
+        height: 'var(--pv-size-base-8)',
+        minWidth: 'var(--pv-size-base-8)',
+        ...(props.circled && {
+            borderRadius: 'var(--pv-size-base-8)',
+        }),
+        ...(!props.withoutPadding && {
+            padding: '0 var(--pv-size-base-4)',
+        }),
     }),
-});
-const stylesSizeLarge = (props) => css({
-    label: 'large',
-    height: 'var(--pv-size-base-8)',
-    minWidth: 'var(--pv-size-base-8)',
-    ...(props.circled && {
-        borderRadius: 'var(--pv-size-base-8)',
-    }),
-    ...(!props.withoutPadding && {
-        padding: '0 var(--pv-size-base-4)',
-    }),
-});
-const stylesStartIcon = () => css({
-    label: 'Button-startIcon',
+}));
+const ButtonStartIcon = styled('span')({
     marginRight: 'var(--pv-size-base)',
     display: 'inherit',
 });
-const stylesEndIcon = () => css({
-    label: 'Button-endIcon',
+const ButtonEndIcon = styled('span')({
     marginLeft: 'var(--pv-size-base)',
     display: 'inherit',
 });
@@ -58,16 +52,10 @@ const stylesEndIcon = () => css({
  *
  */
 export const Button = React.forwardRef((props, ref) => {
-    const { children, className, size, circled, startIcon: startIconProp, endIcon: endIconProp, withoutPadding, ...other } = props;
-    const startIcon = startIconProp && (React.createElement("span", { className: cx(stylesStartIcon()) }, startIconProp));
-    const endIcon = endIconProp && (React.createElement("span", { className: cx(stylesEndIcon()) }, endIconProp));
-    return (React.createElement(ButtonBase, { ...other, ref: ref, className: cx({
-            [stylesBase()]: true,
-            [stylesSizeSmall(props)]: size === 'small',
-            [stylesSizeMedium(props)]: size === 'medium',
-            [stylesSizeLarge(props)]: size === 'large',
-            [className]: !!className,
-        }), size: size },
+    const { children, startIcon: startIconProp, endIcon: endIconProp, ...other } = props;
+    const startIcon = startIconProp && (React.createElement(ButtonStartIcon, null, startIconProp));
+    const endIcon = endIconProp && (React.createElement(ButtonEndIcon, null, endIconProp));
+    return (React.createElement(ButtonRoot, { ref: ref, ...other },
         startIcon,
         children,
         endIcon));

package/dist/esnext/Button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/Button/button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/Button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,UAAU,EAAsB,MAAM,eAAe,CAAC;AA+B/D;;GAEG;AAEH;;GAEG;AACH,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAiB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAChE,YAAY,EAAE,KAAK;IACnB,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,uBAAuB;QACjC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI;YACnB,YAAY,EAAE,uBAAuB;SACtC,CAAC;QACF,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,IAAI;YAC3B,OAAO,EAAE,yBAAyB;SACnC,CAAC;KACH,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI;QAC7B,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,uBAAuB;QACjC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI;YACnB,YAAY,EAAE,uBAAuB;SACtC,CAAC;QACF,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,IAAI;YAC3B,OAAO,EAAE,yBAAyB;SACnC,CAAC;KACH,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,uBAAuB;QACjC,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI;YACnB,YAAY,EAAE,uBAAuB;SACtC,CAAC;QACF,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,IAAI;YAC3B,OAAO,EAAE,yBAAyB;SACnC,CAAC;KACH,CAAC;CACH,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACrC,WAAW,EAAE,qBAAqB;IAClC,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACnC,UAAU,EAAE,qBAAqB;IACjC,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EACJ,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,aAAa,IAAI,CACjC,oBAAC,eAAe,QACb,aAAa,CACE,CACnB,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,IAAI,CAC7B,oBAAC,aAAa,QACX,WAAW,CACE,CACjB,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,KACJ,KAAK;QAER,SAAS;QACT,QAAQ;QACR,OAAO,CACG,CACd,CAAC;AACJ,CAAC,CAAwC,CAAC;AAE1C,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,MAAM,CAAC,YAAY,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;CACf,CAAC"}

package/dist/esnext/ButtonBase/button_base.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { css, cx } from '../styles';
+import styled from '@emotion/styled';
+import isPropValid from '@emotion/is-prop-valid';
 import { Typography } from '../Typography';
 /**
  *
@@ -7,8 +8,9 @@ import { Typography } from '../Typography';
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'ButtonBase',
+const ButtonBaseRoot = styled('button', {
+    shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
+})((props) => ({
     fontFamily: 'inherit',
     outline: 'none',
     cursor: 'pointer',
@@ -24,166 +26,109 @@ const stylesBase = () => css({
     backgroundColor: 'transparent',
     padding: 0,
     textDecoration: 'none',
+    boxShadow: props.variant === 'contained' && 'var(--pv-shadow-light-low)',
     '&:disabled': {
         cursor: 'not-allowed',
         boxShadow: 'none',
+        color: props.variant === 'text'
+            ? 'var(--pv-color-gray-7)'
+            : 'var(--pv-color-gray-8)',
+        backgroundColor: props.variant === 'contained' && 'var(--pv-color-gray-4)',
+        borderColor: props.variant === 'outlined' && 'var(--pv-color-gray-4)',
     },
+}), (props) => {
+    const isDark = props.theme.mode === 'dark';
+    let color = isDark
+        ? 'var(--pv-color-white)'
+        : 'var(--pv-color-black)';
+    let borderColor;
+    let backgroundColor;
+    let backgroundColorHover;
+    let backgroundColorFocus;
+    let backgroundColorActive;
+    let boxShadowActive;
+    if (props.variant === 'outlined') {
+        if (props.color === 'default') {
+            borderColor = 'var(--pv-color-gray-8)';
+            backgroundColorHover = 'var(--pv-color-gray-3)';
+            backgroundColorFocus = 'var(--pv-color-gray-4)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else if (props.color === 'white') {
+            color = 'var(--pv-color-white)';
+            borderColor = 'var(--pv-color-white)';
+            backgroundColorHover = 'var(--pv-color-gray-7)';
+            backgroundColorFocus = 'var(--pv-color-gray-8)';
+            backgroundColorActive = 'var(--pv-color-gray-9)';
+        }
+        else {
+            color = `var(--pv-color-${props.color})`;
+            borderColor = `var(--pv-color-${props.color}-tint-2)`;
+            backgroundColorHover = `var(--pv-color-${props.color}-tint-5)`;
+            backgroundColorFocus = `var(--pv-color-${props.color}-tint-4)`;
+            backgroundColorActive = `var(--pv-color-${props.color}-tint-3)`;
+        }
+    }
+    if (props.variant === 'contained') {
+        if (props.color === 'default') {
+            backgroundColor = 'var(--pv-color-gray-8)';
+            backgroundColorHover = 'var(--pv-color-gray-7)';
+            backgroundColorFocus = 'var(--pv-color-gray-6)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else if (props.color === 'white') {
+            backgroundColor = 'var(--pv-color-white)';
+            backgroundColorHover = 'var(--pv-color-gray-7)';
+            backgroundColorFocus = 'var(--pv-color-gray-6)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else {
+            color = `var(--pv-color-${props.color}-contrast)`;
+            backgroundColor = `var(--pv-color-${props.color})`;
+            backgroundColorHover = `var(--pv-color-${props.color}-tint-1)`;
+            backgroundColorFocus = `var(--pv-color-${props.color}-tint-2)`;
+            backgroundColorActive = `var(--pv-color-${props.color}-tint-2)`;
+        }
+        boxShadowActive = 'var(--pv-shadow-light-medium)';
+    }
+    if (props.variant === 'text') {
+        if (props.color === 'default') {
+            backgroundColorHover = 'var(--pv-color-gray-3)';
+            backgroundColorFocus = 'var(--pv-color-gray-4)';
+            backgroundColorActive = 'var(--pv-color-gray-5)';
+        }
+        else if (props.color === 'white') {
+            color = 'var(--pv-color-white)';
+            backgroundColorHover = 'var(--pv-color-gray-7)';
+            backgroundColorFocus = 'var(--pv-color-gray-8)';
+            backgroundColorActive = 'var(--pv-color-gray-9)';
+        }
+        else {
+            color = `var(--pv-color-${props.color})`;
+            backgroundColorHover = `var(--pv-color-${props.color}-tint-5)`;
+            backgroundColorFocus = `var(--pv-color-${props.color}-tint-4)`;
+            backgroundColorActive = `var(--pv-color-${props.color}-tint-3)`;
+        }
+    }
+    return {
+        borderColor,
+        backgroundColor,
+        color,
+        '&:not(:disabled)': {
+            '&:hover': {
+                backgroundColor: backgroundColorHover,
+            },
+            '&:focus': {
+                backgroundColor: backgroundColorFocus,
+            },
+            '&:active': {
+                backgroundColor: backgroundColorActive,
+                boxShadow: boxShadowActive,
+            },
+        },
+    };
 });
-const stylesVariantTextColorDefault = () => css({
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    },
-});
-const stylesVariantTextColorWhite = () => css({
-    color: 'var(--pv-color-white)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-7)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-8)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-9)',
-        },
-    },
-});
-const stylesVariantTextColor = (color) => css({
-    color: `var(--pv-color-${color})`,
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: `var(--pv-color-${color}-tint-5)`,
-        },
-        '&:focus': {
-            backgroundColor: `var(--pv-color-${color}-tint-4)`,
-        },
-        '&:active': {
-            backgroundColor: `var(--pv-color-${color}-tint-3)`,
-        },
-    },
-});
-const stylesVariantText = () => css({
-    '&:disabled': {
-        color: 'var(--pv-color-gray-7)',
-    },
-});
-const stylesVariantContainedColorDefault = () => css({
-    backgroundColor: 'var(--pv-color-gray-8)',
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-7)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-6)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-            boxShadow: 'var(--pv-shadow-light-medium)',
-        },
-    },
-});
-const stylesVariantContainedColorWhite = () => css({
-    backgroundColor: 'var(--pv-color-white)',
-    color: 'var(--pv-color-black)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-7)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-6)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-            boxShadow: 'var(--pv-shadow-light-medium)',
-        },
-    },
-});
-const stylesVariantContainedColor = (color) => css({
-    backgroundColor: `var(--pv-color-${color})`,
-    color: `var(--pv-color-${color}-contrast)`,
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: `var(--pv-color-${color}-tint-1)`,
-        },
-        '&:focus': {
-            backgroundColor: `var(--pv-color-${color}-tint-2)`,
-        },
-        '&:active': {
-            backgroundColor: `var(--pv-color-${color}-tint-2)`,
-            boxShadow: 'var(--pv-shadow-light-medium)',
-        },
-    },
-});
-const stylesVariantContained = () => css({
-    boxShadow: 'var(--pv-shadow-light-low)',
-    '&:disabled': {
-        color: 'var(--pv-color-gray-8)',
-        backgroundColor: 'var(--pv-color-gray-4)',
-    },
-});
-const stylesVariantOutlinedColorDefault = () => css({
-    color: 'var(--pv-color-black)',
-    borderColor: 'var(--pv-color-gray-8)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-3)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-4)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-5)',
-        },
-    },
-});
-const stylesVariantOutlinedColorWhite = () => css({
-    color: 'var(--pv-color-white)',
-    borderColor: 'var(--pv-color-white)',
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: 'var(--pv-color-gray-7)',
-        },
-        '&:focus': {
-            backgroundColor: 'var(--pv-color-gray-8)',
-        },
-        '&:active': {
-            backgroundColor: 'var(--pv-color-gray-9)',
-        },
-    },
-});
-const stylesVariantOutlinedColor = (color) => css({
-    color: `var(--pv-color-${color})`,
-    borderColor: `var(--pv-color-${color}-tint-2)`,
-    '&:not(:disabled)': {
-        '&:hover': {
-            backgroundColor: `var(--pv-color-${color}-tint-5)`,
-        },
-        '&:focus': {
-            backgroundColor: `var(--pv-color-${color}-tint-4)`,
-        },
-        '&:active': {
-            backgroundColor: `var(--pv-color-${color}-tint-3)`,
-        },
-    },
-});
-const stylesVariantOutlined = () => css({
-    '&:disabled': {
-        color: 'var(--pv-color-gray-8)',
-        borderColor: 'var(--pv-color-gray-4)',
-    },
-});
-const stylesLabel = () => css({
-    label: 'ButtonBase-label',
+const ButtonBaseLabel = styled(Typography)({
     width: '100%',
     display: 'inherit',
     alignItems: 'inherit',
@@ -193,26 +138,11 @@ const stylesLabel = () => css({
  *
  */
 export const ButtonBase = React.forwardRef((props, ref) => {
-    const { variant, textVariant: textVariantProp, color, size, className, children, disabled, type = 'button', component, ...other } = props;
+    const { textVariant: textVariantProp, size, children, type = 'button', component, ...other } = props;
     const Component = component || 'button';
     const textVariant = textVariantProp || (size === 'small' ? 'btn2' : 'btn1');
-    return (React.createElement(Component, { ...other, ref: ref, type: type, disabled: disabled, className: cx({
-            [stylesBase()]: true,
-            [stylesVariantTextColorDefault()]: variant === 'text' && color === 'default',
-            [stylesVariantTextColorWhite()]: variant === 'text' && color === 'white',
-            [stylesVariantTextColor(color)]: variant === 'text' && !['white', 'default'].includes(color),
-            [stylesVariantText()]: variant === 'text',
-            [stylesVariantContainedColorDefault()]: variant === 'contained' && color === 'default',
-            [stylesVariantContainedColorWhite()]: variant === 'contained' && color === 'white',
-            [stylesVariantContainedColor(color)]: variant === 'contained' && !['white', 'default'].includes(color),
-            [stylesVariantContained()]: variant === 'contained',
-            [stylesVariantOutlinedColorDefault()]: variant === 'outlined' && color === 'default',
-            [stylesVariantOutlinedColorWhite()]: variant === 'outlined' && color === 'white',
-            [stylesVariantOutlinedColor(color)]: variant === 'outlined' && !['white', 'default'].includes(color),
-            [stylesVariantOutlined()]: variant === 'outlined',
-            [className]: !!className,
-        }) },
-        React.createElement(Typography, { variant: textVariant, className: cx(stylesLabel()), color: "inherit" }, children)));
+    return (React.createElement(ButtonBaseRoot, { as: Component, ref: ref, type: type, size: size, ...other },
+        React.createElement(ButtonBaseLabel, { color: "inherit", variant: textVariant }, children)));
 });
 ButtonBase.displayName = 'ButtonBase';
 ButtonBase.defaultProps = {

package/dist/esnext/ButtonBase/button_base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_base.js","sourceRoot":"","sources":["../../../src/ButtonBase/button_base.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button_base.js","sourceRoot":"","sources":["../../../src/ButtonBase/button_base.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/Checkbox/checkbox.js

@@ -1,22 +1,20 @@
 import * as React from 'react';
+import styled from '@emotion/styled';
 import { CheckIcon } from '../icons';
 import { useId } from '../hooks';
-import { css, cx } from '../styles';
 /**
  *
  */
 /**
  * Styles.
  */
-const stylesBase = () => css({
-    label: 'Checkbox',
+const CheckboxRoot = styled('label')({
     display: 'inline-flex',
     width: 'var(--pv-size-base-4)',
     height: 'var(--pv-size-base-4)',
     position: 'relative',
 });
-const stylesInput = () => css({
-    label: 'Checkbox-input',
+const CheckboxInput = styled('input')({
     width: '100%',
     height: '100%',
     margin: 0,
@@ -77,8 +75,7 @@ const stylesInput = () => css({
         },
     },
 });
-const stylesIcon = () => css({
-    label: 'Checkbox-icon',
+const CheckboxIcon = styled('svg')({
     display: 'block',
     position: 'absolute',
     top: 0,
@@ -93,24 +90,11 @@ const stylesIcon = () => css({
  *
  */
 export const Checkbox = React.forwardRef((props, ref) => {
-    const { checked, defaultChecked, required, inputProps, className, disabled, id: idProp, checkedIcon, onChange, ...other } = props;
+    const { checked, defaultChecked, required, inputProps, disabled, id: idProp, checkedIcon = CheckIcon, onChange, ...other } = props;
     const id = useId(idProp);
-    const renderIcon = () => {
-        const baseIconProps = {
-            'aria-hidden': true,
-            className: cx(stylesIcon()),
-        };
-        if (checkedIcon) {
-            return React.cloneElement(checkedIcon, baseIconProps);
-        }
-        return (React.createElement(CheckIcon, { ...baseIconProps }));
-    };
-    return (React.createElement("label", { ...other, ref: ref, htmlFor: id, className: cx({
-            [stylesBase()]: true,
-            [className]: !!className,
-        }) },
-        React.createElement("input", { ...inputProps, type: "checkbox", id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, className: stylesInput(), onChange: onChange }),
-        renderIcon()));
+    return (React.createElement(CheckboxRoot, { ref: ref, htmlFor: id, ...other },
+        React.createElement(CheckboxInput, { ...inputProps, type: "checkbox", id: id, checked: checked, defaultChecked: defaultChecked, required: required, disabled: disabled, onChange: onChange }),
+        React.createElement(CheckboxIcon, { as: checkedIcon, "aria-hidden": true })));
 });
 Checkbox.displayName = 'Checkbox';
 Checkbox.defaultProps = {};

package/dist/esnext/Checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/checkbox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/Checkbox/checkbox.tsx"],"names":[],"mappings":"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"}