@mirohq/design-system-button 3.1.55 → 3.2.0-deprecated-button-0.0.0.1

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 +331 -328
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +332 -329
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +3 -78
  6. package/package.json +6 -7
package/dist/main.js CHANGED
@@ -4,334 +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 designSystemUtils = require('@mirohq/design-system-utils');
7
+ var button = require('@react-aria/button');
8
+ var utils = require('@react-aria/utils');
8
9
  var designSystemSpinner = require('@mirohq/design-system-spinner');
10
+ var link = require('@react-aria/link');
11
+ var focus = require('@react-aria/focus');
9
12
  var designSystemPrimitive = require('@mirohq/design-system-primitive');
10
13
  var designSystemStitches = require('@mirohq/design-system-stitches');
11
- var designSystemBaseButton = require('@mirohq/design-system-base-button');
12
- var designSystemBaseIcon = require('@mirohq/design-system-base-icon');
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 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
- }
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)"
71
22
  }
72
23
  };
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
- }
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"
81
28
  }
82
29
  };
83
- const ghostDisabled = {
84
- [disabledSelector]: {
85
- color: "$text-neutrals-disabled",
86
- backgroundColor: "$transparent",
87
- [iconSlotSelector]: {
88
- color: "$icon-neutrals-disabled"
89
- }
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)"
90
33
  }
91
34
  };
92
- const LABEL_OFFSET = 2;
93
- 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",
94
40
  whiteSpace: "nowrap",
95
41
  textOverflow: "ellipsis",
96
42
  textAlign: "center",
43
+ verticalAlign: "middle",
44
+ userSelect: "none",
45
+ fontFamily: "inherit",
46
+ fontStyle: "normal",
47
+ fontStretch: "normal",
48
+ letterSpacing: "normal",
49
+ fontWeight: "normal",
97
50
  position: "relative",
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)")
51
+ cursor: "pointer",
52
+ border: "none",
53
+ textDecoration: "none",
54
+ backgroundColor: "transparent",
55
+ "&[disabled]": {
56
+ pointerEvents: "none",
57
+ opacity: 0.4
114
58
  },
