@mirohq/design-system-button 3.1.17 → 3.1.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +18 -20
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +18 -20
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +28 -0
  6. package/package.json +7 -7
package/dist/main.js CHANGED
@@ -19,8 +19,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
19
  const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
20
20
  const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children }));
21
21
 
22
- const activeSelector = "&:active, &[data-pressed]";
23
- const hoverSelector = "&:hover, &[data-hovered]";
24
22
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
25
23
  const iconSlotSelector = "& ".concat(StyledIconSlot);
26
24
  const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
@@ -83,10 +81,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
83
81
  [iconSlotSelector]: {
84
82
  color: "$icon-primary-inverted"
85
83
  },
86
- [hoverSelector]: {
84
+ "&[data-hovered]": {
87
85
  backgroundColor: "$background-primary-prominent-hover"
88
86
  },
89
- [activeSelector]: {
87
+ "&[data-pressed]": {
90
88
  backgroundColor: "$background-primary-prominent-active"
91
89
  },
92
90
  ...solidDisabled
@@ -98,7 +96,7 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
98
96
  [iconSlotSelector]: {
99
97
  color: "$icon-primary"
100
98
  },
101
- [hoverSelector]: {
99
+ "&[data-hovered]": {
102
100
  backgroundColor: "$background-primary-subtle-hover",
103
101
  borderColor: "$border-primary-hover",
104
102
  color: "$text-primary-hover",
@@ -106,7 +104,7 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
106
104
  color: "$icon-primary-hover"
107
105
  }
108
106
  },
109
- [activeSelector]: {
107
+ "&[data-pressed]": {
110
108
  backgroundColor: "$background-primary-subtle-active",
111
109
  borderColor: "$border-primary-active",
112
110
  color: "$text-primary-active",
@@ -119,14 +117,14 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
119
117
  "ghost-prominent": {
120
118
  backgroundColor: "transparent",
121
119
  color: "$text-primary",
122
- [hoverSelector]: {
120
+ "&[data-hovered]": {
123
121
  backgroundColor: "$background-primary-subtle-hover",
124
122
  color: "$text-primary-hover",
125
123
  [iconSlotSelector]: {
126
124
  color: "$icon-primary-hover"
127
125
  }
128
126
  },
129
- [activeSelector]: {
127
+ "&[data-pressed]": {
130
128
  backgroundColor: "$background-primary-subtle-active",
131
129
  color: "$text-primary-active",
132
130
  [iconSlotSelector]: {
@@ -141,10 +139,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
141
139
  [iconSlotSelector]: {
142
140
  color: "$icon-neutrals"
143
141
  },
144
- [hoverSelector]: {
142
+ "&[data-hovered]": {
145
143
  backgroundColor: "$background-neutrals-subtle-hover"
146
144
  },
147
- [activeSelector]: {
145
+ "&[data-pressed]": {
148
146
  backgroundColor: "$background-neutrals-subtle-active"
149
147
  },
150
148
  ...solidDisabled
@@ -156,11 +154,11 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
156
154
  [iconSlotSelector]: {
157
155
  color: "$icon-neutrals"
158
156
  },
159
- [hoverSelector]: {
157
+ "&[data-hovered]": {
160
158
  backgroundColor: "$background-neutrals-subtle-hover",
161
159
  borderColor: "$border-neutrals-hover"
162
160
  },
163
- [activeSelector]: {
161
+ "&[data-pressed]": {
164
162
  backgroundColor: "$background-neutrals-subtle-active",
165
163
  borderColor: "$border-neutrals-active"
166
164
  },
@@ -172,10 +170,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
172
170
  [iconSlotSelector]: {
173
171
  color: "$icon-neutrals"
174
172
  },
175
- [hoverSelector]: {
173
+ "&[data-hovered]": {
176
174
  backgroundColor: "$background-neutrals-subtle-hover"
177
175
  },
178
- [activeSelector]: {
176
+ "&[data-pressed]": {
179
177
  backgroundColor: "$background-neutrals-subtle-active"
180
178
  },
181
179
  ...ghostDisabled
@@ -186,10 +184,10 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
186
184
  [iconSlotSelector]: {
187
185
  color: "$icon-danger-inverted"
188
186
  },
189
- [hoverSelector]: {
187
+ "&[data-hovered]": {
190
188
  backgroundColor: "$background-danger-prominent-hover"
191
189
  },
192
- [activeSelector]: {
190
+ "&[data-pressed]": {
193
191
  backgroundColor: "$background-danger-prominent-active"
194
192
  },
195
193
  ...solidDisabled
@@ -201,14 +199,14 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
201
199
  [iconSlotSelector]: {
202
200
  color: "$icon-danger"
203
201
  },
204
- [hoverSelector]: {
202
+ "&[data-hovered]": {
205
203
  backgroundColor: "$background-danger-subtle",
206
204
  color: "$text-danger-hover",
207
205
  [iconSlotSelector]: {
208
206
  color: "$icon-danger-hover"
209
207
  }
210
208
  },
211
- [activeSelector]: {
209
+ "&[data-pressed]": {
212
210
  backgroundColor: "$background-danger-subtle-hover",
213
211
  color: "$text-danger-active",
214
212
  [iconSlotSelector]: {
@@ -223,14 +221,14 @@ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButt
223
221
  [iconSlotSelector]: {
224
222
  color: "$icon-danger"
225
223
  },
226
- [hoverSelector]: {
224
+ "&[data-hovered]": {
227
225
  backgroundColor: "$background-danger-subtle",
228
226
  color: "$text-danger-hover",
229
227
  [iconSlotSelector]: {
230
228
  color: "$icon-danger-hover"
231
229
  }
232
230
  },
233
- [activeSelector]: {
231
+ "&[data-pressed]": {
234
232
  backgroundColor: "$background-danger-subtle-hover",
235
233
  color: "$text-danger-active",
236
234
  [iconSlotSelector]: {
package/dist/main.js.map CHANGED
@@ -1 +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 { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\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.5,\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-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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\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 [hoverSelector]: {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\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: '$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 { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren, booleanify } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconSizes, IconWeights } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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\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 type ButtonProps = {\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} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\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 = booleanify(ariaDisabled) || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\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","focus","sizes","baseIconStyles","booleanify","addPropsToChildren","isIconComponent","jsxs","Fragment","jsx","Spinner"],"mappings":"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"}
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 { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\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.5,\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-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 '&[data-hovered]': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n '&[data-pressed]': {\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 '&[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 'solid-subtle': {\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\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-subtle': {\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 'solid-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 'outline-danger': {\n backgroundColor: '$background-neutrals',\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: '$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 { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren, booleanify } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconSizes, IconWeights } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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\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 type ButtonProps = {\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} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\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 = booleanify(ariaDisabled) || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\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","focus","sizes","baseIconStyles","booleanify","addPropsToChildren","isIconComponent","jsxs","Fragment","jsx","Spinner"],"mappings":"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"}
package/dist/module.js CHANGED
@@ -11,8 +11,6 @@ import { focus } from '@mirohq/design-system-styles';
11
11
  const StyledIconSlot = styled(Primitive.div, {});
12
12
  const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children }));
13
13
 
14
- const activeSelector = "&:active, &[data-pressed]";
15
- const hoverSelector = "&:hover, &[data-hovered]";
16
14
  const disabledSelector = '&[disabled], &[aria-disabled="true"]';
17
15
  const iconSlotSelector = "& ".concat(StyledIconSlot);
18
16
  const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
@@ -75,10 +73,10 @@ const StyledButton = styled(BaseButton, {
75
73
  [iconSlotSelector]: {
76
74
  color: "$icon-primary-inverted"
77
75
  },
78
- [hoverSelector]: {
76
+ "&[data-hovered]": {
79
77
  backgroundColor: "$background-primary-prominent-hover"
80
78
  },
81
- [activeSelector]: {
79
+ "&[data-pressed]": {
82
80
  backgroundColor: "$background-primary-prominent-active"
83
81
  },
84
82
  ...solidDisabled
@@ -90,7 +88,7 @@ const StyledButton = styled(BaseButton, {
90
88
  [iconSlotSelector]: {
91
89
  color: "$icon-primary"
92
90
  },
93
- [hoverSelector]: {
91
+ "&[data-hovered]": {
94
92
  backgroundColor: "$background-primary-subtle-hover",
95
93
  borderColor: "$border-primary-hover",
96
94
  color: "$text-primary-hover",
@@ -98,7 +96,7 @@ const StyledButton = styled(BaseButton, {
98
96
  color: "$icon-primary-hover"
99
97
  }
100
98
  },
101
- [activeSelector]: {
99
+ "&[data-pressed]": {
102
100
  backgroundColor: "$background-primary-subtle-active",
103
101
  borderColor: "$border-primary-active",
104
102
  color: "$text-primary-active",
@@ -111,14 +109,14 @@ const StyledButton = styled(BaseButton, {
111
109
  "ghost-prominent": {
112
110
  backgroundColor: "transparent",
113
111
  color: "$text-primary",
114
- [hoverSelector]: {
112
+ "&[data-hovered]": {
115
113
  backgroundColor: "$background-primary-subtle-hover",
116
114
  color: "$text-primary-hover",
117
115
  [iconSlotSelector]: {
118
116
  color: "$icon-primary-hover"
119
117
  }
120
118
  },
121
- [activeSelector]: {
119
+ "&[data-pressed]": {
122
120
  backgroundColor: "$background-primary-subtle-active",
123
121
  color: "$text-primary-active",
124
122
  [iconSlotSelector]: {
@@ -133,10 +131,10 @@ const StyledButton = styled(BaseButton, {
133
131
  [iconSlotSelector]: {
134
132
  color: "$icon-neutrals"
135
133
  },
136
- [hoverSelector]: {
134
+ "&[data-hovered]": {
137
135
  backgroundColor: "$background-neutrals-subtle-hover"
138
136
  },
139
- [activeSelector]: {
137
+ "&[data-pressed]": {
140
138
  backgroundColor: "$background-neutrals-subtle-active"
141
139
  },
142
140
  ...solidDisabled
@@ -148,11 +146,11 @@ const StyledButton = styled(BaseButton, {
148
146
  [iconSlotSelector]: {
149
147
  color: "$icon-neutrals"
150
148
  },
151
- [hoverSelector]: {
149
+ "&[data-hovered]": {
152
150
  backgroundColor: "$background-neutrals-subtle-hover",
153
151
  borderColor: "$border-neutrals-hover"
154
152
  },
155
- [activeSelector]: {
153
+ "&[data-pressed]": {
156
154
  backgroundColor: "$background-neutrals-subtle-active",
157
155
  borderColor: "$border-neutrals-active"
158
156
  },
@@ -164,10 +162,10 @@ const StyledButton = styled(BaseButton, {
164
162
  [iconSlotSelector]: {
165
163
  color: "$icon-neutrals"
166
164
  },
167
- [hoverSelector]: {
165
+ "&[data-hovered]": {
168
166
  backgroundColor: "$background-neutrals-subtle-hover"
169
167
  },
170
- [activeSelector]: {
168
+ "&[data-pressed]": {
171
169
  backgroundColor: "$background-neutrals-subtle-active"
172
170
  },
173
171
  ...ghostDisabled
@@ -178,10 +176,10 @@ const StyledButton = styled(BaseButton, {
178
176
  [iconSlotSelector]: {
179
177
  color: "$icon-danger-inverted"
180
178
  },
181
- [hoverSelector]: {
179
+ "&[data-hovered]": {
182
180
  backgroundColor: "$background-danger-prominent-hover"
183
181
  },
184
- [activeSelector]: {
182
+ "&[data-pressed]": {
185
183
  backgroundColor: "$background-danger-prominent-active"
186
184
  },
187
185
  ...solidDisabled
@@ -193,14 +191,14 @@ const StyledButton = styled(BaseButton, {
193
191
  [iconSlotSelector]: {
194
192
  color: "$icon-danger"
195
193
  },
196
- [hoverSelector]: {
194
+ "&[data-hovered]": {
197
195
  backgroundColor: "$background-danger-subtle",
198
196
  color: "$text-danger-hover",
199
197
  [iconSlotSelector]: {
200
198
  color: "$icon-danger-hover"
201
199
  }
202
200
  },
203
- [activeSelector]: {
201
+ "&[data-pressed]": {
204
202
  backgroundColor: "$background-danger-subtle-hover",
205
203
  color: "$text-danger-active",
206
204
  [iconSlotSelector]: {
@@ -215,14 +213,14 @@ const StyledButton = styled(BaseButton, {
215
213
  [iconSlotSelector]: {
216
214
  color: "$icon-danger"
217
215
  },
218
- [hoverSelector]: {
216
+ "&[data-hovered]": {
219
217
  backgroundColor: "$background-danger-subtle",
220
218
  color: "$text-danger-hover",
221
219
  [iconSlotSelector]: {
222
220
  color: "$icon-danger-hover"
223
221
  }
224
222
  },
225
- [activeSelector]: {
223
+ "&[data-pressed]": {
226
224
  backgroundColor: "$background-danger-subtle-hover",
227
225
  color: "$text-danger-active",
228
226
  [iconSlotSelector]: {
package/dist/module.js.map CHANGED
@@ -1 +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 { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nimport { StyledIconSlot } from './partials/icon-slot'\n\nconst activeSelector = '&:active, &[data-pressed]'\nconst hoverSelector = '&:hover, &[data-hovered]'\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.5,\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-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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\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 [hoverSelector]: {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\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 [hoverSelector]: {\n backgroundColor: '$background-danger-subtle',\n color: '$text-danger-hover',\n\n [iconSlotSelector]: {\n color: '$icon-danger-hover',\n },\n },\n [activeSelector]: {\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: '$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 { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren, booleanify } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconSizes, IconWeights } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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\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 type ButtonProps = {\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} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\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 = booleanify(ariaDisabled) || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\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":["baseIconStyles"],"mappings":"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"}
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 { styled } from '@mirohq/design-system-stitches'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport type { ElementRef, ComponentPropsWithRef } from 'react'\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 { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { BaseButton, sizes } from '@mirohq/design-system-base-button'\nimport { styles as baseIconStyles } from '@mirohq/design-system-base-icon'\nimport type { ComponentPropsWithRef } from 'react'\nimport type { CSS } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\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.5,\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-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 '&[data-hovered]': {\n backgroundColor: '$background-primary-prominent-hover',\n },\n '&[data-pressed]': {\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 '&[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 'solid-subtle': {\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\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-subtle': {\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 'solid-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 'outline-danger': {\n backgroundColor: '$background-neutrals',\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: '$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 { Spinner } from '@mirohq/design-system-spinner'\nimport { addPropsToChildren, booleanify } from '@mirohq/design-system-utils'\nimport { isIconComponent } from '@mirohq/design-system-base-icon'\nimport type { IconSizes, IconWeights } from '@mirohq/design-system-base-icon'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport type { ElementRef, ForwardRefExoticComponent } from 'react'\nimport type { ExtractValidKeys } from '@mirohq/design-system-types'\nimport type { BaseButtonProps } from '@mirohq/design-system-base-button'\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\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 type ButtonProps = {\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} & BaseButtonProps\n\nexport const Button = React.forwardRef<ElementRef<'button' | 'a'>, ButtonProps>(\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 = booleanify(ariaDisabled) || loading\n\n const formattedChildren = React.Children.map(\n React.Children.toArray(children),\n child => {\n if (React.isValidElement(child) && child.type === IconSlot) {\n const iconSlotChildren = addPropsToChildren(\n child.props.children,\n innerChild => isIconComponent(innerChild),\n {\n 'data-icon-component': '',\n size: buttonIconSizes[size as ButtonSize],\n weight: buttonIconWeights[size as ButtonSize],\n }\n )\n\n return React.cloneElement(child, { ...child.props }, iconSlotChildren)\n }\n return child\n }\n )\n\n const Content = loading ? (\n <>\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n <StyledHiddenContent>{formattedChildren}</StyledHiddenContent>\n </>\n ) : (\n formattedChildren\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":["baseIconStyles"],"mappings":"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"}
package/dist/types.d.ts CHANGED
@@ -218,6 +218,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
218
218
  readonly 800: "4rem";
219
219
  readonly 900: "4.5rem";
220
220
  };
221
+ fonts: {
222
+ readonly heading: "Roobert, sans-serif";
223
+ readonly body: "Open Sans, sans-serif";
224
+ };
221
225
  radii: {
222
226
  readonly none: 0;
223
227
  readonly half: "999em";
@@ -688,6 +692,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
688
692
  readonly 800: "4rem";
689
693
  readonly 900: "4.5rem";
690
694
  };
695
+ fonts: {
696
+ readonly heading: "Roobert, sans-serif";
697
+ readonly body: "Open Sans, sans-serif";
698
+ };
691
699
  radii: {
692
700
  readonly none: 0;
693
701
  readonly half: "999em";
@@ -1160,6 +1168,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
1160
1168
  readonly 800: "4rem";
1161
1169
  readonly 900: "4.5rem";
1162
1170
  };
1171
+ fonts: {
1172
+ readonly heading: "Roobert, sans-serif";
1173
+ readonly body: "Open Sans, sans-serif";
1174
+ };
1163
1175
  radii: {
1164
1176
  readonly none: 0;
1165
1177
  readonly half: "999em";
@@ -1632,6 +1644,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
1632
1644
  readonly 800: "4rem";
1633
1645
  readonly 900: "4.5rem";
1634
1646
  };
1647
+ fonts: {
1648
+ readonly heading: "Roobert, sans-serif";
1649
+ readonly body: "Open Sans, sans-serif";
1650
+ };
1635
1651
  radii: {
1636
1652
  readonly none: 0;
1637
1653
  readonly half: "999em";
@@ -2106,6 +2122,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
2106
2122
  readonly 800: "4rem";
2107
2123
  readonly 900: "4.5rem";
2108
2124
  };
2125
+ fonts: {
2126
+ readonly heading: "Roobert, sans-serif";
2127
+ readonly body: "Open Sans, sans-serif";
2128
+ };
2109
2129
  radii: {
2110
2130
  readonly none: 0;
2111
2131
  readonly half: "999em";
@@ -2580,6 +2600,10 @@ declare const StyledButton: react.ForwardRefExoticComponent<Omit<Omit<{
2580
2600
  readonly 800: "4rem";
2581
2601
  readonly 900: "4.5rem";
2582
2602
  };
2603
+ fonts: {
2604
+ readonly heading: "Roobert, sans-serif";
2605
+ readonly body: "Open Sans, sans-serif";
2606
+ };
2583
2607
  radii: {
2584
2608
  readonly none: 0;
2585
2609
  readonly half: "999em";
@@ -3064,6 +3088,10 @@ declare const StyledIconSlot: react__default.ForwardRefExoticComponent<Omit<Omit
3064
3088
  readonly 800: "4rem";
3065
3089
  readonly 900: "4.5rem";
3066
3090
  };
3091
+ fonts: {
3092
+ readonly heading: "Roobert, sans-serif";
3093
+ readonly body: "Open Sans, sans-serif";
3094
+ };
3067
3095
  radii: {
3068
3096
  readonly none: 0;
3069
3097
  readonly half: "999em";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirohq/design-system-button",
3
- "version": "3.1.17",
3
+ "version": "3.1.19",
4
4
  "description": "",
5
5
  "author": "Miro",
6
6
  "source": "src/index.ts",
@@ -27,13 +27,13 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@react-aria/utils": "^3.13.0",
30
- "@mirohq/design-system-spinner": "^1.1.22",
31
- "@mirohq/design-system-styles": "^1.1.8",
32
- "@mirohq/design-system-stitches": "^2.3.11",
33
- "@mirohq/design-system-utils": "^0.14.3",
30
+ "@mirohq/design-system-base-button": "^0.4.22",
31
+ "@mirohq/design-system-primitive": "^1.1.1",
32
+ "@mirohq/design-system-spinner": "^1.1.23",
33
+ "@mirohq/design-system-stitches": "^2.3.12",
34
+ "@mirohq/design-system-styles": "^1.1.9",
34
35
  "@mirohq/design-system-types": "^0.6.2",
35
- "@mirohq/design-system-base-button": "^0.4.20",
36
- "@mirohq/design-system-primitive": "^1.1.1"
36
+ "@mirohq/design-system-utils": "^0.14.3"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@types/lodash.capitalize": "^4.2.7",