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