115
59
  variants: {
116
60
  variant: {
117
- "solid-prominent": {
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
130
- },
131
- "outline-prominent": {
132
- backgroundColor: "$background-neutrals",
133
- borderColor: "$border-primary",
134
- color: "$text-primary",
135
- [iconSlotSelector]: {
136
- color: "$icon-primary"
137
- },
138
- "&[data-hovered]": {
139
- backgroundColor: "$background-primary-subtle-hover",
140
- borderColor: "$border-primary-hover",
141
- color: "$text-primary-hover",
142
- [iconSlotSelector]: {
143
- color: "$icon-primary-hover"
144
- }
145
- },
146
- "&[data-pressed]": {
147
- backgroundColor: "$background-primary-subtle-active",
148
- borderColor: "$border-primary-active",
149
- color: "$text-primary-active",
150
- [iconSlotSelector]: {
151
- color: "$icon-primary-active"
152
- }
153
- },
154
- ...outlineDisabled
155
- },
156
- "ghost-prominent": {
157
- backgroundColor: "transparent",
158
- color: "$text-primary",
159
- "&[data-hovered]": {
160
- backgroundColor: "$background-primary-subtle-hover",
161
- color: "$text-primary-hover",
162
- [iconSlotSelector]: {
163
- color: "$icon-primary-hover"
164
- }
165
- },
166
- "&[data-pressed]": {
167
- backgroundColor: "$background-primary-subtle-active",
168
- color: "$text-primary-active",
169
- [iconSlotSelector]: {
170
- color: "$icon-primary-active"
171
- }
172
- },
173
- ...ghostDisabled
174
- },
175
- "solid-subtle": {
176
- backgroundColor: "$background-neutrals-subtle",
177
- color: "$text-neutrals",
178
- [iconSlotSelector]: {
179
- color: "$icon-neutrals"
180
- },
181
- "&[data-hovered]": {
182
- backgroundColor: "$background-neutrals-subtle-hover"
183
- },
184
- "&[data-pressed]": {
185
- backgroundColor: "$background-neutrals-subtle-active"
186
- },
187
- ...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"
188
76
  },
189
- "outline-subtle": {
190
- backgroundColor: "$background-neutrals",
191
- border: "1px solid $border-neutrals",
192
- color: "$text-neutrals",
193
- [iconSlotSelector]: {
194
- color: "$icon-neutrals"
195
- },
196
- "&[data-hovered]": {
197
- backgroundColor: "$background-neutrals-subtle-hover",
198
- borderColor: "$border-neutrals-hover"
199
- },
200
- "&[data-pressed]": {
201
- backgroundColor: "$background-neutrals-subtle-active",
202
- borderColor: "$border-neutrals-active"
203
- },
204
- ...outlineDisabled
77
+ medium: {
78
+ padding: "11px 24px 13px 24px",
79
+ fontSize: "16px",
80
+ lineHeight: "24px",
81
+ height: "48px"
205
82
  },
206
- "ghost-subtle": {
207
- backgroundColor: "transparent",
208
- color: "$text-neutrals",
209
- [iconSlotSelector]: {
210
- color: "$icon-neutrals"
211
- },
212
- "&[data-hovered]": {
213
- backgroundColor: "$background-neutrals-subtle-hover"
214
- },
215
- "&[data-pressed]": {
216
- backgroundColor: "$background-neutrals-subtle-active"
217
- },
218
- ...ghostDisabled
83
+ small: {
84
+ padding: "7px 16px 9px 16px",
85
+ fontSize: "14px",
86
+ lineHeight: "20px",
87
+ height: "36px"
219
88
  },
220
- "solid-danger": {
221
- backgroundColor: "$background-danger-prominent",
222
- color: "$text-danger-inverted",
223
- [iconSlotSelector]: {
224
- color: "$icon-danger-inverted"
225
- },
226
- "&[data-hovered]": {
227
- backgroundColor: "$background-danger-prominent-hover"
228
- },
229
- "&[data-pressed]": {
230
- backgroundColor: "$background-danger-prominent-active"
231
- },
232
- ...solidDisabled
89
+ "x-small": {
90
+ padding: "5px 12px 7px",
91
+ fontSize: "14px",
92
+ lineHeight: "20px",
93
+ height: "32px"
233
94
  },
234
- "outline-danger": {
235
- backgroundColor: "$background-neutrals",
236
- borderColor: "$border-danger",
237
- color: "$text-danger",
238
- [iconSlotSelector]: {
239
- color: "$icon-danger"
240
- },
241
- "&[data-hovered]": {
242
- backgroundColor: "$background-danger-subtle",
243
- color: "$text-danger-hover",
244
- [iconSlotSelector]: {
245
- color: "$icon-danger-hover"
246
- }
247
- },
248
- "&[data-pressed]": {
249
- backgroundColor: "$background-danger-subtle-hover",
250
- color: "$text-danger-active",
251
- [iconSlotSelector]: {
252
- 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"
253
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"
254
180
  },
255
- ...outlineDisabled
256
- },
257
- "ghost-danger": {
258
- backgroundColor: "transparent",
259
- color: "$text-danger",
260
- [iconSlotSelector]: {
261
- color: "$icon-danger"
262
- },
263
- "&[data-hovered]": {
264
- backgroundColor: "$background-danger-subtle",
265
- color: "$text-danger-hover",
266
- [iconSlotSelector]: {
267
- color: "$icon-danger-hover"
268
- }
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)"
269
196
  },
270
- "&[data-pressed]": {
271
- backgroundColor: "$background-danger-subtle-hover",
272
- color: "$text-danger-active",
273
- [iconSlotSelector]: {
274
- color: "$icon-danger-active"
275
- }
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)"
276
211
  },
277
- ...ghostDisabled
212
+ [pressedSelector]: {
213
+ color: "rgba(61, 81, 212, 1)"
214
+ }
278
215
  }
279
216
  },
280
- size: {
281
- "x-large": {
282
- height: designSystemBaseButton.sizes.xLarge,
283
- fontSize: "$200",
284
- paddingX: "calc($200 + ".concat(LABEL_OFFSET, "px)"),
285
- [externalIconSelector]: {
286
- ...designSystemBaseIcon.styles.size.medium,
287
- ...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)"
288
230
  }
289
- },
290
- large: {
291
- height: designSystemBaseButton.sizes.large,
292
- fontSize: "$200",
293
- paddingX: "calc($150 + ".concat(LABEL_OFFSET, "px)"),
294
- [externalIconSelector]: {
295
- ...designSystemBaseIcon.styles.size.medium,
296
- ...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)"
297
246
  }
298
- },
299
- medium: {
300
- height: designSystemBaseButton.sizes.medium,
301
- fontSize: "$175",
302
- paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
303
- [externalIconSelector]: {
304
- ...designSystemBaseIcon.styles.size.small,
305
- ...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)"
306
258
  }
307
- },
308
- small: {
309
- fontSize: "$175",
310
- height: "$6",
311
- paddingX: "calc($100 + ".concat(LABEL_OFFSET, "px)"),
312
- [externalIconSelector]: {
313
- ...designSystemBaseIcon.styles.size.small,
314
- ...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)"
315
273
  }
316
274
  }
