@mirohq/design-system-button 2.0.11

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.
package/dist/main.js ADDED
@@ -0,0 +1,396 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var button = require('@react-aria/button');
7
+ var utils = require('@react-aria/utils');
8
+ var designSystemSpinner = require('@mirohq/design-system-spinner');
9
+ var link = require('@react-aria/link');
10
+ var focus = require('@react-aria/focus');
11
+ var designSystemPrimitive = require('@mirohq/design-system-primitive');
12
+ var designSystemStitches = require('@mirohq/design-system-stitches');
13
+ var designSystemStyles = require('@mirohq/design-system-styles');
14
+
15
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
+
17
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
+
19
+ const focusFilled = {
20
+ "&[data-focused]": {
21
+ boxShadow: `inset 0 0 0 1px white, ${designSystemStyles.focus.defaults["&:focus-visible"].boxShadow}`
22
+ }
23
+ };
24
+ const focusOutline = {
25
+ "&[data-focused]": {
26
+ ...designSystemStyles.focus.defaults,
27
+ borderColor: "transparent"
28
+ }
29
+ };
30
+ const focusDefault = {
31
+ "&[data-focused]": designSystemStyles.focus.defaults
32
+ };
33
+ const pressedSelector = "&:active, &[data-pressed]";
34
+ const StyledButton = designSystemStitches.styled(designSystemPrimitive.Primitive.button, {
35
+ boxSizing: "border-box",
36
+ display: "inline-block",
37
+ outline: "none",
38
+ overflow: "hidden",
39
+ whiteSpace: "nowrap",
40
+ textOverflow: "ellipsis",
41
+ textAlign: "center",
42
+ verticalAlign: "middle",
43
+ userSelect: "none",
44
+ fontFamily: "inherit",
45
+ fontStyle: "normal",
46
+ fontStretch: "normal",
47
+ letterSpacing: "normal",
48
+ fontWeight: "normal",
49
+ position: "relative",
50
+ cursor: "pointer",
51
+ border: "none",
52
+ textDecoration: "none",
53
+ backgroundColor: "transparent",
54
+ "&[disabled]": {
55
+ pointerEvents: "none",
56
+ opacity: 0.4
57
+ },
58
+ variants: {
59
+ variant: {
60
+ primary: {},
61
+ secondary: {},
62
+ danger: {}
63
+ },
64
+ appearance: {
65
+ filled: {},
66
+ outlined: {},
67
+ flat: {}
68
+ },
69
+ size: {
70
+ large: {
71
+ padding: "14px 32px 18px 32px",
72
+ fontSize: "20px",
73
+ lineHeight: "28px",
74
+ height: "60px"
75
+ },
76
+ medium: {
77
+ padding: "11px 24px 13px 24px",
78
+ fontSize: "16px",
79
+ lineHeight: "24px",
80
+ height: "48px"
81
+ },
82
+ small: {
83
+ padding: "7px 16px 9px 16px",
84
+ fontSize: "14px",
85
+ lineHeight: "20px",
86
+ height: "36px"
87
+ },
88
+ "x-small": {
89
+ padding: "5px 12px 7px",
90
+ fontSize: "14px",
91
+ lineHeight: "20px",
92
+ height: "32px"
93
+ },
94
+ "xx-small": {
95
+ padding: "3px 12px",
96
+ fontSize: "12px",
97
+ lineHeight: "18px",
98
+ height: "24px"
99
+ }
100
+ },
101
+ rounded: {
102
+ true: {
103
+ borderRadius: "$half"
104
+ }
105
+ },
106
+ loading: {
107
+ true: {
108
+ "&[disabled]": {
109
+ cursor: "default",
110
+ opacity: 1,
111
+ pointerEvents: "none",
112
+ "& > span": {
113
+ visibility: "hidden"
114
+ }
115
+ }
116
+ }
117
+ },
118
+ fluid: {
119
+ true: {
120
+ width: "100%",
121
+ display: "block"
122
+ }
123
+ }
124
+ },
125
+ compoundVariants: [
126
+ {
127
+ size: "small",
128
+ rounded: true,
129
+ css: {
130
+ padding: "10px 16px",
131
+ height: "40px"
132
+ }
133
+ },
134
+ {
135
+ size: "large",
136
+ rounded: false,
137
+ css: {
138
+ borderRadius: "$50"
139
+ }
140
+ },
141
+ {
142
+ size: "medium",
143
+ rounded: false,
144
+ css: {
145
+ borderRadius: "$50"
146
+ }
147
+ },
148
+ {
149
+ size: "small",
150
+ rounded: false,
151
+ css: {
152
+ borderRadius: "$50"
153
+ }
154
+ },
155
+ {
156
+ size: "x-small",
157
+ rounded: false,
158
+ css: {
159
+ borderRadius: "$50"
160
+ }
161
+ },
162
+ {
163
+ size: "xx-small",
164
+ rounded: false,
165
+ css: {
166
+ borderRadius: "$25"
167
+ }
168
+ },
169
+ {
170
+ variant: "primary",
171
+ appearance: "filled",
172
+ css: {
173
+ color: "$font-cta-idle",
174
+ backgroundColor: "$background-cta-idle",
175
+ ...focusFilled,
176
+ "&:hover": {
177
+ color: "$white",
178
+ backgroundColor: "$background-cta-hover"
179
+ },
180
+ [pressedSelector]: {
181
+ backgroundColor: "$background-cta-active"
182
+ }
183
+ }
184
+ },
185
+ {
186
+ variant: "primary",
187
+ appearance: "outlined",
188
+ css: {
189
+ color: "rgba(66, 98, 255, 1)",
190
+ border: "1px solid rgba(66, 98, 255, 1)",
191
+ ...focusOutline,
192
+ "&:hover": {
193
+ color: "rgba(66, 98, 255, 1)",
194
+ backgroundColor: "rgba(244, 246, 255, 1)"
195
+ },
196
+ [pressedSelector]: {
197
+ backgroundColor: "rgba(240, 242, 255, 1)"
198
+ }
199
+ }
200
+ },
201
+ {
202
+ variant: "primary",
203
+ appearance: "flat",
204
+ css: {
205
+ color: "rgba(66, 98, 255, 1)",
206
+ ...focusDefault,
207
+ "&:hover": {
208
+ color: "rgba(69, 91, 237, 1)",
209
+ backgroundColor: "rgba(245, 245, 247, 1)"
210
+ },
211
+ [pressedSelector]: {
212
+ color: "rgba(61, 81, 212, 1)"
213
+ }
214
+ }
215
+ },
216
+ {
217
+ variant: "secondary",
218
+ appearance: "filled",
219
+ css: {
220
+ color: "rgba(5, 0, 56, 1)",
221
+ backgroundColor: "rgba(245, 245, 247, 1)",
222
+ ...focusFilled,
223
+ "&:hover": {
224
+ color: "rgba(5, 0, 56, 1)",
225
+ backgroundColor: "rgba(240, 240, 243, 1)"
226
+ },
227
+ [pressedSelector]: {
228
+ backgroundColor: "rgba(235, 235, 239, 1)"
229
+ }
230
+ }
231
+ },
232
+ {
233
+ variant: "secondary",
234
+ appearance: "outlined",
235
+ css: {
236
+ color: "rgba(5, 0, 56, 1)",
237
+ border: "1px solid rgba(205, 204, 215, 1)",
238
+ ...focusOutline,
239
+ "&:hover": {
240
+ color: "rgba(5, 0, 56, 1)",
241
+ backgroundColor: "rgba(245, 245, 247, 1)"
242
+ },
243
+ [pressedSelector]: {
244
+ backgroundColor: "rgba(235, 235, 239, 1)"
245
+ }
246
+ }
247
+ },
248
+ {
249
+ variant: "secondary",
250
+ appearance: "flat",
251
+ css: {
252
+ color: "rgba(5, 0, 56, 1)",
253
+ ...focusDefault,
254
+ "&:hover": {
255
+ color: "rgba(5, 0, 56, 1)",
256
+ backgroundColor: "rgba(245, 245, 247, 1)"
257
+ }
258
+ }
259
+ },
260
+ {
261
+ variant: "danger",
262
+ appearance: "filled",
263
+ css: {
264
+ color: "$white",
265
+ backgroundColor: "rgba(217, 41, 41, 1)",
266
+ ...focusFilled,
267
+ "&:hover": {
268
+ backgroundColor: "rgba(199, 20, 20, 1)"
269
+ },
270
+ [pressedSelector]: {
271
+ backgroundColor: "rgba(184, 13, 13, 1)"
272
+ }
273
+ }
274
+ },
275
+ {
276
+ variant: "danger",
277
+ appearance: "outlined",
278
+ css: {
279
+ color: "rgba(217, 41, 41, 1)",
280
+ border: "1px solid rgba(217, 41, 41, 1)",
281
+ ...focusOutline,
282
+ "&:hover": {
283
+ color: "rgba(217, 41, 41, 1)",
284
+ backgroundColor: "rgba(254, 247, 247, 1)"
285
+ },
286
+ [pressedSelector]: {
287
+ backgroundColor: "rgba(253, 242, 242, 1)"
288
+ }
289
+ }
290
+ },
291
+ {
292
+ variant: "danger",
293
+ appearance: "flat",
294
+ css: {
295
+ color: "rgba(217, 41, 41, 1)",
296
+ ...focusDefault,
297
+ "&:hover": {
298
+ color: "rgba(217, 41, 41, 1)",
299
+ backgroundColor: "rgba(245, 245, 247, 1)"
300
+ }
301
+ }
302
+ }
303
+ ]
304
+ });
305
+ const StyledSpinnerBox = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
306
+ display: "flex",
307
+ alignItems: "center",
308
+ justifyContent: "center",
309
+ position: "absolute",
310
+ top: 0,
311
+ left: 0,
312
+ bottom: 0,
313
+ right: 0,
314
+ margin: "auto"
315
+ });
316
+
317
+ const Button = React__default["default"].forwardRef(
318
+ ({
319
+ variant = "primary",
320
+ appearance = "filled",
321
+ size = "medium",
322
+ loading = false,
323
+ rounded = false,
324
+ fluid = false,
325
+ disabled = false,
326
+ href,
327
+ target,
328
+ rel,
329
+ children,
330
+ onPress,
331
+ onClick,
332
+ asChild,
333
+ ...restProps
334
+ }, forwardRef) => {
335
+ let spinnerSize;
336
+ if (typeof size === "string") {
337
+ spinnerSize = ["x-small", "xx-small"].includes(size) ? "small" : "medium";
338
+ } else {
339
+ spinnerSize = "medium";
340
+ }
341
+ const _loading = loading === "true" || loading === true;
342
+ const shouldBeDisabled = disabled || _loading;
343
+ const asLink = href != null;
344
+ const ref = React.useRef(null);
345
+ const refWithFallback = forwardRef != null ? forwardRef : ref;
346
+ const { buttonProps, isPressed } = button.useButton(
347
+ {
348
+ isDisabled: shouldBeDisabled,
349
+ href,
350
+ onPress: onPress != null ? onPress : onClick,
351
+ allowFocusWhenDisabled: false,
352
+ ...restProps
353
+ },
354
+ refWithFallback
355
+ );
356
+ const { linkProps } = link.useLink(
357
+ {
358
+ isDisabled: disabled,
359
+ onPress: onPress != null ? onPress : onClick,
360
+ ...restProps
361
+ },
362
+ refWithFallback
363
+ );
364
+ const elementProps = utils.mergeProps(restProps, asLink ? linkProps : buttonProps);
365
+ const Content = /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, _loading && /* @__PURE__ */ React__default["default"].createElement(StyledSpinnerBox, null, /* @__PURE__ */ React__default["default"].createElement(designSystemSpinner.Spinner, {
366
+ size: spinnerSize
367
+ })), /* @__PURE__ */ React__default["default"].createElement("span", null, children));
368
+ const tabIndexProp = shouldBeDisabled && {
369
+ tabIndex: -1
370
+ };
371
+ const { isFocusVisible, focusProps } = focus.useFocusRing();
372
+ return /* @__PURE__ */ React__default["default"].createElement(StyledButton, {
373
+ ...elementProps,
374
+ variant,
375
+ appearance,
376
+ size,
377
+ loading,
378
+ rounded,
379
+ fluid,
380
+ disabled: shouldBeDisabled,
381
+ asChild: asLink || asChild,
382
+ ...tabIndexProp,
383
+ ...focusProps,
384
+ "data-pressed": isPressed ? "" : void 0,
385
+ "data-focused": isFocusVisible ? "" : void 0,
386
+ ref: refWithFallback
387
+ }, asLink ? /* @__PURE__ */ React__default["default"].createElement("a", {
388
+ href,
389
+ target,
390
+ rel: target === "_blank" ? `noopener noreferrer ${rel}` : rel
391
+ }, Content) : Content);
392
+ }
393
+ );
394
+
395
+ exports.Button = Button;
396
+ //# sourceMappingURL=main.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"main.js","sources":["../src/button.styled.ts","../src/button.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { focus } from '@mirohq/design-system-styles'\n\nexport const focusFilled = {\n '&[data-focused]': {\n boxShadow: `inset 0 0 0 1px white, ${focus.defaults['&:focus-visible'].boxShadow}`,\n },\n}\n\nexport const focusOutline = {\n '&[data-focused]': {\n ...focus.defaults,\n borderColor: 'transparent',\n },\n}\n\nconst focusDefault = {\n '&[data-focused]': focus.defaults,\n}\n\nconst pressedSelector = '&:active, &[data-pressed]'\n\nexport const StyledButton = styled(Primitive.button, {\n boxSizing: 'border-box',\n display: 'inline-block',\n outline: 'none',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'center',\n verticalAlign: 'middle',\n userSelect: 'none',\n fontFamily: 'inherit',\n fontStyle: 'normal',\n fontStretch: 'normal',\n letterSpacing: 'normal',\n fontWeight: 'normal',\n position: 'relative',\n cursor: 'pointer',\n border: 'none',\n textDecoration: 'none',\n backgroundColor: 'transparent',\n '&[disabled]': {\n pointerEvents: 'none',\n opacity: 0.4,\n },\n variants: {\n variant: {\n primary: {},\n secondary: {},\n danger: {},\n },\n appearance: {\n filled: {},\n outlined: {},\n flat: {},\n },\n size: {\n large: {\n padding: '14px 32px 18px 32px',\n fontSize: '20px',\n lineHeight: '28px',\n height: '60px',\n },\n medium: {\n padding: '11px 24px 13px 24px',\n fontSize: '16px',\n lineHeight: '24px',\n height: '48px',\n },\n small: {\n padding: '7px 16px 9px 16px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '36px',\n },\n 'x-small': {\n padding: '5px 12px 7px',\n fontSize: '14px',\n lineHeight: '20px',\n height: '32px',\n },\n 'xx-small': {\n padding: '3px 12px',\n fontSize: '12px',\n lineHeight: '18px',\n height: '24px',\n },\n },\n rounded: {\n true: {\n borderRadius: '$half',\n },\n },\n loading: {\n true: {\n '&[disabled]': {\n cursor: 'default',\n opacity: 1,\n pointerEvents: 'none',\n '& > span': {\n visibility: 'hidden',\n },\n },\n },\n },\n fluid: {\n true: {\n width: '100%',\n display: 'block',\n },\n },\n },\n compoundVariants: [\n {\n size: 'small',\n rounded: true,\n css: {\n padding: '10px 16px',\n height: '40px',\n },\n },\n {\n size: 'large',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'medium',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'x-small',\n rounded: false,\n css: {\n borderRadius: '$50',\n },\n },\n {\n size: 'xx-small',\n rounded: false,\n css: {\n borderRadius: '$25',\n },\n },\n {\n variant: 'primary',\n appearance: 'filled',\n css: {\n color: '$font-cta-idle',\n backgroundColor: '$background-cta-idle',\n ...focusFilled,\n '&:hover': {\n color: '$white',\n backgroundColor: '$background-cta-hover',\n },\n [pressedSelector]: {\n backgroundColor: '$background-cta-active',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'outlined',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n border: '1px solid rgba(66, 98, 255, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(66, 98, 255, 1)',\n backgroundColor: 'rgba(244, 246, 255, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(240, 242, 255, 1)',\n },\n },\n },\n {\n variant: 'primary',\n appearance: 'flat',\n css: {\n color: 'rgba(66, 98, 255, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(69, 91, 237, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n color: 'rgba(61, 81, 212, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'filled',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n ...focusFilled,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(240, 240, 243, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'outlined',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n border: '1px solid rgba(205, 204, 215, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(235, 235, 239, 1)',\n },\n },\n },\n {\n variant: 'secondary',\n appearance: 'flat',\n css: {\n color: 'rgba(5, 0, 56, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(5, 0, 56, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'filled',\n css: {\n color: '$white',\n backgroundColor: 'rgba(217, 41, 41, 1)',\n ...focusFilled,\n '&:hover': {\n backgroundColor: 'rgba(199, 20, 20, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(184, 13, 13, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'outlined',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n border: '1px solid rgba(217, 41, 41, 1)',\n ...focusOutline,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(254, 247, 247, 1)',\n },\n [pressedSelector]: {\n backgroundColor: 'rgba(253, 242, 242, 1)',\n },\n },\n },\n {\n variant: 'danger',\n appearance: 'flat',\n css: {\n color: 'rgba(217, 41, 41, 1)',\n ...focusDefault,\n '&:hover': {\n color: 'rgba(217, 41, 41, 1)',\n backgroundColor: 'rgba(245, 245, 247, 1)',\n },\n },\n },\n ],\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 React, { useRef } from 'react'\nimport type { ElementRef, ReactNode } from 'react'\nimport { useButton } from '@react-aria/button'\nimport type { AriaButtonProps } from '@react-types/button'\nimport { mergeProps } from '@react-aria/utils'\nimport type { SpinnerProps } from '@mirohq/design-system-spinner'\nimport { Spinner } from '@mirohq/design-system-spinner'\nimport type { ScaleProp } from '@mirohq/design-system-types'\nimport { useLink } from '@react-aria/link'\nimport { useFocusRing } from '@react-aria/focus'\n\nimport type { StyledButtonProps } from './button.styled'\nimport { StyledButton, StyledSpinnerBox } from './button.styled'\n\ntype ButtonPropsA11y = StyledButtonProps & AriaButtonProps\n\nexport interface ButtonProps\n extends Omit<ButtonPropsA11y, 'onClick' | 'isDisabled' | 'elementType'> {\n /**\n * The content\n */\n children: ReactNode\n\n /**\n * Change the button color\n */\n variant?: StyledButtonProps['variant']\n\n /**\n * Change the button style\n */\n appearance?: StyledButtonProps['appearance']\n\n /**\n * Change the button height and font-size\n */\n size?: ScaleProp<StyledButtonProps['size']>\n\n /**\n * Make border-radius circle\n */\n rounded?: StyledButtonProps['rounded']\n\n /**\n * Add spinner and disable\n */\n loading?: StyledButtonProps['loading']\n\n /**\n * Make width 100%\n */\n fluid?: StyledButtonProps['fluid']\n\n /**\n * Prevent pointer events\n */\n disabled?: boolean\n\n /**\n * A URL to link when using the button as a link\n */\n href?: string\n\n /**\n * The target window using the button as a link\n */\n target?: string\n\n /**\n * The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n */\n rel?: string\n\n /**\n * Alias for onPress\n */\n onClick?: AriaButtonProps['onPress']\n}\n\nexport const Button = React.forwardRef<\n ElementRef<typeof StyledButton | 'a'>,\n ButtonProps\n>(\n (\n {\n variant = 'primary',\n appearance = 'filled',\n size = 'medium',\n loading = false,\n rounded = false,\n fluid = false,\n disabled = false,\n href,\n target,\n rel,\n children,\n onPress,\n onClick,\n asChild,\n ...restProps\n },\n forwardRef\n ) => {\n let spinnerSize: SpinnerProps['size']\n\n if (typeof size === 'string') {\n spinnerSize = ['x-small', 'xx-small'].includes(size) ? 'small' : 'medium'\n } else {\n spinnerSize = 'medium'\n }\n\n const _loading = loading === 'true' || loading === true\n const shouldBeDisabled = disabled || _loading\n\n const asLink = href != null\n\n const ref = useRef<HTMLButtonElement | HTMLAnchorElement>(null)\n const refWithFallback = forwardRef ?? ref\n const { buttonProps, isPressed } = useButton(\n {\n isDisabled: shouldBeDisabled,\n href,\n onPress: onPress ?? onClick,\n // @ts-expect-error\n allowFocusWhenDisabled: false,\n ...restProps,\n },\n refWithFallback\n )\n\n const { linkProps } = useLink(\n {\n isDisabled: disabled,\n onPress: onPress ?? onClick,\n ...restProps,\n },\n // @ts-expect-error\n refWithFallback\n )\n\n const elementProps = mergeProps(restProps, asLink ? linkProps : buttonProps)\n\n const Content = (\n <>\n {_loading && (\n <StyledSpinnerBox>\n <Spinner size={spinnerSize} />\n </StyledSpinnerBox>\n )}\n <span>{children}</span>\n </>\n )\n\n const tabIndexProp = shouldBeDisabled && {\n tabIndex: -1,\n }\n\n const { isFocusVisible, focusProps } = useFocusRing()\n\n return (\n <StyledButton\n {...elementProps}\n variant={variant}\n appearance={appearance}\n size={size}\n loading={loading}\n rounded={rounded}\n fluid={fluid}\n disabled={shouldBeDisabled}\n asChild={asLink || asChild}\n {...tabIndexProp}\n {...focusProps}\n data-pressed={isPressed ? '' : undefined}\n data-focused={isFocusVisible ? '' : undefined}\n // @ts-expect-error\n ref={refWithFallback}\n >\n {asLink ? (\n <a\n href={href}\n target={target}\n rel={target === '_blank' ? `noopener noreferrer ${rel}` : rel}\n >\n {Content}\n </a>\n ) : (\n Content\n )}\n </StyledButton>\n )\n }\n)\n"],"names":["focus","styled","Primitive","React","useRef","useButton","useLink","mergeProps","Spinner","useFocusRing"],"mappings":"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"}