@mirohq/design-system-base-button 0.2.3 → 0.2.5-checkbox.0

package/dist/main.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var designSystemUtils = require('@mirohq/design-system-utils');
 var button = require('@react-aria/button');
 var interactions = require('@react-aria/interactions');
 var utils = require('@react-aria/utils');
@@ -187,14 +186,6 @@ const BaseButton = React__default["default"].forwardRef(
       hoverProps,
       focusPropsRing
     );
-    const formattedChildren = variant === "solid-prominent" ? designSystemUtils.addPropsToChildren(
-      children,
-      (child) => {
-        var _a;
-        return ((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) === "Badge";
-      },
-      { inverted: true }
-    ) : children;
     return /* @__PURE__ */ React__default["default"].createElement(StyledBaseButton, {
       ...elementProps,
       variant,
@@ -210,7 +201,7 @@ const BaseButton = React__default["default"].forwardRef(
       href,
       target,
       rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
-    }, formattedChildren) : formattedChildren);
+    }, children) : children);
   }
 );
 

package/dist/main.js.map

@@ -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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    const formattedChildren =\n      variant === 'solid-prominent'\n        ? addPropsToChildren<BadgeProps>(\n            children,\n            // @ts-expect-error\n            child => child?.type?.displayName === 'Badge',\n            { inverted: true }\n          )\n        : children\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {formattedChildren}\n          </a>\n        ) : (\n          formattedChildren\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps","addPropsToChildren"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,MAAM,WAAc,GAAA;AAAA,EAClB,iBAAmB,EAAA;AAAA,IACjB,SAAW,EAAA,CAAA,6GAAA,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,GACX;AACF,CAAA,CAAA;AAEA,MAAM,YAAe,GAAA;AAAA,EACnB,iBAAmB,EAAA;AAAA,IACjB,SAAW,EAAA,CAAA,6GAAA,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,WAAa,EAAA,WAAA;AAAA,GACf;AACF,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AAEV,MAAA,gBAAA,GAAmBA,2BAAO,CAAAC,+BAAA,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,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,QACP,GAAG,WAAA;AAAA,QAEH,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAiB,GAAA;AAAA,UAChB,eAAiB,EAAA,sCAAA;AAAA,SACnB;AAAA,QACA,aAAe,EAAA;AAAA,UACb,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,cAAgB,EAAA;AAAA,QACd,eAAiB,EAAA,6BAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QACP,GAAG,WAAA;AAAA,QAEH,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAiB,GAAA;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,aAAe,EAAA;AAAA,UACb,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,eAAiB,EAAA,sBAAA;AAAA,QACjB,KAAO,EAAA,gBAAA;AAAA,QACP,MAAQ,EAAA,4BAAA;AAAA,QAER,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,UACjB,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,CAAC,cAAiB,GAAA;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,UACjB,WAAa,EAAA,yBAAA;AAAA,SACf;AAAA,QACA,aAAe,EAAA;AAAA,UACb,eAAiB,EAAA,+BAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,WAAa,EAAA,2BAAA;AAAA,SACf;AAAA,QAGA,GAAG,YAAA;AAAA,OACL;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,aAAA;AAAA,QACjB,GAAG,WAAA;AAAA,QAEH,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAiB,GAAA;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,aAAe,EAAA;AAAA,UACb,KAAO,EAAA,yBAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA,IAAA;AAAA,QACR,QAAU,EAAA,KAAA;AAAA,OACZ;AAAA,MACA,KAAO,EAAA;AAAA,QACL,MAAQ,EAAA,KAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA,KAAA;AAAA,QACR,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACnDM,MAAM,aAAaC,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,OAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAA,MAAM,SAAS,IAAQ,IAAA,IAAA,CAAA;AAEvB,IAAM,MAAA,GAAA,GAAMC,aAA8C,IAAI,CAAA,CAAA;AAC9D,IAAA,MAAM,kBAAkB,UAAc,IAAA,IAAA,GAAA,UAAA,GAAA,GAAA,CAAA;AAEtC,IAAA,MAAM,WAAc,GAAA;AAAA,MAClB,UAAY,EAAA,QAAA;AAAA,MACZ,SAAS,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,OAAA;AAAA,MACpB,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,EAAE,WAAa,EAAA,SAAA,EAAc,GAAAC,gBAAA;AAAA,MACjC;AAAA,QACE,IAAA;AAAA,QAEA,sBAAwB,EAAA,KAAA;AAAA,QACxB,GAAG,WAAA;AAAA,QACH,GAAG,SAAA;AAAA,OACL;AAAA,MACA,eAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,EAAE,WAAc,GAAAC,YAAA;AAAA,MACpB,EAAE,GAAG,WAAa,EAAA,GAAG,SAAU,EAAA;AAAA,MAE/B,eAAA;AAAA,KACF,CAAA;AACA,IAAA,MAAM,eAAe,QAAY,IAAA;AAAA,MAC/B,QAAU,EAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,MAAM,EAAE,cAAA,EAAgB,UAAY,EAAA,cAAA,KAAmBC,kBAAa,EAAA,CAAA;AAEpE,IAAA,MAAM,EAAE,UAAA,EAAY,SAAU,EAAA,GAAIC,qBAAS,CAAA;AAAA,MACzC,YAAA,EAAc,OAAK,YAAe,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,CAAA,CAAA;AAAA,MAClC,UAAA,EAAY,OAAK,UAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAC9B,aAAA,EAAe,OAAK,aAAgB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,CAAA,CAAA;AAAA,KACrC,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAAC,gBAAA;AAAA,MACnB,SAAA;AAAA,MACA,SAAS,SAAY,GAAA,WAAA;AAAA,MACrB,UAAA;AAAA,MACA,cAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,iBAAA,GACJ,YAAY,iBACR,GAAAC,oCAAA;AAAA,MACE,QAAA;AAAA,MAEA,CAAM,KAAA,KAAA;AA3JlB,QAAA,IAAA,EAAA,CAAA;AA2JqB,QAAO,OAAA,CAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,mBAAa,WAAgB,MAAA,OAAA,CAAA;AAAA,OAAA;AAAA,MACtC,EAAE,UAAU,IAAK,EAAA;AAAA,KAEnB,GAAA,QAAA,CAAA;AAEN,IAAA,uBACGP,yBAAA,CAAA,aAAA,CAAA,gBAAA,EAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAS,MAAU,IAAA,OAAA;AAAA,MAClB,GAAG,YAAA;AAAA,MACJ,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,iBAAiB,EAAK,GAAA,KAAA,CAAA;AAAA,MACpC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAE/B,GAAK,EAAA,eAAA;AAAA,KAAA,EAEJ,yBACEA,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MACC,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAK,EAAA,MAAA,KAAW,QAAW,GAAA,CAAA,oBAAA,EAAuB,GAAQ,CAAA,CAAA,GAAA,GAAA;AAAA,KAEzD,EAAA,iBACH,IAEA,iBAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":["styled","Primitive","React","useRef","useButton","useLink","useFocusRing","useHover","mergeProps"],"mappings":"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"}

package/dist/module.js

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { addPropsToChildren } from '@mirohq/design-system-utils';
 import { useButton } from '@react-aria/button';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
@@ -179,14 +178,6 @@ const BaseButton = React.forwardRef(
       hoverProps,
       focusPropsRing
     );
-    const formattedChildren = variant === "solid-prominent" ? addPropsToChildren(
-      children,
-      (child) => {
-        var _a;
-        return ((_a = child == null ? void 0 : child.type) == null ? void 0 : _a.displayName) === "Badge";
-      },
-      { inverted: true }
-    ) : children;
     return /* @__PURE__ */ React.createElement(StyledBaseButton, {
       ...elementProps,
       variant,
@@ -202,7 +193,7 @@ const BaseButton = React.forwardRef(
       href,
       target,
       rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
-    }, formattedChildren) : formattedChildren);
+    }, children) : children);
   }
 );
 

