@mirohq/design-system-button 4.0.0 → 4.1.1

package/dist/main.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var designSystemSpinner = require('@mirohq/design-system-spinner');
 var designSystemUtils = require('@mirohq/design-system-utils');
 var React = require('react');
+var designSystemExperiments = require('@mirohq/design-system-experiments');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
 var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
@@ -100,10 +101,6 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
   lineHeight: 1,
   border: "1px solid transparent",
   // to make outline and solid/ghost variants the same width
-  ...designSystemStyles.focus.css({
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-400 !important"
-  }),
   ["& ".concat(StyledIconSlot, ":first-child")]: {
     marginLeft: -LABEL_OFFSET,
     marginRight: "calc($50 + ".concat(LABEL_OFFSET, "px)")
@@ -113,23 +110,32 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
     marginLeft: "calc($50 + ".concat(LABEL_OFFSET, "px)")
   },
   variants: {
+    v1: {
+      false: {
+        ...designSystemStyles.focus.css({
+          boxShadow: "$focus-small-outline",
+          borderColor: "$blue-400 !important"
+        })
+      },
+      true: {
+        fontWeight: "$semibold",
+        ...designSystemStyles.focus.css({
+          boxShadow: "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard"
+        })
+      }
+    },
     variant: {
       primary: {
         backgroundColor: "$background-primary-prominent",
-        color: "$text-primary-inverted",
         [iconSlotSelector]: {
           color: "$icon-primary-inverted"
         },
         "&[data-hovered]": {
           backgroundColor: "$background-primary-prominent-hover"
         },
-        "&[data-pressed]": {
-          backgroundColor: "$background-primary-prominent-active"
-        },
         ...solidDisabled
       },
       tertiary: {
-        backgroundColor: "$background-neutrals",
         borderColor: "$border-primary",
         color: "$text-primary",
         [iconSlotSelector]: {
@@ -173,17 +179,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
         ...ghostDisabled
       },
       secondary: {
-        backgroundColor: "$background-neutrals-subtle",
         color: "$text-neutrals",
         [iconSlotSelector]: {
           color: "$icon-neutrals"
         },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
         ...solidDisabled
       },
       "outline-subtle": {
@@ -204,17 +203,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
         ...outlineDisabled
       },
       ghost: {
-        backgroundColor: "transparent",
         color: "$text-neutrals",
         [iconSlotSelector]: {
           color: "$icon-neutrals"
         },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
         ...ghostDisabled
       },
       danger: {
@@ -238,14 +230,12 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
           color: "$icon-danger"
         },
         "&[data-hovered]": {
-          backgroundColor: "$background-danger-subtle",
           color: "$text-danger-hover",
           [iconSlotSelector]: {
             color: "$icon-danger-hover"
           }
         },
         "&[data-pressed]": {
-          backgroundColor: "$background-danger-subtle-hover",
           color: "$text-danger-active",
           [iconSlotSelector]: {
             color: "$icon-danger-active"
@@ -327,7 +317,123 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
         width: "100%"
       }
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      v1: false,
+      css: {
+        color: "$text-primary-inverted",
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-prominent-active"
+        }
+      }
+    },
+    {
+      variant: "primary",
+      v1: true,
+      css: {
+        color: "$text-neutrals-inverted",
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-prominent-pressed"
+        }
+      }
+    },
+    {
+      variant: "tertiary",
+      v1: false,
+      css: {
+        backgroundColor: "$background-neutrals"
+      }
+    },
+    {
+      variant: "tertiary",
+      v1: true,
+      css: {
+        border: "1.5px solid $border-primary"
+      }
+    },
+    {
+      variant: "secondary",
+      v1: false,
+      css: {
+        backgroundColor: "$background-neutrals-subtle",
+        "&[data-hovered]": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-neutrals-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "secondary",
+      v1: true,
+      css: {
+        backgroundColor: "$button-background-secondary",
+        "&[data-hovered]": {
+          color: "$text-neutrals-hover",
+          backgroundColor: "$button-background-secondary-hover"
+        },
+        "&[data-pressed]": {
+          color: "$text-neutrals-active",
+          backgroundColor: "$button-background-secondary-pressed"
+        }
+      }
+    },
+    {
+      variant: "danger-secondary",
+      v1: false,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$background-danger-subtle"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-danger-subtle-hover"
+        }
+      }
+    },
+    {
+      variant: "danger-secondary",
+      v1: true,
+      css: {
+        "&[data-hovered]": {
+          borderColor: "$border-danger-hover",
+          backgroundColor: "$background-danger-subtle-hover"
+        },
+        "&[data-pressed]": {
+          borderColor: "$border-danger-active",
+          backgroundColor: "$background-danger-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      v1: false,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-neutrals-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      v1: true,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$button-background-secondary-hover",
+          color: "$text-neutrals-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$button-background-secondary-pressed",
+          color: "$text-neutrals-pressed"
+        }
+      }
+    }
+  ]
 });
 const StyledHiddenContent = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
   visibility: "hidden"
