@mirohq/design-system-base-button 1.2.41-ds-linter-green.0 → 1.2.41

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 CHANGED
@@ -37,6 +37,7 @@ const BaseButton = React.forwardRef(
37
37
  ({
38
38
  disabled = false,
39
39
  "aria-disabled": ariaDisabled,
40
+ allowArrowsWhenAriaDisabled,
40
41
  children,
41
42
  asChild,
42
43
  role,
@@ -48,10 +49,13 @@ const BaseButton = React.forwardRef(
48
49
  }, forwardRef) => {
49
50
  const asLink = "href" in restProps && restProps.href !== void 0;
50
51
  const { href, target, rel = "" } = restProps;
51
- const ariaDisabledProps = designSystemUseAriaDisabled.useAriaDisabled({
52
- ariaDisabled,
53
- ...restProps
54
- });
52
+ const ariaDisabledProps = designSystemUseAriaDisabled.useAriaDisabled(
53
+ {
54
+ ariaDisabled,
55
+ ...restProps
56
+ },
57
+ { allowArrows: allowArrowsWhenAriaDisabled }
58
+ );
55
59
  const { pressProps } = designSystemUsePress.usePress({
56
60
  preventFocusOnPress: true,
57
61
  disabled: disabled || designSystemUtils.booleanify(ariaDisabled),
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: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\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 } 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 { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\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 LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\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 tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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 <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","useAriaDisabled","usePress","booleanify","useHover","mergeProps","jsx"],"mappings":"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"}
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: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\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 } 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 { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\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 LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport type BaseButtonInternalProps = BaseButtonProps & {\n /**\n * Keep arrow keys working while `aria-disabled`, so a button inside a\n * roving-focus composite (tabs, toolbar) doesn't trap keyboard focus.\n * Not part of `BaseButtonProps`: it is only for components in this repo that\n * build on `BaseButton` directly.\n */\n allowArrowsWhenAriaDisabled?: boolean\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonInternalProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n allowArrowsWhenAriaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled(\n {\n ariaDisabled,\n ...restProps,\n },\n { allowArrows: allowArrowsWhenAriaDisabled }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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 <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":["styled","Primitive","useAriaDisabled","usePress","booleanify","useHover","mergeProps","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -35,6 +35,7 @@ const BaseButton = React.forwardRef(
35
35
  ({
36
36
  disabled = false,
37
37
  "aria-disabled": ariaDisabled,
38
+ allowArrowsWhenAriaDisabled,
38
39
  children,
39
40
  asChild,
40
41
  role,
@@ -46,10 +47,13 @@ const BaseButton = React.forwardRef(
46
47
  }, forwardRef) => {
47
48
  const asLink = "href" in restProps && restProps.href !== void 0;
48
49
  const { href, target, rel = "" } = restProps;
49
- const ariaDisabledProps = useAriaDisabled({
50
- ariaDisabled,
51
- ...restProps
52
- });
50
+ const ariaDisabledProps = useAriaDisabled(
51
+ {
52
+ ariaDisabled,
53
+ ...restProps
54
+ },
55
+ { allowArrows: allowArrowsWhenAriaDisabled }
56
+ );
53
57
  const { pressProps } = usePress({
54
58
  preventFocusOnPress: true,
55
59
  disabled: disabled || booleanify(ariaDisabled),
@@ -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: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\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 } 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 { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\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 LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\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 tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled({\n ariaDisabled,\n ...restProps,\n })\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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 <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
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: '$button',\n cursor: 'pointer',\n\n '@media (prefers-reduced-motion: no-preference)': {\n transition:\n 'background-color 120ms ease, border-color 120ms ease, color 120ms ease',\n },\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 } 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 { useAriaDisabled } from '@mirohq/design-system-use-aria-disabled'\nimport { Primitive } from '@mirohq/design-system-primitive'\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 LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target'\ntype LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>\nexport type BaseButtonProps = StyledBaseButtonProps &\n PressProps &\n HoverEvents &\n LinkProps\n\nexport type BaseButtonInternalProps = BaseButtonProps & {\n /**\n * Keep arrow keys working while `aria-disabled`, so a button inside a\n * roving-focus composite (tabs, toolbar) doesn't trap keyboard focus.\n * Not part of `BaseButtonProps`: it is only for components in this repo that\n * build on `BaseButton` directly.\n */\n allowArrowsWhenAriaDisabled?: boolean\n}\n\nexport const BaseButton = React.forwardRef<\n ElementRef<'button' | 'a'>,\n BaseButtonInternalProps\n>(\n (\n {\n disabled = false,\n 'aria-disabled': ariaDisabled,\n allowArrowsWhenAriaDisabled,\n children,\n asChild,\n role,\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n tabIndex,\n ...restProps\n },\n forwardRef\n ) => {\n const asLink = 'href' in restProps && restProps.href !== undefined\n const { href, target, rel = '' } = restProps\n\n const ariaDisabledProps = useAriaDisabled(\n {\n ariaDisabled,\n ...restProps,\n },\n { allowArrows: allowArrowsWhenAriaDisabled }\n )\n\n const { pressProps } = usePress({\n preventFocusOnPress: true,\n disabled: disabled || booleanify(ariaDisabled),\n ...ariaDisabledProps,\n })\n\n const { hoverProps, isHovered } = useHover({\n onHoverStart,\n onHoverEnd,\n onHoverChange,\n })\n\n const elementProps = mergeProps(pressProps, hoverProps)\n\n let relProp: string | undefined = rel\n\n if (asLink && target === '_blank') {\n if (!relProp.includes('noreferrer')) {\n relProp = `noreferrer ${relProp}`\n }\n\n if (!relProp.includes('noopener')) {\n relProp = `noopener ${relProp}`\n }\n\n relProp = relProp.trim()\n }\n\n if (relProp === '') {\n relProp = undefined\n }\n\n const tabIndexProps =\n typeof tabIndex === 'number'\n ? {\n tabIndex,\n }\n : {}\n\n if (disabled && (asLink || asChild === true)) {\n tabIndexProps.tabIndex = -1\n }\n\n return (\n <StyledBaseButton\n {...elementProps}\n {...tabIndexProps}\n data-hovered={isHovered ? '' : (elementProps as any)['data-hovered']}\n asChild={asLink || asChild}\n disabled={disabled}\n role={role ?? (asChild === true ? 'button' : undefined)}\n aria-disabled={booleanify(ariaDisabled) ? 'true' : ariaDisabled}\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 <Primitive.a\n href={href}\n target={target}\n rel={relProp}\n asChild={asChild}\n >\n {children}\n </Primitive.a>\n ) : (\n children\n )}\n </StyledBaseButton>\n )\n }\n)\n"],"names":[],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -36,7 +36,16 @@ type StyledBaseButtonProps = ComponentPropsWithRef<typeof StyledBaseButton>;
36
36
  type LinkAttrs = 'download' | 'href' | 'media' | 'ping' | 'target';
37
37
  type LinkProps = Pick<AnchorHTMLAttributes<'a'>, LinkAttrs>;
38
38
  type BaseButtonProps = StyledBaseButtonProps & PressProps & HoverEvents & LinkProps;
39
- declare const BaseButton: React__default.ForwardRefExoticComponent<Omit<BaseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
39
+ type BaseButtonInternalProps = BaseButtonProps & {
40
+ /**
41
+ * Keep arrow keys working while `aria-disabled`, so a button inside a
42
+ * roving-focus composite (tabs, toolbar) doesn't trap keyboard focus.
43
+ * Not part of `BaseButtonProps`: it is only for components in this repo that
44
+ * build on `BaseButton` directly.
45
+ */
46
+ allowArrowsWhenAriaDisabled?: boolean;
47
+ };
48
+ declare const BaseButton: React__default.ForwardRefExoticComponent<Omit<BaseButtonInternalProps, "ref"> & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
40
49
 
41
50
  export { BaseButton, sizes };
42
- export type { BaseButtonProps };
51
+ export type { BaseButtonInternalProps, BaseButtonProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-button",
3
- "version": "1.2.41-ds-linter-green.0",
3
+ "version": "1.2.41",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -30,7 +30,7 @@
30
30
  "@react-aria/utils": "^3.31.0",
31
31
  "@react-types/shared": "^3.16.0",
32
32
  "@mirohq/design-system-primitive": "^2.2.1",
33
- "@mirohq/design-system-stitches": "^3.4.0-ds-linter-green.0",
33
+ "@mirohq/design-system-stitches": "^3.3.35",
34
34
  "@mirohq/design-system-use-aria-disabled": "^1.1.6",
35
35
  "@mirohq/design-system-use-press": "^1.1.6",
36
36
  "@mirohq/design-system-utils": "^1.5.0"