@mirohq/design-system-button 3.1.1-dropdown.0 → 3.2.0-icon-types.0

package/dist/main.js

@@ -7,18 +7,26 @@ var designSystemSpinner = require('@mirohq/design-system-spinner');
 var designSystemPrimitive = require('@mirohq/design-system-primitive');
 var designSystemStitches = require('@mirohq/design-system-stitches');
 var designSystemBaseButton = require('@mirohq/design-system-base-button');
+var designSystemIcons = require('@mirohq/design-system-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
-const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
-  ...restProps,
-  ref: forwardRef,
-  "aria-hidden": true,
-  asChild: true
-}, children));
+const isIcon = (child) => child.type.__Type === designSystemIcons.IconTypeSymbol;
+const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
+  const child = React__default["default"].Children.only(children);
+  const isDsIcon = isIcon(child);
+  const iconElement = isDsIcon ? React__default["default"].cloneElement(child, { size: "small" }) : child;
+  return /* @__PURE__ */ React__default["default"].createElement(StyledIconSlot, {
+    ...restProps,
+    ref: forwardRef,
+    "aria-hidden": true,
+    asChild: true,
+    "data-icon": isDsIcon ? "" : void 0
+  }, iconElement);
+});
 
 const activeSelector = "&:active, &[data-pressed]";
 const disabledSelector = '&[disabled], &[aria-disabled="true"]';

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\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  <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n    {children}\n  </StyledIconSlot>\n))\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\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}`\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  userSelect: 'none',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1.5,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  '&[data-focused]': {\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-500 !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      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-prominent': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&:hover': {\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        [activeSelector]: {\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        '&:hover': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        [activeSelector]: {\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      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\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        '&: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        ...outlineDisabled,\n      },\n      'ghost-subtle': {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      'solid-danger': {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-danger': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$half',\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 React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n  /**\n   * Change the button style.\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   */\n  fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n  ElementRef<typeof StyledButton>,\n  ButtonProps\n>(\n  (\n    {\n      variant = 'solid-prominent',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\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 =\n      ariaDisabled === 'true' || ariaDisabled === true || loading\n\n    const Content = loading ? (\n      <>\n        <StyledSpinnerBox>\n          <Spinner size={spinnerSize} />\n        </StyledSpinnerBox>\n        <StyledHiddenContent>{children}</StyledHiddenContent>\n      </>\n    ) : (\n      children\n    )\n\n    return (\n      <StyledButton\n        {...restProps}\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        {Content}\n      </StyledButton>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["styled","Primitive","React","BaseButton","sizes","Spinner"],"mappings":"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"}
+{"version":3,"file":"main.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { IconTypeSymbol } from '@mirohq/design-system-icons'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nconst isIcon = (child: React.ReactElement): boolean =>\n  // @ts-expect-error\n  child.type.__Type === IconTypeSymbol\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const child = React.Children.only(children) as React.ReactElement\n\n  const isDsIcon = isIcon(child)\n\n  const iconElement = isDsIcon\n    ? React.cloneElement(child, { size: 'small' })\n    : child\n\n  return (\n    <StyledIconSlot\n      {...restProps}\n      ref={forwardRef}\n      aria-hidden\n      asChild\n      data-icon={isDsIcon ? '' : undefined}\n    >\n      {iconElement}\n    </StyledIconSlot>\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\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}`\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  userSelect: 'none',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1.5,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  '&[data-focused]': {\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-500 !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      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-prominent': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&:hover': {\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        [activeSelector]: {\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        '&:hover': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        [activeSelector]: {\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      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\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        '&: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        ...outlineDisabled,\n      },\n      'ghost-subtle': {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      'solid-danger': {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-danger': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$half',\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 React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n  /**\n   * Change the button style.\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   */\n  fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n  ElementRef<typeof StyledButton>,\n  ButtonProps\n>(\n  (\n    {\n      variant = 'solid-prominent',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\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 =\n      ariaDisabled === 'true' || ariaDisabled === true || loading\n\n    const Content = loading ? (\n      <>\n        <StyledSpinnerBox>\n          <Spinner size={spinnerSize} />\n        </StyledSpinnerBox>\n        <StyledHiddenContent>{children}</StyledHiddenContent>\n      </>\n    ) : (\n      children\n    )\n\n    return (\n      <StyledButton\n        {...restProps}\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        {Content}\n      </StyledButton>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":["styled","Primitive","IconTypeSymbol","React","BaseButton","sizes","Spinner"],"mappings":"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"}

package/dist/module.js

@@ -3,14 +3,22 @@ import { Spinner } from '@mirohq/design-system-spinner';
 import { Primitive } from '@mirohq/design-system-primitive';
 import { styled } from '@mirohq/design-system-stitches';
 import { BaseButton, sizes } from '@mirohq/design-system-base-button';
+import { IconTypeSymbol } from '@mirohq/design-system-icons';
 
 const StyledIconSlot = styled(Primitive.div, {});
-const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ React.createElement(StyledIconSlot, {
-  ...restProps,
-  ref: forwardRef,
-  "aria-hidden": true,
-  asChild: true
-}, children));
+const isIcon = (child) => child.type.__Type === IconTypeSymbol;
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const child = React.Children.only(children);
+  const isDsIcon = isIcon(child);
+  const iconElement = isDsIcon ? React.cloneElement(child, { size: "small" }) : child;
+  return /* @__PURE__ */ React.createElement(StyledIconSlot, {
+    ...restProps,
+    ref: forwardRef,
+    "aria-hidden": true,
+    asChild: true,
+    "data-icon": isDsIcon ? "" : void 0
+  }, iconElement);
+});
 
 const activeSelector = "&:active, &[data-pressed]";
 const disabledSelector = '&[disabled], &[aria-disabled="true"]';

package/dist/module.js.map

@@ -1 +1 @@
-{"version":3,"file":"module.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\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  <StyledIconSlot {...restProps} ref={forwardRef} aria-hidden asChild>\n    {children}\n  </StyledIconSlot>\n))\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\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}`\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  userSelect: 'none',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1.5,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  '&[data-focused]': {\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-500 !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      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-prominent': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&:hover': {\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        [activeSelector]: {\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        '&:hover': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        [activeSelector]: {\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      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\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        '&: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        ...outlineDisabled,\n      },\n      'ghost-subtle': {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      'solid-danger': {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-danger': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$half',\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 React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n  /**\n   * Change the button style.\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   */\n  fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n  ElementRef<typeof StyledButton>,\n  ButtonProps\n>(\n  (\n    {\n      variant = 'solid-prominent',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\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 =\n      ariaDisabled === 'true' || ariaDisabled === true || loading\n\n    const Content = loading ? (\n      <>\n        <StyledSpinnerBox>\n          <Spinner size={spinnerSize} />\n        </StyledSpinnerBox>\n        <StyledHiddenContent>{children}</StyledHiddenContent>\n      </>\n    ) : (\n      children\n    )\n\n    return (\n      <StyledButton\n        {...restProps}\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        {Content}\n      </StyledButton>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"module.js","sources":["../src/partials/icon-slot.tsx","../src/button.styled.ts","../src/partials/label.ts","../src/button.tsx"],"sourcesContent":["import React from 'react'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { IconTypeSymbol } from '@mirohq/design-system-icons'\n\nexport const StyledIconSlot = styled(Primitive.div, {})\nexport type StyledIconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\nexport interface IconSlotProps extends StyledIconSlotProps {\n  /**\n   * The icon.\n   */\n  children: React.ReactNode\n}\n\nconst isIcon = (child: React.ReactElement): boolean =>\n  // @ts-expect-error\n  child.type.__Type === IconTypeSymbol\n\nexport const IconSlot = React.forwardRef<\n  ElementRef<typeof StyledIconSlot>,\n  IconSlotProps\n>(({ children, ...restProps }, forwardRef) => {\n  const child = React.Children.only(children) as React.ReactElement\n\n  const isDsIcon = isIcon(child)\n\n  const iconElement = isDsIcon\n    ? React.cloneElement(child, { size: 'small' })\n    : child\n\n  return (\n    <StyledIconSlot\n      {...restProps}\n      ref={forwardRef}\n      aria-hidden\n      asChild\n      data-icon={isDsIcon ? '' : undefined}\n    >\n      {iconElement}\n    </StyledIconSlot>\n  )\n})\n","import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\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}`\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  userSelect: 'none',\n  whiteSpace: 'nowrap',\n  textOverflow: 'ellipsis',\n  textAlign: 'center',\n  position: 'relative',\n  width: 'fit-content',\n  maxWidth: '100%',\n\n  lineHeight: 1.5,\n  border: '1px solid transparent', // to make outline and solid/ghost variants the same width\n\n  '&[data-focused]': {\n    boxShadow: '$focus-small-outline',\n    borderColor: '$blue-500 !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      'solid-prominent': {\n        backgroundColor: '$background-primary-prominent',\n        color: '$text-primary-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-primary-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-primary-prominent-active',\n        },\n\n        ...solidDisabled,\n      },\n      'outline-prominent': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-primary',\n        color: '$text-primary',\n\n        [iconSlotSelector]: {\n          color: '$icon-primary',\n        },\n\n        '&:hover': {\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        [activeSelector]: {\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        '&:hover': {\n          backgroundColor: '$background-primary-subtle-hover',\n          color: '$text-primary-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-primary-hover',\n          },\n        },\n        [activeSelector]: {\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      'solid-subtle': {\n        backgroundColor: '$background-neutrals-subtle',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...solidDisabled,\n      },\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        '&: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        ...outlineDisabled,\n      },\n      'ghost-subtle': {\n        backgroundColor: 'transparent',\n        color: '$text-neutrals',\n\n        [iconSlotSelector]: {\n          color: '$icon-neutrals',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-neutrals-subtle-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-neutrals-subtle-active',\n        },\n        ...ghostDisabled,\n      },\n      'solid-danger': {\n        backgroundColor: '$background-danger-prominent',\n        color: '$text-danger-inverted',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger-inverted',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger-prominent-hover',\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-prominent-active',\n        },\n        ...solidDisabled,\n      },\n      'outline-danger': {\n        backgroundColor: '$background-neutrals',\n        borderColor: '$border-danger',\n        color: '$text-danger',\n\n        [iconSlotSelector]: {\n          color: '$icon-danger',\n        },\n\n        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        '&:hover': {\n          backgroundColor: '$background-danger',\n          color: '$text-danger-hover',\n\n          [iconSlotSelector]: {\n            color: '$icon-danger-hover',\n          },\n        },\n        [activeSelector]: {\n          backgroundColor: '$background-danger-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        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      large: {\n        height: sizes.large,\n        fontSize: '$200',\n        paddingX: `calc($150 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-300',\n          height: '$icon-300',\n        },\n      },\n      medium: {\n        height: sizes.medium,\n        fontSize: '$175',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n      small: {\n        fontSize: '$175',\n        height: '$6',\n        paddingX: `calc($100 + ${LABEL_OFFSET}px)`,\n\n        [iconSlotSelector]: {\n          width: '$icon-200',\n          height: '$icon-200',\n          '--svg-stroke-width': '$stroke-width$thin',\n        },\n      },\n    },\n    rounded: {\n      true: {\n        borderRadius: '$half',\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 React from 'react'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\n\nimport type { StyledButtonProps } from './button.styled'\nimport {\n  StyledButton,\n  StyledHiddenContent,\n  StyledSpinnerBox,\n} from './button.styled'\nimport { IconSlot } from './partials/icon-slot'\nimport { Label } from './partials/label'\n\nexport interface ButtonProps extends StyledButtonProps {\n  /**\n   * Change the button style.\n   */\n  variant?: StyledButtonProps['variant']\n\n  /**\n   * Change the button size.\n   */\n  size?: StyledButtonProps['size']\n\n  /**\n   * Make button border rounded.\n   */\n  rounded?: StyledButtonProps['rounded']\n\n  /**\n   * Add spinner and disable.\n   */\n  loading?: boolean\n\n  /**\n   * Make width 100%.\n   */\n  fluid?: StyledButtonProps['fluid']\n}\n\nexport const Button = React.forwardRef<\n  ElementRef<typeof StyledButton>,\n  ButtonProps\n>(\n  (\n    {\n      variant = 'solid-prominent',\n      size = 'large',\n      loading = false,\n      rounded = false,\n      fluid = false,\n      'aria-disabled': ariaDisabled,\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 =\n      ariaDisabled === 'true' || ariaDisabled === true || loading\n\n    const Content = loading ? (\n      <>\n        <StyledSpinnerBox>\n          <Spinner size={spinnerSize} />\n        </StyledSpinnerBox>\n        <StyledHiddenContent>{children}</StyledHiddenContent>\n      </>\n    ) : (\n      children\n    )\n\n    return (\n      <StyledButton\n        {...restProps}\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        {Content}\n      </StyledButton>\n    )\n  }\n) as ForwardRefExoticComponent<ButtonProps> & Partials\n\n// Partials\n// -----------------------------------------------------------------------------\n\ninterface Partials {\n  IconSlot: typeof IconSlot\n  Label: typeof Label\n}\n\nButton.IconSlot = IconSlot\nButton.Label = Label\n"],"names":[],"mappings":"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"}

package/dist/types.d.ts

@@ -892,7 +892,9 @@ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Pick<Omit
         }) => {
             marginTop: {
                 readonly [$$PropertyValue]: "margin";
-            };
+            }; /**
+             * The icon.
+             */
             marginBottom: {
                 readonly [$$PropertyValue]: "margin";
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-button",
-  "version": "3.1.1-dropdown.0",
+  "version": "3.2.0-icon-types.0",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -31,19 +31,19 @@
     "@react-aria/link": "^3.3.0",
     "@react-aria/utils": "^3.13.0",
     "@react-types/button": "^3.5.0",
-    "@mirohq/design-system-base-button": "^0.4.8-dropdown.0",
+    "@mirohq/design-system-base-button": "^0.4.7",
     "@mirohq/design-system-styles": "^1.0.22",
-    "@mirohq/design-system-primitive": "^1.1.0",
-    "@mirohq/design-system-spinner": "^1.1.10",
-    "@mirohq/design-system-stitches": "^2.3.0",
     "@mirohq/design-system-types": "^0.4.1",
-    "@mirohq/design-system-utils": "^0.13.1"
+    "@mirohq/design-system-utils": "^0.13.1",
+    "@mirohq/design-system-spinner": "^1.1.10",
+    "@mirohq/design-system-primitive": "^1.1.0",
+    "@mirohq/design-system-stitches": "^2.3.0"
   },
   "devDependencies": {
     "@types/lodash.capitalize": "^4.2.7",
     "lodash.capitalize": "^3.0.0",
     "@mirohq/design-system-flex": "^2.1.10",
-    "@mirohq/design-system-icons": "^0.18.0"
+    "@mirohq/design-system-icons": "^0.20.0-icon-types.0"
   },
   "scripts": {
     "build": "rollup -c ../../../rollup.config.js",