@teamturing/react-kit 1.1.5 → 1.2.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 (32) hide show
  1. package/dist/core/Button/index.d.ts +71 -0
  2. package/dist/core/GradientText/index.d.ts +5 -5
  3. package/dist/core/Grid/index.d.ts +2 -2
  4. package/dist/core/IconButton/index.d.ts +1 -1
  5. package/dist/core/Stack/index.d.ts +2 -2
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +457 -107
  8. package/esm/packages/icons/{src → esm}/ProgressGradient.js +1 -1
  9. package/esm/packages/icons/esm/_virtual/_rollupPluginBabelHelpers.js +16 -0
  10. package/esm/packages/react-kit/src/core/Button/index.js +347 -0
  11. package/esm/packages/react-kit/src/core/Chip/index.js +3 -3
  12. package/esm/packages/react-kit/src/core/Grid/index.js +1 -1
  13. package/esm/packages/react-kit/src/core/IconButton/index.js +2 -2
  14. package/esm/packages/react-kit/src/core/IconToggleButton/index.js +2 -2
  15. package/esm/packages/react-kit/src/core/Spinner/index.js +2 -2
  16. package/esm/packages/react-kit/src/core/Stack/index.js +1 -1
  17. package/esm/packages/react-kit/src/core/Text/index.js +1 -1
  18. package/esm/packages/react-kit/src/index.js +1 -0
  19. package/package.json +7 -6
  20. /package/esm/packages/token-studio/{src → esm}/foundation/palette/index.js +0 -0
  21. /package/esm/packages/token-studio/{src → esm}/foundation/rounding/index.js +0 -0
  22. /package/esm/packages/token-studio/{src → esm}/foundation/spacing/index.js +0 -0
  23. /package/esm/packages/token-studio/{src → esm}/foundation/typography/fontSize/index.js +0 -0
  24. /package/esm/packages/token-studio/{src → esm}/foundation/typography/fontWeight/index.js +0 -0
  25. /package/esm/packages/token-studio/{src → esm}/foundation/typography/lineHeight/index.js +0 -0
  26. /package/esm/packages/token-studio/{src → esm}/token/color/index.js +0 -0
  27. /package/esm/packages/token-studio/{src → esm}/token/radii/index.js +0 -0
  28. /package/esm/packages/token-studio/{src → esm}/token/space/index.js +0 -0
  29. /package/esm/packages/token-studio/{src → esm}/token/typography/fontSizes.js +0 -0
  30. /package/esm/packages/token-studio/{src → esm}/token/typography/fontWeights.js +0 -0
  31. /package/esm/packages/token-studio/{src → esm}/token/typography/index.js +0 -0
  32. /package/esm/packages/token-studio/{src → esm}/token/typography/lineHeights.js +0 -0
package/dist/index.js CHANGED
@@ -21,6 +21,21 @@ function _interopNamespaceDefault(e) {
21
21
 
22
22
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React$1);
23
23
 
