@mirohq/design-system-button 3.2.0-deprecated-button.1 → 4.0.0-button-api-changes.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/main.js +310 -331
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +310 -331
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +78 -3
  6. package/package.json +9 -8
package/dist/main.js CHANGED
@@ -3,305 +3,317 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var React = require('react');
7
- var button = require('@react-aria/button');
8
- var utils = require('@react-aria/utils');
9
6
  var designSystemSpinner = require('@mirohq/design-system-spinner');
10
- var link = require('@react-aria/link');
11
- var focus = require('@react-aria/focus');
7
+ var designSystemUtils = require('@mirohq/design-system-utils');
8
+ var React = require('react');
9
+ var designSystemBaseButton = require('@mirohq/design-system-base-button');
10
+ var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
12
11
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
13
12
  var designSystemStitches = require('@mirohq/design-system-stitches');
13
+ var designSystemStyles = require('@mirohq/design-system-styles');
14
14
 
15
15
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
16
 
17
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
 
19
- const focusFilled = {
20
- "&[data-focused]": {
21
- boxShadow: "inset 0 0 0 1px white, 0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)"
19
+ const ButtonContext = React.createContext({});
20
+ const ButtonProvider = ({
21
+ children,
22
+ ...restProps
23
+ }) => /* @__PURE__ */ jsxRuntime.jsx(
24
+ ButtonContext.Provider,
25
+ {
26
+ value: {
27
+ ...restProps
28
+ },
29
+ children
30
+ }
31
+ );
32
+ const useButtonContext = () => React.useContext(ButtonContext);
33
+
34
+ const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {});
35
+ const buttonIconSizes = {
36
+ small: "small",
37
+ medium: "small",
38
+ large: "medium",
39
+ "x-large": "medium"
40
+ };
41
+ const buttonIconWeights = {
42
+ small: "thin",
43
+ medium: "thin",
44
+ large: "normal",
45
+ "x-large": "normal"
46
+ };
47
+ const IconSlot = React__default["default"].forwardRef(({ children, ...restProps }, forwardRef) => {
48
+ const { size } = useButtonContext();
49
+ const formattedChildren = designSystemUtils.addPropsToChildren(
50
+ children,
51
+ (child) => designSystemBaseIcon.isIconComponent(child),
52
+ {
53
+ "data-icon-component": "",
54
+ size: buttonIconSizes[size],
55
+ weight: buttonIconWeights[size]
56
+ }
57
+ );
58
+ return /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { ...restProps, ref: forwardRef, "aria-hidden": true, asChild: true, children: formattedChildren });
59
+ });
60
+
61
+ const disabledSelector = '&[disabled], &[aria-disabled="true"]';
62
+ const iconSlotSelector = "& ".concat(StyledIconSlot);
63
+ const externalIconSelector = "& svg:not([data-icon-component]), & img:not([data-icon-component])";
64
+ const solidDisabled = {
65
+ [disabledSelector]: {
66
+ backgroundColor: "$background-neutrals-disabled",
67
+ color: "$text-neutrals-disabled",
68
+ [iconSlotSelector]: {
69
+ color: "$icon-neutrals-disabled"
70
+ }
22
71
  }
23
72
  };
