@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.
- package/dist/core/Button/index.d.ts +71 -0
- package/dist/core/GradientText/index.d.ts +5 -5
- package/dist/core/Grid/index.d.ts +2 -2
- package/dist/core/IconButton/index.d.ts +1 -1
- package/dist/core/Stack/index.d.ts +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +457 -107
- package/esm/packages/icons/{src → esm}/ProgressGradient.js +1 -1
- package/esm/packages/icons/esm/_virtual/_rollupPluginBabelHelpers.js +16 -0
- package/esm/packages/react-kit/src/core/Button/index.js +347 -0
- package/esm/packages/react-kit/src/core/Chip/index.js +3 -3
- package/esm/packages/react-kit/src/core/Grid/index.js +1 -1
- package/esm/packages/react-kit/src/core/IconButton/index.js +2 -2
- package/esm/packages/react-kit/src/core/IconToggleButton/index.js +2 -2
- package/esm/packages/react-kit/src/core/Spinner/index.js +2 -2
- package/esm/packages/react-kit/src/core/Stack/index.js +1 -1
- package/esm/packages/react-kit/src/core/Text/index.js +1 -1
- package/esm/packages/react-kit/src/index.js +1 -0
- package/package.json +7 -6
- /package/esm/packages/token-studio/{src → esm}/foundation/palette/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/foundation/rounding/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/foundation/spacing/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/foundation/typography/fontSize/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/foundation/typography/fontWeight/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/foundation/typography/lineHeight/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/color/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/radii/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/space/index.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/typography/fontSizes.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/typography/fontWeights.js +0 -0
- /package/esm/packages/token-studio/{src → esm}/token/typography/index.js +0 -0
- /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 '
|
|
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 };
|