24
+ function _extends$2() {
25
+ _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
26
+ for (var i = 1; i < arguments.length; i++) {
27
+ var source = arguments[i];
28
+ for (var key in source) {
29
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
30
+ target[key] = source[key];
31
+ }
32
+ }
33
+ }
34
+ return target;
35
+ };
36
+ return _extends$2.apply(this, arguments);
37
+ }
38
+
24
39
  const gray = {
25
40
  gray50: '#F9FAFB',
26
41
  gray100: '#F3F4F6',
@@ -395,23 +410,6 @@ const fontSize$1 = {
395
410
  fontSize1300: 100
396
411
  };
397
412
 
398
- const fontWeight$1 = {
399
- fontWeight100: 100,
400
- fontWeight200: 200,
401
- fontWeight300: 300,
402
- fontWeight400: 400,
403
- fontWeight500: 500,
404
- fontWeight600: 600,
405
- fontWeight700: 700,
406
- fontWeight800: 800,
407
- fontWeight900: 900
408
- };
409
-
410
- const lineHeight$1 = {
411
- lineHeight1: 1.4,
412
- lineHeight2: 1.5
413
- };
414
-
415
413
  const fontSizes = {
416
414
  xxs: fontSize$1.fontSize100,
417
415
  xs: fontSize$1.fontSize200,
@@ -426,12 +424,29 @@ const fontSizes = {
426
424
  display1: fontSize$1.fontSize1300
427
425
  };
428
426
 
427
+ const fontWeight$1 = {
428
+ fontWeight100: 100,
429
+ fontWeight200: 200,
430
+ fontWeight300: 300,
431
+ fontWeight400: 400,
432
+ fontWeight500: 500,
433
+ fontWeight600: 600,
434
+ fontWeight700: 700,
435
+ fontWeight800: 800,
436
+ fontWeight900: 900
437
+ };
438
+
429
439
  const fontWeights = {
430
440
  regular: fontWeight$1.fontWeight400,
431
441
  medium: fontWeight$1.fontWeight500,
432
442
  bold: fontWeight$1.fontWeight700
433
443
  };
434
444
 
445
+ const lineHeight$1 = {
446
+ lineHeight1: 1.4,
447
+ lineHeight2: 1.5
448
+ };
449
+
435
450
  const lineHeights = {
436
451
  1: lineHeight$1.lineHeight1,
437
452
  2: lineHeight$1.lineHeight2
@@ -3191,6 +3206,75 @@ position.zIndex;
3191
3206
  position.bottom;
3192
3207
  position.left;
3193
3208
 
3209
+ function _extends() {
3210
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
3211
+ for (var i = 1; i < arguments.length; i++) {
3212
+ var source = arguments[i];
3213
+ for (var key in source) {
3214
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
3215
+ target[key] = source[key];
3216
+ }
3217
+ }
3218
+ }
3219
+ return target;
3220
+ };
3221
+ return _extends.apply(this, arguments);
3222
+ }
3223
+
3224
+ const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3225
+ xmlns: "http://www.w3.org/2000/svg",
3226
+ width: "1em",
3227
+ height: "1em",
3228
+ fill: "none",
3229
+ viewBox: "0 0 24 24"
3230
+ }, props), /*#__PURE__*/React__namespace.createElement("path", {
3231
+ fill: "currentColor",
3232
+ fillRule: "evenodd",
3233
+ d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
3234
+ clipRule: "evenodd"
3235
+ }), /*#__PURE__*/React__namespace.createElement("path", {
3236
+ fill: "currentColor",
3237
+ fillRule: "evenodd",
3238
+ d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
3239
+ clipRule: "evenodd",
3240
+ opacity: 0.16
3241
+ }), /*#__PURE__*/React__namespace.createElement("path", {
3242
+ fill: "currentColor",
3243
+ fillRule: "evenodd",
3244
+ d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
3245
+ clipRule: "evenodd",
3246
+ opacity: 0.32
3247
+ }), /*#__PURE__*/React__namespace.createElement("path", {
3248
+ fill: "currentColor",
3249
+ fillRule: "evenodd",
3250
+ d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
3251
+ clipRule: "evenodd",
3252
+ opacity: 0.56
3253
+ }), /*#__PURE__*/React__namespace.createElement("path", {
3254
+ fill: "currentColor",
3255
+ fillRule: "evenodd",
3256
+ d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
3257
+ clipRule: "evenodd",
3258
+ opacity: 0.72
3259
+ }));
3260
+
3261
+ const spin = nt`
3262
+ from {
3263
+ transform: rotate(0);
3264
+ }
3265
+ to {
3266
+ transform: rotate(360deg);
3267
+ }
3268
+ `;
3269
+ const Spinner = Qe(SvgProgressGradient)`
3270
+ animation: ${spin} 1000ms infinite steps(8, end);
3271
+ `;
3272
+ Spinner.defaultProps = {
3273
+ width: 32,
3274
+ height: 32,
3275
+ color: color$1['icon/neutral']
3276
+ };
3277
+
3194
3278
  // Support CSS custom properties in the `sx` prop
