npm - @mirohq/design-system-checkbox - Versions diffs - 2.3.11 → 2.3.13 - Mend

@mirohq/design-system-checkbox 2.3.11 → 2.3.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -40,6 +40,7 @@ const hoverAriaDisabled = [
 const StyledCheckbox = designSystemStitches.styled(reactCheckbox.Root, {
   all: "unset",
   square: "$6",
+  flexShrink: 0,
   color: "$icon-on-interactive-primary",
   cursor: "pointer",
   "&[aria-disabled=true], &:disabled": {
@@ -203,7 +204,6 @@ const markStyles = {
     }
   }
 };
-const StyledDisabledMark = designSystemStitches.styled(designSystemIcons.IconProhibit, markStyles);
 const StyledCheckMark = designSystemStitches.styled(designSystemIcons.IconCheckMark, markStyles);
 const StyledIndeterminateMark = designSystemStitches.styled(designSystemIcons.IconMinus, markStyles);
@@ -226,7 +226,6 @@ const Checkbox = React.forwardRef(
     );
     const internalChecked = checked != null ? checked : checkedState;
     const isAriaDisabled = designSystemUtils.booleanify(ariaDisabled != null ? ariaDisabled : false);
-    const disabledUnchecked = (disabled === true || isAriaDisabled) && internalChecked === false;
     const checkedStateEvents = {
       true: onChecked,
       false: onUnchecked
@@ -256,13 +255,10 @@ const Checkbox = React.forwardRef(
           (_a = checkedStateEvents["".concat(checked2)]) == null ? void 0 : _a.call(checkedStateEvents);
         },
         ref: forwardRef,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(StyledCheckboxContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(reactCheckbox.Indicator, { children: [
-            internalChecked === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(StyledIndeterminateMark, { size }),
-            internalChecked === true && /* @__PURE__ */ jsxRuntime.jsx(StyledCheckMark, { size })
-          ] }),
-          disabledUnchecked && /* @__PURE__ */ jsxRuntime.jsx(StyledDisabledMark, { size })
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsx(StyledCheckboxContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactCheckbox.Indicator, { children: [
+          internalChecked === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(StyledIndeterminateMark, { size }),
+          internalChecked === true && /* @__PURE__ */ jsxRuntime.jsx(StyledCheckMark, { size })
+        ] }) })
       }
     );
   }

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled, keyframes } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$checkbox',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-on-interactive-primary',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus-visible, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus',\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-on-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n [checkboxContentSelector]: {\n transition: 'background-color 120ms ease, border-color 120ms ease',\n '@media (prefers-reduced-motion: reduce)': {\n transition: 'none',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-option',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary',\n color: '$icon-on-interactive-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-selected',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst checkmarkEnter = keyframes({\n from: { opacity: 0, transform: 'translate(-50%, -50%) scale(0.65)' },\n to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n animation: `${checkmarkEnter} 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9) both`,\n '@media (prefers-reduced-motion: reduce)': {\n animation: 'none',\n },\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /*\n The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n /\n defaultChecked?: boolean\n\n /\n The style of the checkbox.\n * @default 'solid-prominent'\n /\n variant?: StyledCheckboxProps['variant']\n\n /\n The size of the checkbox.\n * @default 'large'\n /\n size?: StyledCheckboxProps['size']\n\n /\n The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n /\n checked?: boolean \| 'indeterminate'\n\n /\n When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n /\n required?: boolean\n\n /\n The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n /\n name?: string\n\n /\n The value given as data when submitted with a name.\n /\n value?: string\n\n /\n When true, prevents the user from interacting with the checkbox.\n /\n disabled?: boolean\n\n /\n Event handler called when the checked state equals true.\n /\n onChecked?: () => void\n\n /\n Event handler called when the checked state equals false.\n /\n onUnchecked?: () => void\n\n /\n When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true \|\| isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-form-element='checkbox'\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && <StyledDisabledMark size={size} />}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["styled","Primitive","Root","keyframes","IconProhibit","IconCheckMark","IconMinus","useState","booleanify","jsx","checked","jsxs","RadixIndicator"],"mappings":"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"}
1	+ {"version":3,"file":"main.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled, keyframes } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { IconCheckMark, IconMinus } from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$checkbox',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n flexShrink: 0,\n color: '$icon-on-interactive-primary',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus-visible, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus',\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-on-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n [checkboxContentSelector]: {\n transition: 'background-color 120ms ease, border-color 120ms ease',\n '@media (prefers-reduced-motion: reduce)': {\n transition: 'none',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-option',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary',\n color: '$icon-on-interactive-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-selected',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst checkmarkEnter = keyframes({\n from: { opacity: 0, transform: 'translate(-50%, -50%) scale(0.65)' },\n to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n animation: `${checkmarkEnter} 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9) both`,\n '@media (prefers-reduced-motion: reduce)': {\n animation: 'none',\n },\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /*\n The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n /\n defaultChecked?: boolean\n\n /\n The style of the checkbox.\n * @default 'solid-prominent'\n /\n variant?: StyledCheckboxProps['variant']\n\n /\n The size of the checkbox.\n * @default 'large'\n /\n size?: StyledCheckboxProps['size']\n\n /\n The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n /\n checked?: boolean \| 'indeterminate'\n\n /\n When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n /\n required?: boolean\n\n /\n The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n /\n name?: string\n\n /\n The value given as data when submitted with a name.\n /\n value?: string\n\n /\n When true, prevents the user from interacting with the checkbox.\n /\n disabled?: boolean\n\n /\n Event handler called when the checked state equals true.\n /\n onChecked?: () => void\n\n /\n Event handler called when the checked state equals false.\n /\n onUnchecked?: () => void\n\n /\n When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-form-element='checkbox'\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["styled","Primitive","Root","keyframes","IconCheckMark","IconMinus","useState","booleanify","jsx","checked","jsxs","RadixIndicator"],"mappings":"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"}

package/dist/module.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { booleanify } from '@mirohq/design-system-utils';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { styled, keyframes } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
-import { IconProhibit, IconCheckMark, IconMinus } from '@mirohq/design-system-icons';
+import { IconCheckMark, IconMinus } from '@mirohq/design-system-icons';
 const StyledCheckboxContent = styled(Primitive.div, {
   display: "block",
@@ -38,6 +38,7 @@ const hoverAriaDisabled = [
 const StyledCheckbox = styled(Root, {
   all: "unset",
   square: "$6",
+  flexShrink: 0,
   color: "$icon-on-interactive-primary",
   cursor: "pointer",
   "&[aria-disabled=true], &:disabled": {
@@ -201,7 +202,6 @@ const markStyles = {
     }
   }
 };
-const StyledDisabledMark = styled(IconProhibit, markStyles);
 const StyledCheckMark = styled(IconCheckMark, markStyles);
 const StyledIndeterminateMark = styled(IconMinus, markStyles);
@@ -224,7 +224,6 @@ const Checkbox = React.forwardRef(
     );
     const internalChecked = checked != null ? checked : checkedState;
     const isAriaDisabled = booleanify(ariaDisabled != null ? ariaDisabled : false);
-    const disabledUnchecked = (disabled === true || isAriaDisabled) && internalChecked === false;
     const checkedStateEvents = {
       true: onChecked,
       false: onUnchecked
@@ -254,13 +253,10 @@ const Checkbox = React.forwardRef(
           (_a = checkedStateEvents["".concat(checked2)]) == null ? void 0 : _a.call(checkedStateEvents);
         },
         ref: forwardRef,
-        children: /* @__PURE__ */ jsxs(StyledCheckboxContent, { children: [
-          /* @__PURE__ */ jsxs(Indicator, { children: [
-            internalChecked === "indeterminate" && /* @__PURE__ */ jsx(StyledIndeterminateMark, { size }),
-            internalChecked === true && /* @__PURE__ */ jsx(StyledCheckMark, { size })
-          ] }),
-          disabledUnchecked && /* @__PURE__ */ jsx(StyledDisabledMark, { size })
-        ] })
+        children: /* @__PURE__ */ jsx(StyledCheckboxContent, { children: /* @__PURE__ */ jsxs(Indicator, { children: [
+          internalChecked === "indeterminate" && /* @__PURE__ */ jsx(StyledIndeterminateMark, { size }),
+          internalChecked === true && /* @__PURE__ */ jsx(StyledCheckMark, { size })
+        ] }) })
       }
     );
   }

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"module.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled, keyframes } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport {\n IconProhibit,\n IconCheckMark,\n IconMinus,\n} from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$checkbox',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n color: '$icon-on-interactive-primary',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus-visible, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus',\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-on-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n [checkboxContentSelector]: {\n transition: 'background-color 120ms ease, border-color 120ms ease',\n '@media (prefers-reduced-motion: reduce)': {\n transition: 'none',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-option',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary',\n color: '$icon-on-interactive-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-selected',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst checkmarkEnter = keyframes({\n from: { opacity: 0, transform: 'translate(-50%, -50%) scale(0.65)' },\n to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n animation: `${checkmarkEnter} 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9) both`,\n '@media (prefers-reduced-motion: reduce)': {\n animation: 'none',\n },\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledDisabledMark = styled(IconProhibit, markStyles)\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledDisabledMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /*\n The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n /\n defaultChecked?: boolean\n\n /\n The style of the checkbox.\n * @default 'solid-prominent'\n /\n variant?: StyledCheckboxProps['variant']\n\n /\n The size of the checkbox.\n * @default 'large'\n /\n size?: StyledCheckboxProps['size']\n\n /\n The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n /\n checked?: boolean \| 'indeterminate'\n\n /\n When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n /\n required?: boolean\n\n /\n The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n /\n name?: string\n\n /\n The value given as data when submitted with a name.\n /\n value?: string\n\n /\n When true, prevents the user from interacting with the checkbox.\n /\n disabled?: boolean\n\n /\n Event handler called when the checked state equals true.\n /\n onChecked?: () => void\n\n /\n Event handler called when the checked state equals false.\n /\n onUnchecked?: () => void\n\n /\n When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const disabledUnchecked =\n (disabled === true \|\| isAriaDisabled) && internalChecked === false\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-form-element='checkbox'\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n {disabledUnchecked && <StyledDisabledMark size={size} />}\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["checked","RadixIndicator"],"mappings":"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"}
1	+ {"version":3,"file":"module.js","sources":["../src/checkbox.styled.tsx","../src/checkbox.tsx"],"sourcesContent":["import { styled, keyframes } from '@mirohq/design-system-stitches'\nimport { Root } from '@radix-ui/react-checkbox'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { IconCheckMark, IconMinus } from '@mirohq/design-system-icons'\nimport type { StrictComponentProps } from '@mirohq/design-system-stitches'\n\nexport const StyledCheckboxContent = styled(Primitive.div, {\n display: 'block',\n pointerEvents: 'none',\n borderRadius: '$checkbox',\n position: 'relative',\n margin: 'auto',\n boxSizing: 'border-box',\n})\n\nconst checkboxContentSelector = `& ${StyledCheckboxContent}`\n\nconst checkedAndIndeterminate = '&[aria-checked=true], &[data-indeterminate]'\nconst ariaDisabledCheckedIndeterminate = [\n '&[aria-disabled=true][aria-checked=true]',\n '&:disabled[aria-checked=true]',\n '&[aria-disabled=true][data-indeterminate]',\n '&:disabled[data-indeterminate]',\n].join(' ,')\nconst hoverCheckedIndeterminate =\n '&:hover[aria-checked=true], &:hover[data-indeterminate]'\nconst ariaDisabledUnChecked =\n '&[aria-disabled=true][aria-checked=false], &:disabled[aria-checked=false]'\nconst hoverCheckedIndeterminateDisabled = [\n '&:hover[aria-checked=true][aria-disabled=true]',\n '&:hover[aria-checked=true]&:disabled',\n '&:hover[data-indeterminate][aria-disabled=true]',\n '&:hover[data-indeterminate]&:disabled',\n].join(' ,')\n\nconst hoverAriaDisabled = [\n '&:hover[aria-checked=false][aria-disabled=true]',\n '&:hover[aria-checked=false]&:disabled',\n ...hoverCheckedIndeterminateDisabled.split(' ,'),\n].join(' ,')\n\nexport const StyledCheckbox = styled(Root, {\n all: 'unset',\n square: '$6',\n flexShrink: 0,\n color: '$icon-on-interactive-primary',\n cursor: 'pointer',\n\n '&[aria-disabled=true], &:disabled': {\n cursor: 'default',\n },\n '&:focus-visible, &[data-focused]': {\n [checkboxContentSelector]: {\n boxShadow: '$focus',\n '@media (forced-colors: active)': {\n outline: 'Highlight solid',\n },\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n\n [`${hoverAriaDisabled},${ariaDisabledCheckedIndeterminate},${ariaDisabledUnChecked}`]:\n {\n [checkboxContentSelector]: {\n color: '$icon-on-disabled',\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n },\n [checkboxContentSelector]: {\n transition: 'background-color 120ms ease, border-color 120ms ease',\n '@media (prefers-reduced-motion: reduce)': {\n transition: 'none',\n },\n },\n variants: {\n variant: {\n 'solid-prominent': {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-option',\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary',\n color: '$icon-on-interactive-primary',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-primary-hover',\n },\n },\n '&:hover[aria-checked=false]': {\n [checkboxContentSelector]: {\n border: '1px solid $border-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n border: '1px solid $border-disabled',\n },\n },\n },\n 'solid-subtle': {\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n color: '$icon-primary',\n },\n },\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n backgroundColor: '$background-primary-subtle',\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [`${hoverCheckedIndeterminate}, &:hover[aria-checked=false]`]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-interactive-secondary-selected',\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledUnChecked]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-disabled',\n },\n },\n },\n ghost: {\n '&[aria-checked=false]': {\n [checkboxContentSelector]: {\n '@media (forced-colors: active)': {\n border: '1px solid transparent',\n },\n },\n },\n [checkedAndIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-selected',\n },\n },\n [hoverCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n color: '$icon-interactive-primary-hover',\n },\n },\n [ariaDisabledCheckedIndeterminate]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n [hoverCheckedIndeterminateDisabled]: {\n [checkboxContentSelector]: {\n backgroundColor: '$background-surface',\n },\n },\n },\n },\n size: {\n large: {\n [checkboxContentSelector]: {\n square: '$5',\n },\n },\n small: {\n [checkboxContentSelector]: {\n square: '$4',\n },\n },\n },\n },\n})\n\nconst checkmarkEnter = keyframes({\n from: { opacity: 0, transform: 'translate(-50%, -50%) scale(0.65)' },\n to: { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n})\n\nconst markStyles = {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%,-50%)',\n animation: `${checkmarkEnter} 120ms cubic-bezier(0.25, 0.5, 0.5, 0.9) both`,\n '@media (prefers-reduced-motion: reduce)': {\n animation: 'none',\n },\n variants: {\n size: {\n large: { width: '18px' },\n small: { width: '12px' },\n },\n },\n}\n\nexport const StyledCheckMark = styled(IconCheckMark, markStyles)\n\nexport const StyledIndeterminateMark = styled(IconMinus, markStyles)\n\nexport type StyledCheckboxProps = StrictComponentProps<typeof StyledCheckbox>\n","import React, { useState } from 'react'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport { Indicator as RadixIndicator } from '@radix-ui/react-checkbox'\nimport type { ElementRef } from 'react'\nimport type { Booleanish } from '@mirohq/design-system-types'\n\nimport {\n StyledCheckboxContent,\n StyledCheckbox,\n StyledCheckMark,\n StyledIndeterminateMark,\n} from './checkbox.styled'\nimport type { StyledCheckboxProps } from './checkbox.styled'\n\nexport interface CheckboxProps extends StyledCheckboxProps {\n /*\n The checked state of the checkbox when it is initially rendered. Use when\n * you do not need to control its checked state.\n /\n defaultChecked?: boolean\n\n /\n The style of the checkbox.\n * @default 'solid-prominent'\n /\n variant?: StyledCheckboxProps['variant']\n\n /\n The size of the checkbox.\n * @default 'large'\n /\n size?: StyledCheckboxProps['size']\n\n /\n The controlled checked state of the checkbox. Must be used in conjunction\n * with onChecked and onUnchecked.\n /\n checked?: boolean \| 'indeterminate'\n\n /\n When true, indicates that the user must check the checkbox before the\n * owning form can be submitted.\n /\n required?: boolean\n\n /\n The name of the checkbox. Submitted with its owning form as part of a\n * name/value pair.\n /\n name?: string\n\n /\n The value given as data when submitted with a name.\n /\n value?: string\n\n /\n When true, prevents the user from interacting with the checkbox.\n /\n disabled?: boolean\n\n /\n Event handler called when the checked state equals true.\n /\n onChecked?: () => void\n\n /\n Event handler called when the checked state equals false.\n /\n onUnchecked?: () => void\n\n /\n When true, prevents the user from interacting with the checkbox but focus\n * is still possible.\n */\n 'aria-disabled'?: Booleanish\n}\n\nexport const Checkbox = React.forwardRef<\n ElementRef<typeof StyledCheckbox>,\n CheckboxProps\n>(\n (\n {\n 'aria-disabled': ariaDisabled,\n checked,\n defaultChecked,\n disabled,\n onChecked,\n onUnchecked,\n onClick,\n onKeyDown,\n size = 'large',\n variant = 'solid-prominent',\n ...restProps\n },\n forwardRef\n ) => {\n const [checkedState, setCheckedState] = useState<CheckboxProps['checked']>(\n defaultChecked ?? false\n )\n const internalChecked = checked ?? checkedState\n const isAriaDisabled = booleanify(ariaDisabled ?? false)\n const checkedStateEvents = {\n true: onChecked,\n false: onUnchecked,\n }\n\n return (\n <StyledCheckbox\n {...restProps}\n aria-disabled={ariaDisabled}\n data-form-element='checkbox'\n data-indeterminate={checked === 'indeterminate' ? '' : undefined}\n checked={internalChecked}\n defaultChecked={defaultChecked}\n disabled={disabled}\n size={size}\n variant={variant}\n onClick={e => {\n if (isAriaDisabled) {\n e.preventDefault()\n return\n }\n onClick?.(e)\n }}\n onCheckedChange={(checked: boolean) => {\n setCheckedState(checked)\n\n checkedStateEvents[`${checked}`]?.()\n }}\n ref={forwardRef}\n >\n <StyledCheckboxContent>\n <RadixIndicator>\n {internalChecked === 'indeterminate' && (\n <StyledIndeterminateMark size={size} />\n )}\n {internalChecked === true && <StyledCheckMark size={size} />}\n </RadixIndicator>\n </StyledCheckboxContent>\n </StyledCheckbox>\n )\n }\n)\n"],"names":["checked","RadixIndicator"],"mappings":"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"}

package/dist/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import react__default from 'react';
+import * as React from 'react';
+import React__default from 'react';
 import { Booleanish } from '@mirohq/design-system-types';
 import * as _radix_ui_react_checkbox from '@radix-ui/react-checkbox';
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
@@ -25,10 +25,10 @@ type TransformProps<Props, Media> = {
 	)
 }
-declare const StyledCheckbox: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>>>, "size" | "variant"> & TransformProps<{
+declare const StyledCheckbox: React.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<React.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & React.RefAttributes<HTMLButtonElement>>>, "size" | "variant"> & TransformProps<{
     variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
     size?: "small" | "large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & react.RefAttributes<HTMLButtonElement>>, {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & React.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<React.ForwardRefExoticComponent<_radix_ui_react_checkbox.CheckboxProps & React.RefAttributes<HTMLButtonElement>>, {
     variant?: "solid-prominent" | "solid-subtle" | "ghost" | undefined;
     size?: "small" | "large" | undefined;
 }, {}>;
@@ -87,7 +87,7 @@ interface CheckboxProps extends StyledCheckboxProps {
      */
     'aria-disabled'?: Booleanish;
 }
-declare const Checkbox: react__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
 export { Checkbox };
 export type { CheckboxProps };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-checkbox",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,11 +27,11 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.0",
-    "@mirohq/design-system-icons": "^1.38.0",
     "@mirohq/design-system-primitive": "^2.2.1",
-    "@mirohq/design-system-stitches": "^3.3.25",
     "@mirohq/design-system-types": "^1.0.3",
-    "@mirohq/design-system-utils": "^1.3.0"
+    "@mirohq/design-system-icons": "^1.38.0",
+    "@mirohq/design-system-utils": "^1.3.0",
+    "@mirohq/design-system-stitches": "^3.3.25"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",