24
- const focusOutline = {
25
- "&[data-focused]": {
26
- boxShadow: "0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)",
27
- borderColor: "transparent"
73
+ const outlineDisabled = {
74
+ [disabledSelector]: {
75
+ backgroundColor: "$background-neutrals",
76
+ borderColor: "$border-neutrals-disabled",
77
+ color: "$text-neutrals-disabled",
78
+ [iconSlotSelector]: {
79
+ color: "$icon-neutrals-disabled"
80
+ }
28
81
  }
29
82
  };
30
- const focusDefault = {
31
- "&[data-focused]": {
32
- boxShadow: "0 0 0 1px rgba(104, 129, 255, 1), 0 0 0 5px rgba(217, 224, 255, 1)"
83
+ const ghostDisabled = {
84
+ [disabledSelector]: {
85
+ color: "$text-neutrals-disabled",
86
+ backgroundColor: "$transparent",
87
+ [iconSlotSelector]: {
88
+ color: "$icon-neutrals-disabled"
89
+ }
33
90
  }
34
91
  };
35
- const pressedSelector = "&:active, &[data-pressed]";
36
- const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
37
- boxSizing: "border-box",
38
- display: "inline-block",
39
- outline: "none",
92
+ const LABEL_OFFSET = 2;
93
+ const StyledButton = designSystemStitches.styled(designSystemBaseButton.BaseButton, {
40
94
  whiteSpace: "nowrap",
41
95
  textOverflow: "ellipsis",
42
96
  textAlign: "center",
43
- verticalAlign: "middle",
44
- userSelect: "none",
45
- fontFamily: "inherit",
46
- fontStyle: "normal",
47
- fontStretch: "normal",
48
- letterSpacing: "normal",
49
- fontWeight: "normal",
50
97
  position: "relative",
51
- cursor: "pointer",
52
- border: "none",
53
- textDecoration: "none",
54
- backgroundColor: "transparent",
55
- "&[disabled]": {
56
- pointerEvents: "none",
57
- opacity: 0.4
98
+ width: "fit-content",
99
+ maxWidth: "100%",
100
+ lineHeight: 1,
101
+ border: "1px solid transparent",
102
+ // to make outline and solid/ghost variants the same width
103
+ ...designSystemStyles.focus.css({
104
+ boxShadow: "$focus-small-outline",
105
+ borderColor: "$blue-400 !important"
106
+ }),
107
+ ["& ".concat(StyledIconSlot, ":first-child")]: {
108
+ marginLeft: -LABEL_OFFSET,
109
+ marginRight: "calc($50 + ".concat(LABEL_OFFSET, "px)")
110
+ },
111
+ ["& ".concat(StyledIconSlot, ":last-child")]: {
112
+ marginRight: -LABEL_OFFSET,
113
+ marginLeft: "calc($50 + ".concat(LABEL_OFFSET, "px)")
58
114
  },
59
115
  variants: {
60
116
  variant: {
61
- primary: {},
62
- secondary: {},
63
- danger: {}
64
- },
65
- appearance: {
66
- filled: {},
67
- outlined: {},
68
- flat: {}
69
- },
70
- size: {
71
- large: {
72
- padding: "14px 32px 18px 32px",
73
- fontSize: "20px",
74
- lineHeight: "28px",
75
- height: "60px"
117
+ primary: {
118
+ backgroundColor: "$background-primary-prominent",
119
+ color: "$text-primary-inverted",
120
+ [iconSlotSelector]: {
121
+ color: "$icon-primary-inverted"
122
+ },
123
+ "&[data-hovered]": {
124
+ backgroundColor: "$background-primary-prominent-hover"
125
+ },
126
+ "&[data-pressed]": {
127
+ backgroundColor: "$background-primary-prominent-active"
128
+ },
129
+ ...solidDisabled
76
130
  },
77
- medium: {
78
- padding: "11px 24px 13px 24px",
79
- fontSize: "16px",
80
- lineHeight: "24px",
81
- height: "48px"
131
+ secondary: {
132
+ backgroundColor: "$background-neutrals-subtle",
133
+ color: "$text-neutrals",
134
+ [iconSlotSelector]: {
135
+ color: "$icon-neutrals"
136
+ },
137
+ "&[data-hovered]": {
138
+ backgroundColor: "$background-neutrals-subtle-hover"
139
+ },
140
+ "&[data-pressed]": {
141
+ backgroundColor: "$background-neutrals-subtle-active"
142
+ },
143
+ ...solidDisabled
82
144
  },
83
- small: {
84
- padding: "7px 16px 9px 16px",
85
- fontSize: "14px",
86
- lineHeight: "20px",
87
- height: "36px"
145
+ tertiary: {
146
+ backgroundColor: "$background-neutrals",
147
+ borderColor: "$border-primary",
148
+ color: "$text-primary",
149
+ [iconSlotSelector]: {
150
+ color: "$icon-primary"
151
+ },
152
+ "&[data-hovered]": {
153
+ backgroundColor: "$background-primary-subtle-hover",
154
+ borderColor: "$border-primary-hover",
155
+ color: "$text-primary-hover",
156
+ [iconSlotSelector]: {
157
+ color: "$icon-primary-hover"
158
+ }
159
+ },
160
+ "&[data-pressed]": {
161
+ backgroundColor: "$background-primary-subtle-active",
162
+ borderColor: "$border-primary-active",
163
+ color: "$text-primary-active",
164
+ [iconSlotSelector]: {
165
+ color: "$icon-primary-active"
166
+ }
167
+ },
168
+ ...outlineDisabled
88
169
  },
89
- "x-small": {
90
- padding: "5px 12px 7px",
91
- fontSize: "14px",
92
- lineHeight: "20px",
93
- height: "32px"
170
+ ghost: {
171
+ backgroundColor: "transparent",
172
+ color: "$text-primary",
173
+ "&[data-hovered]": {
174
+ backgroundColor: "$background-primary-subtle-hover",
175
+ color: "$text-primary-hover",
176
+ [iconSlotSelector]: {
177
+ color: "$icon-primary-hover"
178
+ }
179
+ },
180
+ "&[data-pressed]": {
181
+ backgroundColor: "$background-primary-subtle-active",
182
+ color: "$text-primary-active",
183
+ [iconSlotSelector]: {
184
+ color: "$icon-primary-active"
185
+ }
186
+ },
187
+ ...ghostDisabled
94
188
  },
95
- "xx-small": {
96
- padding: "3px 12px",
97
- fontSize: "12px",
98
- lineHeight: "18px",
99
- height: "24px"
100
- }
101
- },
102
- rounded: {
103
- true: {
104
- borderRadius: "$half"
105
- }
106
- },
107
- loading: {
108
- true: {
109
- "&[disabled]": {
110
- cursor: "default",
111
- opacity: 1,
112
- pointerEvents: "none",
113
- "& > span": {
114
- visibility: "hidden"
189
+ "ghost-subtle": {
190
+ backgroundColor: "transparent",
191
+ color: "$text-neutrals",
192
+ [iconSlotSelector]: {
193
+ color: "$icon-neutrals"
194
+ },
195
+ "&[data-hovered]": {
196
+ backgroundColor: "$background-neutrals-subtle-hover"
197
+ },
198
+ "&[data-pressed]": {
199
+ backgroundColor: "$background-neutrals-subtle-active"
200
+ },
201
+ ...ghostDisabled
202
+ },
203
+ danger: {
204
+ backgroundColor: "$background-danger-prominent",
205
+ color: "$text-danger-inverted",
206
+ [iconSlotSelector]: {
207
+ color: "$icon-danger-inverted"
208
+ },
209
+ "&[data-hovered]": {
210
+ backgroundColor: "$background-danger-prominent-hover"
211
+ },
212
+ "&[data-pressed]": {
213
+ backgroundColor: "$background-danger-prominent-active"
214
+ },
215
+ ...solidDisabled
216
+ },
217
+ "danger-secondary": {
218
+ borderColor: "$border-danger",
219
+ color: "$text-danger",
220
+ [iconSlotSelector]: {
221
+ color: "$icon-danger"
222
+ },
223
+ "&[data-hovered]": {
224
+ backgroundColor: "$background-danger-subtle",
225
+ color: "$text-danger-hover",
226
+ [iconSlotSelector]: {
227
+ color: "$icon-danger-hover"
115
228
  }
116
- }
117
- }
118
- },
119
- fluid: {
120
- true: {
121
- width: "100%",
122
- display: "block"
123
- }
124
- }
125
- },
126
- compoundVariants: [
127
- {
128
- size: "small",
129
- rounded: true,
130
- css: {
131
- padding: "10px 16px",
132
- height: "40px"
133
- }
134
- },
135
- {
136
- size: "large",
137
- rounded: false,
138
- css: {
139
- borderRadius: "$50"
140
- }
141
- },
142
- {
143
- size: "medium",
144
- rounded: false,
145
- css: {
146
- borderRadius: "$50"
147
- }
148
- },
149
- {
150
- size: "small",
151
- rounded: false,
152
- css: {
153
- borderRadius: "$50"
154
- }
155
- },
156
- {
157
- size: "x-small",
158
- rounded: false,
159
- css: {
160
- borderRadius: "$50"
161
- }
162
- },
163
- {
164
- size: "xx-small",
165
- rounded: false,
166
- css: {
167
- borderRadius: "$25"
168
- }
169
- },
170
- {
171
- variant: "primary",
172
- appearance: "filled",
173
- css: {
174
- color: "#FFFFFF",
175
- backgroundColor: "#3859FF",
176
- ...focusFilled,
177
- "&:hover": {
178
- color: "#FFFFFF",
179
- backgroundColor: "#3F53D9"
180
229
  },
181
- [pressedSelector]: {
182
- backgroundColor: "#122277"
183
- }
184
- }
185
- },
186
- {
187
- variant: "primary",
188
- appearance: "outlined",
189
- css: {
190
- color: "rgba(66, 98, 255, 1)",
191
- border: "1px solid rgba(66, 98, 255, 1)",
192
- ...focusOutline,
193
- "&:hover": {
194
- color: "rgba(66, 98, 255, 1)",
195
- backgroundColor: "rgba(244, 246, 255, 1)"
230
+ "&[data-pressed]": {
231
+ backgroundColor: "$background-danger-subtle-hover",
232
+ color: "$text-danger-active",
233
+ [iconSlotSelector]: {
234
+ color: "$icon-danger-active"
235
+ }
196
236
  },
197
- [pressedSelector]: {
198
- backgroundColor: "rgba(240, 242, 255, 1)"
199
- }
200
- }
201
- },
202
- {
203
- variant: "primary",
204
- appearance: "flat",
205
- css: {
206
- color: "rgba(66, 98, 255, 1)",
207
- ...focusDefault,
208
- "&:hover": {
209
- color: "rgba(69, 91, 237, 1)",
210
- backgroundColor: "rgba(245, 245, 247, 1)"
237
+ ...outlineDisabled
238
+ },
239
+ "ghost-danger": {
240
+ backgroundColor: "transparent",
241
+ color: "$text-danger",
242
+ [iconSlotSelector]: {
243
+ color: "$icon-danger"
211
244
  },
212
- [pressedSelector]: {
213
- color: "rgba(61, 81, 212, 1)"
214
- }
215
- }
216
- },
217
- {
218
- variant: "secondary",
219
- appearance: "filled",
220
- css: {
221
- color: "rgba(5, 0, 56, 1)",
222
- backgroundColor: "rgba(245, 245, 247, 1)",
223
- ...focusFilled,
224
- "&:hover": {
225
- color: "rgba(5, 0, 56, 1)",
226
- backgroundColor: "rgba(240, 240, 243, 1)"
245
+ "&[data-hovered]": {
246
+ backgroundColor: "$background-danger-subtle",
247
+ color: "$text-danger-hover",
248
+ [iconSlotSelector]: {
249
+ color: "$icon-danger-hover"
250
+ }
227
251
  },
228
- [pressedSelector]: {
229
- backgroundColor: "rgba(235, 235, 239, 1)"
230
- }
231
- }
232
- },
233
- {
234
- variant: "secondary",
235
- appearance: "outlined",
236
- css: {
237
- color: "rgba(5, 0, 56, 1)",
238
- border: "1px solid rgba(205, 204, 215, 1)",
239
- ...focusOutline,
240
- "&:hover": {
241
- color: "rgba(5, 0, 56, 1)",
242
- backgroundColor: "rgba(245, 245, 247, 1)"
252
+ "&[data-pressed]": {
253
+ backgroundColor: "$background-danger-subtle-hover",
254
+ color: "$text-danger-active",
255
+ [iconSlotSelector]: {
256
+ color: "$icon-danger-active"
257
+ }
243
258
  },
244
- [pressedSelector]: {
245
- backgroundColor: "rgba(235, 235, 239, 1)"
246
- }
259
+ ...ghostDisabled
247
260
  }
248
261
  },
249
- {
250
- variant: "secondary",
251
- appearance: "flat",
252
- css: {
253
- color: "rgba(5, 0, 56, 1)",
254
- ...focusDefault,
255
- "&:hover": {
256
- color: "rgba(5, 0, 56, 1)",
257
- backgroundColor: "rgba(245, 245, 247, 1)"
262
+ size: {
263
+ "x-large": {
264
+ height: designSystemBaseButton.sizes.xLarge,
265
+ fontSize: "$200",
266
+ paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
267
+ [externalIconSelector]: {
268
+ ...designSystemBaseIcon.styles.size.medium,
269
+ ...designSystemBaseIcon.styles.weight.normal
258
270
  }
259
- }
260
- },
261
- {
262
- variant: "danger",
263
- appearance: "filled",
264
- css: {
265
- color: "#FFFFFF",
266
- backgroundColor: "rgba(217, 41, 41, 1)",
267
- ...focusFilled,
268
- "&:hover": {
269
- backgroundColor: "rgba(199, 20, 20, 1)"
270
- },
271
- [pressedSelector]: {
272
- backgroundColor: "rgba(184, 13, 13, 1)"
271
+ },
272
+ large: {
273
+ height: designSystemBaseButton.sizes.large,
274
+ fontSize: "$200",
275
+ paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
276
+ [externalIconSelector]: {
277
+ ...designSystemBaseIcon.styles.size.medium,
278
+ ...designSystemBaseIcon.styles.weight.normal
279
+ }
280
+ },
281
+ medium: {
282
+ height: designSystemBaseButton.sizes.medium,
283
+ fontSize: "$175",
284
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
285
+ [externalIconSelector]: {
286
+ ...designSystemBaseIcon.styles.size.small,
287
+ ...designSystemBaseIcon.styles.weight.thin
288
+ }
289
+ },
290
+ small: {
291
+ fontSize: "$175",
292
+ height: "$6",
293
+ paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
294
+ [externalIconSelector]: {
295
+ ...designSystemBaseIcon.styles.size.small,
296
+ ...designSystemBaseIcon.styles.weight.thin
273
297
  }
274
298
  }
275
299
  },
276
- {
277
- variant: "danger",
278
- appearance: "outlined",
279
- css: {
280
- color: "rgba(217, 41, 41, 1)",
281
- border: "1px solid rgba(217, 41, 41, 1)",
282
- ...focusOutline,
283
- "&:hover": {
284
- color: "rgba(217, 41, 41, 1)",
285
- backgroundColor: "rgba(254, 247, 247, 1)"
286
- },
287
- [pressedSelector]: {
288
- backgroundColor: "rgba(253, 242, 242, 1)"
289
- }
300
+ rounded: {
301
+ true: {
302
+ borderRadius: "$round"
290
303
  }
291
304
  },
292
- {
293
- variant: "danger",
294
- appearance: "flat",
295
- css: {
296
- color: "rgba(217, 41, 41, 1)",
297
- ...focusDefault,
298
- "&:hover": {
299
- color: "rgba(217, 41, 41, 1)",
300
- backgroundColor: "rgba(245, 245, 247, 1)"
301
- }
305
+ fluid: {
306
+ true: {
307
+ display: "flex",
308
+ justifyContent: "center",
309
+ maxWidth: "100%",
310
+ width: "100%"
302
311
  }
303
312
  }
304
- ]
313
+ }
314
+ });
315
+ const StyledHiddenContent = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
316
+ visibility: "hidden"
305
317
  });
306
318
  const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
307
319
  display: "flex",
@@ -315,97 +327,64 @@ const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primi
315
327
  margin: "auto"
316
328
  });
317
329
 
330
+ const Label = designSystemPrimitive.Primitive.span;
331
+ Label.displayName = "Label";
332
+
318
333
  const Button = React__default["default"].forwardRef(
319
334
  ({
320
335
  variant = "primary",
321
- appearance = "filled",
322
- size = "medium",
336
+ size = "large",
323
337
  loading = false,
324
338
  rounded = false,
325
339
  fluid = false,
326
- disabled = false,
327
- href,
328
- target,
329
- rel,
340
+ "aria-disabled": ariaDisabled,
341
+ asChild = false,
330
342
  children,
331
- onPress,
332
- onClick,
333
- asChild,
334
343
  ...restProps
335
344
  }, forwardRef) => {
336
- let spinnerSize;
337
- if (typeof size === "string") {
338
- spinnerSize = ["x-small", "xx-small"].includes(size) ? "small" : "medium";
339
- } else {
340
- spinnerSize = "medium";
345
+ let spinnerSize = "medium";
346
+ if (typeof size === "string" && ["small", "medium"].includes(size)) {
347
+ spinnerSize = "small";
341
348
  }
342
- const _loading = loading === "true" || loading === true;
343
- const shouldBeDisabled = disabled === true || _loading;
344
- const asLink = href != null;
345
- const ref = React.useRef(null);
346
- const refWithFallback = forwardRef != null ? forwardRef : ref;
347
- const { buttonProps, isPressed } = button.useButton(
348
- {
349
- isDisabled: shouldBeDisabled,
350
- href,
351
- onPress: onPress != null ? onPress : onClick,
352
- allowFocusWhenDisabled: false,
353
- ...restProps
354
- },
355
- // @ts-expect-error
356
- refWithFallback
357
- );
358
- const { linkProps } = link.useLink(
359
- {
360
- isDisabled: disabled,
361
- onPress: onPress != null ? onPress : onClick,
362
- ...restProps
363
- },
364
- // @ts-expect-error
365
- refWithFallback
366
- );
367
- const Content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
368
- _loading && /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerBox, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize }) }),
369
- /* @__PURE__ */ jsxRuntime.jsx("span", { children })
370
- ] });
371
- const tabIndexProp = shouldBeDisabled && {
372
- tabIndex: -1
373
- };
374
- const { isFocusVisible, focusProps } = focus.useFocusRing();
375
- const elementProps = utils.mergeProps(
376
- restProps,
377
- asLink ? linkProps : buttonProps,
378
- focusProps
379
- );
380
- return /* @__PURE__ */ jsxRuntime.jsx(
349
+ const shouldHaveAriaDisabled = designSystemUtils.booleanify(ariaDisabled) || loading;
350
+ let formattedChildren = children;
351
+ if (loading) {
352
+ const spinnerTestId = process.env.NODE_ENV === "test" ? "button-spinner" : void 0;
353
+ if (asChild && React__default["default"].Children.toArray(children).length === 1 && React__default["default"].isValidElement(children)) {
354
+ const firstLevelChild = React__default["default"].Children.only(children);
355
+ const { children: secondLevelChildren, ...childProps } = firstLevelChild.props;
356
+ formattedChildren = React__default["default"].cloneElement(firstLevelChild, {
357
+ ...childProps,
358
+ children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
359
+ /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize }) }),
360
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHiddenContent, { children: secondLevelChildren })
361
+ ] })
362
+ });
363
+ } else {
364
+ formattedChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
365
+ /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize }) }),
366
+ /* @__PURE__ */ jsxRuntime.jsx(StyledHiddenContent, { children })
367
+ ] });
368
+ }
369
+ }
370
+ return /* @__PURE__ */ jsxRuntime.jsx(ButtonProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
381
371
  StyledButton,
382
372
  {
383
- ...elementProps,
373
+ ...restProps,
374
+ asChild,
384
375
  variant,
385
- appearance,
386
- size,
387
- loading,
388
376
  rounded,
389
377
  fluid,
390
- disabled: shouldBeDisabled,
391
- asChild: asLink || asChild,
392
- ...tabIndexProp,
393
- "data-pressed": isPressed ? "" : void 0,
394
- "data-focused": isFocusVisible ? "" : void 0,
395
- ref: refWithFallback,
396
- children: asLink ? /* @__PURE__ */ jsxRuntime.jsx(
397
- "a",
398
- {
399
- href,
400
- target,
401
- rel: target === "_blank" ? "noopener noreferrer ".concat(rel) : rel,
402
- children: Content
403
- }
404
- ) : Content
378
+ size,
379
+ "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
380
+ ref: forwardRef,
381
+ children: formattedChildren
405
382
  }
406
- );
383
+ ) });
407
384
  }
408
385
  );
386
+ Button.IconSlot = IconSlot;
387
+ Button.Label = Label;
409
388
 
410
389
  exports.Button = Button;
411
390
  //# sourceMappingURL=main.js.map