npm - @mirohq/design-system-icon-button - Versions diffs - 1.3.22 → 1.3.23 - Mend

@mirohq/design-system-icon-button 1.3.22 → 1.3.23

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

Files changed (6) hide show

package/dist/main.js CHANGED Viewed

@@ -29,7 +29,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
         ...designSystemStyles.focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-primary-prominent-hover"
         },
         [activeSelector]: {
@@ -46,7 +46,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
         ...designSystemStyles.focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover"
         },
         [activeSelector]: {
@@ -65,7 +65,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
           boxShadow: "$focus-small-outline",
           borderColor: "$blue-500 !important"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover",
           borderColor: "$border-neutrals-hover"
         },
@@ -85,7 +85,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
         ...designSystemStyles.focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover"
         },
         [activeSelector]: {

package/dist/main.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\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\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\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 ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\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 [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Change the Icon button style\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size\n /\n size?: StyledIconButtonProps['size']\n\n /\n Icon button label used to provide a description.\n /\n label: string\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipOpen?: boolean\n\n /\n Event handler called when the tooltip opens.\n /\n tooltipOnOpen?: () => void\n\n /\n Event handler called when the tooltip closes.\n /\n tooltipOnClose?: () => void\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipDelayDuration?: number\n\n /\n \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n /\n tooltipSkipDelayDuration?: number\n\n /\n The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n /\n tooltipSide?: TooltipContentProps['side']\n\n /\n The preferred alignment against the trigger. May change when collisions\n * occur.\n /\n tooltipAlign?: TooltipContentProps['align']\n\n /\n Wraps the Icon button with a badge.\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n */\n badgeContent?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipOpen,\n tooltipOnOpen,\n tooltipOnClose,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n open={tooltipOpen}\n onOpen={tooltipOnOpen}\n onClose={tooltipOnClose}\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","addPropsToChildren","jsxs","Tooltip","jsx","Badge"],"mappings":";;;;;;;;;;;;;;;;;;AAMA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AACvB,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AACzB,MAAM,oBACJ,GAAA,oEAAA,CAAA;AAEW,MAAA,gBAAA,GAAmBA,4BAAOC,iCAAY,EAAA;AAAA,EACjD,cAAgB,EAAA,QAAA;AAAA,EAChB,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,QAEP,GAAGC,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,sCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,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,QAEP,GAAGA,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,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,GAAGA,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,sBAAA;AAAA,UACX,WAAa,EAAA,sBAAA;AAAA,SACd,CAAA;AAAA,QAED,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,UACjB,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,UACjB,WAAa,EAAA,yBAAA;AAAA,SACf;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,sBAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,WAAa,EAAA,2BAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,aAAA;AAAA,QAEjB,GAAGA,yBAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,SAAW,EAAA;AAAA,UACT,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,KAAO,EAAA,yBAAA;AAAA,UACP,eAAiB,EAAA,cAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAQC,4BAAM,CAAA,MAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,KAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,KAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,IAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQD,4BAAM,CAAA,KAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,KAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAQD,4BAAM,CAAA,MAAA;AAAA,QACd,OAAOA,4BAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGC,4BAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,4BAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjDM,MAAM,aAAaC,yBAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,YAAc,EAAA,SAAA;AAAA,IACd,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,MAAA,GAASC,qCAAgB,QAA4B,CAAA,CAAA;AAC3D,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,qBAAuB,EAAA,EAAA;AAAA,MACvB,IAAA,EAAM,IAAS,KAAA,QAAA,GAAW,OAAU,GAAA,QAAA;AAAA,MACpC,MAAA,EAAQ,IAAS,KAAA,QAAA,GAAW,MAAS,GAAA,QAAA;AAAA,KACvC,CAAA;AAEA,IAAA,MAAM,iBAAoB,GAAAC,oCAAA,CAAmB,QAAU,EAAA,MAAM,IAAM,EAAA;AAAA,MACjE,aAAe,EAAA,MAAA;AAAA,MACf,GAAI,MAAU,IAAA,kBAAA;AAAA,KACf,CAAA,CAAA;AAED,IAAA,IAAI,cAAc,EAAC,CAAA;AACnB,IAAA,IAAI,SAAS,QAAU,EAAA;AACrB,MAAA,WAAA,GACE,YAAiB,KAAA,KAAA,CAAA,IAAa,YAAiB,KAAA,EAAA,GAC3C,EAAE,OAAS,EAAA,CAAA,CAAA,EAAI,OAAS,EAAA,CAAA,CAAA,EACxB,GAAA,EAAE,OAAS,EAAA,CAAA,EAAG,SAAS,CAAG,CAAA,EAAA,CAAA;AAAA,KAClC;AAEA,IACE,uBAAAC,eAAA;AAAA,MAACC,2BAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,WAAA;AAAA,QACN,MAAQ,EAAA,aAAA;AAAA,QACR,OAAS,EAAA,cAAA;AAAA,QACT,aAAe,EAAA,oBAAA;AAAA,QACf,iBAAmB,EAAA,wBAAA;AAAA,QAEnB,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACD,2BAAQ,CAAA,OAAA,EAAR,EAAgB,OAAA,EAAO,IACtB,EAAA,QAAA,kBAAAC,cAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACE,GAAG,SAAA;AAAA,cACJ,OAAA;AAAA,cACA,IAAA;AAAA,cACA,GAAK,EAAA,UAAA;AAAA,cACL,cAAY,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,KAAA;AAAA,cAEzB,QAAA,kBAAAA,cAAA;AAAA,gBAACC,uBAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,WAAA;AAAA,kBACJ,IAAM,EAAA,SAAA;AAAA,kBACN,OAAS,EAAA,YAAA;AAAA,kBACT,UAAU,OAAY,KAAA,iBAAA;AAAA,kBAErB,QAAA,EAAA,iBAAA;AAAA,iBAAA;AAAA,eACH;AAAA,aAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,0BACAD,cAAA;AAAA,YAACD,2BAAQ,CAAA,OAAA;AAAA,YAAR;AAAA,cACC,KAAO,EAAA,YAAA;AAAA,cACP,IAAM,EAAA,WAAA;AAAA,cACN,gBAAgB,EAAA,IAAA;AAAA,cAEf,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,WACH;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\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\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\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 ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\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 [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Change the Icon button style\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size\n /\n size?: StyledIconButtonProps['size']\n\n /\n Icon button label used to provide a description.\n /\n label: string\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipOpen?: boolean\n\n /\n Event handler called when the tooltip opens.\n /\n tooltipOnOpen?: () => void\n\n /\n Event handler called when the tooltip closes.\n /\n tooltipOnClose?: () => void\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipDelayDuration?: number\n\n /\n \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n /\n tooltipSkipDelayDuration?: number\n\n /\n The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n /\n tooltipSide?: TooltipContentProps['side']\n\n /\n The preferred alignment against the trigger. May change when collisions\n * occur.\n /\n tooltipAlign?: TooltipContentProps['align']\n\n /\n Wraps the Icon button with a badge.\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n */\n badgeContent?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipOpen,\n tooltipOnOpen,\n tooltipOnClose,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n open={tooltipOpen}\n onOpen={tooltipOnOpen}\n onClose={tooltipOnClose}\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","isIconComponent","addPropsToChildren","jsxs","Tooltip","jsx","Badge"],"mappings":"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"}

package/dist/module.js CHANGED Viewed

@@ -21,7 +21,7 @@ const StyledIconButton = styled(BaseButton, {
         ...focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-primary-prominent-hover"
         },
         [activeSelector]: {
@@ -38,7 +38,7 @@ const StyledIconButton = styled(BaseButton, {
         ...focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover"
         },
         [activeSelector]: {
@@ -57,7 +57,7 @@ const StyledIconButton = styled(BaseButton, {
           boxShadow: "$focus-small-outline",
           borderColor: "$blue-500 !important"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover",
           borderColor: "$border-neutrals-hover"
         },
@@ -77,7 +77,7 @@ const StyledIconButton = styled(BaseButton, {
         ...focus.css({
           boxShadow: "$focus-small"
         }),
-        "&:hover": {
+        _hover: {
           backgroundColor: "$background-neutrals-subtle-hover"
         },
         [activeSelector]: {

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\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\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\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 ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\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 [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n '&:hover': {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Change the Icon button style\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size\n /\n size?: StyledIconButtonProps['size']\n\n /\n Icon button label used to provide a description.\n /\n label: string\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipOpen?: boolean\n\n /\n Event handler called when the tooltip opens.\n /\n tooltipOnOpen?: () => void\n\n /\n Event handler called when the tooltip closes.\n /\n tooltipOnClose?: () => void\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipDelayDuration?: number\n\n /\n \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n /\n tooltipSkipDelayDuration?: number\n\n /\n The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n /\n tooltipSide?: TooltipContentProps['side']\n\n /\n The preferred alignment against the trigger. May change when collisions\n * occur.\n /\n tooltipAlign?: TooltipContentProps['align']\n\n /\n Wraps the Icon button with a badge.\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n */\n badgeContent?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipOpen,\n tooltipOnOpen,\n tooltipOnClose,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n open={tooltipOpen}\n onOpen={tooltipOnOpen}\n onClose={tooltipOnClose}\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}
1	+ {"version":3,"file":"module.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport { focus } from '@mirohq/design-system-styles'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst externalIconSelector =\n '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n variants: {\n variant: {\n 'solid-prominent': {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-primary-prominent-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-primary-prominent-active',\n },\n [disabledSelector]: {\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\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\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 ...focus.css({\n boxShadow: '$focus-small-outline',\n borderColor: '$blue-500 !important',\n }),\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 [disabledSelector]: {\n backgroundColor: '$background-neutrals',\n color: '$icon-neutrals-disabled',\n borderColor: '$border-neutrals-disabled',\n },\n },\n ghost: {\n color: '$icon-neutrals',\n backgroundColor: 'transparent',\n\n ...focus.css({\n boxShadow: '$focus-small',\n }),\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n paddingX: '$50',\n [externalIconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n paddingX: '$100',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n paddingX: '$150',\n [externalIconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n})\n\nexport type StyledIconButtonProps = ComponentPropsWithRef<\n typeof StyledIconButton\n>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { TooltipContentProps } from '@mirohq/design-system-tooltip'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\nimport { Badge } from '@mirohq/design-system-badge'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconReactElement } from '@mirohq/design-system-base-icon'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Change the Icon button style\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size\n /\n size?: StyledIconButtonProps['size']\n\n /\n Icon button label used to provide a description.\n /\n label: string\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipOpen?: boolean\n\n /\n Event handler called when the tooltip opens.\n /\n tooltipOnOpen?: () => void\n\n /\n Event handler called when the tooltip closes.\n /\n tooltipOnClose?: () => void\n\n /\n The duration of a the delay before a tooltip is shown.\n /\n tooltipDelayDuration?: number\n\n /\n \tHow much time a user has to enter another trigger without incurring a\n * \tdelay again.\n /\n tooltipSkipDelayDuration?: number\n\n /\n The preferred side of the trigger to render against when open. Will be\n * reversed when collisions occur and avoidCollisions is enabled.\n /\n tooltipSide?: TooltipContentProps['side']\n\n /\n The preferred alignment against the trigger. May change when collisions\n * occur.\n /\n tooltipAlign?: TooltipContentProps['align']\n\n /\n Wraps the Icon button with a badge.\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n */\n badgeContent?: string\n} & BaseButtonProps\n\nexport const IconButton = React.forwardRef<\n ElementRef<typeof StyledIconButton>,\n IconButtonProps\n>(\n (\n {\n children,\n showBadge = false,\n badgeContent,\n label,\n tooltipOpen,\n tooltipOnOpen,\n tooltipOnClose,\n tooltipDelayDuration,\n tooltipSkipDelayDuration,\n tooltipAlign = 'center',\n tooltipSide = 'bottom',\n variant = 'ghost',\n size = 'large',\n 'aria-label': ariaLabel,\n ...restProps\n },\n forwardRef\n ) => {\n const isIcon = isIconComponent(children as IconReactElement)\n const iconComponentProps = {\n 'data-icon-component': '',\n size: size === 'medium' ? 'small' : 'medium',\n weight: size === 'medium' ? 'thin' : 'normal',\n }\n\n const formattedChildren = addPropsToChildren(children, () => true, {\n 'aria-hidden': 'true',\n ...(isIcon && iconComponentProps),\n })\n\n let badgeOffset = {}\n if (size === 'medium') {\n badgeOffset =\n badgeContent !== undefined && badgeContent !== ''\n ? { offsetX: -7, offsetY: -5 }\n : { offsetX: 3, offsetY: -3 }\n }\n\n return (\n <Tooltip\n open={tooltipOpen}\n onOpen={tooltipOnOpen}\n onClose={tooltipOnClose}\n delayDuration={tooltipDelayDuration}\n skipDelayDuration={tooltipSkipDelayDuration}\n >\n <Tooltip.Trigger asChild>\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n ref={forwardRef}\n aria-label={ariaLabel ?? label}\n >\n <Badge\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'solid-prominent'}\n >\n {formattedChildren}\n </Badge>\n </StyledIconButton>\n </Tooltip.Trigger>\n <Tooltip.Content\n align={tooltipAlign}\n side={tooltipSide}\n hideWhenDetached\n >\n {label}\n </Tooltip.Content>\n </Tooltip>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":";;;;;;;;;;AAMA,MAAM,cAAiB,GAAA,2BAAA,CAAA;AACvB,MAAM,gBAAmB,GAAA,sCAAA,CAAA;AACzB,MAAM,oBACJ,GAAA,oEAAA,CAAA;AAEW,MAAA,gBAAA,GAAmB,OAAO,UAAY,EAAA;AAAA,EACjD,cAAgB,EAAA,QAAA;AAAA,EAChB,QAAU,EAAA;AAAA,IACR,OAAS,EAAA;AAAA,MACP,iBAAmB,EAAA;AAAA,QACjB,eAAiB,EAAA,+BAAA;AAAA,QACjB,KAAO,EAAA,wBAAA;AAAA,QAEP,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,qCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,sCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,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,QAEP,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,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,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,sBAAA;AAAA,UACX,WAAa,EAAA,sBAAA;AAAA,SACd,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,UACjB,WAAa,EAAA,wBAAA;AAAA,SACf;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,UACjB,WAAa,EAAA,yBAAA;AAAA,SACf;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,eAAiB,EAAA,sBAAA;AAAA,UACjB,KAAO,EAAA,yBAAA;AAAA,UACP,WAAa,EAAA,2BAAA;AAAA,SACf;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,KAAO,EAAA,gBAAA;AAAA,QACP,eAAiB,EAAA,aAAA;AAAA,QAEjB,GAAG,MAAM,GAAI,CAAA;AAAA,UACX,SAAW,EAAA,cAAA;AAAA,SACZ,CAAA;AAAA,QAED,MAAQ,EAAA;AAAA,UACN,eAAiB,EAAA,mCAAA;AAAA,SACnB;AAAA,QACA,CAAC,cAAc,GAAG;AAAA,UAChB,eAAiB,EAAA,oCAAA;AAAA,SACnB;AAAA,QACA,CAAC,gBAAgB,GAAG;AAAA,UAClB,KAAO,EAAA,yBAAA;AAAA,UACP,eAAiB,EAAA,cAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,KAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,KAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,IAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,KAAO,EAAA;AAAA,QACL,QAAQ,KAAM,CAAA,KAAA;AAAA,QACd,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,MACA,SAAW,EAAA;AAAA,QACT,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,OAAO,KAAM,CAAA,MAAA;AAAA,QACb,QAAU,EAAA,MAAA;AAAA,QACV,CAAC,oBAAoB,GAAG;AAAA,UACtB,GAAGA,OAAe,IAAK,CAAA,MAAA;AAAA,UACvB,GAAGA,OAAe,MAAO,CAAA,MAAA;AAAA,SAC3B;AAAA,OACF;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;ACjDM,MAAM,aAAa,KAAM,CAAA,UAAA;AAAA,EAI9B,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,YAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,oBAAA;AAAA,IACA,wBAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,WAAc,GAAA,QAAA;AAAA,IACd,OAAU,GAAA,OAAA;AAAA,IACV,IAAO,GAAA,OAAA;AAAA,IACP,YAAc,EAAA,SAAA;AAAA,IACd,GAAG,SAAA;AAAA,KAEL,UACG,KAAA;AACH,IAAM,MAAA,MAAA,GAAS,gBAAgB,QAA4B,CAAA,CAAA;AAC3D,IAAA,MAAM,kBAAqB,GAAA;AAAA,MACzB,qBAAuB,EAAA,EAAA;AAAA,MACvB,IAAA,EAAM,IAAS,KAAA,QAAA,GAAW,OAAU,GAAA,QAAA;AAAA,MACpC,MAAA,EAAQ,IAAS,KAAA,QAAA,GAAW,MAAS,GAAA,QAAA;AAAA,KACvC,CAAA;AAEA,IAAA,MAAM,iBAAoB,GAAA,kBAAA,CAAmB,QAAU,EAAA,MAAM,IAAM,EAAA;AAAA,MACjE,aAAe,EAAA,MAAA;AAAA,MACf,GAAI,MAAU,IAAA,kBAAA;AAAA,KACf,CAAA,CAAA;AAED,IAAA,IAAI,cAAc,EAAC,CAAA;AACnB,IAAA,IAAI,SAAS,QAAU,EAAA;AACrB,MAAA,WAAA,GACE,YAAiB,KAAA,KAAA,CAAA,IAAa,YAAiB,KAAA,EAAA,GAC3C,EAAE,OAAS,EAAA,CAAA,CAAA,EAAI,OAAS,EAAA,CAAA,CAAA,EACxB,GAAA,EAAE,OAAS,EAAA,CAAA,EAAG,SAAS,CAAG,CAAA,EAAA,CAAA;AAAA,KAClC;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAM,EAAA,WAAA;AAAA,QACN,MAAQ,EAAA,aAAA;AAAA,QACR,OAAS,EAAA,cAAA;AAAA,QACT,aAAe,EAAA,oBAAA;AAAA,QACf,iBAAmB,EAAA,wBAAA;AAAA,QAEnB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAQ,CAAA,OAAA,EAAR,EAAgB,OAAA,EAAO,IACtB,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACE,GAAG,SAAA;AAAA,cACJ,OAAA;AAAA,cACA,IAAA;AAAA,cACA,GAAK,EAAA,UAAA;AAAA,cACL,cAAY,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,KAAA;AAAA,cAEzB,QAAA,kBAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,WAAA;AAAA,kBACJ,IAAM,EAAA,SAAA;AAAA,kBACN,OAAS,EAAA,YAAA;AAAA,kBACT,UAAU,OAAY,KAAA,iBAAA;AAAA,kBAErB,QAAA,EAAA,iBAAA;AAAA,iBAAA;AAAA,eACH;AAAA,aAAA;AAAA,WAEJ,EAAA,CAAA;AAAA,0BACA,GAAA;AAAA,YAAC,OAAQ,CAAA,OAAA;AAAA,YAAR;AAAA,cACC,KAAO,EAAA,YAAA;AAAA,cACP,IAAM,EAAA,WAAA;AAAA,cACN,gBAAgB,EAAA,IAAA;AAAA,cAEf,QAAA,EAAA,KAAA;AAAA,aAAA;AAAA,WACH;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import * as _mirohq_design_system_hooks_use_press from '@mirohq/design-system-ho
 import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
 import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
+import * as _stitches_react from '@stitches/react';
 import * as _mirohq_design_system_components_primitive from '@mirohq/design-system-components/primitive';
 import * as react from 'react';
 import react__default, { ComponentPropsWithRef } from 'react';
@@ -494,6 +495,19 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
@@ -979,6 +993,19 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
@@ -1466,6 +1493,19 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "outline" | "solid-prominent" | "solid-subtle" | "ghost" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
@@ -1954,6 +1994,19 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<_stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>, {}, {}, _stitches_react_types_css_util.CSS<{}, {
     'border-widths': {
         readonly none: 0;
@@ -2439,6 +2492,19 @@ declare const StyledIconButton: react.ForwardRefExoticComponent<Omit<Omit<_miroh
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
@@ -3037,6 +3103,19 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<{
     /**
      * Change the Icon button style
@@ -3574,6 +3653,19 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
             readonly [$$PropertyValue]: "width";
         };
     };
+    _hover: (css: _stitches_react.CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }>) => {
+        '&:hover, &[data-hovered]': _stitches_react.CSS<{
+            media: {};
+            theme: {};
+            themeMap: {};
+            utils: {};
+        }>;
+    };
 }>>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement> & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react__default.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-icon-button",
-  "version": "1.3.22",
+  "version": "1.3.23",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,10 +26,10 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-badge": "^0.3.26",
-    "@mirohq/design-system-base-button": "^0.4.28",
-    "@mirohq/design-system-stitches": "^2.4.1",
-    "@mirohq/design-system-tooltip": "^3.2.34"
+    "@mirohq/design-system-base-button": "^0.4.29",
+    "@mirohq/design-system-badge": "^0.3.27",
+    "@mirohq/design-system-stitches": "^2.5.0",
+    "@mirohq/design-system-tooltip": "^3.2.35"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",