@@ -360,6 +466,7 @@ const Button = React__default["default"].forwardRef(
     ...restProps
   }, forwardRef) => {
     let spinnerSize = "medium";
+    const [v1] = designSystemExperiments.useNewDesignLanguage();
     if (typeof size === "string" && ["small", "medium"].includes(size)) {
       spinnerSize = "small";
     }
@@ -388,6 +495,7 @@ const Button = React__default["default"].forwardRef(
       StyledButton,
       {
         ...restProps,
+        v1,
         asChild,
         variant,
         rounded,

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/hooks/use-button-context.tsx","../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledButtonProps } from '../button.styled'\n\ninterface ButtonProps {\n  size?: StyledButtonProps['size']\n}\n\ninterface ButtonContextProps extends ButtonProps {}\n\nexport type ButtonProviderProps = ButtonProps\n\nconst ButtonContext = createContext<ButtonContextProps>({} as any)\n\nexport const ButtonProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ButtonProviderProps>): JSX.Element => (\n  <ButtonContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ButtonContext.Provider>\n)\n\nexport const useButtonContext = (): ButtonContextProps =>\n  useContext(ButtonContext)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type {\n  IconReactElement,\n  IconSizes,\n  IconWeights,\n} from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport { useButtonContext } from '../hooks/use-button-context'\nimport type { StyledButtonProps } from '../button.styled'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeights } = {\n  small: 'thin',\n  medium: 'thin',\n  large: 'normal',\n  'x-large': 'normal',\n}\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = useButtonContext()\n\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      'data-icon-component': '',\n      size: buttonIconSizes[size as ButtonSize],\n      weight: buttonIconWeights[size as ButtonSize],\n    }\n  )\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst outlineDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals',\n    borderColor: '$border-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst ghostDisabled: CSS = {\n  [disabledSelector]: {\n    color: '$text-neutrals-disabled',\n    backgroundColor: '$transparent',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  ...focus.css({\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-400 !important',\n  }),\n\n  [`& ${StyledIconSlot}:first-child`]: {\n    marginLeft: -LABEL_OFFSET,\n    marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n  [`& ${StyledIconSlot}:last-child`]: {\n    marginRight: -LABEL_OFFSET,\n    marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n\n  variants: {\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      tertiary: {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          borderColor: '$border-primary-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          borderColor: '$border-primary-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-prominent': {\n        backgroundColor: 'transparent',\n        color: '$text-primary',\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n      secondary: {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-subtle': {\n        backgroundColor: '$background-neutrals',\n        border: '1px solid $border-neutrals',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        ...outlineDisabled,\n      },\n      ghost: {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      danger: {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'danger-secondary': {\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-danger': {\n        backgroundColor: 'transparent',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$200',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$round',\n      },\n    },\n    fluid: {\n      true: {\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '100%',\n        width: '100%',\n      },\n    },\n  },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n  visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { ButtonProvider } from './hooks/use-button-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport type ButtonProps = {\n  /**\n   * Change the button style.\n   * @default 'primary'\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   * @default 'large'\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   * @default false\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   * @default false\n   */\n  fluid?: StyledButtonProps['fluid']\n} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\n      asChild = false,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let spinnerSize: SpinnerProps['size'] = 'medium'\n\n    if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n      spinnerSize = 'small'\n    }\n\n    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading\n\n    let formattedChildren = children\n\n    if (loading) {\n      const spinnerTestId =\n        process.env.NODE_ENV === 'test' ? 'button-spinner' : undefined\n\n      if (\n        asChild &&\n        React.Children.toArray(children).length === 1 &&\n        React.isValidElement(children)\n      ) {\n        // when using asChild we need to render element to merge props with first,\n        // and spinner wrapper should be rendered between the element and its content\n        const firstLevelChild = React.Children.only(children)\n\n        const { children: secondLevelChildren, ...childProps } =\n          firstLevelChild.props\n\n        formattedChildren = React.cloneElement(firstLevelChild, {\n          ...childProps,\n          children: (\n            <>\n              <StyledSpinnerBox data-testid={spinnerTestId}>\n                <Spinner size={spinnerSize} />\n              </StyledSpinnerBox>\n              <StyledHiddenContent>{secondLevelChildren}</StyledHiddenContent>\n            </>\n          ),\n        })\n      } else {\n        formattedChildren = (\n          <>\n            <StyledSpinnerBox data-testid={spinnerTestId}>\n              <Spinner size={spinnerSize} />\n            </StyledSpinnerBox>\n            <StyledHiddenContent>{children}</StyledHiddenContent>\n          </>\n        )\n      }\n    }\n\n    return (\n      <ButtonProvider size={size}>\n        <StyledButton\n          {...restProps}\n          asChild={asChild}\n          variant={variant}\n          rounded={rounded}\n          fluid={fluid}\n          size={size}\n          // without undefined it will be aria-disabled=\"false\" in html\n          aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n          ref={forwardRef}\n        >\n          {formattedChildren}\n        </StyledButton>\n      </ButtonProvider>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["createContext","jsx","useContext","styled","Primitive","React","addPropsToChildren","isIconComponent","BaseButton","focus","sizes","baseIconStyles","booleanify","jsxs","Fragment","Spinner"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/hooks/use-button-context.tsx","../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledButtonProps } from '../button.styled'\n\ninterface ButtonProps {\n  size?: StyledButtonProps['size']\n}\n\ninterface ButtonContextProps extends ButtonProps {}\n\nexport type ButtonProviderProps = ButtonProps\n\nconst ButtonContext = createContext<ButtonContextProps>({} as any)\n\nexport const ButtonProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ButtonProviderProps>): JSX.Element => (\n  <ButtonContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ButtonContext.Provider>\n)\n\nexport const useButtonContext = (): ButtonContextProps =>\n  useContext(ButtonContext)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type {\n  IconReactElement,\n  IconSizes,\n  IconWeights,\n} from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport { useButtonContext } from '../hooks/use-button-context'\nimport type { StyledButtonProps } from '../button.styled'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeights } = {\n  small: 'thin',\n  medium: 'thin',\n  large: 'normal',\n  'x-large': 'normal',\n}\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = useButtonContext()\n\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      'data-icon-component': '',\n      size: buttonIconSizes[size as ButtonSize],\n      weight: buttonIconWeights[size as ButtonSize],\n    }\n  )\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst outlineDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals',\n    borderColor: '$border-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst ghostDisabled: CSS = {\n  [disabledSelector]: {\n    color: '$text-neutrals-disabled',\n    backgroundColor: '$transparent',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  [`& ${StyledIconSlot}:first-child`]: {\n    marginLeft: -LABEL_OFFSET,\n    marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n  [`& ${StyledIconSlot}:last-child`]: {\n    marginRight: -LABEL_OFFSET,\n    marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n\n  variants: {\n    v1: {\n      false: {\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-400 !important',\n        }),\n      },\n      true: {\n        fontWeight: '$semibold',\n        ...focus.css({\n          boxShadow:\n            '0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard',\n        }),\n      },\n    },\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n\n        ...solidDisabled,\n      },\n      tertiary: {\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          borderColor: '$border-primary-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          borderColor: '$border-primary-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-prominent': {\n        backgroundColor: 'transparent',\n        color: '$text-primary',\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n      secondary: {\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-subtle': {\n        backgroundColor: '$background-neutrals',\n        border: '1px solid $border-neutrals',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        ...outlineDisabled,\n      },\n      ghost: {\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        ...ghostDisabled,\n      },\n      danger: {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'danger-secondary': {\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-danger': {\n        backgroundColor: 'transparent',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$200',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$round',\n      },\n    },\n    fluid: {\n      true: {\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '100%',\n        width: '100%',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      v1: false,\n      css: {\n        color: '$text-primary-inverted',\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      v1: true,\n      css: {\n        color: '$text-neutrals-inverted',\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-pressed',\n        },\n      },\n    },\n    {\n      variant: 'tertiary',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals',\n      },\n    },\n    {\n      variant: 'tertiary',\n      v1: true,\n      css: {\n        border: '1.5px solid $border-primary',\n      },\n    },\n    {\n      variant: 'secondary',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals-subtle',\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'secondary',\n      v1: true,\n      css: {\n        backgroundColor: '$button-background-secondary',\n        '&[data-hovered]': {\n          color: '$text-neutrals-hover',\n          backgroundColor: '$button-background-secondary-hover',\n        },\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          backgroundColor: '$button-background-secondary-pressed',\n        },\n      },\n    },\n    {\n      variant: 'danger-secondary',\n      v1: false,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n        },\n      },\n    },\n    {\n      variant: 'danger-secondary',\n      v1: true,\n      css: {\n        '&[data-hovered]': {\n          borderColor: '$border-danger-hover',\n          backgroundColor: '$background-danger-subtle-hover',\n        },\n        '&[data-pressed]': {\n          borderColor: '$border-danger-active',\n          backgroundColor: '$background-danger-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'ghost',\n      v1: false,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'ghost',\n      v1: true,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$button-background-secondary-hover',\n          color: '$text-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$button-background-secondary-pressed',\n          color: '$text-neutrals-pressed',\n        },\n      },\n    },\n  ],\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n  visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { ButtonProvider } from './hooks/use-button-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport type ButtonProps = {\n  /**\n   * Change the button style.\n   * @default 'primary'\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   * @default 'large'\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   * @default false\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   * @default false\n   */\n  fluid?: StyledButtonProps['fluid']\n} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\n      asChild = false,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let spinnerSize: SpinnerProps['size'] = 'medium'\n    const [v1] = useNewDesignLanguage()\n\n    if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n      spinnerSize = 'small'\n    }\n\n    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading\n\n    let formattedChildren = children\n\n    if (loading) {\n      const spinnerTestId =\n        process.env.NODE_ENV === 'test' ? 'button-spinner' : undefined\n\n      if (\n        asChild &&\n        React.Children.toArray(children).length === 1 &&\n        React.isValidElement(children)\n      ) {\n        // when using asChild we need to render element to merge props with first,\n        // and spinner wrapper should be rendered between the element and its content\n        const firstLevelChild = React.Children.only(children)\n\n        const { children: secondLevelChildren, ...childProps } =\n          firstLevelChild.props\n\n        formattedChildren = React.cloneElement(firstLevelChild, {\n          ...childProps,\n          children: (\n            <>\n              <StyledSpinnerBox data-testid={spinnerTestId}>\n                <Spinner size={spinnerSize} />\n              </StyledSpinnerBox>\n              <StyledHiddenContent>{secondLevelChildren}</StyledHiddenContent>\n            </>\n          ),\n        })\n      } else {\n        formattedChildren = (\n          <>\n            <StyledSpinnerBox data-testid={spinnerTestId}>\n              <Spinner size={spinnerSize} />\n            </StyledSpinnerBox>\n            <StyledHiddenContent>{children}</StyledHiddenContent>\n          </>\n        )\n      }\n    }\n\n    return (\n      <ButtonProvider size={size}>\n        <StyledButton\n          {...restProps}\n          v1={v1}\n          asChild={asChild}\n          variant={variant}\n          rounded={rounded}\n          fluid={fluid}\n          size={size}\n          // without undefined it will be aria-disabled=\"false\" in html\n          aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n          ref={forwardRef}\n        >\n          {formattedChildren}\n        </StyledButton>\n      </ButtonProvider>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["createContext","jsx","useContext","styled","Primitive","React","addPropsToChildren","isIconComponent","BaseButton","focus","sizes","baseIconStyles","useNewDesignLanguage","booleanify","jsxs","Fragment","Spinner"],"mappings":"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"}

