@mirohq/design-system-base-button 0.4.13 → 0.4.15
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.
- package/dist/main.js +52 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +52 -1
- package/dist/module.js.map +1 -1
- package/package.json +3 -2
package/dist/main.js
CHANGED
|
@@ -35,6 +35,57 @@ const StyledBaseButton = designSystemStitches.styled(designSystemPrimitive.Primi
|
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
37
|
|
|
38
|
+
const ariaDisabledEventExceptions = [
|
|
39
|
+
"onAnimationEnd",
|
|
40
|
+
"onAnimationEndCapture",
|
|
41
|
+
"onAnimationIteration",
|
|
42
|
+
"onAnimationIterationCapture",
|
|
43
|
+
"onAnimationStartCapture",
|
|
44
|
+
"onBlur",
|
|
45
|
+
"onBlurCapture",
|
|
46
|
+
"onDragEnter",
|
|
47
|
+
"onDragEnterCapture",
|
|
48
|
+
"onDragExit",
|
|
49
|
+
"onDragExitCapture",
|
|
50
|
+
"onDragLeave",
|
|
51
|
+
"onDragLeave",
|
|
52
|
+
"onDragLeaveCapture",
|
|
53
|
+
"onDragLeaveCapture",
|
|
54
|
+
"onDragOver",
|
|
55
|
+
"onDragOver",
|
|
56
|
+
"onDragOverCapture",
|
|
57
|
+
"onDragOverCapture",
|
|
58
|
+
"onFocus",
|
|
59
|
+
"onFocusCapture",
|
|
60
|
+
"onGotPointerCapture",
|
|
61
|
+
"onGotPointerCaptureCapture",
|
|
62
|
+
"onLostPointerCapture",
|
|
63
|
+
"onLostPointerCaptureCapture",
|
|
64
|
+
"onMouseEnter",
|
|
65
|
+
"onMouseLeave",
|
|
66
|
+
"onMouseMove",
|
|
67
|
+
"onMouseMoveCapture",
|
|
68
|
+
"onMouseOut",
|
|
69
|
+
"onMouseOutCapture",
|
|
70
|
+
"onMouseOver",
|
|
71
|
+
"onMouseOverCapture",
|
|
72
|
+
"onPointerEnter",
|
|
73
|
+
"onPointerEnterCapture",
|
|
74
|
+
"onPointerLeave",
|
|
75
|
+
"onPointerLeaveCapture",
|
|
76
|
+
"onPointerMove",
|
|
77
|
+
"onPointerMoveCapture",
|
|
78
|
+
"onPointerOut",
|
|
79
|
+
"onPointerOutCapture",
|
|
80
|
+
"onPointerOver",
|
|
81
|
+
"onPointerOverCapture",
|
|
82
|
+
"onTouchMove",
|
|
83
|
+
"onTouchMoveCapture",
|
|
84
|
+
"onTransitionEnd",
|
|
85
|
+
"onTransitionEndCapture",
|
|
86
|
+
"onWheel",
|
|
87
|
+
"onWheelCapture"
|
|
88
|
+
];
|
|
38
89
|
const BaseButton = React__default["default"].forwardRef(
|
|
39
90
|
({
|
|
40
91
|
disabled = false,
|
|
@@ -51,7 +102,7 @@ const BaseButton = React__default["default"].forwardRef(
|
|
|
51
102
|
const { href, target, rel = "" } = restProps;
|
|
52
103
|
let elementProps = restProps;
|
|
53
104
|
if (designSystemUtils.booleanify(ariaDisabled)) {
|
|
54
|
-
elementProps = designSystemUtils.removeEventProps(elementProps,
|
|
105
|
+
elementProps = designSystemUtils.removeEventProps(elementProps, ariaDisabledEventExceptions);
|
|
55
106
|
}
|
|
56
107
|
const { pressProps, isPressed } = designSystemUsePress.usePress({
|
|
57
108
|
preventFocusOnPress: true,
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps,
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps, isPressed } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledBaseButton\n {...elementProps}\n data-pressed={isPressed ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : undefined}\n tabIndex={disabled && (asLink || asChild === true) ? -1 : undefined}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={\n target === '_blank' ? `noopener noreferrer ${rel}`.trim() : rel\n }\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","React","booleanify","removeEventProps","usePress","useHover","mergeProps","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -27,6 +27,57 @@ const StyledBaseButton = styled(Primitive.button, {
|
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
29
|
|
|
30
|
+
const ariaDisabledEventExceptions = [
|
|
31
|
+
"onAnimationEnd",
|
|
32
|
+
"onAnimationEndCapture",
|
|
33
|
+
"onAnimationIteration",
|
|
34
|
+
"onAnimationIterationCapture",
|
|
35
|
+
"onAnimationStartCapture",
|
|
36
|
+
"onBlur",
|
|
37
|
+
"onBlurCapture",
|
|
38
|
+
"onDragEnter",
|
|
39
|
+
"onDragEnterCapture",
|
|
40
|
+
"onDragExit",
|
|
41
|
+
"onDragExitCapture",
|
|
42
|
+
"onDragLeave",
|
|
43
|
+
"onDragLeave",
|
|
44
|
+
"onDragLeaveCapture",
|
|
45
|
+
"onDragLeaveCapture",
|
|
46
|
+
"onDragOver",
|
|
47
|
+
"onDragOver",
|
|
48
|
+
"onDragOverCapture",
|
|
49
|
+
"onDragOverCapture",
|
|
50
|
+
"onFocus",
|
|
51
|
+
"onFocusCapture",
|
|
52
|
+
"onGotPointerCapture",
|
|
53
|
+
"onGotPointerCaptureCapture",
|
|
54
|
+
"onLostPointerCapture",
|
|
55
|
+
"onLostPointerCaptureCapture",
|
|
56
|
+
"onMouseEnter",
|
|
57
|
+
"onMouseLeave",
|
|
58
|
+
"onMouseMove",
|
|
59
|
+
"onMouseMoveCapture",
|
|
60
|
+
"onMouseOut",
|
|
61
|
+
"onMouseOutCapture",
|
|
62
|
+
"onMouseOver",
|
|
63
|
+
"onMouseOverCapture",
|
|
64
|
+
"onPointerEnter",
|
|
65
|
+
"onPointerEnterCapture",
|
|
66
|
+
"onPointerLeave",
|
|
67
|
+
"onPointerLeaveCapture",
|
|
68
|
+
"onPointerMove",
|
|
69
|
+
"onPointerMoveCapture",
|
|
70
|
+
"onPointerOut",
|
|
71
|
+
"onPointerOutCapture",
|
|
72
|
+
"onPointerOver",
|
|
73
|
+
"onPointerOverCapture",
|
|
74
|
+
"onTouchMove",
|
|
75
|
+
"onTouchMoveCapture",
|
|
76
|
+
"onTransitionEnd",
|
|
77
|
+
"onTransitionEndCapture",
|
|
78
|
+
"onWheel",
|
|
79
|
+
"onWheelCapture"
|
|
80
|
+
];
|
|
30
81
|
const BaseButton = React.forwardRef(
|
|
31
82
|
({
|
|
32
83
|
disabled = false,
|
|
@@ -43,7 +94,7 @@ const BaseButton = React.forwardRef(
|
|
|
43
94
|
const { href, target, rel = "" } = restProps;
|
|
44
95
|
let elementProps = restProps;
|
|
45
96
|
if (booleanify(ariaDisabled)) {
|
|
46
|
-
elementProps = removeEventProps(elementProps,
|
|
97
|
+
elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions);
|
|
47
98
|
}
|
|
48
99
|
const { pressProps, isPressed } = usePress({
|
|
49
100
|
preventFocusOnPress: true,
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps,
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/base-button.styled.ts","../src/base-button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const sizes = {\n medium: '$8',\n large: '$10',\n xLarge: '$12',\n}\n\nexport const StyledBaseButton = styled(Primitive.button, {\n all: 'unset',\n display: 'inline-flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n borderRadius: '$50',\n cursor: 'pointer',\n\n '&[disabled]': {\n pointerEvents: 'none',\n },\n\n '&[aria-disabled]': {\n cursor: 'default',\n },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n typeof StyledBaseButton\n>\n","import React from 'react'\nimport type { ElementRef, AnchorHTMLAttributes } from 'react'\nimport { mergeProps } from '@react-aria/utils'\nimport { booleanify, removeEventProps } from '@mirohq/design-system-utils'\nimport { useHover } from '@react-aria/interactions'\nimport type { HoverEvents } from '@react-types/shared'\nimport { usePress } from '@mirohq/design-system-use-press'\nimport type { PressProps } from '@mirohq/design-system-use-press'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\n// DO NOT export it in the index\n// Fix TS2742, option 3.1 in the comment bellow\n// https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189\nexport type { HoverEvents } from '@react-types/shared'\n\ntype AsButtonProps = StyledBaseButtonProps & PressProps & HoverEvents\ntype AsLinkProps = AsButtonProps & AnchorHTMLAttributes<'a'> & { href: string }\n\nexport type BaseButtonProps = AsButtonProps | AsLinkProps\n\nconst ariaDisabledEventExceptions: Array<\n keyof DOMEventAttributes<'button' | 'a'>\n> = [\n 'onAnimationEnd',\n 'onAnimationEndCapture',\n 'onAnimationIteration',\n 'onAnimationIterationCapture',\n 'onAnimationStartCapture',\n 'onBlur',\n 'onBlurCapture',\n 'onDragEnter',\n 'onDragEnterCapture',\n 'onDragExit',\n 'onDragExitCapture',\n 'onDragLeave',\n 'onDragLeave',\n 'onDragLeaveCapture',\n 'onDragLeaveCapture',\n 'onDragOver',\n 'onDragOver',\n 'onDragOverCapture',\n 'onDragOverCapture',\n 'onFocus',\n 'onFocusCapture',\n 'onGotPointerCapture',\n 'onGotPointerCaptureCapture',\n 'onLostPointerCapture',\n 'onLostPointerCaptureCapture',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseMoveCapture',\n 'onMouseOut',\n 'onMouseOutCapture',\n 'onMouseOver',\n 'onMouseOverCapture',\n 'onPointerEnter',\n 'onPointerEnterCapture',\n 'onPointerLeave',\n 'onPointerLeaveCapture',\n 'onPointerMove',\n 'onPointerMoveCapture',\n 'onPointerOut',\n 'onPointerOutCapture',\n 'onPointerOver',\n 'onPointerOverCapture',\n 'onTouchMove',\n 'onTouchMoveCapture',\n 'onTransitionEnd',\n 'onTransitionEndCapture',\n 'onWheel',\n 'onWheelCapture',\n]\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps\n const { href, target, rel = '' } = restProps as AsLinkProps\n\n let elementProps = restProps\n\n if (booleanify(ariaDisabled)) {\n elementProps = removeEventProps(elementProps, ariaDisabledEventExceptions)\n }\n\n const { pressProps, isPressed } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...elementProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n elementProps = mergeProps(pressProps, hoverProps)\n\n return (\n <StyledBaseButton\n {...elementProps}\n data-pressed={isPressed ? '' : undefined}\n data-hovered={isHovered ? '' : undefined}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : undefined}\n tabIndex={disabled && (asLink || asChild === true) ? -1 : undefined}\n // Button can be an <a> but TS will never know because it will only happen in runtime via asChild\n // @ts-expect-error\n ref={forwardRef}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={\n target === '_blank' ? `noopener noreferrer ${rel}`.trim() : rel\n }\n >\n {children}\n </a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-button",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.15",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"@react-aria/utils": "^3.13.0",
|
|
31
31
|
"@react-types/shared": "^3.16.0",
|
|
32
32
|
"@mirohq/design-system-primitive": "^1.1.0",
|
|
33
|
-
"@mirohq/design-system-stitches": "^2.3.
|
|
33
|
+
"@mirohq/design-system-stitches": "^2.3.6",
|
|
34
|
+
"@mirohq/design-system-types": "^0.6.0"
|
|
34
35
|
},
|
|
35
36
|
"scripts": {
|
|
36
37
|
"build": "rollup -c ../../../../rollup.config.js",
|