3195
3279
 
3196
3280
  const sx = props => css$1(props.sx);
@@ -3213,6 +3297,355 @@ const wordBreak = system({
3213
3297
  }
3214
3298
  });
3215
3299
 
3300
+ const View = Qe.div`
3301
+ ${compose(layout, color, flexbox, background, border, position, shadow)}
3302
+ ${sx}
3303
+ `;
3304
+
3305
+ const UnstyledButton = Qe.button`
3306
+ background: none;
3307
+ border: 0;
3308
+ padding: 0;
3309
+ outline: none;
3310
+ cursor: pointer;
3311
+
3312
+ ${sx}
3313
+ `;
3314
+
3315
+ const Button = /*#__PURE__*/React$1.forwardRef(({
3316
+ size = 'm',
3317
+ variant = 'primary',
3318
+ fillWidth = false,
3319
+ disabled = false,
3320
+ loading = false,
3321
+ leadingIcon: LeadingIcon,
3322
+ trailingIcon: TrailingIcon,
3323
+ children,
3324
+ ...props
3325
+ }, ref) => {
3326
+ return /*#__PURE__*/React.createElement(BaseButton, _extends$2({
3327
+ ref: ref,
3328
+ size: size,
3329
+ disabled: disabled || loading,
3330
+ $disabled: disabled,
3331
+ $loading: loading,
3332
+ variant: variant,
3333
+ leadingIcon: LeadingIcon,
3334
+ trailingIcon: TrailingIcon,
3335
+ fillWidth: fillWidth
3336
+ }, props), /*#__PURE__*/React.createElement(View, {
3337
+ sx: {
3338
+ display: 'flex',
3339
+ flexDirection: 'row',
3340
+ alignItems: 'center',
3341
+ justifyContent: 'center',
3342
+ columnGap: 1,
3343
+ visibility: !loading ? 'initial' : 'hidden'
3344
+ }
3345
+ }, LeadingIcon ? /*#__PURE__*/React.createElement(LeadingIcon, null) : null, children, TrailingIcon ? /*#__PURE__*/React.createElement(TrailingIcon, null) : null), loading ? /*#__PURE__*/React.createElement(View, {
3346
+ sx: {
3347
+ position: 'absolute',
3348
+ top: 0,
3349
+ right: 0,
3350
+ bottom: 0,
3351
+ left: 0,
3352
+ display: 'flex',
3353
+ alignItems: 'center',
3354
+ justifyContent: 'center'
3355
+ }
3356
+ }, /*#__PURE__*/React.createElement(BaseSpinner, {
3357
+ size: size,
3358
+ variant: variant
3359
+ })) : null);
3360
+ });
3361
+ const BaseButton = Qe(UnstyledButton)(({
3362
+ $loading,
3363
+ $disabled,
3364
+ fillWidth
3365
+ }) => ({
3366
+ 'position': 'relative',
3367
+ 'borderRadius': radii.full,
3368
+ 'backgroundColor': 'black',
3369
+ 'transition': 'background-color 100ms, color 100ms',
3370
+ 'cursor': $loading ? 'progress' : $disabled ? 'not-allowed' : 'pointer',
3371
+ 'width': fillWidth ? '100%' : 'initial',
3372
+ '& svg': {
3373
+ transition: 'color 100ms'
3374
+ }
3375
+ }), ({
3376
+ leadingIcon,
3377
+ trailingIcon
3378
+ }) => variant({
3379
+ prop: 'size',
3380
+ variants: {
3381
+ l: {
3382
+ 'pl': leadingIcon && !trailingIcon ? 3 : 4,
3383
+ 'pr': !leadingIcon && trailingIcon ? 3 : 4,
3384
+ 'py': 3,
3385
+ 'height': 'initial',
3386
+ 'maxHeight': 'initial',
3387
+ 'fontSize': typography$1['s'].fontSize,
3388
+ 'fontWeight': typography$1['s'].fontWeight,
3389
+ 'lineHeight': typography$1['s'].lineHeight,
3390
+ '& svg': {
3391
+ width: 20,
3392
+ height: 20
3393
+ }
3394
+ },
3395
+ m: {
3396
+ 'pl': leadingIcon && !trailingIcon ? 3 : 4,
3397
+ 'pr': !leadingIcon && trailingIcon ? 3 : 4,
3398
+ 'py': 2,
3399
+ 'height': 'initial',
3400
+ 'maxHeight': 'initial',
3401
+ 'fontSize': typography$1['xs'].fontSize,
3402
+ 'fontWeight': typography$1['xs'].fontWeight,
3403
+ 'lineHeight': typography$1['xs'].lineHeight,
3404
+ '& svg': {
3405
+ width: 16,
3406
+ height: 16
3407
+ }
3408
+ },
3409
+ s: {
3410
+ 'pl': leadingIcon && !trailingIcon ? 2 : 3,
3411
+ 'pr': !leadingIcon && trailingIcon ? 2 : 3,
3412
+ 'py': 0,
3413
+ 'height': 32,
3414
+ 'maxHeight': 32,
3415
+ 'fontSize': typography$1['xxs'].fontSize,
3416
+ 'fontWeight': typography$1['xxs'].fontWeight,
3417
+ 'lineHeight': typography$1['xxs'].lineHeight,
3418
+ '& svg': {
3419
+ width: 12,
3420
+ height: 12
3421
+ }
3422
+ }
3423
+ }
3424
+ }), ({
3425
+ $disabled
3426
+ }) => variant({
3427
+ prop: 'variant',
3428
+ variants: {
3429
+ primary: {
3430
+ 'backgroundColor': color$1['bg/primary'],
3431
+ 'color': color$1['text/inverse'],
3432
+ '& svg': {
3433
+ color: color$1['icon/inverse']
3434
+ },
3435
+ ':hover:not(:disabled)': {
3436
+ backgroundColor: color$1['bg/primary/hovered']
3437
+ },
3438
+ ':active:not(:disabled)': {
3439
+ backgroundColor: color$1['bg/primary/pressed']
3440
+ },
3441
+ ':focus-visible': {
3442
+ outlineColor: color$1['border/focused'],
3443
+ outlineStyle: 'solid',
3444
+ outlineWidth: 2,
3445
+ outlineOffset: 2
3446
+ },
3447
+ ...($disabled ? {
3448
+ 'backgroundColor': color$1['bg/disabled'],
3449
+ 'color': color$1['text/disabled'],
3450
+ '& svg': {
3451
+ color: color$1['icon/disabled']
3452
+ }
3453
+ } : {})
3454
+ },
3455
+ secondary: {
3456
+ 'backgroundColor': color$1['bg/secondary'],
3457
+ 'color': color$1['text/primary'],
3458
+ '& svg': {
3459
+ color: color$1['icon/primary']
3460
+ },
3461
+ ':hover:not(:disabled)': {
3462
+ backgroundColor: color$1['bg/secondary/hovered']
3463
+ },
3464
+ ':active:not(:disabled)': {
3465
+ backgroundColor: color$1['bg/secondary/pressed']
3466
+ },
3467
+ ':focus-visible': {
3468
+ outlineColor: color$1['border/focused'],
3469
+ outlineStyle: 'solid',
3470
+ outlineWidth: 2,
3471
+ outlineOffset: 2
3472
+ },
3473
+ ...($disabled ? {
3474
+ 'backgroundColor': color$1['bg/disabled'],
3475
+ 'color': color$1['text/disabled'],
3476
+ '& svg': {
3477
+ color: color$1['icon/disabled']
3478
+ }
3479
+ } : {})
3480
+ },
3481
+ tertiary: {
3482
+ 'backgroundColor': color$1['bg/neutral'],
3483
+ 'color': color$1['text/neutral'],
3484
+ '& svg': {
3485
+ color: color$1['icon/accent/gray']
3486
+ },
3487
+ ':hover:not(:disabled)': {
3488
+ backgroundColor: color$1['bg/neutral/hovered']
3489
+ },
3490
+ ':active:not(:disabled)': {
3491
+ backgroundColor: color$1['bg/neutral/pressed']
3492
+ },
3493
+ ':focus-visible': {
3494
+ outlineColor: color$1['border/focused'],
3495
+ outlineStyle: 'solid',
3496
+ outlineWidth: 2,
3497
+ outlineOffset: 2
3498
+ },
3499
+ ...($disabled ? {
3500
+ 'backgroundColor': color$1['bg/disabled'],
3501
+ 'color': color$1['text/disabled'],
3502
+ '& svg': {
3503
+ color: color$1['icon/disabled']
3504
+ }
3505
+ } : {})
3506
+ },
3507
+ outlined: {
3508
+ 'backgroundColor': color$1['bg/neutral/subtler'],
3509
+ 'color': color$1['text/neutral/subtle'],
3510
+ '& svg': {
3511
+ color: color$1['icon/neutral/bolder']
3512
+ },
3513
+ ':after': {
3514
+ content: '""',
3515
+ position: 'absolute',
3516
+ top: 0,
3517
+ right: 0,
3518
+ bottom: 0,
3519
+ left: 0,
3520
+ borderWidth: 1,
3521
+ borderStyle: 'solid',
3522
+ borderColor: color$1['border/neutral/bolder'],
3523
+ borderRadius: radii.full,
3524
+ boxSizing: 'border-box'
3525
+ },
3526
+ ':hover:not(:disabled)': {
3527
+ backgroundColor: color$1['bg/neutral/subtler/hovered']
3528
+ },
3529
+ ':active:not(:disabled)': {
3530
+ backgroundColor: color$1['bg/neutral/subtler/pressed']
3531
+ },
3532
+ ':focus-visible': {
3533
+ outlineColor: color$1['border/focused'],
3534
+ outlineStyle: 'solid',
3535
+ outlineWidth: 2,
3536
+ outlineOffset: 2
3537
+ },
3538
+ ...($disabled ? {
3539
+ 'backgroundColor': color$1['bg/disabled'],
3540
+ 'color': color$1['text/disabled'],
3541
+ '& svg': {
3542
+ color: color$1['icon/disabled']
3543
+ },
3544
+ ':after': {
3545
+ display: 'none'
3546
+ }
3547
+ } : {})
3548
+ },
3549
+ plain: {
3550
+ 'backgroundColor': color$1['bg/neutral/subtler'],
3551
+ 'color': color$1['text/neutral/subtle'],
3552
+ '& svg': {
3553
+ color: color$1['icon/neutral/bolder']
3554
+ },
3555
+ ':hover:not(:disabled)': {
3556
+ 'color': color$1['text/neutral'],
3557
+ '& svg': {
3558
+ color: color$1['icon/accent/gray']
3559
+ }
3560
+ },
3561
+ ':active:not(:disabled)': {
3562
+ 'color': color$1['text/neutral'],
3563
+ '& svg': {
3564
+ color: color$1['icon/accent/gray']
3565
+ }
3566
+ },
3567
+ ':focus-visible': {
3568
+ outlineColor: color$1['border/focused'],
3569
+ outlineStyle: 'solid',
3570
+ outlineWidth: 2,
3571
+ outlineOffset: 2
3572
+ },
3573
+ ...($disabled ? {
3574
+ 'backgroundColor': color$1['bg/disabled'],
3575
+ 'color': color$1['text/disabled'],
3576
+ '& svg': {
3577
+ color: color$1['icon/disabled']
3578
+ }
3579
+ } : {})
3580
+ },
3581
+ danger: {
3582
+ 'backgroundColor': color$1['bg/danger/bold'],
3583
+ 'color': color$1['text/inverse'],
3584
+ '& svg': {
3585
+ color: color$1['icon/inverse']
3586
+ },
3587
+ ':hover:not(:disabled)': {
3588
+ backgroundColor: color$1['bg/danger/bold/hovered']
3589
+ },
3590
+ ':active:not(:disabled)': {
3591
+ backgroundColor: color$1['bg/danger/bold/pressed']
3592
+ },
3593
+ ':focus-visible': {
3594
+ outlineColor: color$1['border/focused'],
3595
+ outlineStyle: 'solid',
3596
+ outlineWidth: 2,
3597
+ outlineOffset: 2
3598
+ },
3599
+ ...($disabled ? {
3600
+ 'backgroundColor': color$1['bg/disabled'],
3601
+ 'color': color$1['text/disabled'],
3602
+ '& svg': {
3603
+ color: color$1['icon/disabled']
3604
+ }
3605
+ } : {})
3606
+ }
3607
+ }
3608
+ }));
3609
+ const BaseSpinner = Qe(Spinner)(variant({
3610
+ prop: 'size',
3611
+ variants: {
3612
+ l: {
3613
+ width: 20,
3614
+ height: 20
3615
+ },
3616
+ m: {
3617
+ width: 16,
3618
+ height: 16
3619
+ },
3620
+ s: {
3621
+ width: 16,
3622
+ height: 16
3623
+ }
3624
+ }
3625
+ }), variant({
3626
+ prop: 'variant',
3627
+ variants: {
3628
+ primary: {
3629
+ color: color$1['icon/inverse']
3630
+ },
3631
+ secondary: {
3632
+ color: color$1['icon/primary']
3633
+ },
3634
+ tertiary: {
3635
+ color: color$1['icon/accent/gray']
3636
+ },
3637
+ outlined: {
3638
+ color: color$1['icon/neutral/bolder']
3639
+ },
3640
+ plain: {
3641
+ color: color$1['icon/neutral/bolder']
3642
+ },
3643
+ danger: {
3644
+ color: color$1['icon/inverse']
3645
+ }
3646
+ }
3647
+ }));
3648
+
3216
3649
  const Chip = ({
3217
3650
  children,
3218
3651
  size = 'm',
@@ -3432,21 +3865,6 @@ const GradientText = Qe(Text)`
3432
3865
  -webkit-text-fill-color: transparent;
3433
3866
  `;
3434
3867
 
3435
- function _extends() {
3436
- _extends = Object.assign ? Object.assign.bind() : function (target) {
3437
- for (var i = 1; i < arguments.length; i++) {
3438
- var source = arguments[i];
3439
- for (var key in source) {
3440
- if (Object.prototype.hasOwnProperty.call(source, key)) {
3441
- target[key] = source[key];
3442
- }
3443
- }
3444
- }
3445
- return target;
3446
- };
3447
- return _extends.apply(this, arguments);
3448
- }
3449
-
3450
3868
  /**
3451
3869
  * CSS에서 사용할 수 있는 픽셀값으로 강제합니다.
3452
3870
  */
@@ -3458,11 +3876,6 @@ const isArray = value => Array.isArray(value);
3458
3876
 
3459
3877
  const isNullable = value => value === null || value === undefined;
3460
3878
 
3461
- const View = Qe.div`
3462
- ${compose(layout, color, flexbox, background, border, position, shadow)}
3463
- ${sx}
3464
- `;
3465
-
3466
3879
  const Grid = /*#__PURE__*/React$1.forwardRef(({
3467
3880
  children,
3468
3881
  wrap: propWrap = true,
@@ -3472,7 +3885,7 @@ const Grid = /*#__PURE__*/React$1.forwardRef(({
3472
3885
  ...props
3473
3886
  }, ref) => {
3474
3887
  const wrap = Array.isArray(propWrap) ? propWrap.map(value => value === true ? 'true' : 'false') : propWrap === true ? 'true' : 'false';
3475
- return /*#__PURE__*/React.createElement(BaseGrid, _extends({
3888
+ return /*#__PURE__*/React.createElement(BaseGrid, _extends$2({
3476
3889
  ref: ref,
3477
3890
  gapX: gapX,
3478
3891
  gapY: gapY,
@@ -3542,7 +3955,7 @@ const Unit = ({
3542
3955
  const percentage = Math.round(size * 100 * 10000) / 10000;
3543
3956
  return size === 'max' ? '100%' : size === 'min' ? 'none' : `${percentage}%`;
3544
3957
  };
3545
- return /*#__PURE__*/React.createElement(View, _extends({}, mapValueToResponsiveValueProps(size, value => ({
3958
+ return /*#__PURE__*/React.createElement(View, _extends$2({}, mapValueToResponsiveValueProps(size, value => ({
3546
3959
  display: value === 0 ? 'none' : 'initial',
3547
3960
  flowGrow: getFlexGrowBySize(value),
3548
3961
  flex: getFlexBySize(value),
@@ -3557,70 +3970,6 @@ var index$1 = Object.assign(Grid, {
3557
3970
  Unit
3558
3971
  });
3559
3972
 
3560
- const SvgProgressGradient = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
3561
- xmlns: "http://www.w3.org/2000/svg",
3562
- width: "1em",
3563
- height: "1em",
3564
- fill: "none",
3565
- viewBox: "0 0 24 24"
3566
- }, props), /*#__PURE__*/React__namespace.createElement("path", {
3567
- fill: "currentColor",
3568
- fillRule: "evenodd",
3569
- d: "M12 1.4a1.1 1.1 0 0 0-1.1 1.1v3.042a1.1 1.1 0 0 0 2.2 0V2.5A1.101 1.101 0 0 0 12 1.4Z",
3570
- clipRule: "evenodd"
3571
- }), /*#__PURE__*/React__namespace.createElement("path", {
3572
- fill: "currentColor",
3573
- fillRule: "evenodd",
3574
- d: "M6.656 8.211a1.097 1.097 0 0 0 1.556 0 1.101 1.101 0 0 0 0-1.556L6.06 4.505A1.101 1.101 0 0 0 4.505 6.06l2.15 2.151h.001Z",
3575
- clipRule: "evenodd",
3576
- opacity: 0.16
3577
- }), /*#__PURE__*/React__namespace.createElement("path", {
3578
- fill: "currentColor",
3579
- fillRule: "evenodd",
3580
- d: "M6.642 12a1.1 1.1 0 0 0-1.1-1.1H2.5a1.1 1.1 0 0 0 0 2.2h3.042a1.1 1.1 0 0 0 1.1-1.1Z",
3581
- clipRule: "evenodd",
3582
- opacity: 0.32
3583
- }), /*#__PURE__*/React__namespace.createElement("path", {
3584
- fill: "currentColor",
3585
- fillRule: "evenodd",
3586
- d: "m6.656 15.789-2.151 2.15a1.101 1.101 0 0 0 1.556 1.556l2.15-2.15a1.101 1.101 0 0 0-1.555-1.556ZM12 17.358a1.1 1.1 0 0 0-1.1 1.1V21.5a1.1 1.1 0 0 0 2.2 0v-3.042a1.1 1.1 0 0 0-1.1-1.1Z",
3587
- clipRule: "evenodd",
3588
- opacity: 0.56
3589
- }), /*#__PURE__*/React__namespace.createElement("path", {
3590
- fill: "currentColor",
3591
- fillRule: "evenodd",
3592
- d: "M17.344 15.789a1.1 1.1 0 0 0-1.556 1.556l2.151 2.15a1.098 1.098 0 0 0 1.878-.778 1.1 1.1 0 0 0-.322-.778l-2.15-2.15h-.001ZM21.5 10.9h-3.042a1.1 1.1 0 0 0 0 2.2H21.5a1.1 1.1 0 0 0 0-2.2ZM16.566 8.534c.281 0 .563-.107.778-.322l2.151-2.151a1.1 1.1 0 0 0-1.556-1.556l-2.15 2.15a1.1 1.1 0 0 0 .777 1.879Z",
3593
- clipRule: "evenodd",
3594
- opacity: 0.72
3595
- }));
3596
-
3597
- const spin = nt`
3598
- from {
3599
- transform: rotate(0);
3600
- }
3601
- to {
3602
- transform: rotate(360deg);
3603
- }
3604
- `;
3605
- const Spinner = Qe(SvgProgressGradient)`
3606
- animation: ${spin} 1000ms infinite steps(8, end);
3607
- `;
3608
- Spinner.defaultProps = {
3609
- width: 32,
3610
- height: 32,
3611
- color: color$1['icon/neutral']
3612
- };
3613
-
3614
- const UnstyledButton = Qe.button`
3615
- background: none;
3616
- border: 0;
3617
- padding: 0;
3618
- outline: none;
3619
- cursor: pointer;
3620
-
3621
- ${sx}
3622
- `;
3623
-
3624
3973
  const IconButton = /*#__PURE__*/React$1.forwardRef(({
3625
3974
  icon: Icon,
3626
3975
  size = 'm',
@@ -3630,7 +3979,7 @@ const IconButton = /*#__PURE__*/React$1.forwardRef(({
3630
3979
  type = 'button',
3631
3980
  ...props
3632
3981
  }, ref) => {
3633
- return /*#__PURE__*/React.createElement(BaseIconButton, _extends({
3982
+ return /*#__PURE__*/React.createElement(BaseIconButton, _extends$2({
3634
3983
  ref: ref,
3635
3984
  type: type,
3636
3985
  icon: Icon,
@@ -3831,7 +4180,7 @@ const IconToggleButton = ({
3831
4180
  sx,
3832
4181
  ...props
3833
4182
  }) => {
3834
- return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends({
4183
+ return /*#__PURE__*/React.createElement(BaseIconToggleButton, _extends$2({
3835
4184
  icon: Icon,
3836
4185
  size: size,
3837
4186
  variant: variant,
@@ -3939,7 +4288,7 @@ const Stack = /*#__PURE__*/React$1.forwardRef(({
3939
4288
  children,
3940
4289
  alignItems = 'center',
3941
4290
  ...props
3942
- }, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends({
4291
+ }, ref) => /*#__PURE__*/React.createElement(BaseStack, _extends$2({
3943
4292
  ref: ref,
3944
4293
  alignItems: alignItems,
3945
4294
  gapX: gapX,
@@ -3984,7 +4333,7 @@ const StyledIcon = ({
3984
4333
  icon: Icon,
3985
4334
  sx,
3986
4335
  ...props
3987
- }) => /*#__PURE__*/React.createElement(View, _extends({}, props, {
4336
+ }) => /*#__PURE__*/React.createElement(View, _extends$2({}, props, {
3988
4337
  color: props.color,
3989
4338
  sx: {
3990
4339
  '& svg': {
@@ -3996,6 +4345,7 @@ const StyledIcon = ({
3996
4345
  }
3997
4346
  }), /*#__PURE__*/React.createElement(Icon, null));
3998
4347
 
4348
+ exports.Button = Button;
3999
4349
  exports.Chip = Chip;
4000
4350
  exports.GradientText = GradientText;
4001
4351
  exports.Grid = index$1;
@@ -1,4 +1,4 @@
1
- import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
1
+ import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
2
2
  import * as React from 'react';
3
3
 
4
4
  const SvgProgressGradient = props => /*#__PURE__*/React.createElement("svg", _extends({
@@ -0,0 +1,16 @@
1
+ function _extends() {
2
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
3
+ for (var i = 1; i < arguments.length; i++) {
4
+ var source = arguments[i];
5
+ for (var key in source) {
6
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
7
+ target[key] = source[key];
8
+ }
9
+ }
10
+ }
11
+ return target;
12
+ };
13
+ return _extends.apply(this, arguments);
14
+ }
15
+
16
+ export { _extends as extends };