@czi-sds/components 21.6.3 → 21.7.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/index.cjs.d.ts +93 -76
- package/dist/index.cjs.js +371 -57
- package/dist/index.esm.d.ts +93 -76
- package/dist/index.esm.js +371 -58
- package/dist/tailwind.json +235 -105
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +161 -8
- package/dist/variables.scss +81 -107
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -287,7 +287,270 @@ var sharedAppTheme = {
|
|
|
287
287
|
header: fontFamily,
|
|
288
288
|
tabular: fontFamily,
|
|
289
289
|
},
|
|
290
|
-
|
|
290
|
+
narrowStyles: {
|
|
291
|
+
body: {
|
|
292
|
+
regular: {
|
|
293
|
+
button: {
|
|
294
|
+
fontSize: 13,
|
|
295
|
+
fontWeight: FontWeight.regular,
|
|
296
|
+
letterSpacing: "0.08px",
|
|
297
|
+
lineHeight: "20px",
|
|
298
|
+
textTransform: "none",
|
|
299
|
+
},
|
|
300
|
+
l: {
|
|
301
|
+
fontSize: 16,
|
|
302
|
+
fontWeight: FontWeight.regular,
|
|
303
|
+
letterSpacing: "0px",
|
|
304
|
+
lineHeight: "26px",
|
|
305
|
+
textTransform: "none",
|
|
306
|
+
},
|
|
307
|
+
m: {
|
|
308
|
+
fontSize: 14,
|
|
309
|
+
fontWeight: FontWeight.regular,
|
|
310
|
+
letterSpacing: "0px",
|
|
311
|
+
lineHeight: "24px",
|
|
312
|
+
textTransform: "none",
|
|
313
|
+
},
|
|
314
|
+
s: {
|
|
315
|
+
fontSize: 14,
|
|
316
|
+
fontWeight: FontWeight.regular,
|
|
317
|
+
letterSpacing: "0.08px",
|
|
318
|
+
lineHeight: "24px",
|
|
319
|
+
textTransform: "none",
|
|
320
|
+
},
|
|
321
|
+
xs: {
|
|
322
|
+
fontSize: 13,
|
|
323
|
+
fontWeight: FontWeight.regular,
|
|
324
|
+
letterSpacing: "0.08px",
|
|
325
|
+
lineHeight: "20px",
|
|
326
|
+
textTransform: "none",
|
|
327
|
+
},
|
|
328
|
+
xxs: {
|
|
329
|
+
fontSize: 12,
|
|
330
|
+
fontWeight: FontWeight.regular,
|
|
331
|
+
letterSpacing: "0.1px",
|
|
332
|
+
lineHeight: "18px",
|
|
333
|
+
textTransform: "none",
|
|
334
|
+
},
|
|
335
|
+
xxxs: {
|
|
336
|
+
fontSize: 12,
|
|
337
|
+
fontWeight: FontWeight.regular,
|
|
338
|
+
letterSpacing: "0.1px",
|
|
339
|
+
lineHeight: "18px",
|
|
340
|
+
textTransform: "none",
|
|
341
|
+
},
|
|
342
|
+
},
|
|
343
|
+
semibold: {
|
|
344
|
+
button: {
|
|
345
|
+
fontSize: 13,
|
|
346
|
+
fontWeight: FontWeight.semibold,
|
|
347
|
+
letterSpacing: "0.08px",
|
|
348
|
+
lineHeight: "20px",
|
|
349
|
+
textTransform: "none",
|
|
350
|
+
},
|
|
351
|
+
l: {
|
|
352
|
+
fontSize: 16,
|
|
353
|
+
fontWeight: FontWeight.semibold,
|
|
354
|
+
letterSpacing: "0px",
|
|
355
|
+
lineHeight: "26px",
|
|
356
|
+
textTransform: "none",
|
|
357
|
+
},
|
|
358
|
+
m: {
|
|
359
|
+
fontSize: 14,
|
|
360
|
+
fontWeight: FontWeight.semibold,
|
|
361
|
+
letterSpacing: "0px",
|
|
362
|
+
lineHeight: "24px",
|
|
363
|
+
textTransform: "none",
|
|
364
|
+
},
|
|
365
|
+
s: {
|
|
366
|
+
fontSize: 14,
|
|
367
|
+
fontWeight: FontWeight.semibold,
|
|
368
|
+
letterSpacing: "0.08px",
|
|
369
|
+
lineHeight: "24px",
|
|
370
|
+
textTransform: "none",
|
|
371
|
+
},
|
|
372
|
+
xs: {
|
|
373
|
+
fontSize: 13,
|
|
374
|
+
fontWeight: FontWeight.semibold,
|
|
375
|
+
letterSpacing: "0.08px",
|
|
376
|
+
lineHeight: "20px",
|
|
377
|
+
textTransform: "none",
|
|
378
|
+
},
|
|
379
|
+
xxs: {
|
|
380
|
+
fontSize: 12,
|
|
381
|
+
fontWeight: FontWeight.semibold,
|
|
382
|
+
letterSpacing: "0.1px",
|
|
383
|
+
lineHeight: "18px",
|
|
384
|
+
textTransform: "none",
|
|
385
|
+
},
|
|
386
|
+
xxxs: {
|
|
387
|
+
fontSize: 12,
|
|
388
|
+
fontWeight: FontWeight.semibold,
|
|
389
|
+
letterSpacing: "0.1px",
|
|
390
|
+
lineHeight: "18px",
|
|
391
|
+
textTransform: "none",
|
|
392
|
+
},
|
|
393
|
+
},
|
|
394
|
+
},
|
|
395
|
+
caps: {
|
|
396
|
+
semibold: {
|
|
397
|
+
xxs: {
|
|
398
|
+
fontSize: 12,
|
|
399
|
+
fontWeight: FontWeight.semibold,
|
|
400
|
+
letterSpacing: "0.5px",
|
|
401
|
+
lineHeight: "18px",
|
|
402
|
+
textTransform: "uppercase",
|
|
403
|
+
},
|
|
404
|
+
xxxs: {
|
|
405
|
+
fontSize: 11,
|
|
406
|
+
fontWeight: FontWeight.semibold,
|
|
407
|
+
letterSpacing: "0.5px",
|
|
408
|
+
lineHeight: "16px",
|
|
409
|
+
textTransform: "uppercase",
|
|
410
|
+
},
|
|
411
|
+
xxxxs: {
|
|
412
|
+
fontSize: 11,
|
|
413
|
+
fontWeight: FontWeight.semibold,
|
|
414
|
+
letterSpacing: "0.5px",
|
|
415
|
+
lineHeight: "16px",
|
|
416
|
+
textTransform: "uppercase",
|
|
417
|
+
},
|
|
418
|
+
},
|
|
419
|
+
},
|
|
420
|
+
code: {
|
|
421
|
+
regular: {
|
|
422
|
+
s: {
|
|
423
|
+
fontSize: 14,
|
|
424
|
+
fontWeight: FontWeight.regular,
|
|
425
|
+
letterSpacing: "0px",
|
|
426
|
+
lineHeight: "24px",
|
|
427
|
+
textTransform: "none",
|
|
428
|
+
},
|
|
429
|
+
xs: {
|
|
430
|
+
fontSize: 13,
|
|
431
|
+
fontWeight: FontWeight.regular,
|
|
432
|
+
letterSpacing: "0px",
|
|
433
|
+
lineHeight: "20px",
|
|
434
|
+
textTransform: "none",
|
|
435
|
+
},
|
|
436
|
+
},
|
|
437
|
+
semibold: {
|
|
438
|
+
s: {
|
|
439
|
+
fontSize: 14,
|
|
440
|
+
fontWeight: FontWeight.semibold,
|
|
441
|
+
letterSpacing: "0px",
|
|
442
|
+
lineHeight: "24px",
|
|
443
|
+
textTransform: "none",
|
|
444
|
+
},
|
|
445
|
+
xs: {
|
|
446
|
+
fontSize: 13,
|
|
447
|
+
fontWeight: FontWeight.semibold,
|
|
448
|
+
letterSpacing: "0px",
|
|
449
|
+
lineHeight: "20px",
|
|
450
|
+
textTransform: "none",
|
|
451
|
+
},
|
|
452
|
+
},
|
|
453
|
+
},
|
|
454
|
+
header: {
|
|
455
|
+
semibold: {
|
|
456
|
+
l: {
|
|
457
|
+
fontSize: 16,
|
|
458
|
+
fontWeight: FontWeight.semibold,
|
|
459
|
+
letterSpacing: "0px",
|
|
460
|
+
lineHeight: "22px",
|
|
461
|
+
textTransform: "none",
|
|
462
|
+
},
|
|
463
|
+
m: {
|
|
464
|
+
fontSize: 14,
|
|
465
|
+
fontWeight: FontWeight.semibold,
|
|
466
|
+
letterSpacing: "0px",
|
|
467
|
+
lineHeight: "20px",
|
|
468
|
+
textTransform: "none",
|
|
469
|
+
},
|
|
470
|
+
s: {
|
|
471
|
+
fontSize: 14,
|
|
472
|
+
fontWeight: FontWeight.semibold,
|
|
473
|
+
letterSpacing: "0.08px",
|
|
474
|
+
lineHeight: "20px",
|
|
475
|
+
textTransform: "none",
|
|
476
|
+
},
|
|
477
|
+
xl: {
|
|
478
|
+
fontSize: 18,
|
|
479
|
+
fontWeight: FontWeight.semibold,
|
|
480
|
+
letterSpacing: "0px",
|
|
481
|
+
lineHeight: "24px",
|
|
482
|
+
textTransform: "none",
|
|
483
|
+
},
|
|
484
|
+
xs: {
|
|
485
|
+
fontSize: 13,
|
|
486
|
+
fontWeight: FontWeight.semibold,
|
|
487
|
+
letterSpacing: "0.08px",
|
|
488
|
+
lineHeight: "18px",
|
|
489
|
+
textTransform: "none",
|
|
490
|
+
},
|
|
491
|
+
xxl: {
|
|
492
|
+
fontSize: 22,
|
|
493
|
+
fontWeight: FontWeight.semibold,
|
|
494
|
+
letterSpacing: "0px",
|
|
495
|
+
lineHeight: "30px",
|
|
496
|
+
textTransform: "none",
|
|
497
|
+
},
|
|
498
|
+
xxs: {
|
|
499
|
+
fontSize: 12,
|
|
500
|
+
fontWeight: FontWeight.semibold,
|
|
501
|
+
letterSpacing: "0.1px",
|
|
502
|
+
lineHeight: "18px",
|
|
503
|
+
textTransform: "none",
|
|
504
|
+
},
|
|
505
|
+
xxxs: {
|
|
506
|
+
fontSize: 12,
|
|
507
|
+
fontWeight: FontWeight.semibold,
|
|
508
|
+
letterSpacing: "0.1px",
|
|
509
|
+
lineHeight: "18px",
|
|
510
|
+
textTransform: "none",
|
|
511
|
+
},
|
|
512
|
+
},
|
|
513
|
+
},
|
|
514
|
+
tabular: {
|
|
515
|
+
regular: {
|
|
516
|
+
s: {
|
|
517
|
+
fontSize: 14,
|
|
518
|
+
fontVariantNumeric: tabularNums,
|
|
519
|
+
fontWeight: FontWeight.regular,
|
|
520
|
+
letterSpacing: "0px",
|
|
521
|
+
lineHeight: "24px",
|
|
522
|
+
textTransform: "none",
|
|
523
|
+
},
|
|
524
|
+
xs: {
|
|
525
|
+
fontSize: 13,
|
|
526
|
+
fontVariantNumeric: tabularNums,
|
|
527
|
+
fontWeight: FontWeight.regular,
|
|
528
|
+
letterSpacing: "0px",
|
|
529
|
+
lineHeight: "20px",
|
|
530
|
+
textTransform: "none",
|
|
531
|
+
},
|
|
532
|
+
},
|
|
533
|
+
semibold: {
|
|
534
|
+
s: {
|
|
535
|
+
fontSize: 14,
|
|
536
|
+
fontVariantNumeric: tabularNums,
|
|
537
|
+
fontWeight: FontWeight.semibold,
|
|
538
|
+
letterSpacing: "0px",
|
|
539
|
+
lineHeight: "24px",
|
|
540
|
+
textTransform: "none",
|
|
541
|
+
},
|
|
542
|
+
xs: {
|
|
543
|
+
fontSize: 13,
|
|
544
|
+
fontVariantNumeric: tabularNums,
|
|
545
|
+
fontWeight: FontWeight.semibold,
|
|
546
|
+
letterSpacing: "0px",
|
|
547
|
+
lineHeight: "20px",
|
|
548
|
+
textTransform: "none",
|
|
549
|
+
},
|
|
550
|
+
},
|
|
551
|
+
},
|
|
552
|
+
},
|
|
553
|
+
wideStyles: {
|
|
291
554
|
body: {
|
|
292
555
|
regular: {
|
|
293
556
|
button: {
|
|
@@ -894,6 +1157,13 @@ var SDSPaletteDark = function (appTheme) {
|
|
|
894
1157
|
function makeThemeOptions(appTheme, mode) {
|
|
895
1158
|
return {
|
|
896
1159
|
app: appTheme,
|
|
1160
|
+
breakpoints: {
|
|
1161
|
+
values: {
|
|
1162
|
+
lg: 1024,
|
|
1163
|
+
md: 512,
|
|
1164
|
+
sm: 0,
|
|
1165
|
+
},
|
|
1166
|
+
},
|
|
897
1167
|
components: {
|
|
898
1168
|
MuiButtonBase: {
|
|
899
1169
|
defaultProps: {
|
|
@@ -1072,20 +1342,20 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1072
1342
|
},
|
|
1073
1343
|
},
|
|
1074
1344
|
typography: {
|
|
1075
|
-
body1: appTheme.typography.
|
|
1076
|
-
body2: appTheme.typography.
|
|
1077
|
-
button: appTheme.typography.
|
|
1078
|
-
caption: appTheme.typography.
|
|
1345
|
+
body1: appTheme.typography.wideStyles.body.regular.xs,
|
|
1346
|
+
body2: appTheme.typography.wideStyles.body.regular.xxs,
|
|
1347
|
+
button: appTheme.typography.wideStyles.body.regular.button,
|
|
1348
|
+
caption: appTheme.typography.wideStyles.body.regular.xxxs,
|
|
1079
1349
|
fontFamily: "".concat(appTheme.typography.fontFamily.body, ", sans-serif"),
|
|
1080
|
-
h1: appTheme.typography.
|
|
1081
|
-
h2: appTheme.typography.
|
|
1082
|
-
h3: appTheme.typography.
|
|
1083
|
-
h4: appTheme.typography.
|
|
1084
|
-
h5: appTheme.typography.
|
|
1085
|
-
h6: appTheme.typography.
|
|
1086
|
-
overline: appTheme.typography.
|
|
1087
|
-
subtitle1: appTheme.typography.
|
|
1088
|
-
subtitle2: appTheme.typography.
|
|
1350
|
+
h1: appTheme.typography.wideStyles.header.semibold.xxl,
|
|
1351
|
+
h2: appTheme.typography.wideStyles.header.semibold.xl,
|
|
1352
|
+
h3: appTheme.typography.wideStyles.header.semibold.l,
|
|
1353
|
+
h4: appTheme.typography.wideStyles.header.semibold.m,
|
|
1354
|
+
h5: appTheme.typography.wideStyles.header.semibold.s,
|
|
1355
|
+
h6: appTheme.typography.wideStyles.header.semibold.xs,
|
|
1356
|
+
overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
|
|
1357
|
+
subtitle1: appTheme.typography.wideStyles.body.regular.xs,
|
|
1358
|
+
subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
|
|
1089
1359
|
},
|
|
1090
1360
|
};
|
|
1091
1361
|
}
|
|
@@ -1169,6 +1439,10 @@ var getBorders = function (_a) {
|
|
|
1169
1439
|
var theme = _a.theme;
|
|
1170
1440
|
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
|
|
1171
1441
|
};
|
|
1442
|
+
var getBreakpoints = function (_a) {
|
|
1443
|
+
var theme = _a.theme;
|
|
1444
|
+
return (theme === null || theme === void 0 ? void 0 : theme.breakpoints) || null;
|
|
1445
|
+
};
|
|
1172
1446
|
|
|
1173
1447
|
function focusVisibleA11yStyle(props) {
|
|
1174
1448
|
var _a;
|
|
@@ -1176,13 +1450,18 @@ function focusVisibleA11yStyle(props) {
|
|
|
1176
1450
|
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n outline-offset: 1px;\n }\n ");
|
|
1177
1451
|
}
|
|
1178
1452
|
|
|
1179
|
-
var fontBody = function (fontSize, fontWeight) {
|
|
1453
|
+
var fontBody = function (fontSize, fontWeight, isNarrow) {
|
|
1180
1454
|
if (fontWeight === void 0) { fontWeight = "regular"; }
|
|
1455
|
+
if (isNarrow === void 0) { isNarrow = false; }
|
|
1181
1456
|
return function (props) {
|
|
1457
|
+
var _a;
|
|
1182
1458
|
var typography = getTypography(props);
|
|
1183
1459
|
if (!typography)
|
|
1184
1460
|
return null;
|
|
1185
|
-
var body = typography.
|
|
1461
|
+
var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
|
|
1462
|
+
if (isNarrow) {
|
|
1463
|
+
return react.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily));
|
|
1464
|
+
}
|
|
1186
1465
|
return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
|
|
1187
1466
|
};
|
|
1188
1467
|
};
|
|
@@ -1198,24 +1477,32 @@ var fontBodySemiboldS = fontBody("s", "semibold");
|
|
|
1198
1477
|
var fontBodySemiboldXs = fontBody("xs", "semibold");
|
|
1199
1478
|
var fontBodySemiboldXxs = fontBody("xxs", "semibold");
|
|
1200
1479
|
var fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
|
|
1201
|
-
var fontCaps = function (fontSize) {
|
|
1480
|
+
var fontCaps = function (fontSize, isNarrow) {
|
|
1481
|
+
if (isNarrow === void 0) { isNarrow = false; }
|
|
1202
1482
|
return function (props) {
|
|
1483
|
+
var _a;
|
|
1203
1484
|
var typography = getTypography(props);
|
|
1204
1485
|
if (!typography)
|
|
1205
1486
|
return null;
|
|
1206
|
-
var caps = typography.
|
|
1207
|
-
return react.css(
|
|
1487
|
+
var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1488
|
+
return react.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
|
|
1489
|
+
? react.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
|
|
1208
1490
|
};
|
|
1209
1491
|
};
|
|
1210
1492
|
var fontCapsXxs = fontCaps("xxs");
|
|
1211
1493
|
var fontCapsXxxs = fontCaps("xxxs");
|
|
1212
1494
|
var fontCapsXxxxs = fontCaps("xxxxs");
|
|
1213
|
-
var fontHeader = function (fontSize) {
|
|
1495
|
+
var fontHeader = function (fontSize, isNarrow) {
|
|
1496
|
+
if (isNarrow === void 0) { isNarrow = false; }
|
|
1214
1497
|
return function (props) {
|
|
1498
|
+
var _a;
|
|
1215
1499
|
var typography = getTypography(props);
|
|
1216
1500
|
if (!typography)
|
|
1217
1501
|
return null;
|
|
1218
|
-
var header = typography.
|
|
1502
|
+
var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
|
|
1503
|
+
if (isNarrow) {
|
|
1504
|
+
return react.css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
|
|
1505
|
+
}
|
|
1219
1506
|
return themeToCss(header.semibold[fontSize], headerFontFamily);
|
|
1220
1507
|
};
|
|
1221
1508
|
};
|
|
@@ -1227,28 +1514,36 @@ var fontHeaderS = fontHeader("s");
|
|
|
1227
1514
|
var fontHeaderXs = fontHeader("xs");
|
|
1228
1515
|
var fontHeaderXxs = fontHeader("xxs");
|
|
1229
1516
|
var fontHeaderXxxs = fontHeader("xxxs");
|
|
1230
|
-
var fontCode = function (fontSize, fontWeight) {
|
|
1517
|
+
var fontCode = function (fontSize, fontWeight, isNarrow) {
|
|
1231
1518
|
if (fontWeight === void 0) { fontWeight = "regular"; }
|
|
1519
|
+
if (isNarrow === void 0) { isNarrow = false; }
|
|
1232
1520
|
return function (props) {
|
|
1521
|
+
var _a;
|
|
1233
1522
|
var typography = getTypography(props);
|
|
1234
1523
|
if (!typography)
|
|
1235
1524
|
return null;
|
|
1236
|
-
var code = typography.
|
|
1237
|
-
|
|
1525
|
+
var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
|
|
1526
|
+
if (isNarrow) {
|
|
1527
|
+
return react.css(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
|
|
1528
|
+
}
|
|
1529
|
+
return themeToCss(code[fontWeight][fontSize], codeFontFamily);
|
|
1238
1530
|
};
|
|
1239
1531
|
};
|
|
1240
1532
|
var fontCodeXs = fontCode("xs", "regular");
|
|
1241
1533
|
var fontCodeS = fontCode("s", "regular");
|
|
1242
1534
|
var fontCodeSemiboldXs = fontCode("xs", "semibold");
|
|
1243
1535
|
var fontCodeSemiboldS = fontCode("s", "semibold");
|
|
1244
|
-
var fontTabular = function (fontSize, fontWeight) {
|
|
1536
|
+
var fontTabular = function (fontSize, fontWeight, isNarrow) {
|
|
1245
1537
|
if (fontWeight === void 0) { fontWeight = "regular"; }
|
|
1538
|
+
if (isNarrow === void 0) { isNarrow = false; }
|
|
1246
1539
|
return function (props) {
|
|
1540
|
+
var _a;
|
|
1247
1541
|
var typography = getTypography(props);
|
|
1248
1542
|
if (!typography)
|
|
1249
1543
|
return null;
|
|
1250
|
-
var tabular = typography.
|
|
1251
|
-
return react.css(
|
|
1544
|
+
var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1545
|
+
return react.css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
|
|
1546
|
+
? react.css(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
|
|
1252
1547
|
};
|
|
1253
1548
|
};
|
|
1254
1549
|
var fontTabularXs = fontTabular("xs", "regular");
|
|
@@ -1257,9 +1552,9 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1257
1552
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1258
1553
|
function themeToCss(fontTheme, fontFamily) {
|
|
1259
1554
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1260
|
-
return react.css(
|
|
1555
|
+
return react.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
|
|
1261
1556
|
}
|
|
1262
|
-
var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p;
|
|
1557
|
+
var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p, templateObject_5$j, templateObject_6$e, templateObject_7$a, templateObject_8$7;
|
|
1263
1558
|
|
|
1264
1559
|
var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1265
1560
|
var spaces = getSpaces(props);
|
|
@@ -4476,7 +4771,8 @@ var rounded$3 = function (props) {
|
|
|
4476
4771
|
var applyIntentColor$2 = function (props, intent) {
|
|
4477
4772
|
var _a, _b, _c, _d;
|
|
4478
4773
|
var semanticColors = getSemanticColors(props);
|
|
4479
|
-
|
|
4774
|
+
var borders = getBorders(props);
|
|
4775
|
+
return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
|
|
4480
4776
|
};
|
|
4481
4777
|
var disabledStyled$2 = function (props) {
|
|
4482
4778
|
var _a, _b, _c, _d;
|
|
@@ -4497,7 +4793,7 @@ var StyledSearchBase = styled__default.default(material.TextField, {
|
|
|
4497
4793
|
var spaces = getSpaces(props);
|
|
4498
4794
|
var iconSizes = getIconSizes(props);
|
|
4499
4795
|
var semanticColors = getSemanticColors(props);
|
|
4500
|
-
return react.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n
|
|
4796
|
+
return react.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
|
|
4501
4797
|
});
|
|
4502
4798
|
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4503
4799
|
var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
|
|
@@ -4786,10 +5082,10 @@ var StyledMenuItemText = styled__default.default("div")(templateObject_6$8 || (t
|
|
|
4786
5082
|
var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
|
|
4787
5083
|
|
|
4788
5084
|
var AutocompleteBase = function (props) {
|
|
4789
|
-
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled;
|
|
5085
|
+
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled, _r = props.intent, intent = _r === void 0 ? "default" : _r;
|
|
4790
5086
|
var theme = material.useTheme();
|
|
4791
5087
|
var ref = React.useRef(null);
|
|
4792
|
-
var
|
|
5088
|
+
var _s = React.useState(""), inputValue = _s[0], setInputValue = _s[1];
|
|
4793
5089
|
useDetectUserTabbing(ref);
|
|
4794
5090
|
return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ ref: ref, clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple,
|
|
4795
5091
|
/**
|
|
@@ -4866,7 +5162,7 @@ var AutocompleteBase = function (props) {
|
|
|
4866
5162
|
// when the search prop is set to false.
|
|
4867
5163
|
tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4868
5164
|
sdsType: "interactive",
|
|
4869
|
-
}, icon: "Search" }) })) }) }, InputBaseProps)) }));
|
|
5165
|
+
}, icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
|
|
4870
5166
|
}
|
|
4871
5167
|
function defaultOnBlur(event) {
|
|
4872
5168
|
var _a;
|
|
@@ -5404,7 +5700,7 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
5404
5700
|
// Title. The padding-top of the Callout Message is calculated based on the difference
|
|
5405
5701
|
// between the height of the Icon and the line-height of the Callout Title.
|
|
5406
5702
|
var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
|
|
5407
|
-
parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.
|
|
5703
|
+
parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.wideStyles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
|
|
5408
5704
|
2);
|
|
5409
5705
|
return "\n width: 360px;\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n color: ").concat((_l = palette === null || palette === void 0 ? void 0 : palette.text) === null || _l === void 0 ? void 0 : _l.primary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n background-color: ").concat(backgroundColor, ";\n\n .").concat(material.alertClasses.icon, " {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n padding: 0;\n\n path {\n fill: ").concat(iconColor, ";\n }\n }\n\n .").concat(material.alertClasses.message, " {\n padding: ").concat(alertMessagePaddingTop, "px 0 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .").concat(material.alertTitleClasses.root, " {\n margin-top: 0;\n ").concat(titleBottomMargin, "\n }\n }\n\n .").concat(material.alertClasses.action, " {\n margin-right: 0;\n padding: 0;\n align-items: flex-start;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n > button {\n padding: 0;\n }\n }\n ");
|
|
5410
5706
|
});
|
|
@@ -5971,6 +6267,12 @@ var doNotForwardProps$f = [
|
|
|
5971
6267
|
"value",
|
|
5972
6268
|
"sdsStyle",
|
|
5973
6269
|
];
|
|
6270
|
+
var intentToColor$2 = {
|
|
6271
|
+
default: "accent",
|
|
6272
|
+
negative: "negative",
|
|
6273
|
+
notice: "notice",
|
|
6274
|
+
positive: "positive",
|
|
6275
|
+
};
|
|
5974
6276
|
var labelFontBodyS = fontBody("s", "regular");
|
|
5975
6277
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
5976
6278
|
var inputDropdownStyles = function (props) {
|
|
@@ -6008,15 +6310,20 @@ var userInput = function (props) {
|
|
|
6008
6310
|
: "");
|
|
6009
6311
|
};
|
|
6010
6312
|
var isOpen = function (props) {
|
|
6011
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
6012
|
-
var sdsStyle = props.sdsStyle;
|
|
6313
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
6314
|
+
var sdsStyle = props.sdsStyle, _k = props.intent, intent = _k === void 0 ? "default" : _k;
|
|
6013
6315
|
var borders = getBorders(props);
|
|
6014
6316
|
var semanticColors = getSemanticColors(props);
|
|
6317
|
+
var inputColor = intentToColor$2[intent];
|
|
6015
6318
|
return react.css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
|
|
6016
6319
|
? "\n & > span, \n &:hover > span { \n color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n }\n\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n ")
|
|
6017
|
-
: "",
|
|
6018
|
-
? (
|
|
6019
|
-
:
|
|
6320
|
+
: "", inputColor === "accent"
|
|
6321
|
+
? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen
|
|
6322
|
+
: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
|
|
6323
|
+
? borders === null || borders === void 0 ? void 0 : borders.none
|
|
6324
|
+
: (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
|
|
6325
|
+
? ((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover) + "47"
|
|
6326
|
+
: "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.hover);
|
|
6020
6327
|
};
|
|
6021
6328
|
var applyIntentColor$1 = function (props, intent) {
|
|
6022
6329
|
var _a, _b, _c;
|
|
@@ -6758,24 +7065,27 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
|
|
|
6758
7065
|
})));
|
|
6759
7066
|
};
|
|
6760
7067
|
|
|
7068
|
+
var intentToColor$1 = {
|
|
7069
|
+
default: "base",
|
|
7070
|
+
negative: "negative",
|
|
7071
|
+
notice: "notice",
|
|
7072
|
+
positive: "positive",
|
|
7073
|
+
};
|
|
6761
7074
|
var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6762
7075
|
var _a, _b, _c, _d, _e, _f;
|
|
6763
7076
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6764
7077
|
var iconSizes = getIconSizes(props);
|
|
6765
7078
|
var spaces = getSpaces(props);
|
|
6766
7079
|
var semanticColors = getSemanticColors(props);
|
|
6767
|
-
var
|
|
6768
|
-
default: "base",
|
|
6769
|
-
negative: "negative",
|
|
6770
|
-
notice: "notice",
|
|
6771
|
-
positive: "positive",
|
|
6772
|
-
};
|
|
6773
|
-
var checkboxColor = intentToColor[intent];
|
|
7080
|
+
var checkboxColor = intentToColor$1[intent];
|
|
6774
7081
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
|
|
6775
7082
|
});
|
|
6776
7083
|
var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7084
|
+
var _a, _b, _c, _d;
|
|
7085
|
+
var disabled = props.disabled;
|
|
6777
7086
|
var spaces = getSpaces(props);
|
|
6778
|
-
|
|
7087
|
+
var semanticColors = getSemanticColors(props);
|
|
7088
|
+
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;\n user-select: ").concat(disabled ? "none" : "auto", ";\n\n &:hover {\n ").concat(StyledCheckbox, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, ";\n background-color: transparent;\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderDisabled, ";\n }\n }\n }\n }\n ");
|
|
6779
7089
|
});
|
|
6780
7090
|
var StyledLabelContainer$1 = styled__default.default("span")(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
6781
7091
|
var StyledCheckboxLabel = styled__default.default("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
@@ -6839,24 +7149,27 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
|
|
|
6839
7149
|
})));
|
|
6840
7150
|
};
|
|
6841
7151
|
|
|
7152
|
+
var intentToColor = {
|
|
7153
|
+
default: "base",
|
|
7154
|
+
negative: "negative",
|
|
7155
|
+
notice: "notice",
|
|
7156
|
+
positive: "positive",
|
|
7157
|
+
};
|
|
6842
7158
|
var StyledRadioButton = styled__default.default(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6843
7159
|
var _a, _b, _c, _d, _e, _f;
|
|
6844
7160
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6845
7161
|
var spaces = getSpaces(props);
|
|
6846
7162
|
var iconSizes = getIconSizes(props);
|
|
6847
7163
|
var semanticColors = getSemanticColors(props);
|
|
6848
|
-
var intentToColor = {
|
|
6849
|
-
default: "base",
|
|
6850
|
-
negative: "negative",
|
|
6851
|
-
notice: "notice",
|
|
6852
|
-
positive: "positive",
|
|
6853
|
-
};
|
|
6854
7164
|
var radioColor = intentToColor[intent];
|
|
6855
7165
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
|
|
6856
7166
|
});
|
|
6857
7167
|
var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7168
|
+
var _a, _b, _c, _d;
|
|
7169
|
+
var disabled = props.disabled;
|
|
6858
7170
|
var spaces = getSpaces(props);
|
|
6859
|
-
|
|
7171
|
+
var semanticColors = getSemanticColors(props);
|
|
7172
|
+
return "\n align-items: start;\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-left: 0;\n margin-right: 0;\n width: fit-content;user-select: \n ").concat(disabled ? "none" : "auto", ";\n\n &:hover {\n ").concat(StyledRadioButton, " {\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, ";\n background-color: transparent;\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderDisabled, ";\n }\n }\n }\n }\n ");
|
|
6860
7173
|
});
|
|
6861
7174
|
var StyledLabelContainer = styled__default.default("span")(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"], ["\n display: flex;\n justify-content: start;\n flex-direction: column;\n"])));
|
|
6862
7175
|
var StyledRadioLabel = styled__default.default("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
@@ -6936,7 +7249,7 @@ var applyIntentColor = function (props, intent) {
|
|
|
6936
7249
|
var _a, _b, _c, _d;
|
|
6937
7250
|
var borders = getBorders(props);
|
|
6938
7251
|
var semanticColors = getSemanticColors(props);
|
|
6939
|
-
return react.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders
|
|
7252
|
+
return react.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
|
|
6940
7253
|
};
|
|
6941
7254
|
var disabledStyled$1 = function (props) {
|
|
6942
7255
|
var _a, _b, _c;
|
|
@@ -7554,7 +7867,7 @@ var StyledNotification = styled__default.default(material.Alert, {
|
|
|
7554
7867
|
// Title. The padding-top of the Notification Title is calculated based on the difference
|
|
7555
7868
|
// between the height of the Icon and the line-height of the Notification Title.
|
|
7556
7869
|
var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
|
|
7557
|
-
parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.
|
|
7870
|
+
parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.wideStyles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
|
|
7558
7871
|
2);
|
|
7559
7872
|
return "\n background-color: ".concat(backgroundColor, ";\n max-width: 480px;\n min-width: 280px;\n box-sizing: border-box;\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: flex-start;\n border-left: ").concat((_m = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _m === void 0 ? void 0 : _m.extraThick, ";\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n\n .MuiAlert-icon {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n padding: 0;\n path {\n fill: ").concat(iconColor, ";\n }\n }\n\n .MuiAlert-message {\n padding: ").concat(alertMessagePaddingTop, "px 0px 0px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n width: 100%;\n\n > * {\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0px;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n button {\n display: block;\n }\n }\n\n .MuiAlert-action {\n margin-right: 0;\n padding: 0;\n align-items: flex-start;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n > button {\n padding: 0;\n }\n }\n }\n ");
|
|
7560
7873
|
});
|
|
@@ -8288,6 +8601,7 @@ exports.fontTabularSemiboldS = fontTabularSemiboldS;
|
|
|
8288
8601
|
exports.fontTabularSemiboldXs = fontTabularSemiboldXs;
|
|
8289
8602
|
exports.fontTabularXs = fontTabularXs;
|
|
8290
8603
|
exports.getBorders = getBorders;
|
|
8604
|
+
exports.getBreakpoints = getBreakpoints;
|
|
8291
8605
|
exports.getColors = getColors;
|
|
8292
8606
|
exports.getCorners = getCorners;
|
|
8293
8607
|
exports.getFontWeights = getFontWeights;
|