npm - @mirohq/design-system-icon-button - Versions diffs - 3.3.0-new-focus-keyboard.1 → 4.0.0-v1.0 - Mend

@mirohq/design-system-icon-button 3.3.0-new-focus-keyboard.1 → 4.0.0-v1.0

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

@@ -7,7 +7,6 @@ var React = require('react');
 var designSystemBadge = require('@mirohq/design-system-badge');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var designSystemUseId = require('@mirohq/design-system-use-id');
-var designSystemExperiments = require('@mirohq/design-system-experiments');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 var designSystemStitches = require('@mirohq/design-system-stitches');
@@ -23,13 +22,9 @@ const iconSelector = "& svg, & img";
 const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
   justifyContent: "center",
   ...designSystemStyles.focus.css({
-    boxShadow: "$focus-keyboard"
+    boxShadow: "$focus"
   }),
   variants: {
-    v1: {
-      false: {},
-      true: {}
-    },
     variant: {
       primary: {
         backgroundColor: "$background-primary-prominent",
@@ -54,6 +49,9 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
         [disabledSelector]: {
           backgroundColor: "$background-neutrals-disabled",
           color: "$icon-neutrals-disabled"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-pressed"
         }
       },
       outline: {
@@ -77,9 +75,15 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
       ghost: {
         color: "$icon-neutrals",
         backgroundColor: "transparent",
+        _hover: {
+          backgroundColor: "$background-neutrals-hover"
+        },
         [disabledSelector]: {
           color: "$icon-neutrals-disabled",
           backgroundColor: "$transparent"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-pressed"
         }
       },
       danger: {
@@ -125,51 +129,7 @@ const StyledIconButton = designSystemStitches.styled(designSystemBaseButton.Base
         }
       }
     }
-  },
-  compoundVariants: [
-    {
-      variant: "secondary",
-      v1: false,
-      css: {
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        }
-      }
-    },
-    {
-      variant: "secondary",
-      v1: true,
-      css: {
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-pressed"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      v1: false,
-      css: {
-        _hover: {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      v1: true,
-      css: {
-        _hover: {
-          backgroundColor: "$background-neutrals-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-pressed"
-        }
-      }
-    }
-  ]
+  }
 });
 const IconButton = React__default["default"].forwardRef(
@@ -184,7 +144,6 @@ const IconButton = React__default["default"].forwardRef(
     asChild = false,
     ...restProps
   }, forwardRef) => {
-    const [v1] = designSystemExperiments.useNewDesignLanguage();
     const badgeId = designSystemUseId.useId();
     let badgeOffset = {};
     if (size === "medium") {
@@ -228,7 +187,6 @@ const IconButton = React__default["default"].forwardRef(
       StyledIconButton,
       {
         ...restProps,
-        v1,
         variant,
         size,
         asChild,

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 { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus-keyboard',\n }),\n variants: {\n v1: {\n false: {},\n true: {},\n },\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\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 _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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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 { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Icon button label used to provide a description.\n /\n 'aria-label': string\n\n /\n Change the Icon button style\n * @default 'ghost'\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size.\n * @default 'large'\n /\n size?: StyledIconButtonProps['size']\n\n /\n Wraps the Icon button with a badge.\n * @default false\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n /\n badgeContent?: string\n\n /\n Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: 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 badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useNewDesignLanguage","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}
1	+ {"version":3,"file":"main.js","sources":["../src/icon-buttons.styled.ts","../src/icon-button.tsx"],"sourcesContent":["import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\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 [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 _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\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 { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Icon button label used to provide a description.\n /\n 'aria-label': string\n\n /\n Change the Icon button style\n * @default 'ghost'\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size.\n * @default 'large'\n /\n size?: StyledIconButtonProps['size']\n\n /\n Wraps the Icon button with a badge.\n * @default false\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n /\n badgeContent?: string\n\n /\n Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: 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 badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["styled","BaseButton","focus","sizes","baseIconStyles","React","useId","jsx","Badge","Fragment","stringAttrValue"],"mappings":"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"}

package/dist/module.js CHANGED Viewed

@@ -3,7 +3,6 @@ import React from 'react';
 import { Badge } from '@mirohq/design-system-badge';
 import { stringAttrValue } from '@mirohq/design-system-utils';
 import { useId } from '@mirohq/design-system-use-id';
-import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { BaseButton, sizes } from '@mirohq/design-system-base-button';
 import { styles } from '@mirohq/design-system-base-icon';
 import { styled } from '@mirohq/design-system-stitches';
@@ -15,13 +14,9 @@ const iconSelector = "& svg, & img";
 const StyledIconButton = styled(BaseButton, {
   justifyContent: "center",
   ...focus.css({
-    boxShadow: "$focus-keyboard"
+    boxShadow: "$focus"
   }),
   variants: {
-    v1: {
-      false: {},
-      true: {}
-    },
     variant: {
       primary: {
         backgroundColor: "$background-primary-prominent",
@@ -46,6 +41,9 @@ const StyledIconButton = styled(BaseButton, {
         [disabledSelector]: {
           backgroundColor: "$background-neutrals-disabled",
           color: "$icon-neutrals-disabled"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-subtle-pressed"
         }
       },
       outline: {
@@ -69,9 +67,15 @@ const StyledIconButton = styled(BaseButton, {
       ghost: {
         color: "$icon-neutrals",
         backgroundColor: "transparent",
+        _hover: {
+          backgroundColor: "$background-neutrals-hover"
+        },
         [disabledSelector]: {
           color: "$icon-neutrals-disabled",
           backgroundColor: "$transparent"
+        },
+        [activeSelector]: {
+          backgroundColor: "$background-neutrals-pressed"
         }
       },
       danger: {
@@ -117,51 +121,7 @@ const StyledIconButton = styled(BaseButton, {
         }
       }
     }
-  },
-  compoundVariants: [
-    {
-      variant: "secondary",
-      v1: false,
-      css: {
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        }
-      }
-    },
-    {
-      variant: "secondary",
-      v1: true,
-      css: {
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-pressed"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      v1: false,
-      css: {
-        _hover: {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-subtle-active"
-        }
-      }
-    },
-    {
-      variant: "ghost",
-      v1: true,
-      css: {
-        _hover: {
-          backgroundColor: "$background-neutrals-hover"
-        },
-        [activeSelector]: {
-          backgroundColor: "$background-neutrals-pressed"
-        }
-      }
-    }
-  ]
+  }
 });
 const IconButton = React.forwardRef(
@@ -176,7 +136,6 @@ const IconButton = React.forwardRef(
     asChild = false,
     ...restProps
   }, forwardRef) => {
-    const [v1] = useNewDesignLanguage();
     const badgeId = useId();
     let badgeOffset = {};
     if (size === "medium") {
@@ -220,7 +179,6 @@ const IconButton = React.forwardRef(
       StyledIconButton,
       {
         ...restProps,
-        v1,
         variant,
         size,
         asChild,

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 { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus-keyboard',\n }),\n variants: {\n v1: {\n false: {},\n true: {},\n },\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\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 _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 [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n },\n },\n compoundVariants: [\n {\n variant: 'secondary',\n v1: false,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'secondary',\n v1: true,\n css: {\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\n },\n },\n },\n {\n variant: 'ghost',\n v1: false,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-active',\n },\n },\n },\n {\n variant: 'ghost',\n v1: true,\n css: {\n _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\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 { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Icon button label used to provide a description.\n /\n 'aria-label': string\n\n /\n Change the Icon button style\n * @default 'ghost'\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size.\n * @default 'large'\n /\n size?: StyledIconButtonProps['size']\n\n /\n Wraps the Icon button with a badge.\n * @default false\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n /\n badgeContent?: string\n\n /\n Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: 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 badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const [v1] = useNewDesignLanguage()\n\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n v1={v1}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\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 { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\nconst iconSelector = '& svg, & img'\n\nexport const StyledIconButton = styled(BaseButton, {\n justifyContent: 'center',\n ...focus.css({\n boxShadow: '$focus',\n }),\n variants: {\n variant: {\n primary: {\n backgroundColor: '$background-primary-prominent',\n color: '$icon-primary-inverted',\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 secondary: {\n backgroundColor: '$background-neutrals-subtle',\n color: '$icon-neutrals',\n\n _hover: {\n backgroundColor: '$background-neutrals-subtle-hover',\n },\n [disabledSelector]: {\n backgroundColor: '$background-neutrals-disabled',\n color: '$icon-neutrals-disabled',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-subtle-pressed',\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 [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 _hover: {\n backgroundColor: '$background-neutrals-hover',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$transparent',\n },\n [activeSelector]: {\n backgroundColor: '$background-neutrals-pressed',\n },\n },\n danger: {\n color: '$icon-neutrals',\n backgroundColor: '$transparent',\n\n _hover: {\n color: '$icon-danger-hover',\n backgroundColor: '$background-danger-subtle-hover',\n },\n [activeSelector]: {\n color: '$icon-danger-pressed',\n backgroundColor: '$background-danger-subtle-pressed',\n },\n [disabledSelector]: {\n color: '$icon-neutrals-disabled',\n backgroundColor: '$background-neutrals-disabled',\n },\n },\n },\n size: {\n medium: {\n height: sizes.medium,\n width: sizes.medium,\n [iconSelector]: {\n ...baseIconStyles.size.small,\n ...baseIconStyles.weight.thin,\n },\n },\n large: {\n height: sizes.large,\n width: sizes.large,\n [iconSelector]: {\n ...baseIconStyles.size.medium,\n ...baseIconStyles.weight.normal,\n },\n },\n 'x-large': {\n height: sizes.xLarge,\n width: sizes.xLarge,\n [iconSelector]: {\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 { Badge } from '@mirohq/design-system-badge'\nimport { stringAttrValue } from '@mirohq/design-system-utils'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { useId } from '@mirohq/design-system-use-id'\n\nimport type { StyledIconButtonProps } from './icon-buttons.styled'\nimport { StyledIconButton } from './icon-buttons.styled'\n\nexport type IconButtonProps = {\n /*\n Icon button label used to provide a description.\n /\n 'aria-label': string\n\n /\n Change the Icon button style\n * @default 'ghost'\n /\n variant?: StyledIconButtonProps['variant']\n\n /\n Change the Icon button size.\n * @default 'large'\n /\n size?: StyledIconButtonProps['size']\n\n /\n Wraps the Icon button with a badge.\n * @default false\n /\n showBadge?: boolean\n\n /\n The content to be displayed inside of the badge.\n /\n badgeContent?: string\n\n /\n Badge label used to make Badge recognizable by the screen readers.\n */\n badgeAriaLabel?: 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 badgeAriaLabel,\n variant = 'ghost',\n size = 'large',\n 'aria-describedby': ariaDescribedBy,\n asChild = false,\n ...restProps\n },\n forwardRef\n ) => {\n const badgeId = useId()\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 let formattedChildren = children\n const isAsChildIsValid =\n asChild &&\n React.Children.count(children) === 1 &&\n React.isValidElement(children)\n\n if (isAsChildIsValid) {\n // when using asChild we need to render element to merge props with first\n const firstLevelChild = React.Children.only(children)\n const { children: secondLevelChildren, ...childProps } =\n firstLevelChild.props\n\n formattedChildren = React.cloneElement(firstLevelChild, {\n ...childProps,\n children: (\n <>\n {showBadge ? (\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {secondLevelChildren}\n </Badge>\n ) : (\n secondLevelChildren\n )}\n </>\n ),\n })\n } else {\n formattedChildren = (\n <>\n <Badge\n id={badgeId}\n aria-label={badgeAriaLabel}\n {...badgeOffset}\n show={showBadge}\n content={badgeContent}\n inverted={variant === 'primary'}\n >\n {children}\n </Badge>\n </>\n )\n }\n\n return (\n <StyledIconButton\n {...restProps}\n variant={variant}\n size={size}\n asChild={asChild}\n ref={forwardRef}\n aria-describedby={stringAttrValue(\n ariaDescribedBy,\n showBadge && badgeAriaLabel !== undefined && badgeId\n )}\n >\n {formattedChildren}\n </StyledIconButton>\n )\n }\n)\n"],"names":["baseIconStyles"],"mappings":"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"}

package/dist/types.d.ts CHANGED Viewed

@@ -7,30 +7,39 @@ import * as react from 'react';
 import react__default, { ComponentPropsWithRef } from 'react';
 import { BaseButtonProps } from '@mirohq/design-system-base-button';
-declare const StyledIconButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react.ReactNode;
-}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
-    v1?: boolean | "true" | "false" | undefined;
+declare const StyledIconButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: React.ReactNode;
+}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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"> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> | Omit<Omit<Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
-}, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
-    children?: react.ReactNode;
-}, "size" | "v1" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
-    v1?: boolean | "true" | "false" | undefined;
+}, "ref"> & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | HTMLAnchorElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement | HTMLAnchorElement> | null | undefined;
+}, _mirohq_design_system_stitches.ForbiddenProps> & {
+    children?: React.ReactNode;
+}, "size" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
-}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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"> & {
+}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents & react.AnchorHTMLAttributes<"a"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>, {
-    v1?: boolean | "true" | "false" | undefined;
     variant?: "outline" | "primary" | "secondary" | "ghost" | "danger" | undefined;
     size?: "medium" | "large" | "x-large" | undefined;
 }, {}>;
-declare type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;
+type StyledIconButtonProps = ComponentPropsWithRef<typeof StyledIconButton>;
-declare type IconButtonProps = {
+type IconButtonProps = {
     /**
      * Icon button label used to provide a description.
      */
@@ -68,26 +77,28 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
      * Change the Icon button style
      * @default 'ghost'
      */
-    variant?: StyledIconButtonProps['variant'];
+    variant?: StyledIconButtonProps["variant"];
     /**
      * Change the Icon button size.
      * @default 'large'
      */
-    size?: StyledIconButtonProps['size'];
+    size?: StyledIconButtonProps["size"];
     /**
      * Wraps the Icon button with a badge.
      * @default false
      */
-    showBadge?: boolean | undefined;
+    showBadge?: boolean;
     /**
      * The content to be displayed inside of the badge.
      */
-    badgeContent?: string | undefined;
+    badgeContent?: string;
     /**
      * Badge label used to make Badge recognizable by the screen readers.
      */
-    badgeAriaLabel?: string | undefined;
-} & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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<{
+    badgeAriaLabel?: string;
+} & Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
+} & _mirohq_design_system_hooks_use_press.PressProps & packages_components_internal_base_button_src_base_button.HoverEvents, "ref"> | Omit<{
     /**
      * Icon button label used to provide a description.
      */
@@ -96,26 +107,28 @@ declare const IconButton: react__default.ForwardRefExoticComponent<(Omit<{
      * Change the Icon button style
      * @default 'ghost'
      */
-    variant?: StyledIconButtonProps['variant'];
+    variant?: StyledIconButtonProps["variant"];
     /**
      * Change the Icon button size.
      * @default 'large'
      */
-    size?: StyledIconButtonProps['size'];
+    size?: StyledIconButtonProps["size"];
     /**
      * Wraps the Icon button with a badge.
      * @default false
      */
-    showBadge?: boolean | undefined;
+    showBadge?: boolean;
     /**
      * The content to be displayed inside of the badge.
      */
-    badgeContent?: string | undefined;
+    badgeContent?: string;
     /**
      * Badge label used to make Badge recognizable by the screen readers.
      */
-    badgeAriaLabel?: string | undefined;
-} & Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, 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"> & {
+    badgeAriaLabel?: string;
+} & Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_components_primitive.PrimitiveProps<"button">>>, never> & _stitches_react_types_styled_component.TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLButtonElement> | null | undefined;
+} & _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<HTMLButtonElement | HTMLAnchorElement>>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-icon-button",
-  "version": "3.3.0-new-focus-keyboard.1",
+  "version": "4.0.0-v1.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,14 +26,13 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
-    "@mirohq/design-system-badge": "^0.4.9-new-focus-keyboard.1",
-    "@mirohq/design-system-base-button": "^0.4.69-new-focus-keyboard.1",
+    "@mirohq/design-system-badge": "^1.0.0-v1.0",
     "@mirohq/design-system-base-icon": "^0.1.33",
-    "@mirohq/design-system-experiments": "^0.2.0",
-    "@mirohq/design-system-stitches": "^2.6.31-new-focus-keyboard.1",
-    "@mirohq/design-system-styles": "^1.2.31-new-focus-keyboard.1",
-    "@mirohq/design-system-utils": "^0.15.5",
-    "@mirohq/design-system-use-id": "^0.1.2"
+    "@mirohq/design-system-stitches": "^2.6.38-v1.0",
+    "@mirohq/design-system-use-id": "^0.1.2",
+    "@mirohq/design-system-styles": "^1.2.38-v1.0",
+    "@mirohq/design-system-utils": "^0.15.6",
+    "@mirohq/design-system-base-button": "^0.5.9-v1.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",