package/dist/module.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Spinner } from '@mirohq/design-system-spinner';
 import { addPropsToChildren, booleanify } from '@mirohq/design-system-utils';
 import React, { createContext, useContext } from 'react';
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { BaseButton, sizes } from '@mirohq/design-system-base-button';
 import { isIconComponent, styles } from '@mirohq/design-system-base-icon';
 import { Primitive } from '@mirohq/design-system-primitive';
@@ -92,10 +93,6 @@ const StyledButton = styled(BaseButton, {
   lineHeight: 1,
   border: "1px solid transparent",
   // to make outline and solid/ghost variants the same width
-  ...focus.css({
-    boxShadow: "$focus-small-outline",
-    borderColor: "$blue-400 !important"
-  }),
   ["& ".concat(StyledIconSlot, ":first-child")]: {
     marginLeft: -LABEL_OFFSET,
     marginRight: "calc($50 + ".concat(LABEL_OFFSET, "px)")
@@ -105,23 +102,32 @@ const StyledButton = styled(BaseButton, {
     marginLeft: "calc($50 + ".concat(LABEL_OFFSET, "px)")
   },
   variants: {
+    v1: {
+      false: {
+        ...focus.css({
+          boxShadow: "$focus-small-outline",
+          borderColor: "$blue-400 !important"
+        })
+      },
+      true: {
+        fontWeight: "$semibold",
+        ...focus.css({
+          boxShadow: "0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard"
+        })
+      }
+    },
     variant: {
       primary: {
         backgroundColor: "$background-primary-prominent",
-        color: "$text-primary-inverted",
         [iconSlotSelector]: {
           color: "$icon-primary-inverted"
         },
         "&[data-hovered]": {
           backgroundColor: "$background-primary-prominent-hover"
         },
-        "&[data-pressed]": {
-          backgroundColor: "$background-primary-prominent-active"
-        },
         ...solidDisabled
       },
       tertiary: {
-        backgroundColor: "$background-neutrals",
         borderColor: "$border-primary",
         color: "$text-primary",
         [iconSlotSelector]: {
@@ -165,17 +171,10 @@ const StyledButton = styled(BaseButton, {
         ...ghostDisabled
       },
       secondary: {
-        backgroundColor: "$background-neutrals-subtle",
         color: "$text-neutrals",
         [iconSlotSelector]: {
           color: "$icon-neutrals"
         },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
         ...solidDisabled
       },
       "outline-subtle": {
@@ -196,17 +195,10 @@ const StyledButton = styled(BaseButton, {
         ...outlineDisabled
       },
       ghost: {
-        backgroundColor: "transparent",
         color: "$text-neutrals",
         [iconSlotSelector]: {
           color: "$icon-neutrals"
         },
-        "&[data-hovered]": {
-          backgroundColor: "$background-neutrals-subtle-hover"
-        },
-        "&[data-pressed]": {
-          backgroundColor: "$background-neutrals-subtle-active"
-        },
         ...ghostDisabled
       },
       danger: {
@@ -230,14 +222,12 @@ const StyledButton = styled(BaseButton, {
           color: "$icon-danger"
         },
         "&[data-hovered]": {
-          backgroundColor: "$background-danger-subtle",
           color: "$text-danger-hover",
           [iconSlotSelector]: {
             color: "$icon-danger-hover"
           }
         },
         "&[data-pressed]": {
-          backgroundColor: "$background-danger-subtle-hover",
           color: "$text-danger-active",
           [iconSlotSelector]: {
             color: "$icon-danger-active"
@@ -319,7 +309,123 @@ const StyledButton = styled(BaseButton, {
         width: "100%"
       }
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      v1: false,
+      css: {
+        color: "$text-primary-inverted",
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-prominent-active"
+        }
+      }
+    },
+    {
+      variant: "primary",
+      v1: true,
+      css: {
+        color: "$text-neutrals-inverted",
+        "&[data-pressed]": {
+          backgroundColor: "$background-primary-prominent-pressed"
+        }
+      }
+    },
+    {
+      variant: "tertiary",
+      v1: false,
+      css: {
+        backgroundColor: "$background-neutrals"
+      }
+    },
+    {
+      variant: "tertiary",
+      v1: true,
+      css: {
+        border: "1.5px solid $border-primary"
+      }
+    },
+    {
+      variant: "secondary",
+      v1: false,
+      css: {
+        backgroundColor: "$background-neutrals-subtle",
+        "&[data-hovered]": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-neutrals-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "secondary",
+      v1: true,
+      css: {
+        backgroundColor: "$button-background-secondary",
+        "&[data-hovered]": {
+          color: "$text-neutrals-hover",
+          backgroundColor: "$button-background-secondary-hover"
+        },
+        "&[data-pressed]": {
+          color: "$text-neutrals-active",
+          backgroundColor: "$button-background-secondary-pressed"
+        }
+      }
+    },
+    {
+      variant: "danger-secondary",
+      v1: false,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$background-danger-subtle"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-danger-subtle-hover"
+        }
+      }
+    },
+    {
+      variant: "danger-secondary",
+      v1: true,
+      css: {
+        "&[data-hovered]": {
+          borderColor: "$border-danger-hover",
+          backgroundColor: "$background-danger-subtle-hover"
+        },
+        "&[data-pressed]": {
+          borderColor: "$border-danger-active",
+          backgroundColor: "$background-danger-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      v1: false,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$background-neutrals-subtle-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$background-neutrals-subtle-active"
+        }
+      }
+    },
+    {
+      variant: "ghost",
+      v1: true,
+      css: {
+        "&[data-hovered]": {
+          backgroundColor: "$button-background-secondary-hover",
+          color: "$text-neutrals-hover"
+        },
+        "&[data-pressed]": {
+          backgroundColor: "$button-background-secondary-pressed",
+          color: "$text-neutrals-pressed"
+        }
+      }
+    }
+  ]
 });
 const StyledHiddenContent = styled(Primitive.span, {
   visibility: "hidden"
@@ -352,6 +458,7 @@ const Button = React.forwardRef(
     ...restProps
   }, forwardRef) => {
     let spinnerSize = "medium";
+    const [v1] = useNewDesignLanguage();
     if (typeof size === "string" && ["small", "medium"].includes(size)) {
       spinnerSize = "small";
     }
@@ -380,6 +487,7 @@ const Button = React.forwardRef(
       StyledButton,
       {
         ...restProps,
+        v1,
         asChild,
         variant,
         rounded,

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/hooks/use-button-context.tsx","../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledButtonProps } from '../button.styled'\n\ninterface ButtonProps {\n  size?: StyledButtonProps['size']\n}\n\ninterface ButtonContextProps extends ButtonProps {}\n\nexport type ButtonProviderProps = ButtonProps\n\nconst ButtonContext = createContext<ButtonContextProps>({} as any)\n\nexport const ButtonProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ButtonProviderProps>): JSX.Element => (\n  <ButtonContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ButtonContext.Provider>\n)\n\nexport const useButtonContext = (): ButtonContextProps =>\n  useContext(ButtonContext)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type {\n  IconReactElement,\n  IconSizes,\n  IconWeights,\n} from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport { useButtonContext } from '../hooks/use-button-context'\nimport type { StyledButtonProps } from '../button.styled'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeights } = {\n  small: 'thin',\n  medium: 'thin',\n  large: 'normal',\n  'x-large': 'normal',\n}\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = useButtonContext()\n\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      'data-icon-component': '',\n      size: buttonIconSizes[size as ButtonSize],\n      weight: buttonIconWeights[size as ButtonSize],\n    }\n  )\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst outlineDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals',\n    borderColor: '$border-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst ghostDisabled: CSS = {\n  [disabledSelector]: {\n    color: '$text-neutrals-disabled',\n    backgroundColor: '$transparent',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  ...focus.css({\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-400 !important',\n  }),\n\n  [`& ${StyledIconSlot}:first-child`]: {\n    marginLeft: -LABEL_OFFSET,\n    marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n  [`& ${StyledIconSlot}:last-child`]: {\n    marginRight: -LABEL_OFFSET,\n    marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n\n  variants: {\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      tertiary: {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          borderColor: '$border-primary-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          borderColor: '$border-primary-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-prominent': {\n        backgroundColor: 'transparent',\n        color: '$text-primary',\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n      secondary: {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-subtle': {\n        backgroundColor: '$background-neutrals',\n        border: '1px solid $border-neutrals',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        ...outlineDisabled,\n      },\n      ghost: {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      danger: {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'danger-secondary': {\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-danger': {\n        backgroundColor: 'transparent',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$200',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$round',\n      },\n    },\n    fluid: {\n      true: {\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '100%',\n        width: '100%',\n      },\n    },\n  },\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n  visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { ButtonProvider } from './hooks/use-button-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport type ButtonProps = {\n  /**\n   * Change the button style.\n   * @default 'primary'\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   * @default 'large'\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   * @default false\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   * @default false\n   */\n  fluid?: StyledButtonProps['fluid']\n} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\n      asChild = false,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let spinnerSize: SpinnerProps['size'] = 'medium'\n\n    if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n      spinnerSize = 'small'\n    }\n\n    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading\n\n    let formattedChildren = children\n\n    if (loading) {\n      const spinnerTestId =\n        process.env.NODE_ENV === 'test' ? 'button-spinner' : undefined\n\n      if (\n        asChild &&\n        React.Children.toArray(children).length === 1 &&\n        React.isValidElement(children)\n      ) {\n        // when using asChild we need to render element to merge props with first,\n        // and spinner wrapper should be rendered between the element and its content\n        const firstLevelChild = React.Children.only(children)\n\n        const { children: secondLevelChildren, ...childProps } =\n          firstLevelChild.props\n\n        formattedChildren = React.cloneElement(firstLevelChild, {\n          ...childProps,\n          children: (\n            <>\n              <StyledSpinnerBox data-testid={spinnerTestId}>\n                <Spinner size={spinnerSize} />\n              </StyledSpinnerBox>\n              <StyledHiddenContent>{secondLevelChildren}</StyledHiddenContent>\n            </>\n          ),\n        })\n      } else {\n        formattedChildren = (\n          <>\n            <StyledSpinnerBox data-testid={spinnerTestId}>\n              <Spinner size={spinnerSize} />\n            </StyledSpinnerBox>\n            <StyledHiddenContent>{children}</StyledHiddenContent>\n          </>\n        )\n      }\n    }\n\n    return (\n      <ButtonProvider size={size}>\n        <StyledButton\n          {...restProps}\n          asChild={asChild}\n          variant={variant}\n          rounded={rounded}\n          fluid={fluid}\n          size={size}\n          // without undefined it will be aria-disabled=\"false\" in html\n          aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n          ref={forwardRef}\n        >\n          {formattedChildren}\n        </StyledButton>\n      </ButtonProvider>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["baseIconStyles"],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/hooks/use-button-context.tsx","../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { PropsWithChildren } from 'react'\n\nimport type { StyledButtonProps } from '../button.styled'\n\ninterface ButtonProps {\n  size?: StyledButtonProps['size']\n}\n\ninterface ButtonContextProps extends ButtonProps {}\n\nexport type ButtonProviderProps = ButtonProps\n\nconst ButtonContext = createContext<ButtonContextProps>({} as any)\n\nexport const ButtonProvider = ({\n  children,\n  ...restProps\n}: PropsWithChildren<ButtonProviderProps>): JSX.Element => (\n  <ButtonContext.Provider\n    value={{\n      ...restProps,\n    }}\n  >\n    {children}\n  </ButtonContext.Provider>\n)\n\nexport const useButtonContext = (): ButtonContextProps =>\n  useContext(ButtonContext)\n","import React from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { addPropsToChildren } from '@mirohq/design-system-utils'\nimport type {\n  IconReactElement,\n  IconSizes,\n  IconWeights,\n} from '@mirohq/design-system-base-icon'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\n\nimport { useButtonContext } from '../hooks/use-button-context'\nimport type { StyledButtonProps } from '../button.styled'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\ntype ButtonSize = ExtractValidKeys<StyledButtonProps['size']>\n\nconst buttonIconSizes: { [key in ButtonSize]: IconSizes } = {\n  small: 'small',\n  medium: 'small',\n  large: 'medium',\n  'x-large': 'medium',\n}\n\nconst buttonIconWeights: { [key in ButtonSize]: IconWeights } = {\n  small: 'thin',\n  medium: 'thin',\n  large: 'normal',\n  'x-large': 'normal',\n}\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const { size } = useButtonContext()\n\n  const formattedChildren = addPropsToChildren(\n    children,\n    child => isIconComponent(child as IconReactElement),\n    {\n      'data-icon-component': '',\n      size: buttonIconSizes[size as ButtonSize],\n      weight: buttonIconWeights[size as ButtonSize],\n    }\n  )\n\n  return (\n    <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n      {formattedChildren}\n    </StyledIconSlot>\n  )\n})\n","import { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\nimport type { ComponentPropsWithRef } from 'react'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst disabledSelector = '&[disabled], &[aria-disabled=\"true\"]'\n\n// we might face className collision because of empty CSS in StyledIconSlot\n// https://github.com/stitchesjs/stitches/issues/976\nconst iconSlotSelector = `& ${StyledIconSlot}`\nconst externalIconSelector =\n  '& svg:not([data-icon-component]), & img:not([data-icon-component])'\n\nconst solidDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst outlineDisabled: CSS = {\n  [disabledSelector]: {\n    backgroundColor: '$background-neutrals',\n    borderColor: '$border-neutrals-disabled',\n    color: '$text-neutrals-disabled',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst ghostDisabled: CSS = {\n  [disabledSelector]: {\n    color: '$text-neutrals-disabled',\n    backgroundColor: '$transparent',\n\n    [iconSlotSelector]: {\n      color: '$icon-neutrals-disabled',\n    },\n  },\n}\n\nconst LABEL_OFFSET = 2\n\nexport const StyledButton = styled(BaseButton, {\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  [`& ${StyledIconSlot}:first-child`]: {\n    marginLeft: -LABEL_OFFSET,\n    marginRight: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n  [`& ${StyledIconSlot}:last-child`]: {\n    marginRight: -LABEL_OFFSET,\n    marginLeft: `calc($50 + ${LABEL_OFFSET}px)`,\n  },\n\n  variants: {\n    v1: {\n      false: {\n        ...focus.css({\n          boxShadow: '$focus-small-outline',\n          borderColor: '$blue-400 !important',\n        }),\n      },\n      true: {\n        fontWeight: '$semibold',\n        ...focus.css({\n          boxShadow:\n            '0px 0px 0px 2px $colors$border-focus-inner, 0px 0px 0px 4px $colors$focus-keyboard',\n        }),\n      },\n    },\n    variant: {\n      primary: {\n        backgroundColor: '$background-primary-prominent',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n\n        ...solidDisabled,\n      },\n      tertiary: {\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          borderColor: '$border-primary-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          borderColor: '$border-primary-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-prominent': {\n        backgroundColor: 'transparent',\n        color: '$text-primary',\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-subtle-active',\n          color: '$text-primary-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n      secondary: {\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-subtle': {\n        backgroundColor: '$background-neutrals',\n        border: '1px solid $border-neutrals',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n          borderColor: '$border-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n          borderColor: '$border-neutrals-active',\n        },\n        ...outlineDisabled,\n      },\n      ghost: {\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        ...ghostDisabled,\n      },\n      danger: {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'danger-secondary': {\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...outlineDisabled,\n      },\n      'ghost-danger': {\n        backgroundColor: 'transparent',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n          color: '$text-danger-active',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-active',\n          },\n        },\n        ...ghostDisabled,\n      },\n    },\n    size: {\n      'x-large': {\n        height: sizes.xLarge,\n        fontSize: '$200',\n        paddingX: `calc($200 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.medium,\n          ...baseIconStyles.weight.normal,\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [externalIconSelector]: {\n          ...baseIconStyles.size.small,\n          ...baseIconStyles.weight.thin,\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$round',\n      },\n    },\n    fluid: {\n      true: {\n        display: 'flex',\n        justifyContent: 'center',\n        maxWidth: '100%',\n        width: '100%',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'primary',\n      v1: false,\n      css: {\n        color: '$text-primary-inverted',\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n      },\n    },\n    {\n      variant: 'primary',\n      v1: true,\n      css: {\n        color: '$text-neutrals-inverted',\n        '&[data-pressed]': {\n          backgroundColor: '$background-primary-prominent-pressed',\n        },\n      },\n    },\n    {\n      variant: 'tertiary',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals',\n      },\n    },\n    {\n      variant: 'tertiary',\n      v1: true,\n      css: {\n        border: '1.5px solid $border-primary',\n      },\n    },\n    {\n      variant: 'secondary',\n      v1: false,\n      css: {\n        backgroundColor: '$background-neutrals-subtle',\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'secondary',\n      v1: true,\n      css: {\n        backgroundColor: '$button-background-secondary',\n        '&[data-hovered]': {\n          color: '$text-neutrals-hover',\n          backgroundColor: '$button-background-secondary-hover',\n        },\n        '&[data-pressed]': {\n          color: '$text-neutrals-active',\n          backgroundColor: '$button-background-secondary-pressed',\n        },\n      },\n    },\n    {\n      variant: 'danger-secondary',\n      v1: false,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$background-danger-subtle',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-danger-subtle-hover',\n        },\n      },\n    },\n    {\n      variant: 'danger-secondary',\n      v1: true,\n      css: {\n        '&[data-hovered]': {\n          borderColor: '$border-danger-hover',\n          backgroundColor: '$background-danger-subtle-hover',\n        },\n        '&[data-pressed]': {\n          borderColor: '$border-danger-active',\n          backgroundColor: '$background-danger-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'ghost',\n      v1: false,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n      },\n    },\n    {\n      variant: 'ghost',\n      v1: true,\n      css: {\n        '&[data-hovered]': {\n          backgroundColor: '$button-background-secondary-hover',\n          color: '$text-neutrals-hover',\n        },\n        '&[data-pressed]': {\n          backgroundColor: '$button-background-secondary-pressed',\n          color: '$text-neutrals-pressed',\n        },\n      },\n    },\n  ],\n})\n\nexport const StyledHiddenContent = styled(Primitive.span, {\n  visibility: 'hidden',\n})\n\nexport const StyledSpinnerBox = styled(Primitive.div, {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  bottom: 0,\n  right: 0,\n  margin: 'auto',\n})\n\nexport type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>\n","import { Primitive } from '@mirohq/design-system-primitive'\n\nexport const Label = Primitive.span\n\nLabel.displayName = 'Label'\n","import type { BaseButtonProps } from '@mirohq/design-system-base-button'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { booleanify } from '@mirohq/design-system-utils'\nimport React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport { useNewDesignLanguage } from '@mirohq/design-system-experiments'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { ButtonProvider } from './hooks/use-button-context'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport type ButtonProps = {\n  /**\n   * Change the button style.\n   * @default 'primary'\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   * @default 'large'\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   * @default false\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   * @default false\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   * @default false\n   */\n  fluid?: StyledButtonProps['fluid']\n} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\n      asChild = false,\n      children,\n      ...restProps\n    },\n    forwardRef\n  ) => {\n    let spinnerSize: SpinnerProps['size'] = 'medium'\n    const [v1] = useNewDesignLanguage()\n\n    if (typeof size === 'string' && ['small', 'medium'].includes(size)) {\n      spinnerSize = 'small'\n    }\n\n    const shouldHaveAriaDisabled = booleanify(ariaDisabled) || loading\n\n    let formattedChildren = children\n\n    if (loading) {\n      const spinnerTestId =\n        process.env.NODE_ENV === 'test' ? 'button-spinner' : undefined\n\n      if (\n        asChild &&\n        React.Children.toArray(children).length === 1 &&\n        React.isValidElement(children)\n      ) {\n        // when using asChild we need to render element to merge props with first,\n        // and spinner wrapper should be rendered between the element and its content\n        const firstLevelChild = React.Children.only(children)\n\n        const { children: secondLevelChildren, ...childProps } =\n          firstLevelChild.props\n\n        formattedChildren = React.cloneElement(firstLevelChild, {\n          ...childProps,\n          children: (\n            <>\n              <StyledSpinnerBox data-testid={spinnerTestId}>\n                <Spinner size={spinnerSize} />\n              </StyledSpinnerBox>\n              <StyledHiddenContent>{secondLevelChildren}</StyledHiddenContent>\n            </>\n          ),\n        })\n      } else {\n        formattedChildren = (\n          <>\n            <StyledSpinnerBox data-testid={spinnerTestId}>\n              <Spinner size={spinnerSize} />\n            </StyledSpinnerBox>\n            <StyledHiddenContent>{children}</StyledHiddenContent>\n          </>\n        )\n      }\n    }\n\n    return (\n      <ButtonProvider size={size}>\n        <StyledButton\n          {...restProps}\n          v1={v1}\n          asChild={asChild}\n          variant={variant}\n          rounded={rounded}\n          fluid={fluid}\n          size={size}\n          // without undefined it will be aria-disabled=\"false\" in html\n          aria-disabled={shouldHaveAriaDisabled ? true : undefined}\n          ref={forwardRef}\n        >\n          {formattedChildren}\n        </StyledButton>\n      </ButtonProvider>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\nexport interface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["baseIconStyles"],"mappings":"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"}

package/dist/types.d.ts

@@ -9,7 +9,8 @@ import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitiv
 
 declare const StyledButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_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<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
     children?: react.ReactNode;
-}, "size" | "variant" | "rounded" | "fluid"> & _stitches_react_types_styled_component.TransformProps<{
+}, "size" | "v1" | "variant" | "rounded" | "fluid"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "false" | "true" | undefined;
     variant?: "primary" | "tertiary" | "ghost-prominent" | "secondary" | "outline-subtle" | "ghost" | "danger" | "danger-secondary" | "ghost-danger" | undefined;
     size?: "small" | "medium" | "large" | "x-large" | undefined;
     rounded?: boolean | "true" | undefined;
@@ -18,7 +19,8 @@ declare const StyledButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit
     href: string;
 }, "ref"> & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>, _mirohq_design_system_stitches.ForbiddenProps> & {
     children?: react.ReactNode;
-}, "size" | "variant" | "rounded" | "fluid"> & _stitches_react_types_styled_component.TransformProps<{
+}, "size" | "v1" | "variant" | "rounded" | "fluid"> & _stitches_react_types_styled_component.TransformProps<{
+    v1?: boolean | "false" | "true" | undefined;
     variant?: "primary" | "tertiary" | "ghost-prominent" | "secondary" | "outline-subtle" | "ghost" | "danger" | "danger-secondary" | "ghost-danger" | undefined;
     size?: "small" | "medium" | "large" | "x-large" | undefined;
     rounded?: boolean | "true" | undefined;
@@ -26,6 +28,7 @@ declare const StyledButton: react.ForwardRefExoticComponent<(Omit<Omit<Omit<Omit
 }, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<(Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_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_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"> & {
     href: string;
 }, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>, {
+    v1?: boolean | "false" | "true" | undefined;
     variant?: "primary" | "tertiary" | "ghost-prominent" | "secondary" | "outline-subtle" | "ghost" | "danger" | "danger-secondary" | "ghost-danger" | undefined;
     size?: "small" | "medium" | "large" | "x-large" | undefined;
     rounded?: boolean | "true" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-button",
-  "version": "4.0.0",
+  "version": "4.1.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -26,12 +26,13 @@
     "react": "^16.14 || ^17 || ^18"
   },
   "dependencies": {
+    "@mirohq/design-system-base-button": "^0.4.60",
     "@mirohq/design-system-base-icon": "^0.1.33",
-    "@mirohq/design-system-base-button": "^0.4.59",
+    "@mirohq/design-system-experiments": "^0.2.0",
     "@mirohq/design-system-primitive": "^1.1.2",
-    "@mirohq/design-system-stitches": "^2.6.22",
-    "@mirohq/design-system-styles": "^1.2.22",
-    "@mirohq/design-system-spinner": "^1.1.56",
+    "@mirohq/design-system-spinner": "^1.1.57",
+    "@mirohq/design-system-stitches": "^2.6.23",
+    "@mirohq/design-system-styles": "^1.2.23",
     "@mirohq/design-system-types": "^0.10.0",
     "@mirohq/design-system-utils": "^0.15.4"
   },