@mirohq/design-system-base-button 0.4.39 → 0.4.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.
Files changed (6) hide show
  1. package/dist/main.js +8 -2
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +8 -2
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +62 -103
  6. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -129,16 +129,22 @@ const BaseButton = React__default["default"].forwardRef(
129
129
  if (relProp === "") {
130
130
  relProp = void 0;
131
131
  }
132
+ const tabIndexProps = typeof tabIndex === "number" ? {
133
+ tabIndex
134
+ } : {};
135
+ if (disabled && (asLink || asChild === true)) {
136
+ tabIndexProps.tabIndex = -1;
137
+ }
132
138
  return /* @__PURE__ */ jsxRuntime.jsx(
133
139
  StyledBaseButton,
134
140
  {
135
141
  ...elementProps,
136
- "data-hovered": isHovered ? "" : void 0,
142
+ ...tabIndexProps,
143
+ "data-hovered": isHovered ? "" : elementProps["data-hovered"],
137
144
  asChild: asLink || asChild,
138
145
  disabled,
139
146
  role: role != null ? role : asChild === true ? "button" : void 0,
140
147
  "aria-disabled": designSystemUtils.booleanify(ariaDisabled) ? "true" : ariaDisabled,
141
- tabIndex: disabled && (asLink || asChild === true) ? -1 : tabIndex,
142
148
  ref: forwardRef,
143
149
  children: asLink ? /* @__PURE__ */ jsxRuntime.jsx(
144
150
  designSystemPrimitive.Primitive.a,
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'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\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 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 tabIndex,\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 } = 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 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 return (\n <StyledBaseButton\n {...elementProps}\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' : ariaDisabled}\n tabIndex={disabled && (asLink || asChild === true) ? -1 : tabIndex}\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","React","booleanify","removeEventProps","usePress","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: '$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'\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 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 tabIndex,\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 } = 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 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","React","booleanify","removeEventProps","usePress","useHover","mergeProps","jsx"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -121,16 +121,22 @@ const BaseButton = React.forwardRef(
121
121
  if (relProp === "") {
122
122
  relProp = void 0;
123
123
  }
124
+ const tabIndexProps = typeof tabIndex === "number" ? {
125
+ tabIndex
126
+ } : {};
127
+ if (disabled && (asLink || asChild === true)) {
128
+ tabIndexProps.tabIndex = -1;
129
+ }
124
130
  return /* @__PURE__ */ jsx(
125
131
  StyledBaseButton,
126
132
  {
127
133
  ...elementProps,
128
- "data-hovered": isHovered ? "" : void 0,
134
+ ...tabIndexProps,
135
+ "data-hovered": isHovered ? "" : elementProps["data-hovered"],
129
136
  asChild: asLink || asChild,
130
137
  disabled,
131
138
  role: role != null ? role : asChild === true ? "button" : void 0,
132
139
  "aria-disabled": booleanify(ariaDisabled) ? "true" : ariaDisabled,
133
- tabIndex: disabled && (asLink || asChild === true) ? -1 : tabIndex,
134
140
  ref: forwardRef,
135
141
  children: asLink ? /* @__PURE__ */ jsx(
136
142
  Primitive.a,
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'\nimport type { DOMEventAttributes } from '@mirohq/design-system-types'\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 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 tabIndex,\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 } = 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 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 return (\n <StyledBaseButton\n {...elementProps}\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' : ariaDisabled}\n tabIndex={disabled && (asLink || asChild === true) ? -1 : tabIndex}\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":";;;;;;;;;AAIO,MAAM,KAAQ,GAAA;AAAA,EACnB,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,KAAA;AACV,EAAA;AAEa,MAAA,gBAAA,GAAmB,MAAO,CAAA,SAAA,CAAU,MAAQ,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,aAAe,EAAA;AAAA,IACb,aAAe,EAAA,MAAA;AAAA,GACjB;AAAA,EAEA,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,SAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACDD,MAAM,2BAEF,GAAA;AAAA,EACF,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,yBAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,qBAAA;AAAA,EACA,4BAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,wBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAEO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,SAAS,MAAU,IAAA,SAAA,CAAA;AACzB,IAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,GAAA,GAAM,IAAO,GAAA,SAAA,CAAA;AAEnC,IAAA,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,IAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,MAAe,YAAA,GAAA,gBAAA,CAAiB,cAAc,2BAA2B,CAAA,CAAA;AAAA,KAC3E;AAEA,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,QAAS,CAAA;AAAA,MAC9B,mBAAqB,EAAA,IAAA;AAAA,MACrB,QAAA,EAAU,QAAY,IAAA,UAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG,YAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAe,YAAA,GAAA,UAAA,CAAW,YAAY,UAAU,CAAA,CAAA;AAEhD,IAAA,IAAI,OAA8B,GAAA,GAAA,CAAA;AAElC,IAAI,IAAA,MAAA,IAAU,WAAW,QAAU,EAAA;AACjC,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,YAAY,CAAG,EAAA;AACnC,QAAA,OAAA,GAAU,aAAc,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OAC1B;AAEA,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,UAAU,CAAG,EAAA;AACjC,QAAA,OAAA,GAAU,WAAY,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OACxB;AAEA,MAAA,OAAA,GAAU,QAAQ,IAAK,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,IAAI,YAAY,EAAI,EAAA;AAClB,MAAU,OAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,QAC/B,SAAS,MAAU,IAAA,OAAA;AAAA,QACnB,QAAA;AAAA,QACA,IAAM,EAAA,IAAA,IAAA,IAAA,GAAA,IAAA,GAAS,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA,CAAA;AAAA,QAC7C,eAAe,EAAA,UAAA,CAAW,YAAY,CAAA,GAAI,MAAS,GAAA,YAAA;AAAA,QACnD,QAAU,EAAA,QAAA,KAAa,MAAU,IAAA,OAAA,KAAY,QAAQ,CAAK,CAAA,GAAA,QAAA;AAAA,QAG1D,GAAK,EAAA,UAAA;AAAA,QAEJ,QACC,EAAA,MAAA,mBAAA,GAAA;AAAA,UAAC,SAAU,CAAA,CAAA;AAAA,UAAV;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAK,EAAA,OAAA;AAAA,YACL,OAAA;AAAA,YAEC,QAAA;AAAA,WAAA;AAAA,SAGH,GAAA,QAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;"}
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'\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 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 tabIndex,\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 } = 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 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":";;;;;;;;;AAIO,MAAM,KAAQ,GAAA;AAAA,EACnB,MAAQ,EAAA,IAAA;AAAA,EACR,KAAO,EAAA,KAAA;AAAA,EACP,MAAQ,EAAA,KAAA;AACV,EAAA;AAEa,MAAA,gBAAA,GAAmB,MAAO,CAAA,SAAA,CAAU,MAAQ,EAAA;AAAA,EACvD,GAAK,EAAA,OAAA;AAAA,EACL,OAAS,EAAA,aAAA;AAAA,EACT,UAAY,EAAA,QAAA;AAAA,EACZ,SAAW,EAAA,YAAA;AAAA,EACX,YAAc,EAAA,KAAA;AAAA,EACd,MAAQ,EAAA,SAAA;AAAA,EAER,aAAe,EAAA;AAAA,IACb,aAAe,EAAA,MAAA;AAAA,GACjB;AAAA,EAEA,kBAAoB,EAAA;AAAA,IAClB,MAAQ,EAAA,SAAA;AAAA,GACV;AACF,CAAC,CAAA;;ACDD,MAAM,2BAEF,GAAA;AAAA,EACF,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,yBAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,mBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,qBAAA;AAAA,EACA,4BAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,mBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,gBAAA;AAAA,EACA,uBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,cAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA,sBAAA;AAAA,EACA,aAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,wBAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AACF,CAAA,CAAA;AAEO,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAW,GAAA,KAAA;AAAA,IACX,eAAiB,EAAA,YAAA;AAAA,IACjB,QAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,SAAS,MAAU,IAAA,SAAA,CAAA;AACzB,IAAA,MAAM,EAAE,IAAA,EAAM,MAAQ,EAAA,GAAA,GAAM,IAAO,GAAA,SAAA,CAAA;AAEnC,IAAA,IAAI,YAAe,GAAA,SAAA,CAAA;AAEnB,IAAI,IAAA,UAAA,CAAW,YAAY,CAAG,EAAA;AAC5B,MAAe,YAAA,GAAA,gBAAA,CAAiB,cAAc,2BAA2B,CAAA,CAAA;AAAA,KAC3E;AAEA,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,QAAS,CAAA;AAAA,MAC9B,mBAAqB,EAAA,IAAA;AAAA,MACrB,QAAA,EAAU,QAAY,IAAA,UAAA,CAAW,YAAY,CAAA;AAAA,MAC7C,GAAG,YAAA;AAAA,KACJ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAI,QAAS,CAAA;AAAA,MACzC,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAe,YAAA,GAAA,UAAA,CAAW,YAAY,UAAU,CAAA,CAAA;AAEhD,IAAA,IAAI,OAA8B,GAAA,GAAA,CAAA;AAElC,IAAI,IAAA,MAAA,IAAU,WAAW,QAAU,EAAA;AACjC,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,YAAY,CAAG,EAAA;AACnC,QAAA,OAAA,GAAU,aAAc,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OAC1B;AAEA,MAAA,IAAI,CAAC,OAAA,CAAQ,QAAS,CAAA,UAAU,CAAG,EAAA;AACjC,QAAA,OAAA,GAAU,WAAY,CAAA,MAAA,CAAA,OAAA,CAAA,CAAA;AAAA,OACxB;AAEA,MAAA,OAAA,GAAU,QAAQ,IAAK,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,IAAI,YAAY,EAAI,EAAA;AAClB,MAAU,OAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACZ;AAEA,IAAM,MAAA,aAAA,GACJ,OAAO,QAAA,KAAa,QAChB,GAAA;AAAA,MACE,QAAA;AAAA,QAEF,EAAC,CAAA;AAEP,IAAI,IAAA,QAAA,KAAa,MAAU,IAAA,OAAA,KAAY,IAAO,CAAA,EAAA;AAC5C,MAAA,aAAA,CAAc,QAAW,GAAA,CAAA,CAAA,CAAA;AAAA,KAC3B;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACH,GAAG,aAAA;AAAA,QACJ,cAAc,EAAA,SAAA,GAAY,EAAM,GAAA,YAAA,CAAqB,cAAc,CAAA;AAAA,QACnE,SAAS,MAAU,IAAA,OAAA;AAAA,QACnB,QAAA;AAAA,QACA,IAAM,EAAA,IAAA,IAAA,IAAA,GAAA,IAAA,GAAS,OAAY,KAAA,IAAA,GAAO,QAAW,GAAA,KAAA,CAAA;AAAA,QAC7C,eAAe,EAAA,UAAA,CAAW,YAAY,CAAA,GAAI,MAAS,GAAA,YAAA;AAAA,QAGnD,GAAK,EAAA,UAAA;AAAA,QAEJ,QACC,EAAA,MAAA,mBAAA,GAAA;AAAA,UAAC,SAAU,CAAA,CAAA;AAAA,UAAV;AAAA,YACC,IAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAK,EAAA,OAAA;AAAA,YACL,OAAA;AAAA,YAEC,QAAA;AAAA,WAAA;AAAA,SAGH,GAAA,QAAA;AAAA,OAAA;AAAA,KAEJ,CAAA;AAAA,GAEJ;AACF;;;;"}
package/dist/types.d.ts CHANGED
@@ -263,22 +263,23 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
263
263
  readonly body: "Open Sans, sans-serif";
264
264
  };
265
265
  radii: {
266
+ readonly 0: "0px";
266
267
  readonly 25: "2px";
267
268
  readonly 50: "4px";
268
269
  readonly 75: "6px";
269
270
  readonly 100: "8px";
270
271
  readonly 200: "16px";
271
- readonly half: "999px";
272
- readonly none: "0px";
272
+ readonly round: "999px";
273
273
  };
274
274
  shadows: {
275
- 50: any;
276
275
  100: any;
276
+ 50: any;
277
277
  "focus-small": any;
278
278
  "focus-small-outline": any;
279
279
  "focus-large": any;
280
280
  "focus-controls": any;
281
281
  "focus-controls-error": any;
282
+ "focus-controls-error-small": any;
282
283
  "focus-controls-success": any;
283
284
  };
284
285
  sizes: {
@@ -303,48 +304,6 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
303
304
  readonly 1200: "96px";
304
305
  readonly 1600: "128px";
305
306
  };
306
- 'space-gap': {
307
- readonly 0: any;
308
- readonly 50: any;
309
- readonly 100: any;
310
- readonly 200: any;
311
- readonly 300: any;
312
- };
313
- 'space-inset': {
314
- readonly 0: any;
315
- readonly 50: any;
316
- readonly 100: any;
317
- readonly 150: any;
318
- readonly 200: any;
319
- readonly 300: any;
320
- readonly 400: any;
321
- readonly 500: any;
322
- readonly 600: any;
323
- readonly 700: any;
324
- readonly 800: any;
325
- readonly 1200: any;
326
- readonly 1600: any;
327
- };
328
- 'space-offset': {
329
- readonly 0: any;
330
- readonly 50: any;
331
- readonly 100: any;
332
- readonly 150: any;
333
- readonly 200: any;
334
- readonly 300: any;
335
- readonly 400: any;
336
- readonly 600: any;
337
- readonly 800: any;
338
- readonly 1200: any;
339
- readonly 1600: any;
340
- readonly 'stacking-0': any;
341
- readonly 'stacking-100': any;
342
- readonly 'stacking-200': any;
343
- readonly 'stacking-300': any;
344
- readonly 'stacking-400': any;
345
- readonly 'stacking-500': any;
346
- readonly 'stacking-800': any;
347
- };
348
307
  'stroke-width': {
349
308
  readonly thin: "1.5px";
350
309
  readonly normal: "2px";
@@ -385,7 +344,7 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
385
344
  readonly borderRightColor: "colors";
386
345
  readonly borderRightStyle: "border-styles";
387
346
  readonly borderRightWidth: "border-widths";
388
- readonly borderSpacing: "space-offset";
347
+ readonly borderSpacing: "space";
389
348
  readonly borderStyle: "border-styles";
390
349
  readonly borderTop: "colors";
391
350
  readonly borderTopColor: "colors";
@@ -398,42 +357,42 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
398
357
  readonly boxShadow: "shadows";
399
358
  readonly caretColor: "colors";
400
359
  readonly color: "colors";
401
- readonly columnGap: "space-gap";
360
+ readonly columnGap: "space";
402
361
  readonly columnRuleColor: "colors";
403
362
  readonly fill: "colors";
404
363
  readonly flexBasis: "sizes";
405
364
  readonly fontFamily: "fonts";
406
365
  readonly fontSize: "font-sizes";
407
366
  readonly fontWeight: "font-weights";
408
- readonly gap: "space-gap";
409
- readonly gridColumnGap: "space-gap";
410
- readonly gridGap: "space-gap";
411
- readonly gridRowGap: "space-gap";
367
+ readonly gap: "space";
368
+ readonly gridColumnGap: "space";
369
+ readonly gridGap: "space";
370
+ readonly gridRowGap: "space";
412
371
  readonly gridTemplateColumns: "sizes";
413
372
  readonly gridTemplateRows: "sizes";
414
373
  readonly height: "sizes";
415
374
  readonly inlineSize: "sizes";
416
- readonly inset: "space-inset";
417
- readonly insetBlock: "space-inset";
418
- readonly insetBlockEnd: "space-inset";
419
- readonly insetBlockStart: "space-inset";
420
- readonly insetInline: "space-inset";
421
- readonly insetInlineEnd: "space-inset";
422
- readonly insetInlineStart: "space-inset";
375
+ readonly inset: "space";
376
+ readonly insetBlock: "space";
377
+ readonly insetBlockEnd: "space";
378
+ readonly insetBlockStart: "space";
379
+ readonly insetInline: "space";
380
+ readonly insetInlineEnd: "space";
381
+ readonly insetInlineStart: "space";
423
382
  readonly left: "space";
424
383
  readonly letterSpacing: "letter-spacings";
425
384
  readonly lineHeight: "line-heights";
426
- readonly margin: "space-offset";
427
- readonly marginBlock: "space-offset";
428
- readonly marginBlockEnd: "space-offset";
429
- readonly marginBlockStart: "space-offset";
430
- readonly marginBottom: "space-offset";
431
- readonly marginInline: "space-offset";
432
- readonly marginInlineEnd: "space-offset";
433
- readonly marginInlineStart: "space-offset";
434
- readonly marginLeft: "space-offset";
435
- readonly marginRight: "space-offset";
436
- readonly marginTop: "space-offset";
385
+ readonly margin: "space";
386
+ readonly marginBlock: "space";
387
+ readonly marginBlockEnd: "space";
388
+ readonly marginBlockStart: "space";
389
+ readonly marginBottom: "space";
390
+ readonly marginInline: "space";
391
+ readonly marginInlineEnd: "space";
392
+ readonly marginInlineStart: "space";
393
+ readonly marginLeft: "space";
394
+ readonly marginRight: "space";
395
+ readonly marginTop: "space";
437
396
  readonly maxBlockSize: "sizes";
438
397
  readonly maxHeight: "sizes";
439
398
  readonly maxInlineSize: "sizes";
@@ -444,41 +403,41 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
444
403
  readonly minWidth: "sizes";
445
404
  readonly outline: "colors";
446
405
  readonly outlineColor: "colors";
447
- readonly padding: "space-inset";
448
- readonly paddingBlock: "space-inset";
449
- readonly paddingBlockEnd: "space-inset";
450
- readonly paddingBlockStart: "space-inset";
451
- readonly paddingBottom: "space-inset";
452
- readonly paddingInline: "space-inset";
453
- readonly paddingInlineEnd: "space-inset";
454
- readonly paddingInlineStart: "space-inset";
455
- readonly paddingLeft: "space-inset";
456
- readonly paddingRight: "space-inset";
457
- readonly paddingTop: "space-inset";
406
+ readonly padding: "space";
407
+ readonly paddingBlock: "space";
408
+ readonly paddingBlockEnd: "space";
409
+ readonly paddingBlockStart: "space";
410
+ readonly paddingBottom: "space";
411
+ readonly paddingInline: "space";
412
+ readonly paddingInlineEnd: "space";
413
+ readonly paddingInlineStart: "space";
414
+ readonly paddingLeft: "space";
415
+ readonly paddingRight: "space";
416
+ readonly paddingTop: "space";
458
417
  readonly right: "space";
459
- readonly rowGap: "space-gap";
460
- readonly scrollMargin: "space-offset";
461
- readonly scrollMarginBlock: "space-offset";
462
- readonly scrollMarginBlockEnd: "space-offset";
463
- readonly scrollMarginBlockStart: "space-offset";
464
- readonly scrollMarginBottom: "space-offset";
465
- readonly scrollMarginInline: "space-offset";
466
- readonly scrollMarginInlineEnd: "space-offset";
467
- readonly scrollMarginInlineStart: "space-offset";
468
- readonly scrollMarginLeft: "space-offset";
469
- readonly scrollMarginRight: "space-offset";
470
- readonly scrollMarginTop: "space-offset";
471
- readonly scrollPadding: "space-inset";
472
- readonly scrollPaddingBlock: "space-inset";
473
- readonly scrollPaddingBlockEnd: "space-inset";
474
- readonly scrollPaddingBlockStart: "space-inset";
475
- readonly scrollPaddingBottom: "space-inset";
476
- readonly scrollPaddingInline: "space-inset";
477
- readonly scrollPaddingInlineEnd: "space-inset";
478
- readonly scrollPaddingInlineStart: "space-inset";
479
- readonly scrollPaddingLeft: "space-inset";
480
- readonly scrollPaddingRight: "space-inset";
481
- readonly scrollPaddingTop: "space-inset";
418
+ readonly rowGap: "space";
419
+ readonly scrollMargin: "space";
420
+ readonly scrollMarginBlock: "space";
421
+ readonly scrollMarginBlockEnd: "space";
422
+ readonly scrollMarginBlockStart: "space";
423
+ readonly scrollMarginBottom: "space";
424
+ readonly scrollMarginInline: "space";
425
+ readonly scrollMarginInlineEnd: "space";
426
+ readonly scrollMarginInlineStart: "space";
427
+ readonly scrollMarginLeft: "space";
428
+ readonly scrollMarginRight: "space";
429
+ readonly scrollMarginTop: "space";
430
+ readonly scrollPadding: "space";
431
+ readonly scrollPaddingBlock: "space";
432
+ readonly scrollPaddingBlockEnd: "space";
433
+ readonly scrollPaddingBlockStart: "space";
434
+ readonly scrollPaddingBottom: "space";
435
+ readonly scrollPaddingInline: "space";
436
+ readonly scrollPaddingInlineEnd: "space";
437
+ readonly scrollPaddingInlineStart: "space";
438
+ readonly scrollPaddingLeft: "space";
439
+ readonly scrollPaddingRight: "space";
440
+ readonly scrollPaddingTop: "space";
482
441
  readonly stroke: "colors";
483
442
  readonly strokeWidth: "stroke-width";
484
443
  readonly textDecorationColor: "colors";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-base-button",
3
- "version": "0.4.39",
3
+ "version": "0.4.41",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -30,10 +30,10 @@
30
30
  "@react-aria/utils": "^3.13.0",
31
31
  "@react-types/shared": "^3.16.0",
32
32
  "@mirohq/design-system-primitive": "^1.1.2",
33
- "@mirohq/design-system-types": "^0.6.2",
34
- "@mirohq/design-system-stitches": "^2.6.3",
35
- "@mirohq/design-system-use-press": "^0.3.1",
36
- "@mirohq/design-system-utils": "^0.15.0"
33
+ "@mirohq/design-system-use-press": "^0.3.2",
34
+ "@mirohq/design-system-utils": "^0.15.1",
35
+ "@mirohq/design-system-types": "^0.7.0",
36
+ "@mirohq/design-system-stitches": "^2.6.5"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "rollup -c ../../../../rollup.config.js",