package/dist/module.js.map

@@ -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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport type { BadgeProps } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    const formattedChildren =\n      variant === 'solid-prominent'\n        ? addPropsToChildren<BadgeProps>(\n            children,\n            // @ts-expect-error\n            child => child?.type?.displayName === 'Badge',\n            { inverted: true }\n          )\n        : children\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {formattedChildren}\n          </a>\n        ) : (\n          formattedChildren\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}
+{"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\n// todo move to general focus styles (focus-small)\nconst focusFilled = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 2px var(--colors-blue-500), inset 0 0 0 3px var(--colors-white)`,\n    outline: 'none',\n  },\n}\n\nconst focusOutline = {\n  '&[data-focused]': {\n    boxShadow: `0 0 0 2px var(--colors-blue-200), inset 0 0 0 1px var(--colors-blue-500), inset 0 0 0 2px var(--colors-white)`,\n    outline: 'none',\n    borderColor: '$blue-500',\n  },\n}\n\nconst activeSelector = '&:active, &[data-pressed]'\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  variants: {\n    variant: {\n      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$icon-primary-inverted',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$icon-neutrals',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n        },\n      },\n      outline: {\n        backgroundColor: '$background-neutrals',\n        color: '$icon-neutrals',\n        border: '1px solid $border-neutrals',\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        '&[disabled]': {\n          backgroundColor: '$background-neutrals-disabled',\n          color: '$icon-neutrals-disabled',\n          borderColor: '$border-neutrals-disabled',\n        },\n\n        // order is important because of borderColor\n        ...focusOutline,\n      },\n      ghost: {\n        color: '$icon-neutrals',\n        backgroundColor: 'transparent',\n        ...focusFilled,\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        '&[disabled]': {\n          color: '$icon-neutrals-disabled',\n        },\n      },\n    },\n    size: {\n      medium: {\n        height: '$8',\n        paddingX: '$50',\n      },\n      large: {\n        height: '$10',\n        paddingX: '$100',\n      },\n      'x-large': {\n        height: '$12',\n        paddingX: '$150',\n      },\n    },\n  },\n})\n\nexport type StyledBaseButtonProps = ComponentPropsWithRef<\n  typeof StyledBaseButton\n>\n","import React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport { useHover } from '@react-aria/interactions'\nimport { mergeProps } from '@react-aria/utils'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\nimport type { HoverEvents, FocusEvents } from '@react-types/shared'\nimport type { AriaButtonProps } from '@react-types/button'\n\nimport { StyledBaseButton } from './base-button.styled'\nimport type { StyledBaseButtonProps } from './base-button.styled'\n\ntype ButtonPropsA11y = StyledBaseButtonProps & AriaButtonProps<'button'>\n\nexport interface BaseButtonProps\n  extends FocusEvents,\n    HoverEvents,\n    Omit<\n      ButtonPropsA11y,\n      | 'onClick'\n      | 'isDisabled'\n      | 'elementType'\n      | 'onBlur'\n      | 'onFocus'\n      | 'onPressUp'\n    > {\n  /**\n   * The content\n   */\n  children: ReactNode\n\n  /**\n   * Change the button style\n   */\n  variant?: StyledBaseButtonProps['variant']\n\n  /**\n   * Change the button size\n   */\n  size?: StyledBaseButtonProps['size']\n\n  /**\n   * Prevent pointer events\n   */\n  disabled?: boolean\n\n  /**\n   * A URL to link when using the button as a link\n   */\n  href?: string\n\n  /**\n   * The target window using the button as a link\n   */\n  target?: string\n\n  /**\n   * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  rel?: string\n\n  /**\n   * Alias for onPress\n   */\n  onClick?: AriaButtonProps['onPress']\n}\n\nexport const BaseButton = React.forwardRef<\n  ElementRef<typeof StyledBaseButton>,\n  BaseButtonProps\n>(\n  (\n    {\n      variant,\n      size,\n      disabled = false,\n      href,\n      target,\n      rel,\n      children,\n      onClick,\n      asChild,\n      onHoverStart,\n      onHoverEnd,\n      onHoverChange,\n      onPress,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocus,\n      onBlur,\n      onFocusChange,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    const asLink = href != null\n\n    const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n    const refWithFallback = forwardRef ?? ref\n\n    const commonProps = {\n      isDisabled: disabled,\n      onPress: onPress ?? onClick,\n      onPressStart,\n      onPressEnd,\n      onPressChange,\n      onFocusChange,\n      onFocus,\n      onBlur,\n    }\n\n    const { buttonProps, isPressed } = useButton(\n      {\n        href,\n        // @ts-expect-error\n        allowFocusWhenDisabled: false,\n        ...commonProps,\n        ...restProps,\n      },\n      refWithFallback\n    )\n\n    const { linkProps } = useLink(\n      { ...commonProps, ...restProps },\n      // @ts-expect-error\n      refWithFallback\n    )\n    const tabIndexProp = disabled && {\n      tabIndex: -1,\n    }\n\n    const { isFocusVisible, focusProps: focusPropsRing } = useFocusRing()\n\n    const { hoverProps, isHovered } = useHover({\n      onHoverStart: e => onHoverStart?.(e),\n      onHoverEnd: e => onHoverEnd?.(e),\n      onHoverChange: e => onHoverChange?.(e),\n    })\n\n    const elementProps = mergeProps(\n      restProps,\n      asLink ? linkProps : buttonProps,\n      hoverProps,\n      focusPropsRing\n    )\n\n    return (\n      <StyledBaseButton\n        {...elementProps}\n        variant={variant}\n        size={size}\n        disabled={disabled}\n        asChild={asLink || asChild}\n        {...tabIndexProp}\n        data-pressed={isPressed ? '' : undefined}\n        data-focused={isFocusVisible ? '' : undefined}\n        data-hovered={isHovered ? '' : undefined}\n        // @ts-expect-error\n        ref={refWithFallback}\n      >\n        {asLink ? (\n          <a\n            href={href}\n            target={target}\n            rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n          >\n            {children}\n          </a>\n        ) : (\n          children\n        )}\n      </StyledBaseButton>\n    )\n  }\n)\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -423,6 +423,16 @@ declare const StyledBaseButton: react.ForwardRefExoticComponent<Pick<Omit<{
             readonly [$$PropertyValue]: "margin";
         };
     };
+    square: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
 }>>> & _mirohq_design_system_stitches.CustomStylesProps, "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "size" | "asChild" | keyof _mirohq_design_system_stitches.CustomStylesProps | "variant"> & react.RefAttributes<HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"button">>, {
     variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-base-button",
-  "version": "0.2.3",
+  "version": "0.2.5-checkbox.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -33,13 +33,11 @@
     "@react-aria/utils": "^3.13.0",
     "@react-types/button": "^3.5.0",
     "@react-types/shared": "^3.16.0",
-    "@mirohq/design-system-badge": "^0.1.3",
     "@mirohq/design-system-primitive": "^1.0.4",
-    "@mirohq/design-system-stitches": "^2.0.11",
-    "@mirohq/design-system-utils": "^0.11.0"
+    "@mirohq/design-system-stitches": "^2.1.0-checkbox.0"
   },
   "devDependencies": {
-    "@mirohq/design-system-icons": "^0.3.1"
+    "@mirohq/design-system-icons": "^0.7.1-checkbox.0"
   },
   "scripts": {
     "build": "rollup -c ../../../../rollup.config.js",