317
275
  },
318
- rounded: {
319
- true: {
320
- borderRadius: "$round"
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
+ }
321
290
  }
322
291
  },
323
- fluid: {
324
- true: {
325
- display: "flex",
326
- justifyContent: "center",
327
- maxWidth: "100%",
328
- 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
+ }
329
302
  }
330
303
  }
331
- }
332
- });
333
- const StyledHiddenContent = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
334
- visibility: "hidden"
304
+ ]
335
305
  });
336
306
  const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
337
307
  display: "flex",
@@ -345,64 +315,97 @@ const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primi
345
315
  margin: "auto"
346
316
  });
347
317
 
348
- const Label = designSystemPrimitive.Primitive.span;
349
- Label.displayName = "Label";
350
-
351
318
  const Button = React__default["default"].forwardRef(
352
319
  ({
353
- variant = "solid-prominent",
354
- size = "large",
320
+ variant = "primary",
321
+ appearance = "filled",
322
+ size = "medium",
355
323
  loading = false,
356
324
  rounded = false,
357
325
  fluid = false,
358
- "aria-disabled": ariaDisabled,
359
- asChild = false,
326
+ disabled = false,
327
+ href,
328
+ target,
329
+ rel,
360
330
  children,
331
+ onPress,
332
+ onClick,
333
+ asChild,
361
334
  ...restProps
362
335
  }, forwardRef) => {
363
- let spinnerSize = "medium";
364
- if (typeof size === "string" && ["small", "medium"].includes(size)) {
365
- 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";
366
341
  }
367
- const shouldHaveAriaDisabled = designSystemUtils.booleanify(ariaDisabled) || loading;
368
- let formattedChildren = children;
369
- if (loading) {
370
- const spinnerTestId = process.env.NODE_ENV === "test" ? "button-spinner" : void 0;
371
- if (asChild && React__default["default"].Children.toArray(children).length === 1 && React__default["default"].isValidElement(children)) {
372
- const firstLevelChild = React__default["default"].Children.only(children);
373
- const { children: secondLevelChildren, ...childProps } = firstLevelChild.props;
374
- formattedChildren = React__default["default"].cloneElement(firstLevelChild, {
375
- ...childProps,
376
- children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
377
- /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize }) }),
378
- /* @__PURE__ */ jsxRuntime.jsx(StyledHiddenContent, { children: secondLevelChildren })
379
- ] })
380
- });
381
- } else {
382
- formattedChildren = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
383
- /* @__PURE__ */ jsxRuntime.jsx(StyledSpinnerBox, { "data-testid": spinnerTestId, children: /* @__PURE__ */ jsxRuntime.jsx(designSystemSpinner.Spinner, { size: spinnerSize }) }),
384
- /* @__PURE__ */ jsxRuntime.jsx(StyledHiddenContent, { children })
385
- ] });
386
- }
387
- }
388
- return /* @__PURE__ */ jsxRuntime.jsx(ButtonProvider, { size, children: /* @__PURE__ */ jsxRuntime.jsx(
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(
389
381
  StyledButton,
390
382
  {
391
- ...restProps,
392
- asChild,
383
+ ...elementProps,
393
384
  variant,
385
+ appearance,
386
+ size,
387
+ loading,
394
388
  rounded,
395
389
  fluid,
396
- size,
397
- "aria-disabled": shouldHaveAriaDisabled ? true : void 0,
398
- ref: forwardRef,
399
- children: formattedChildren
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
400
405
  }
401
- ) });
406
+ );
402
407
  }
403
408
  );
404
- Button.IconSlot = IconSlot;
405
- Button.Label = Label;
406
409
 
407
410
  exports.Button = Button;
408
411
  //# sourceMappingURL=main.js.map