@czi-sds/components 21.6.3 → 21.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +132 -104
  2. package/dist/index.cjs.js +998 -631
  3. package/dist/index.esm.d.ts +132 -104
  4. package/dist/index.esm.js +997 -633
  5. package/dist/tailwind.json +409 -273
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +360 -197
  8. package/dist/variables.scss +280 -296
  9. package/package.json +2 -2
package/dist/index.cjs.js CHANGED
@@ -139,12 +139,12 @@ var SDSLightThemeColors = {
139
139
  purple: {
140
140
  "100": "#efeafe",
141
141
  "200": "#e4dbfc",
142
- "300": "#cbbaf8",
142
+ "300": "#cbbaF8",
143
143
  "400": "#b296f2",
144
144
  "500": "#8b54e2",
145
145
  "600": "#6526b5",
146
146
  "700": "#490092",
147
- "800": "#1a004c",
147
+ "800": "#26004c",
148
148
  },
149
149
  red: {
150
150
  "100": "#ffe8e6",
@@ -152,31 +152,31 @@ var SDSLightThemeColors = {
152
152
  "300": "#ffafa8",
153
153
  "400": "#ff7e78",
154
154
  "500": "#db2131",
155
- "600": "#980013",
155
+ "600": "#980017",
156
156
  "700": "#6f0008",
157
157
  "800": "#340000",
158
158
  },
159
159
  yellow: {
160
- "100": "#ffefcf",
160
+ "100": "#fff3db",
161
161
  "200": "#ffdb97",
162
162
  "300": "#ffca5c",
163
163
  "400": "#fab700",
164
164
  "500": "#da9900",
165
- "600": "#b77800",
165
+ "600": "#b07300",
166
166
  "700": "#7c3e00",
167
167
  "800": "#541700",
168
168
  },
169
169
  };
170
170
  var SDSDarkThemeColors = {
171
171
  blue: {
172
- "100": "#002573",
173
- "200": "#0048c5",
174
- "300": "#2573f4",
175
- "400": "#5b9aff",
176
- "500": "#a2c9ff",
177
- "600": "#cde3ff",
178
- "700": "#e2eeff",
179
- "800": "#f7faff",
172
+ "100": "#0f1d4a",
173
+ "200": "#0a216e",
174
+ "300": "#0647b8",
175
+ "400": "#2573f4",
176
+ "500": "#5b9aff",
177
+ "600": "#a2c9ff",
178
+ "700": "#cde3ff",
179
+ "800": "#e2eeff",
180
180
  },
181
181
  gray: {
182
182
  "100": "#333333",
@@ -192,44 +192,44 @@ var SDSDarkThemeColors = {
192
192
  "900": "#ffffff",
193
193
  },
194
194
  green: {
195
- "100": "#053918",
196
- "200": "#12612e",
197
- "300": "#288b49",
198
- "400": "#43ae63",
199
- "500": "#85d898",
200
- "600": "#bcecc5",
201
- "700": "#daf4de",
202
- "800": "#f7fbf6",
195
+ "100": "#082608",
196
+ "200": "#063617",
197
+ "300": "#10632e",
198
+ "400": "#278b48",
199
+ "500": "#4bae68",
200
+ "600": "#85d898",
201
+ "700": "#bcecc5",
202
+ "800": "#daf4de",
203
203
  },
204
204
  purple: {
205
- "100": "#4b0190",
206
- "200": "#6b2ebc",
207
- "300": "#905de6",
208
- "400": "#aa89ef",
209
- "500": "#cebef8",
210
- "600": "#e4dcfc",
211
- "700": "#f0ebfe",
212
- "800": "#fbf9ff",
205
+ "100": "#331252",
206
+ "200": "#410f70",
207
+ "300": "#6429b2",
208
+ "400": "#905de6",
209
+ "500": "#aa89ef",
210
+ "600": "#cebef8",
211
+ "700": "#e4dcfc",
212
+ "800": "#f0ebfe",
213
213
  },
214
214
  red: {
215
- "100": "#630008",
216
- "200": "#A30000",
217
- "300": "#E52722",
218
- "400": "#FF695B",
219
- "500": "#FF9385",
220
- "600": "#FFBDB3",
221
- "700": "#FFD8D1",
222
- "800": "#FFF1EE",
215
+ "100": "#330603",
216
+ "200": "#660a12",
217
+ "300": "#9e1c1c",
218
+ "400": "#c73028",
219
+ "500": "#e05043",
220
+ "600": "#ff988a",
221
+ "700": "#ffbdb3",
222
+ "800": "#ffd8d1",
223
223
  },
224
224
  yellow: {
225
- "100": "#552300",
226
- "200": "#834500",
227
- "300": "#985a00",
228
- "400": "#ac6c00",
229
- "500": "#cf8e00",
230
- "600": "#efad00",
231
- "700": "#ffdc9a",
232
- "800": "#fcf2e3",
225
+ "100": "#361b07",
226
+ "200": "#52270a",
227
+ "300": "#965a0b",
228
+ "400": "#bd8804",
229
+ "500": "#d9a943",
230
+ "600": "#e5bc63",
231
+ "700": "#f5d789",
232
+ "800": "#ffe6a8",
233
233
  },
234
234
  };
235
235
  /**
@@ -287,7 +287,270 @@ var sharedAppTheme = {
287
287
  header: fontFamily,
288
288
  tabular: fontFamily,
289
289
  },
290
- styles: {
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: {
@@ -555,68 +818,128 @@ var sharedAppTheme = {
555
818
  /**
556
819
  * Create a SDS App Theme with custom colors that follows the SDS color model.
557
820
  */
558
- var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), {
559
- // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
560
- // applications to override those colors using their own custom theme.
561
- // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
562
- // we allow other apps to specify their colors once, and have them apply
563
- // throughout the application, such as in borders, etc without having to manually
564
- // override every theme property that makes use of colors.
565
- borders: {
566
- accent: {
567
- default: "1px solid ".concat(colors.blue[500]),
568
- focused: "1px solid ".concat(colors.blue[500]),
569
- hover: "1px solid ".concat(colors.blue[600]),
570
- open: "1px solid ".concat(colors.blue[500]),
571
- pressed: "1px solid ".concat(colors.blue[700]),
572
- selected: "1px solid ".concat(colors.blue[500]),
573
- },
574
- base: {
575
- default: "1px solid ".concat(colors.gray[500]),
576
- disabled: "1px solid ".concat(colors.gray[300]),
577
- divider: "1px solid ".concat(colors.gray[200]),
578
- hover: "1px solid ".concat(colors.gray[900]),
579
- pressed: "1px solid ".concat(colors.gray[900]),
580
- table: "1px solid ".concat(colors.gray[300]),
581
- },
582
- beta: {
583
- default: "1px solid ".concat(colors.purple[600]),
584
- extraThick: "4px solid ".concat(colors.purple[600]),
585
- thick: "2px solid ".concat(colors.purple[600]),
586
- },
587
- info: {
588
- default: "1px solid ".concat(colors.blue[600]),
589
- extraThick: "4px solid ".concat(colors.blue[600]),
590
- thick: "2px solid ".concat(colors.blue[600]),
591
- },
592
- link: {
593
- dashed: "1px dashed",
594
- solid: "1px solid",
595
- },
596
- negative: {
597
- default: "1px solid ".concat(colors.red[600]),
598
- extraThick: "4px solid ".concat(colors.red[600]),
599
- thick: "2px solid ".concat(colors.red[600]),
600
- },
601
- neutral: {
602
- default: "1px solid ".concat(colors.gray[500]),
603
- extraThick: "4px solid ".concat(colors.gray[500]),
604
- thick: "2px solid ".concat(colors.gray[500]),
605
- },
606
- none: "none",
607
- notice: {
608
- default: "1px solid ".concat(colors.yellow[600]),
609
- extraThick: "4px solid ".concat(colors.yellow[600]),
610
- thick: "2px solid ".concat(colors.yellow[600]),
611
- },
612
- positive: {
613
- default: "1px solid ".concat(colors.green[600]),
614
- extraThick: "4px solid ".concat(colors.green[600]),
615
- thick: "2px solid ".concat(colors.green[600]),
616
- },
617
- }, colors: colors })); };
821
+ var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
618
822
  var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
619
823
  var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
824
+ // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
825
+ // applications to override those colors using their own custom theme.
826
+ // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
827
+ // we allow other apps to specify their colors once, and have them apply
828
+ // throughout the application, such as in borders, etc without having to manually
829
+ // override every theme property that makes use of colors.
830
+ //
831
+ // (masoudmanson): We need to define borders separately for light and dark themes
832
+ // because the border colors are different for each theme.
833
+ SDSLightAppTheme.borders = {
834
+ accent: {
835
+ default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
836
+ focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
837
+ hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
838
+ open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
839
+ pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
840
+ selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
841
+ },
842
+ base: {
843
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
844
+ disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
845
+ divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
846
+ dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
847
+ hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
848
+ inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
849
+ pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
850
+ table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
851
+ },
852
+ beta: {
853
+ default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
854
+ extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
855
+ thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
856
+ },
857
+ info: {
858
+ default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
859
+ extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
860
+ thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
861
+ },
862
+ link: {
863
+ dashed: "1px dashed",
864
+ solid: "1px solid",
865
+ },
866
+ negative: {
867
+ default: "1px solid ".concat(SDSLightThemeColors.red[600]),
868
+ extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
869
+ thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
870
+ },
871
+ neutral: {
872
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
873
+ extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
874
+ thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
875
+ },
876
+ none: "none",
877
+ notice: {
878
+ default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
879
+ extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
880
+ thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
881
+ },
882
+ positive: {
883
+ default: "1px solid ".concat(SDSLightThemeColors.green[600]),
884
+ extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
885
+ thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
886
+ },
887
+ };
888
+ SDSDarkAppTheme.borders = {
889
+ accent: {
890
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
891
+ focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
892
+ hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
893
+ open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
894
+ pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
895
+ selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
896
+ },
897
+ base: {
898
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
899
+ disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
900
+ divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
901
+ dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
902
+ hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
903
+ inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
904
+ pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
905
+ table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
906
+ },
907
+ beta: {
908
+ default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
909
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
910
+ thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
911
+ },
912
+ info: {
913
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
914
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
915
+ thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
916
+ },
917
+ link: {
918
+ dashed: "1px dashed",
919
+ solid: "1px solid",
920
+ },
921
+ negative: {
922
+ default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
923
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
924
+ thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
925
+ },
926
+ neutral: {
927
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
928
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
929
+ thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
930
+ },
931
+ none: "none",
932
+ notice: {
933
+ default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
934
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
935
+ thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
936
+ },
937
+ positive: {
938
+ default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
939
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
940
+ thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
941
+ },
942
+ };
620
943
  /**
621
944
  * Helper function to select the appropriate theme settings.
622
945
  *
@@ -650,25 +973,32 @@ var SDSPaletteLight = function (appTheme) {
650
973
  fillHover: appTheme.colors.blue[600],
651
974
  fillPressed: appTheme.colors.blue[700],
652
975
  fillPrimary: appTheme.colors.blue[500],
653
- icon: appTheme.colors.blue[500],
654
- iconFocus: appTheme.colors.blue[500],
655
- iconHover: appTheme.colors.blue[600],
656
- iconOpen: appTheme.colors.blue[500],
657
- iconPressed: appTheme.colors.blue[700],
658
- iconSelected: appTheme.colors.blue[500],
659
- surfacePrimary: appTheme.colors.blue[100],
660
- surfaceSecondary: appTheme.colors.blue[500],
976
+ ornament: appTheme.colors.blue[500],
977
+ ornamentFocus: appTheme.colors.blue[500],
978
+ ornamentHover: appTheme.colors.blue[600],
979
+ ornamentOpen: appTheme.colors.blue[500],
980
+ ornamentPressed: appTheme.colors.blue[700],
981
+ ornamentSelected: appTheme.colors.blue[500],
982
+ surfacePrimary: appTheme.colors.blue[500],
983
+ surfaceSecondary: appTheme.colors.blue[100],
661
984
  textAction: appTheme.colors.blue[500],
662
985
  textActionHover: appTheme.colors.blue[600],
663
986
  textActionPressed: appTheme.colors.blue[700],
664
987
  },
665
988
  base: {
666
- border: appTheme.colors.gray[500],
989
+ backgroundPrimary: appTheme.colors.gray[50],
990
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
991
+ backgroundSecondary: appTheme.colors.gray[100],
992
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
993
+ backgroundTertiary: appTheme.colors.gray[200],
994
+ border: appTheme.colors.gray[600],
667
995
  borderDisabled: appTheme.colors.gray[300],
668
996
  borderHover: appTheme.colors.gray[900],
997
+ borderInverse: appTheme.colors.gray[50],
669
998
  borderPressed: appTheme.colors.gray[900],
670
999
  borderTable: appTheme.colors.gray[300],
671
1000
  divider: appTheme.colors.gray[200],
1001
+ dividerInverse: appTheme.colors.gray[600],
672
1002
  fillDisabled: appTheme.colors.gray[200],
673
1003
  /* the number 47 is the opacity of the color, which is equal to 28% */
674
1004
  fillHover: appTheme.colors.gray[300] + "47",
@@ -676,56 +1006,53 @@ var SDSPaletteLight = function (appTheme) {
676
1006
  fillPressed: appTheme.colors.gray[300] + "47",
677
1007
  fillPrimary: appTheme.colors.gray[50],
678
1008
  fillSelected: appTheme.colors.gray[900],
679
- iconDisabled: appTheme.colors.gray[300],
680
- iconPrimary: appTheme.colors.gray[500],
681
- iconPrimaryHover: appTheme.colors.gray[900],
682
- iconPrimaryInverse: appTheme.colors.gray[50],
683
- iconPrimaryInverseHover: appTheme.colors.gray[400],
684
- iconPrimaryInversePressed: appTheme.colors.gray[400],
685
- iconPrimaryPressed: appTheme.colors.gray[900],
686
- iconSecondary: appTheme.colors.gray[900],
687
- surfaceBackground: appTheme.colors.gray[50],
688
- surfacePrimary: appTheme.colors.gray[50],
689
- surfacePrimaryInverse: appTheme.colors.gray[900],
690
- surfaceSecondary: appTheme.colors.gray[100],
691
- surfaceTertiary: appTheme.colors.gray[200],
1009
+ ornamentDisabled: appTheme.colors.gray[300],
1010
+ ornamentOnFill: appTheme.colors.gray[50],
1011
+ ornamentPrimary: appTheme.colors.gray[900],
1012
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
1013
+ ornamentSecondary: appTheme.colors.gray[600],
1014
+ ornamentSecondaryHover: appTheme.colors.gray[900],
1015
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
1016
+ surface: appTheme.colors.gray[50],
1017
+ surfaceInverse: appTheme.colors.gray[900],
692
1018
  textDisabled: appTheme.colors.gray[300],
1019
+ textOnFill: appTheme.colors.gray[50],
693
1020
  textPrimary: appTheme.colors.gray[900],
694
1021
  textPrimaryInverse: appTheme.colors.gray[50],
695
1022
  textSecondary: appTheme.colors.gray[600],
696
1023
  textSecondaryInverse: appTheme.colors.gray[300],
697
1024
  },
698
1025
  beta: {
699
- border: appTheme.colors.purple[500],
1026
+ border: appTheme.colors.purple[600],
700
1027
  fillHover: appTheme.colors.purple[600],
701
1028
  fillPressed: appTheme.colors.purple[700],
702
1029
  fillPrimary: appTheme.colors.purple[500],
703
1030
  fillSecondary: appTheme.colors.purple[100],
704
1031
  ornament: appTheme.colors.purple[600],
705
- surfacePrimary: appTheme.colors.purple[100],
706
- surfaceSecondary: appTheme.colors.purple[500],
1032
+ surfacePrimary: appTheme.colors.purple[500],
1033
+ surfaceSecondary: appTheme.colors.purple[100],
707
1034
  text: appTheme.colors.purple[600],
708
1035
  },
709
1036
  info: {
710
- border: appTheme.colors.blue[500],
1037
+ border: appTheme.colors.blue[600],
711
1038
  fillHover: appTheme.colors.blue[600],
712
1039
  fillPressed: appTheme.colors.blue[700],
713
1040
  fillPrimary: appTheme.colors.blue[500],
714
1041
  fillSecondary: appTheme.colors.blue[100],
715
1042
  ornament: appTheme.colors.blue[600],
716
- surfacePrimary: appTheme.colors.blue[100],
717
- surfaceSecondary: appTheme.colors.blue[500],
1043
+ surfacePrimary: appTheme.colors.blue[500],
1044
+ surfaceSecondary: appTheme.colors.blue[100],
718
1045
  text: appTheme.colors.blue[600],
719
1046
  },
720
1047
  negative: {
721
- border: appTheme.colors.red[500],
1048
+ border: appTheme.colors.red[600],
722
1049
  fillHover: appTheme.colors.red[600],
723
1050
  fillPressed: appTheme.colors.red[700],
724
1051
  fillPrimary: appTheme.colors.red[500],
725
1052
  fillSecondary: appTheme.colors.red[100],
726
1053
  ornament: appTheme.colors.red[600],
727
- surfacePrimary: appTheme.colors.red[100],
728
- surfaceSecondary: appTheme.colors.red[500],
1054
+ surfacePrimary: appTheme.colors.red[500],
1055
+ surfaceSecondary: appTheme.colors.red[100],
729
1056
  text: appTheme.colors.red[600],
730
1057
  },
731
1058
  neutral: {
@@ -733,32 +1060,32 @@ var SDSPaletteLight = function (appTheme) {
733
1060
  fillHover: appTheme.colors.gray[600],
734
1061
  fillPressed: appTheme.colors.gray[700],
735
1062
  fillPrimary: appTheme.colors.gray[500],
736
- fillSecondary: appTheme.colors.gray[100],
1063
+ fillSecondary: appTheme.colors.gray[200],
737
1064
  ornament: appTheme.colors.gray[700],
738
- surfacePrimary: appTheme.colors.gray[200],
739
- surfaceSecondary: appTheme.colors.gray[500],
1065
+ surfacePrimary: appTheme.colors.gray[500],
1066
+ surfaceSecondary: appTheme.colors.gray[200],
740
1067
  text: appTheme.colors.gray[700],
741
1068
  },
742
1069
  notice: {
743
- border: appTheme.colors.yellow[500],
1070
+ border: appTheme.colors.yellow[600],
744
1071
  fillHover: appTheme.colors.yellow[600],
745
1072
  fillPressed: appTheme.colors.yellow[700],
746
1073
  fillPrimary: appTheme.colors.yellow[500],
747
1074
  fillSecondary: appTheme.colors.yellow[100],
748
1075
  ornament: appTheme.colors.yellow[600],
749
- surfacePrimary: appTheme.colors.yellow[100],
750
- surfaceSecondary: appTheme.colors.yellow[500],
1076
+ surfacePrimary: appTheme.colors.yellow[500],
1077
+ surfaceSecondary: appTheme.colors.yellow[100],
751
1078
  text: appTheme.colors.yellow[600],
752
1079
  },
753
1080
  positive: {
754
- border: appTheme.colors.green[500],
1081
+ border: appTheme.colors.green[600],
755
1082
  fillHover: appTheme.colors.green[600],
756
1083
  fillPressed: appTheme.colors.green[700],
757
1084
  fillPrimary: appTheme.colors.green[500],
758
1085
  fillSecondary: appTheme.colors.green[100],
759
1086
  ornament: appTheme.colors.green[600],
760
- surfacePrimary: appTheme.colors.green[100],
761
- surfaceSecondary: appTheme.colors.green[500],
1087
+ surfacePrimary: appTheme.colors.green[500],
1088
+ surfaceSecondary: appTheme.colors.green[100],
762
1089
  text: appTheme.colors.green[600],
763
1090
  },
764
1091
  };
@@ -766,34 +1093,41 @@ var SDSPaletteLight = function (appTheme) {
766
1093
  var SDSPaletteDark = function (appTheme) {
767
1094
  return {
768
1095
  accent: {
769
- border: appTheme.colors.blue[500],
770
- borderFocus: appTheme.colors.blue[500],
771
- borderHover: appTheme.colors.blue[600],
772
- borderOpen: appTheme.colors.blue[500],
773
- borderPressed: appTheme.colors.blue[700],
774
- borderSelected: appTheme.colors.blue[500],
775
- fillHover: appTheme.colors.blue[600],
776
- fillPressed: appTheme.colors.blue[700],
777
- fillPrimary: appTheme.colors.blue[500],
778
- icon: appTheme.colors.blue[500],
779
- iconFocus: appTheme.colors.blue[500],
780
- iconHover: appTheme.colors.blue[600],
781
- iconOpen: appTheme.colors.blue[500],
782
- iconPressed: appTheme.colors.blue[700],
783
- iconSelected: appTheme.colors.blue[500],
784
- surfacePrimary: appTheme.colors.blue[100],
785
- surfaceSecondary: appTheme.colors.blue[500],
786
- textAction: appTheme.colors.blue[500],
787
- textActionHover: appTheme.colors.blue[600],
788
- textActionPressed: appTheme.colors.blue[700],
1096
+ border: appTheme.colors.blue[600],
1097
+ borderFocus: appTheme.colors.blue[600],
1098
+ borderHover: appTheme.colors.blue[700],
1099
+ borderOpen: appTheme.colors.blue[600],
1100
+ borderPressed: appTheme.colors.blue[800],
1101
+ borderSelected: appTheme.colors.blue[600],
1102
+ fillHover: appTheme.colors.blue[700],
1103
+ fillPressed: appTheme.colors.blue[800],
1104
+ fillPrimary: appTheme.colors.blue[400],
1105
+ ornament: appTheme.colors.blue[600],
1106
+ ornamentFocus: appTheme.colors.blue[600],
1107
+ ornamentHover: appTheme.colors.blue[700],
1108
+ ornamentOpen: appTheme.colors.blue[600],
1109
+ ornamentPressed: appTheme.colors.blue[800],
1110
+ ornamentSelected: appTheme.colors.blue[600],
1111
+ surfacePrimary: appTheme.colors.blue[400],
1112
+ surfaceSecondary: appTheme.colors.blue[100],
1113
+ textAction: appTheme.colors.blue[600],
1114
+ textActionHover: appTheme.colors.blue[700],
1115
+ textActionPressed: appTheme.colors.blue[800],
789
1116
  },
790
1117
  base: {
791
- border: appTheme.colors.gray[500],
1118
+ backgroundPrimary: appTheme.colors.gray[75],
1119
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
1120
+ backgroundSecondary: appTheme.colors.gray[100],
1121
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
1122
+ backgroundTertiary: appTheme.colors.gray[200],
1123
+ border: appTheme.colors.gray[600],
792
1124
  borderDisabled: appTheme.colors.gray[300],
793
1125
  borderHover: appTheme.colors.gray[900],
1126
+ borderInverse: appTheme.colors.gray[50],
794
1127
  borderPressed: appTheme.colors.gray[900],
795
1128
  borderTable: appTheme.colors.gray[300],
796
1129
  divider: appTheme.colors.gray[200],
1130
+ dividerInverse: appTheme.colors.gray[600],
797
1131
  fillDisabled: appTheme.colors.gray[200],
798
1132
  /* the number 47 is the opacity of the color, which is equal to 28% */
799
1133
  fillHover: appTheme.colors.gray[300] + "47",
@@ -801,56 +1135,53 @@ var SDSPaletteDark = function (appTheme) {
801
1135
  fillPressed: appTheme.colors.gray[300] + "47",
802
1136
  fillPrimary: appTheme.colors.gray[100],
803
1137
  fillSelected: appTheme.colors.gray[900],
804
- iconDisabled: appTheme.colors.gray[300],
805
- iconPrimary: appTheme.colors.gray[500],
806
- iconPrimaryHover: appTheme.colors.gray[900],
807
- iconPrimaryInverse: appTheme.colors.gray[50],
808
- iconPrimaryInverseHover: appTheme.colors.gray[400],
809
- iconPrimaryInversePressed: appTheme.colors.gray[400],
810
- iconPrimaryPressed: appTheme.colors.gray[900],
811
- iconSecondary: appTheme.colors.gray[900],
812
- surfaceBackground: appTheme.colors.gray[75],
813
- surfacePrimary: appTheme.colors.gray[100],
814
- surfacePrimaryInverse: appTheme.colors.gray[900],
815
- surfaceSecondary: appTheme.colors.gray[200],
816
- surfaceTertiary: appTheme.colors.gray[300],
1138
+ ornamentDisabled: appTheme.colors.gray[300],
1139
+ ornamentOnFill: appTheme.colors.gray[900],
1140
+ ornamentPrimary: appTheme.colors.gray[900],
1141
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
1142
+ ornamentSecondary: appTheme.colors.gray[600],
1143
+ ornamentSecondaryHover: appTheme.colors.gray[900],
1144
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
1145
+ surface: appTheme.colors.gray[100],
1146
+ surfaceInverse: appTheme.colors.gray[900],
817
1147
  textDisabled: appTheme.colors.gray[300],
1148
+ textOnFill: appTheme.colors.gray[900],
818
1149
  textPrimary: appTheme.colors.gray[900],
819
1150
  textPrimaryInverse: appTheme.colors.gray[50],
820
1151
  textSecondary: appTheme.colors.gray[600],
821
1152
  textSecondaryInverse: appTheme.colors.gray[300],
822
1153
  },
823
1154
  beta: {
824
- border: appTheme.colors.purple[500],
825
- fillHover: appTheme.colors.purple[600],
826
- fillPressed: appTheme.colors.purple[700],
827
- fillPrimary: appTheme.colors.purple[500],
1155
+ border: appTheme.colors.purple[600],
1156
+ fillHover: appTheme.colors.purple[700],
1157
+ fillPressed: appTheme.colors.purple[800],
1158
+ fillPrimary: appTheme.colors.purple[400],
828
1159
  fillSecondary: appTheme.colors.purple[100],
829
1160
  ornament: appTheme.colors.purple[600],
830
- surfacePrimary: appTheme.colors.purple[100],
831
- surfaceSecondary: appTheme.colors.purple[500],
1161
+ surfacePrimary: appTheme.colors.purple[400],
1162
+ surfaceSecondary: appTheme.colors.purple[100],
832
1163
  text: appTheme.colors.purple[600],
833
1164
  },
834
1165
  info: {
835
- border: appTheme.colors.blue[500],
836
- fillHover: appTheme.colors.blue[600],
837
- fillPressed: appTheme.colors.blue[700],
838
- fillPrimary: appTheme.colors.blue[500],
1166
+ border: appTheme.colors.blue[600],
1167
+ fillHover: appTheme.colors.blue[700],
1168
+ fillPressed: appTheme.colors.blue[800],
1169
+ fillPrimary: appTheme.colors.blue[400],
839
1170
  fillSecondary: appTheme.colors.blue[100],
840
1171
  ornament: appTheme.colors.blue[600],
841
- surfacePrimary: appTheme.colors.blue[100],
842
- surfaceSecondary: appTheme.colors.blue[500],
1172
+ surfacePrimary: appTheme.colors.blue[400],
1173
+ surfaceSecondary: appTheme.colors.blue[100],
843
1174
  text: appTheme.colors.blue[600],
844
1175
  },
845
1176
  negative: {
846
- border: appTheme.colors.red[500],
847
- fillHover: appTheme.colors.red[600],
848
- fillPressed: appTheme.colors.red[700],
849
- fillPrimary: appTheme.colors.red[500],
1177
+ border: appTheme.colors.red[600],
1178
+ fillHover: appTheme.colors.red[700],
1179
+ fillPressed: appTheme.colors.red[800],
1180
+ fillPrimary: appTheme.colors.red[400],
850
1181
  fillSecondary: appTheme.colors.red[100],
851
1182
  ornament: appTheme.colors.red[600],
852
- surfacePrimary: appTheme.colors.red[100],
853
- surfaceSecondary: appTheme.colors.red[500],
1183
+ surfacePrimary: appTheme.colors.red[400],
1184
+ surfaceSecondary: appTheme.colors.red[100],
854
1185
  text: appTheme.colors.red[600],
855
1186
  },
856
1187
  neutral: {
@@ -858,32 +1189,32 @@ var SDSPaletteDark = function (appTheme) {
858
1189
  fillHover: appTheme.colors.gray[600],
859
1190
  fillPressed: appTheme.colors.gray[700],
860
1191
  fillPrimary: appTheme.colors.gray[500],
861
- fillSecondary: appTheme.colors.gray[100],
1192
+ fillSecondary: appTheme.colors.gray[200],
862
1193
  ornament: appTheme.colors.gray[700],
863
- surfacePrimary: appTheme.colors.gray[200],
864
- surfaceSecondary: appTheme.colors.gray[500],
1194
+ surfacePrimary: appTheme.colors.gray[500],
1195
+ surfaceSecondary: appTheme.colors.gray[200],
865
1196
  text: appTheme.colors.gray[700],
866
1197
  },
867
1198
  notice: {
868
- border: appTheme.colors.yellow[500],
869
- fillHover: appTheme.colors.yellow[600],
870
- fillPressed: appTheme.colors.yellow[700],
871
- fillPrimary: appTheme.colors.yellow[500],
1199
+ border: appTheme.colors.yellow[600],
1200
+ fillHover: appTheme.colors.yellow[700],
1201
+ fillPressed: appTheme.colors.yellow[800],
1202
+ fillPrimary: appTheme.colors.yellow[400],
872
1203
  fillSecondary: appTheme.colors.yellow[100],
873
1204
  ornament: appTheme.colors.yellow[600],
874
- surfacePrimary: appTheme.colors.yellow[100],
875
- surfaceSecondary: appTheme.colors.yellow[500],
876
- text: appTheme.colors.yellow[700],
1205
+ surfacePrimary: appTheme.colors.yellow[400],
1206
+ surfaceSecondary: appTheme.colors.yellow[100],
1207
+ text: appTheme.colors.yellow[600],
877
1208
  },
878
1209
  positive: {
879
- border: appTheme.colors.green[500],
880
- fillHover: appTheme.colors.green[600],
881
- fillPressed: appTheme.colors.green[700],
882
- fillPrimary: appTheme.colors.green[500],
1210
+ border: appTheme.colors.green[600],
1211
+ fillHover: appTheme.colors.green[700],
1212
+ fillPressed: appTheme.colors.green[800],
1213
+ fillPrimary: appTheme.colors.green[400],
883
1214
  fillSecondary: appTheme.colors.green[100],
884
1215
  ornament: appTheme.colors.green[600],
885
- surfacePrimary: appTheme.colors.green[100],
886
- surfaceSecondary: appTheme.colors.green[500],
1216
+ surfacePrimary: appTheme.colors.green[400],
1217
+ surfaceSecondary: appTheme.colors.green[100],
887
1218
  text: appTheme.colors.green[600],
888
1219
  },
889
1220
  };
@@ -894,6 +1225,13 @@ var SDSPaletteDark = function (appTheme) {
894
1225
  function makeThemeOptions(appTheme, mode) {
895
1226
  return {
896
1227
  app: appTheme,
1228
+ breakpoints: {
1229
+ values: {
1230
+ lg: 1024,
1231
+ md: 512,
1232
+ sm: 0,
1233
+ },
1234
+ },
897
1235
  components: {
898
1236
  MuiButtonBase: {
899
1237
  defaultProps: {
@@ -1072,20 +1410,20 @@ function makeThemeOptions(appTheme, mode) {
1072
1410
  },
1073
1411
  },
1074
1412
  typography: {
1075
- body1: appTheme.typography.styles.body.regular.xs,
1076
- body2: appTheme.typography.styles.body.regular.xxs,
1077
- button: appTheme.typography.styles.body.regular.button,
1078
- caption: appTheme.typography.styles.body.regular.xxxs,
1413
+ body1: appTheme.typography.wideStyles.body.regular.xs,
1414
+ body2: appTheme.typography.wideStyles.body.regular.xxs,
1415
+ button: appTheme.typography.wideStyles.body.regular.button,
1416
+ caption: appTheme.typography.wideStyles.body.regular.xxxs,
1079
1417
  fontFamily: "".concat(appTheme.typography.fontFamily.body, ", sans-serif"),
1080
- h1: appTheme.typography.styles.header.semibold.xxl,
1081
- h2: appTheme.typography.styles.header.semibold.xl,
1082
- h3: appTheme.typography.styles.header.semibold.l,
1083
- h4: appTheme.typography.styles.header.semibold.m,
1084
- h5: appTheme.typography.styles.header.semibold.s,
1085
- h6: appTheme.typography.styles.header.semibold.xs,
1086
- overline: appTheme.typography.styles.caps.semibold.xxxs,
1087
- subtitle1: appTheme.typography.styles.body.regular.xs,
1088
- subtitle2: appTheme.typography.styles.header.semibold.xxs,
1418
+ h1: appTheme.typography.wideStyles.header.semibold.xxl,
1419
+ h2: appTheme.typography.wideStyles.header.semibold.xl,
1420
+ h3: appTheme.typography.wideStyles.header.semibold.l,
1421
+ h4: appTheme.typography.wideStyles.header.semibold.m,
1422
+ h5: appTheme.typography.wideStyles.header.semibold.s,
1423
+ h6: appTheme.typography.wideStyles.header.semibold.xs,
1424
+ overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
1425
+ subtitle1: appTheme.typography.wideStyles.body.regular.xs,
1426
+ subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
1089
1427
  },
1090
1428
  };
1091
1429
  }
@@ -1169,6 +1507,10 @@ var getBorders = function (_a) {
1169
1507
  var theme = _a.theme;
1170
1508
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
1171
1509
  };
1510
+ var getBreakpoints = function (_a) {
1511
+ var theme = _a.theme;
1512
+ return (theme === null || theme === void 0 ? void 0 : theme.breakpoints) || null;
1513
+ };
1172
1514
 
1173
1515
  function focusVisibleA11yStyle(props) {
1174
1516
  var _a;
@@ -1176,13 +1518,18 @@ function focusVisibleA11yStyle(props) {
1176
1518
  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
1519
  }
1178
1520
 
1179
- var fontBody = function (fontSize, fontWeight) {
1521
+ var fontBody = function (fontSize, fontWeight, isNarrow) {
1180
1522
  if (fontWeight === void 0) { fontWeight = "regular"; }
1523
+ if (isNarrow === void 0) { isNarrow = false; }
1181
1524
  return function (props) {
1525
+ var _a;
1182
1526
  var typography = getTypography(props);
1183
1527
  if (!typography)
1184
1528
  return null;
1185
- var body = typography.styles.body, bodyFontFamily = typography.fontFamily.body;
1529
+ var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
1530
+ if (isNarrow) {
1531
+ 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));
1532
+ }
1186
1533
  return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
1187
1534
  };
1188
1535
  };
@@ -1198,24 +1545,32 @@ var fontBodySemiboldS = fontBody("s", "semibold");
1198
1545
  var fontBodySemiboldXs = fontBody("xs", "semibold");
1199
1546
  var fontBodySemiboldXxs = fontBody("xxs", "semibold");
1200
1547
  var fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
1201
- var fontCaps = function (fontSize) {
1548
+ var fontCaps = function (fontSize, isNarrow) {
1549
+ if (isNarrow === void 0) { isNarrow = false; }
1202
1550
  return function (props) {
1551
+ var _a;
1203
1552
  var typography = getTypography(props);
1204
1553
  if (!typography)
1205
1554
  return null;
1206
- var caps = typography.styles.caps, capsFontFamily = typography.fontFamily.caps;
1207
- return react.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n text-transform: uppercase;\n "], ["\n ", "\n text-transform: uppercase;\n "])), themeToCss(caps.semibold[fontSize], capsFontFamily));
1555
+ var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
1556
+ 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
1557
+ ? react.css(templateObject_2$D || (templateObject_2$D = __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
1558
  };
1209
1559
  };
1210
1560
  var fontCapsXxs = fontCaps("xxs");
1211
1561
  var fontCapsXxxs = fontCaps("xxxs");
1212
1562
  var fontCapsXxxxs = fontCaps("xxxxs");
1213
- var fontHeader = function (fontSize) {
1563
+ var fontHeader = function (fontSize, isNarrow) {
1564
+ if (isNarrow === void 0) { isNarrow = false; }
1214
1565
  return function (props) {
1566
+ var _a;
1215
1567
  var typography = getTypography(props);
1216
1568
  if (!typography)
1217
1569
  return null;
1218
- var header = typography.styles.header, headerFontFamily = typography.fontFamily.header;
1570
+ var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
1571
+ if (isNarrow) {
1572
+ return react.css(templateObject_4$o || (templateObject_4$o = __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));
1573
+ }
1219
1574
  return themeToCss(header.semibold[fontSize], headerFontFamily);
1220
1575
  };
1221
1576
  };
@@ -1227,28 +1582,36 @@ var fontHeaderS = fontHeader("s");
1227
1582
  var fontHeaderXs = fontHeader("xs");
1228
1583
  var fontHeaderXxs = fontHeader("xxs");
1229
1584
  var fontHeaderXxxs = fontHeader("xxxs");
1230
- var fontCode = function (fontSize, fontWeight) {
1585
+ var fontCode = function (fontSize, fontWeight, isNarrow) {
1231
1586
  if (fontWeight === void 0) { fontWeight = "regular"; }
1587
+ if (isNarrow === void 0) { isNarrow = false; }
1232
1588
  return function (props) {
1589
+ var _a;
1233
1590
  var typography = getTypography(props);
1234
1591
  if (!typography)
1235
1592
  return null;
1236
- var code = typography.styles.code, codeFontFamily = typography.fontFamily.code;
1237
- return react.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), themeToCss(code[fontWeight][fontSize], codeFontFamily));
1593
+ var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
1594
+ if (isNarrow) {
1595
+ return react.css(templateObject_5$i || (templateObject_5$i = __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));
1596
+ }
1597
+ return themeToCss(code[fontWeight][fontSize], codeFontFamily);
1238
1598
  };
1239
1599
  };
1240
1600
  var fontCodeXs = fontCode("xs", "regular");
1241
1601
  var fontCodeS = fontCode("s", "regular");
1242
1602
  var fontCodeSemiboldXs = fontCode("xs", "semibold");
1243
1603
  var fontCodeSemiboldS = fontCode("s", "semibold");
1244
- var fontTabular = function (fontSize, fontWeight) {
1604
+ var fontTabular = function (fontSize, fontWeight, isNarrow) {
1245
1605
  if (fontWeight === void 0) { fontWeight = "regular"; }
1606
+ if (isNarrow === void 0) { isNarrow = false; }
1246
1607
  return function (props) {
1608
+ var _a;
1247
1609
  var typography = getTypography(props);
1248
1610
  if (!typography)
1249
1611
  return null;
1250
- var tabular = typography.styles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1251
- return react.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n ", "\n font-variant-numeric: tabular-nums;\n "], ["\n ", "\n font-variant-numeric: tabular-nums;\n "])), themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
1612
+ var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1613
+ return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
1614
+ ? react.css(templateObject_6$d || (templateObject_6$d = __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
1615
  };
1253
1616
  };
1254
1617
  var fontTabularXs = fontTabular("xs", "regular");
@@ -1257,35 +1620,35 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
1257
1620
  var fontTabularSemiboldS = fontTabular("s", "semibold");
1258
1621
  function themeToCss(fontTheme, fontFamily) {
1259
1622
  if (fontFamily === void 0) { fontFamily = "inherit"; }
1260
- return react.css(templateObject_4$p || (templateObject_4$p = __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);
1623
+ 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
1624
  }
1262
- var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p;
1625
+ var templateObject_1$Y, templateObject_2$D, templateObject_3$t, templateObject_4$o, templateObject_5$i, templateObject_6$d, templateObject_7$9, templateObject_8$7;
1263
1626
 
1264
- 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) {
1627
+ var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1265
1628
  var spaces = getSpaces(props);
1266
1629
  return react.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
1267
1630
  });
1268
- var templateObject_1$X, templateObject_2$B;
1631
+ var templateObject_1$X, templateObject_2$C;
1269
1632
 
1270
1633
  var AccordionDetails = function (props) {
1271
1634
  var children = props.children;
1272
1635
  return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
1273
1636
  };
1274
1637
 
1275
- var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1638
+ var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1276
1639
  var _a, _b;
1277
1640
  var spaces = getSpaces(props);
1278
1641
  var semanticColors = getSemanticColors(props);
1279
- return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
1642
+ return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
1280
1643
  });
1281
- var StyledSubtitle = styled__default.default("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1644
+ var StyledSubtitle = styled__default.default("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1282
1645
  var _a;
1283
1646
  var semanticColors = getSemanticColors(props);
1284
1647
  return react.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
1285
1648
  });
1286
- var templateObject_1$W, templateObject_2$A, templateObject_3$s, templateObject_4$o;
1649
+ var templateObject_1$W, templateObject_2$B, templateObject_3$s, templateObject_4$n;
1287
1650
 
1288
- var _path$2b, _path2$E, _path3$6;
1651
+ var _path$2b, _path2$C, _path3$6;
1289
1652
  function _extends$2g() { return _extends$2g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2g.apply(null, arguments); }
1290
1653
  var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1291
1654
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2g({
@@ -1295,7 +1658,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1295
1658
  }, props), _path$2b || (_path$2b = /*#__PURE__*/React__namespace.createElement("path", {
1296
1659
  fillRule: "evenodd",
1297
1660
  d: "M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0m-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512"
1298
- })), _path2$E || (_path2$E = /*#__PURE__*/React__namespace.createElement("path", {
1661
+ })), _path2$C || (_path2$C = /*#__PURE__*/React__namespace.createElement("path", {
1299
1662
  d: "M14.248 7.998a1.023 1.023 0 1 0 0-2.047 1.023 1.023 0 0 0 0 2.047m-1.463 4.142a.756.756 0 0 1 .242-1.041l1.033-.643a.756.756 0 0 1 .799 1.282l-1.033.644a.756.756 0 0 1-1.04-.242Zm-2.627-2.83a.756.756 0 1 0 1.491-.249L11.4 7.57a.756.756 0 0 0-1.49.249z"
1300
1663
  })), _path3$6 || (_path3$6 = /*#__PURE__*/React__namespace.createElement("path", {
1301
1664
  fillRule: "evenodd",
@@ -1303,7 +1666,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1303
1666
  })));
1304
1667
  };
1305
1668
 
1306
- var _path$2a, _path2$D;
1669
+ var _path$2a, _path2$B;
1307
1670
  function _extends$2f() { return _extends$2f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2f.apply(null, arguments); }
1308
1671
  var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1309
1672
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2f({
@@ -1312,7 +1675,7 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1312
1675
  height: 16
1313
1676
  }, props), _path$2a || (_path$2a = /*#__PURE__*/React__namespace.createElement("path", {
1314
1677
  d: "M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968m-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955"
1315
- })), _path2$D || (_path2$D = /*#__PURE__*/React__namespace.createElement("path", {
1678
+ })), _path2$B || (_path2$B = /*#__PURE__*/React__namespace.createElement("path", {
1316
1679
  fillRule: "evenodd",
1317
1680
  d: "M2.446 4.326.382 2.37A1.22 1.22 0 0 1 .334.645 1.22 1.22 0 0 1 2.058.597L3.667 2.12a5.385 5.385 0 0 1 8.771 1.103l1.881-.767a1.22 1.22 0 1 1 .92 2.261l-2.182.89a5.4 5.4 0 0 1-.333 1.99l-1.575 4.267 1.905 1.76c.495.458.525 1.23.068 1.725a1.22 1.22 0 0 1-1.723.069l-1.582-1.462a5.38 5.38 0 0 1-5.62 1.188A5.39 5.39 0 0 1 1.009 8.22zm8.477 2.605-1.61 4.361a3.465 3.465 0 0 1-4.452 2.05A3.47 3.47 0 0 1 2.81 8.887l1.61-4.361a3.465 3.465 0 0 1 4.452-2.05 3.47 3.47 0 0 1 2.051 4.455"
1318
1681
  })));
@@ -1357,7 +1720,7 @@ var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props
1357
1720
  })));
1358
1721
  };
1359
1722
 
1360
- var _path$26, _path2$C;
1723
+ var _path$26, _path2$A;
1361
1724
  function _extends$2b() { return _extends$2b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2b.apply(null, arguments); }
1362
1725
  var SvgIconBookLarge = function SvgIconBookLarge(props) {
1363
1726
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2b({
@@ -1368,7 +1731,7 @@ var SvgIconBookLarge = function SvgIconBookLarge(props) {
1368
1731
  fillRule: "evenodd",
1369
1732
  d: "M18.895 1.545H5.865a3.04 3.04 0 0 0-3.041 3.041v14.95a1 1 0 0 0 .024.12 3.04 3.04 0 0 0 3.017 2.799h13.03a2.28 2.28 0 0 0 2.078-1.342c.08-.178-.02-.374-.18-.486a2 2 0 0 1-.123-.096 1.4 1.4 0 0 1-.497-1.053c0-.398.18-.778.497-1.052.268-.232.506-.532.506-.886V3.826a2.28 2.28 0 0 0-2.28-2.28m.76 14.95V3.826a.76.76 0 0 0-.76-.76H8.237v13.429zM6.717 3.065h-.851a1.52 1.52 0 0 0-1.52 1.521v12.331c.46-.273.985-.42 1.52-.422h.851zM4.79 20.532c.289.276.677.421 1.076.403h13.543a1.61 1.61 0 0 1-.866-1.426 1.61 1.61 0 0 1 1.012-1.493H5.865a1.46 1.46 0 0 0-1.076 2.516",
1370
1733
  clipRule: "evenodd"
1371
- })), _path2$C || (_path2$C = /*#__PURE__*/React__namespace.createElement("path", {
1734
+ })), _path2$A || (_path2$A = /*#__PURE__*/React__namespace.createElement("path", {
1372
1735
  d: "M10.894 6.222c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.582a.76.76 0 0 1-.76-.76"
1373
1736
  })));
1374
1737
  };
@@ -1387,7 +1750,7 @@ var SvgIconBookSmall = function SvgIconBookSmall(props) {
1387
1750
  })));
1388
1751
  };
1389
1752
 
1390
- var _path$24, _path2$B;
1753
+ var _path$24, _path2$z;
1391
1754
  function _extends$29() { return _extends$29 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$29.apply(null, arguments); }
1392
1755
  var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1393
1756
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$29({
@@ -1396,7 +1759,7 @@ var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1396
1759
  height: 24
1397
1760
  }, props), _path$24 || (_path$24 = /*#__PURE__*/React__namespace.createElement("path", {
1398
1761
  d: "M17.367 8.708a.9.9 0 1 0-1.461-1.052l-5.239 7.276-3.18-3.534a.9.9 0 1 0-1.338 1.204l3.995 4.44a.818.818 0 0 0 1.273-.07z"
1399
- })), _path2$B || (_path2$B = /*#__PURE__*/React__namespace.createElement("path", {
1762
+ })), _path2$z || (_path2$z = /*#__PURE__*/React__namespace.createElement("path", {
1400
1763
  fillRule: "evenodd",
1401
1764
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
1402
1765
  })));
@@ -1454,7 +1817,7 @@ var SvgIconChevronDownSmall = function SvgIconChevronDownSmall(props) {
1454
1817
  })));
1455
1818
  };
1456
1819
 
1457
- var _path$1$, _path2$A;
1820
+ var _path$1$, _path2$y;
1458
1821
  function _extends$24() { return _extends$24 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$24.apply(null, arguments); }
1459
1822
  var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1460
1823
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$24({
@@ -1463,12 +1826,12 @@ var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1463
1826
  height: 16
1464
1827
  }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React__namespace.createElement("path", {
1465
1828
  d: "M8.377 15.53a.57.57 0 0 1-.813 0L1.267 9.14a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006l4.757 4.826a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809l-6.34 6.39Z"
1466
- })), _path2$A || (_path2$A = /*#__PURE__*/React__namespace.createElement("path", {
1829
+ })), _path2$y || (_path2$y = /*#__PURE__*/React__namespace.createElement("path", {
1467
1830
  d: "M8.377 8.405a.57.57 0 0 1-.813 0l-6.297-6.39a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006L7.57 5.316a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809z"
1468
1831
  })));
1469
1832
  };
1470
1833
 
1471
- var _path$1_, _path2$z;
1834
+ var _path$1_, _path2$x;
1472
1835
  function _extends$23() { return _extends$23 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$23.apply(null, arguments); }
1473
1836
  var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1474
1837
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$23({
@@ -1477,7 +1840,7 @@ var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1477
1840
  height: 16
1478
1841
  }, props), _path$1_ || (_path$1_ = /*#__PURE__*/React__namespace.createElement("path", {
1479
1842
  d: "M.47 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808L3.56 7.585a.57.57 0 0 0-.001.813l4.83 4.793a.57.57 0 0 1 .004.808l-.725.73a.57.57 0 0 1-.808.004z"
1480
- })), _path2$z || (_path2$z = /*#__PURE__*/React__namespace.createElement("path", {
1843
+ })), _path2$x || (_path2$x = /*#__PURE__*/React__namespace.createElement("path", {
1481
1844
  d: "M7.595 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808l-4.826 4.756a.57.57 0 0 0-.002.813l4.832 4.793a.57.57 0 0 1 .003.808l-.725.73a.57.57 0 0 1-.808.004z"
1482
1845
  })));
1483
1846
  };
@@ -1508,7 +1871,7 @@ var SvgIconChevronLeftSmall = function SvgIconChevronLeftSmall(props) {
1508
1871
  })));
1509
1872
  };
1510
1873
 
1511
- var _path$1X, _path2$y;
1874
+ var _path$1X, _path2$w;
1512
1875
  function _extends$20() { return _extends$20 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$20.apply(null, arguments); }
1513
1876
  var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1514
1877
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$20({
@@ -1517,7 +1880,7 @@ var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1517
1880
  height: 16
1518
1881
  }, props), _path$1X || (_path$1X = /*#__PURE__*/React__namespace.createElement("path", {
1519
1882
  d: "M8.406 8.384a.57.57 0 0 0-.002-.813l-6.39-6.297a.57.57 0 0 0-.807.006l-.722.732a.57.57 0 0 0 .005.808l4.826 4.757a.57.57 0 0 1 .002.812L.486 13.182a.57.57 0 0 0-.003.808l.725.73a.57.57 0 0 0 .808.004z"
1520
- })), _path2$y || (_path2$y = /*#__PURE__*/React__namespace.createElement("path", {
1883
+ })), _path2$w || (_path2$w = /*#__PURE__*/React__namespace.createElement("path", {
1521
1884
  d: "M15.53 7.571a.57.57 0 0 1 0 .813l-6.39 6.34a.57.57 0 0 1-.807-.004l-.725-.73a.57.57 0 0 1 .003-.808l4.832-4.793a.57.57 0 0 0-.002-.812L7.615 2.82a.57.57 0 0 1-.005-.808l.722-.732a.57.57 0 0 1 .808-.006z"
1522
1885
  })));
1523
1886
  };
@@ -1574,7 +1937,7 @@ var SvgIconChevronUpSmall = function SvgIconChevronUpSmall(props) {
1574
1937
  })));
1575
1938
  };
1576
1939
 
1577
- var _path$1S, _path2$x;
1940
+ var _path$1S, _path2$v;
1578
1941
  function _extends$1X() { return _extends$1X = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1X.apply(null, arguments); }
1579
1942
  var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1580
1943
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1X({
@@ -1583,7 +1946,7 @@ var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1583
1946
  height: 16
1584
1947
  }, props), _path$1S || (_path$1S = /*#__PURE__*/React__namespace.createElement("path", {
1585
1948
  d: "M8.393 7.602a.57.57 0 0 0-.812.002l-6.298 6.39a.57.57 0 0 0 .006.808l.733.722a.57.57 0 0 0 .808-.006l4.756-4.826a.57.57 0 0 1 .812-.002l4.793 4.832a.57.57 0 0 0 .808.003l.73-.725a.57.57 0 0 0 .004-.808z"
1586
- })), _path2$x || (_path2$x = /*#__PURE__*/React__namespace.createElement("path", {
1949
+ })), _path2$v || (_path2$v = /*#__PURE__*/React__namespace.createElement("path", {
1587
1950
  d: "M7.58.479a.57.57 0 0 1 .813-.002l6.34 6.39a.57.57 0 0 1-.003.808L14 8.4a.57.57 0 0 1-.809-.003L8.398 3.565a.57.57 0 0 0-.812.002L2.83 8.393a.57.57 0 0 1-.808.006l-.733-.722a.57.57 0 0 1-.006-.809L7.581.478Z"
1588
1951
  })));
1589
1952
  };
@@ -1601,7 +1964,7 @@ var SvgIconCirclesOverlap2Large = function SvgIconCirclesOverlap2Large(props) {
1601
1964
  })));
1602
1965
  };
1603
1966
 
1604
- var _path$1Q, _path2$w;
1967
+ var _path$1Q, _path2$u;
1605
1968
  function _extends$1V() { return _extends$1V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1V.apply(null, arguments); }
1606
1969
  var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1607
1970
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1V({
@@ -1611,12 +1974,12 @@ var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1611
1974
  }, props), _path$1Q || (_path$1Q = /*#__PURE__*/React__namespace.createElement("path", {
1612
1975
  fillRule: "evenodd",
1613
1976
  d: "M8 12.473a5.25 5.25 0 1 1 0-8.946 5.25 5.25 0 1 1 0 8.946m-1.256-1.08a3.707 3.707 0 1 1 0-6.787A5.23 5.23 0 0 0 5.5 8a5.23 5.23 0 0 0 1.244 3.394Zm2.512-6.787a3.707 3.707 0 1 1 0 6.787A5.23 5.23 0 0 0 10.5 8a5.23 5.23 0 0 0-1.244-3.394M8 5.514c.595.658.957 1.53.957 2.486S8.595 9.828 8 10.486A3.7 3.7 0 0 1 7.043 8c0-.957.362-1.828.957-2.486"
1614
- })), _path2$w || (_path2$w = /*#__PURE__*/React__namespace.createElement("path", {
1977
+ })), _path2$u || (_path2$u = /*#__PURE__*/React__namespace.createElement("path", {
1615
1978
  d: "M8.957 8c0-.957-.362-1.828-.957-2.486A3.7 3.7 0 0 0 7.043 8c0 .957.362 1.828.957 2.486.595-.658.957-1.53.957-2.486"
1616
1979
  })));
1617
1980
  };
1618
1981
 
1619
- var _path$1P, _path2$v;
1982
+ var _path$1P, _path2$t;
1620
1983
  function _extends$1U() { return _extends$1U = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1U.apply(null, arguments); }
1621
1984
  var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1622
1985
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1U({
@@ -1625,7 +1988,7 @@ var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1625
1988
  height: 24
1626
1989
  }, props), _path$1P || (_path$1P = /*#__PURE__*/React__namespace.createElement("path", {
1627
1990
  d: "M13.283 3.635a.487.487 0 0 1 .597-.345l.856.23c.26.07.414.337.345.597l-4.354 16.25a.487.487 0 0 1-.597.345l-.857-.23a.487.487 0 0 1-.345-.596z"
1628
- })), _path2$v || (_path2$v = /*#__PURE__*/React__namespace.createElement("path", {
1991
+ })), _path2$t || (_path2$t = /*#__PURE__*/React__namespace.createElement("path", {
1629
1992
  fillRule: "evenodd",
1630
1993
  d: "M.145 12.358a.487.487 0 0 1 0-.693L5.592 6.26c.191-.19.5-.188.69.003l.617.622c.19.191.189.5-.002.69l-4.12 4.087a.487.487 0 0 0 0 .693l4.116 4.056a.487.487 0 0 1 .005.689l-.615.625a.487.487 0 0 1-.69.005L.144 12.36Zm23.71-.73a.486.486 0 0 1 0 .693l-5.448 5.407a.487.487 0 0 1-.69-.003l-.617-.623a.487.487 0 0 1 .002-.689l4.12-4.087a.487.487 0 0 0 0-.693l-4.116-4.056a.487.487 0 0 1-.005-.69l.615-.624a.487.487 0 0 1 .69-.005z"
1631
1994
  })));
@@ -1644,7 +2007,7 @@ var SvgIconCodeSmall = function SvgIconCodeSmall(props) {
1644
2007
  })));
1645
2008
  };
1646
2009
 
1647
- var _path$1N, _path2$u;
2010
+ var _path$1N, _path2$s;
1648
2011
  function _extends$1S() { return _extends$1S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1S.apply(null, arguments); }
1649
2012
  var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1650
2013
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1S({
@@ -1654,13 +2017,13 @@ var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1654
2017
  }, props), _path$1N || (_path$1N = /*#__PURE__*/React__namespace.createElement("path", {
1655
2018
  fillRule: "evenodd",
1656
2019
  d: "M15.926 8.494a.49.49 0 0 1 .71.609l-.034.066-2.773 5.505a.46.46 0 0 1-.148.176l-.067.04-5.544 2.772a.5.5 0 0 1-.216.054.5.5 0 0 1-.348-.147.49.49 0 0 1-.121-.491l.028-.072 2.772-5.525a.46.46 0 0 1 .149-.176l.067-.04zm-1.254 1.929-2.826 1.415 1.411 1.412z"
1657
- })), _path2$u || (_path2$u = /*#__PURE__*/React__namespace.createElement("path", {
2020
+ })), _path2$s || (_path2$s = /*#__PURE__*/React__namespace.createElement("path", {
1658
2021
  fillRule: "evenodd",
1659
2022
  d: "M8.954 2.956s-.009.222-.008.358c-4.163 1.3-7.184 5.186-7.184 9.778 0 5.656 4.586 10.242 10.243 10.242s10.243-4.586 10.243-10.242c0-4.596-3.027-8.484-7.195-9.782v-.472a2.29 2.29 0 0 0-2.285-2.17h-1.526l-.118.003a2.29 2.29 0 0 0-2.17 2.285m4.577 0c0-.395-.3-.72-.685-.759l-.078-.004h-1.526c-.395 0-.72.3-.759.685v.083a10.3 10.3 0 0 1 3.048 0zM3.439 12.232a8.61 8.61 0 0 1 7.706-7.706 1 1 0 0 0-.013.158v.907c0 .5.39.907.873.907.482 0 .873-.406.873-.907v-.907a1 1 0 0 0-.013-.158 8.61 8.61 0 0 1 7.706 7.706 1 1 0 0 0-.16-.014h-.909c-.502 0-.909.391-.909.874 0 .482.407.873.91.873h.908a1 1 0 0 0 .16-.014 8.61 8.61 0 0 1-7.706 7.707 1 1 0 0 0 .013-.159v-.907c0-.5-.39-.907-.873-.907-.482 0-.873.406-.873.907v.907a1 1 0 0 0 .013.159A8.61 8.61 0 0 1 3.44 13.95a1 1 0 0 0 .16.014h.909c.502 0 .909-.391.909-.873 0-.483-.407-.874-.91-.874H3.6a1 1 0 0 0-.16.014Z"
1660
2023
  })));
1661
2024
  };
1662
2025
 
1663
- var _path$1M, _path2$t;
2026
+ var _path$1M, _path2$r;
1664
2027
  function _extends$1R() { return _extends$1R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1R.apply(null, arguments); }
1665
2028
  var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1666
2029
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1R({
@@ -1669,7 +2032,7 @@ var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1669
2032
  height: 24
1670
2033
  }, props), _path$1M || (_path$1M = /*#__PURE__*/React__namespace.createElement("path", {
1671
2034
  d: "M6.028 18.418h7.164c.485 0 .866-.296.866-.674 0-.377-.381-.673-.866-.673H6.028c-.485 0-.866.296-.866.673s.381.674.866.674m7.164-2.833H6.028c-.477 0-.866-.305-.866-.682 0-.372.381-.664.866-.664h7.164c.477 0 .866.307.866.683 0 .372-.381.663-.866.663"
1672
- })), _path2$t || (_path2$t = /*#__PURE__*/React__namespace.createElement("path", {
2035
+ })), _path2$r || (_path2$r = /*#__PURE__*/React__namespace.createElement("path", {
1673
2036
  fillRule: "evenodd",
1674
2037
  d: "M22.087 5.672c0-.22-.09-.436-.249-.593L17.512.717a.85.85 0 0 0-.593-.248H8.434c-.959 0-1.769.812-1.769 1.773v3.015h-3.01c-.975 0-1.768.795-1.768 1.773v14.723c0 .978.793 1.773 1.769 1.773h11.908c.977 0 1.77-.795 1.77-1.773v-3.015h3.008c.96 0 1.77-.813 1.77-1.773zM3.594 7.006c0-.032.028-.061.062-.061h7.643v3.492c0 .465.377.843.842.843h3.484v10.45a.063.063 0 0 1-.061.061H3.656a.063.063 0 0 1-.062-.061zm13.49 2.837-4.326-4.362a.85.85 0 0 0-.593-.247H8.372V2.242c0-.034.028-.062.062-.062h7.643v3.492c0 .465.377.844.842.844h3.484v10.45a.063.063 0 0 1-.061.06h-3.007v-6.59a.85.85 0 0 0-.25-.593Zm-4.076-.274V8.132l1.434 1.437zm4.753-4.765V3.368l1.434 1.436z"
1675
2038
  })));
@@ -1688,7 +2051,7 @@ var SvgIconCopySmall = function SvgIconCopySmall(props) {
1688
2051
  })));
1689
2052
  };
1690
2053
 
1691
- var _path$1K, _path2$s, _path3$5;
2054
+ var _path$1K, _path2$q, _path3$5;
1692
2055
  function _extends$1P() { return _extends$1P = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1P.apply(null, arguments); }
1693
2056
  var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1694
2057
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1P({
@@ -1698,7 +2061,7 @@ var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1698
2061
  }, props), _path$1K || (_path$1K = /*#__PURE__*/React__namespace.createElement("path", {
1699
2062
  fillRule: "evenodd",
1700
2063
  d: "M11.603.376a.82.82 0 0 1 .794 0l9.818 5.454a.818.818 0 0 1 0 1.43l-9.818 5.455a.82.82 0 0 1-.794 0L1.784 7.261a.818.818 0 0 1 0-1.43L11.603.375Zm-7.736 6.17L12 11.063l8.134-4.519L12 2.027 3.867 6.545Z"
1701
- })), _path2$s || (_path2$s = /*#__PURE__*/React__namespace.createElement("path", {
2064
+ })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
1702
2065
  fillRule: "evenodd",
1703
2066
  d: "M22.233 5.84c.25.147.403.416.403.705v10.91a.82.82 0 0 1-.42.715l-9.819 5.454a.818.818 0 0 1-1.215-.715V12c0-.297.16-.57.42-.715l9.819-5.455a.82.82 0 0 1 .812.01m-9.415 6.641v9.038L21 16.973V7.936z"
1704
2067
  })), _path3$5 || (_path3$5 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -1822,7 +2185,7 @@ var SvgIconEditSmall = function SvgIconEditSmall(props) {
1822
2185
  })));
1823
2186
  };
1824
2187
 
1825
- var _path$1A, _path2$r;
2188
+ var _path$1A, _path2$p;
1826
2189
  function _extends$1F() { return _extends$1F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1F.apply(null, arguments); }
1827
2190
  var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
1828
2191
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1F({
@@ -1831,12 +2194,12 @@ var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
1831
2194
  height: 16
1832
2195
  }, props), _path$1A || (_path$1A = /*#__PURE__*/React__namespace.createElement("path", {
1833
2196
  d: "M0 3.482V13.2a.8.8 0 0 0 .8.8h14.4a.8.8 0 0 0 .8-.8V3.482l-6.258 6.605a2.4 2.4 0 0 1-3.484 0z"
1834
- })), _path2$r || (_path2$r = /*#__PURE__*/React__namespace.createElement("path", {
2197
+ })), _path2$p || (_path2$p = /*#__PURE__*/React__namespace.createElement("path", {
1835
2198
  d: "M8.58 8.987 15.2 2H.8l6.62 6.987a.8.8 0 0 0 1.16 0"
1836
2199
  })));
1837
2200
  };
1838
2201
 
1839
- var _path$1z, _path2$q;
2202
+ var _path$1z, _path2$o;
1840
2203
  function _extends$1E() { return _extends$1E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1E.apply(null, arguments); }
1841
2204
  var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLarge(props) {
1842
2205
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1E({
@@ -1846,7 +2209,7 @@ var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLar
1846
2209
  }, props), _path$1z || (_path$1z = /*#__PURE__*/React__namespace.createElement("path", {
1847
2210
  fillRule: "evenodd",
1848
2211
  d: "M12 14.53c-.662 0-1.354-.425-1.404-1.375l-.28-6.545v-.025c0-.93.755-1.687 1.685-1.687s1.686.757 1.686 1.687v.024l-.28 6.54A1.41 1.41 0 0 1 12 14.531Zm.453-7.603a.45.45 0 0 0-.9 0l.249 5.791c.01.19.07.223.2.223.058 0 .192-.022.202-.225l.248-5.789Zm-1.816 8.892c.36-.36.857-.566 1.364-.566a1.935 1.935 0 0 1 1.927 1.927c0 .51-.208 1.008-.569 1.365a1.92 1.92 0 0 1-1.358.56 1.94 1.94 0 0 1-1.364-.563 1.94 1.94 0 0 1-.563-1.363c0-.506.206-1.002.563-1.36m.852 1.88c.267.27.757.27 1.019.003A.727.727 0 0 0 12 16.457a.727.727 0 0 0-.512 1.243Z"
1849
- })), _path2$q || (_path2$q = /*#__PURE__*/React__namespace.createElement("path", {
2212
+ })), _path2$o || (_path2$o = /*#__PURE__*/React__namespace.createElement("path", {
1850
2213
  fillRule: "evenodd",
1851
2214
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
1852
2215
  })));
@@ -1865,7 +2228,7 @@ var SvgIconExclamationMarkCircleSmall = function SvgIconExclamationMarkCircleSma
1865
2228
  })));
1866
2229
  };
1867
2230
 
1868
- var _path$1x, _path2$p, _path3$4;
2231
+ var _path$1x, _path2$n, _path3$4;
1869
2232
  function _extends$1C() { return _extends$1C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1C.apply(null, arguments); }
1870
2233
  var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpeechBubbleLarge(props) {
1871
2234
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1C({
@@ -1874,7 +2237,7 @@ var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpe
1874
2237
  height: 24
1875
2238
  }, props), _path$1x || (_path$1x = /*#__PURE__*/React__namespace.createElement("path", {
1876
2239
  d: "M10.931 9.436a1.036 1.036 0 0 0 2.073 0V2.782a1.036 1.036 0 0 0-2.073 0z"
1877
- })), _path2$p || (_path2$p = /*#__PURE__*/React__namespace.createElement("path", {
2240
+ })), _path2$n || (_path2$n = /*#__PURE__*/React__namespace.createElement("path", {
1878
2241
  d: "m10.68 18.4-3.477 3.166V18.4H4.027V5.545h3.5a.807.807 0 0 0 .808-.809.807.807 0 0 0-.808-.809h-3.96c-.632 0-1.145.513-1.145 1.146v13.772c0 .633.513 1.146 1.145 1.146h2.03v2.623c0 .997 1.187 1.518 1.921.843l3.774-3.466 9.136.002c.633 0 1.146-.513 1.146-1.146l-.002-13.774c0-.633-.513-1.146-1.146-1.146h-3.723a.809.809 0 0 0 0 1.618h3.263v12.854H10.68Z"
1879
2242
  })), _path3$4 || (_path3$4 = /*#__PURE__*/React__namespace.createElement("path", {
1880
2243
  d: "m12.922 15.012-.005.005c-.226.231-.574.365-.95.365-.377 0-.73-.136-.966-.373a1.4 1.4 0 0 1-.397-.978c0-.356.151-.724.397-.971.257-.258.61-.405.966-.405.348 0 .7.145.964.41l.002.002a1.374 1.374 0 0 1-.011 1.945"
@@ -1894,7 +2257,7 @@ var SvgIconEyeClosedSmall = function SvgIconEyeClosedSmall(props) {
1894
2257
  })));
1895
2258
  };
1896
2259
 
1897
- var _path$1v, _path2$o;
2260
+ var _path$1v, _path2$m;
1898
2261
  function _extends$1A() { return _extends$1A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1A.apply(null, arguments); }
1899
2262
  var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
1900
2263
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1A({
@@ -1903,7 +2266,7 @@ var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
1903
2266
  height: 16
1904
2267
  }, props), _path$1v || (_path$1v = /*#__PURE__*/React__namespace.createElement("path", {
1905
2268
  d: "M9.89 8a1.89 1.89 0 1 0-3.78 0 1.89 1.89 0 0 0 3.78 0"
1906
- })), _path2$o || (_path2$o = /*#__PURE__*/React__namespace.createElement("path", {
2269
+ })), _path2$m || (_path2$m = /*#__PURE__*/React__namespace.createElement("path", {
1907
2270
  fillRule: "evenodd",
1908
2271
  d: "M15.868 7.546C15.725 7.334 12.319 2.33 8 2.33S.275 7.334.132 7.546a.84.84 0 0 0 0 .908C.275 8.666 3.68 13.67 8 13.67s7.725-5.004 7.868-5.216a.84.84 0 0 0 0-.908M4.402 8a3.598 3.598 0 1 1 7.196 0 3.598 3.598 0 0 1-7.196 0"
1909
2272
  })));
@@ -1986,7 +2349,7 @@ var SvgIconFlaskLarge = function SvgIconFlaskLarge(props) {
1986
2349
  })));
1987
2350
  };
1988
2351
 
1989
- var _path$1o, _path2$n;
2352
+ var _path$1o, _path2$l;
1990
2353
  function _extends$1t() { return _extends$1t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1t.apply(null, arguments); }
1991
2354
  var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
1992
2355
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1t({
@@ -1998,14 +2361,14 @@ var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
1998
2361
  fillRule: "evenodd",
1999
2362
  d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43M9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235h-.4a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857z",
2000
2363
  clipRule: "evenodd"
2001
- })), _path2$n || (_path2$n = /*#__PURE__*/React__namespace.createElement("path", {
2364
+ })), _path2$l || (_path2$l = /*#__PURE__*/React__namespace.createElement("path", {
2002
2365
  fillRule: "evenodd",
2003
2366
  d: "M18.375 12.75a5.625 5.625 0 1 1 0 11.25 5.625 5.625 0 0 1 0-11.25m.011 2.124c-1.042 0-1.904.81-1.968 1.851v.66a.66.66 0 0 0-.66.652v2.626c0 .364.295.66.66.66h3.93a.653.653 0 0 0 .652-.66l.008-2.625a.65.65 0 0 0-.653-.653v-.66a1.97 1.97 0 0 0-1.969-1.85m-.011 3.583c.27 0 .488.219.488.488a.48.48 0 0 1-.248.413v.674a.24.24 0 0 1-.473 0v-.674a.47.47 0 0 1-.247-.413c0-.266.214-.483.48-.488m0-3.045a1.313 1.313 0 0 1 1.313 1.313v.66h-2.625v-.66a1.32 1.32 0 0 1 1.312-1.313",
2004
2367
  clipRule: "evenodd"
2005
2368
  })));
2006
2369
  };
2007
2370
 
2008
- var _path$1n, _path2$m;
2371
+ var _path$1n, _path2$k;
2009
2372
  function _extends$1s() { return _extends$1s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1s.apply(null, arguments); }
2010
2373
  var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
2011
2374
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1s({
@@ -2016,7 +2379,7 @@ var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
2016
2379
  fill: "#CCC",
2017
2380
  fillRule: "evenodd",
2018
2381
  d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43ZM9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235H13a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857l2.754-4.486Z"
2019
- })), _path2$m || (_path2$m = /*#__PURE__*/React__namespace.createElement("path", {
2382
+ })), _path2$k || (_path2$k = /*#__PURE__*/React__namespace.createElement("path", {
2020
2383
  fillRule: "evenodd",
2021
2384
  d: "M18.83 12.768a5.625 5.625 0 1 0-.91 11.214 5.625 5.625 0 0 0 .91-11.213Zm.644.818q.328.077.645.187.176.121.383.173a4.8 4.8 0 0 1 1.582 1.192q.045.053.053.12a.65.65 0 0 1 0 .315.6.6 0 0 0-.045.188.28.28 0 0 0 .217.24q.142.018.285 0a.18.18 0 0 1 .165.12q.064.19.173.36a4.8 4.8 0 0 1 .36 1.657.3.3 0 0 1-.075.21q-.15.166-.263.36a5.5 5.5 0 0 1-.577 1.073 1.2 1.2 0 0 0-.315.45 2.3 2.3 0 0 0-.045.382c0 .053-.098.053-.15 0a2.9 2.9 0 0 1-.405-.937c-.045-.24-.098-.48-.165-.75a.98.98 0 0 0-.435-.578 2.2 2.2 0 0 0-.75-.112.89.89 0 0 1-.75-.27.57.57 0 0 1-.12-.33 1.5 1.5 0 0 1 .75-1.583c.067-.052.142-.075.21-.12a.51.51 0 0 0 .172-.502.068.068 0 0 0-.097-.053q-.212.066-.405.173c-.075 0-.15 0-.12-.075a2.8 2.8 0 0 1 .09-.75 1.04 1.04 0 0 0 0-.75.23.23 0 0 0-.15-.098h-.668q.175-.106.308-.262a.2.2 0 0 1 .142-.03m-2.422.067a.083.083 0 0 1 .12.053c.075.12.12.24.195.382.148.29.165.629.045.93-.165.338-.548.48-.863.653a4.4 4.4 0 0 0-1.605 1.432s-.045.075-.067.075a.083.083 0 0 1-.12-.052.6.6 0 0 1-.195-.165s-.09 0-.09.075a.75.75 0 0 0 .352.862.5.5 0 0 1 .15.09c.09.12 0 .293 0 .435s.263.308.48.285a2.4 2.4 0 0 0 .57-.187 1.44 1.44 0 0 1 1.298.165c.187.12.36.315.547.435a.93.93 0 0 0 .578.187.2.2 0 0 1 .12.045.69.69 0 0 1-.12.6 5 5 0 0 1-.525.503c-.413.457-.503 1.155-.84 1.657a1.4 1.4 0 0 0-.195.308 1.3 1.3 0 0 0-.045.502s0 .075-.045.053a1 1 0 0 1-.24-.098.16.16 0 0 1-.098-.12 6.5 6.5 0 0 0-.697-1.987 1.7 1.7 0 0 0-.525-.645c-.075-.053-.143-.098-.165-.173s0-.12 0-.165a1.85 1.85 0 0 0-.75-1.702.6.6 0 0 1-.24-.218c-.053-.09-.053-.24-.098-.33a1.4 1.4 0 0 0-.337-.292c-.045 0-.045-.068-.045-.12a4.88 4.88 0 0 1 3.45-3.473"
2022
2385
  })));
@@ -2074,7 +2437,7 @@ var SvgIconGridLarge = function SvgIconGridLarge(props) {
2074
2437
  })));
2075
2438
  };
2076
2439
 
2077
- var _path$1i, _path2$l;
2440
+ var _path$1i, _path2$j;
2078
2441
  function _extends$1n() { return _extends$1n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1n.apply(null, arguments); }
2079
2442
  var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2080
2443
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1n({
@@ -2085,13 +2448,13 @@ var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2085
2448
  fill: "#CCC",
2086
2449
  fillRule: "evenodd",
2087
2450
  d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
2088
- })), _path2$l || (_path2$l = /*#__PURE__*/React__namespace.createElement("path", {
2451
+ })), _path2$j || (_path2$j = /*#__PURE__*/React__namespace.createElement("path", {
2089
2452
  fillRule: "evenodd",
2090
2453
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
2091
2454
  })));
2092
2455
  };
2093
2456
 
2094
- var _path$1h, _path2$k;
2457
+ var _path$1h, _path2$i;
2095
2458
  function _extends$1m() { return _extends$1m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1m.apply(null, arguments); }
2096
2459
  var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2097
2460
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1m({
@@ -2102,7 +2465,7 @@ var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2102
2465
  fill: "#CCC",
2103
2466
  fillRule: "evenodd",
2104
2467
  d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
2105
- })), _path2$k || (_path2$k = /*#__PURE__*/React__namespace.createElement("path", {
2468
+ })), _path2$i || (_path2$i = /*#__PURE__*/React__namespace.createElement("path", {
2106
2469
  fillRule: "evenodd",
2107
2470
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
2108
2471
  })));
@@ -2133,7 +2496,7 @@ var SvgIconHouseSmall = function SvgIconHouseSmall(props) {
2133
2496
  })));
2134
2497
  };
2135
2498
 
2136
- var _path$1e, _path2$j;
2499
+ var _path$1e, _path2$h;
2137
2500
  function _extends$1j() { return _extends$1j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1j.apply(null, arguments); }
2138
2501
  var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2139
2502
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1j({
@@ -2143,7 +2506,7 @@ var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2143
2506
  }, props), _path$1e || (_path$1e = /*#__PURE__*/React__namespace.createElement("path", {
2144
2507
  fillRule: "evenodd",
2145
2508
  d: "M13.365 8.185c-.36.36-.857.566-1.364.566a1.935 1.935 0 0 1-1.926-1.926A1.923 1.923 0 0 1 12 4.899c.51 0 1.006.205 1.364.563.357.357.563.854.563 1.363 0 .507-.206 1.003-.563 1.36Zm-.852-1.88c-.267-.27-.757-.27-1.019-.003a.726.726 0 0 0 .507 1.245.728.728 0 0 0 .512-1.243Zm-.512 3.169c.663 0 1.635.425 1.685 1.375v6.571a1.687 1.687 0 0 1-3.371-.001v-6.564c.043-.898 1.036-1.381 1.686-1.381m-.452 7.603a.45.45 0 0 0 .9 0v-5.565c-.01-.19-.201-.45-.45-.45-.248 0-.44.248-.45.452z"
2146
- })), _path2$j || (_path2$j = /*#__PURE__*/React__namespace.createElement("path", {
2509
+ })), _path2$h || (_path2$h = /*#__PURE__*/React__namespace.createElement("path", {
2147
2510
  fillRule: "evenodd",
2148
2511
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
2149
2512
  })));
@@ -2188,7 +2551,7 @@ var SvgIconLifeRingSmall = function SvgIconLifeRingSmall(props) {
2188
2551
  })));
2189
2552
  };
2190
2553
 
2191
- var _path$1a, _path2$i;
2554
+ var _path$1a, _path2$g;
2192
2555
  function _extends$1f() { return _extends$1f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1f.apply(null, arguments); }
2193
2556
  var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2194
2557
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1f({
@@ -2198,7 +2561,7 @@ var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2198
2561
  }, props), _path$1a || (_path$1a = /*#__PURE__*/React__namespace.createElement("path", {
2199
2562
  fillRule: "evenodd",
2200
2563
  d: "M12.296 2.194c3.341.144 6.067 2.783 6.242 6.037a6.1 6.1 0 0 1-1.402 4.172c-.748.9-1.257 1.77-1.58 2.678l-.008.024v3.132c0 .39-.24.703-.57.835-.08.655-.676 2.695-1.294 2.695-.073.046-3.28.046-3.375 0-.672 0-1.213-2.028-1.293-2.673a.92.92 0 0 1-.571-.834v-3.155l-.008-.023c-.323-.908-.831-1.78-1.581-2.704a6.1 6.1 0 0 1-1.401-3.902c0-1.737.728-3.351 2.025-4.552 1.3-1.203 3.025-1.802 4.816-1.73m3.365 9.053a4.5 4.5 0 0 0 1.037-2.992c-.114-2.266-2.05-4.161-4.45-4.27a4.74 4.74 0 0 0-3.462 1.24c-.928.87-1.443 2.02-1.443 3.25 0 1.02.337 1.97.99 2.774.689.839 1.207 1.68 1.593 2.523h4.14c.387-.863.907-1.686 1.595-2.524Zm-1.977 6.094v-1.754H10.31v1.754h3.375Zm-2.489 2.748c.047.081 1.524.067 1.609 0 .11-.188.229-.717.275-.956h-2.164c.047.233.17.767.28.957Z"
2201
- })), _path2$i || (_path2$i = /*#__PURE__*/React__namespace.createElement("path", {
2564
+ })), _path2$g || (_path2$g = /*#__PURE__*/React__namespace.createElement("path", {
2202
2565
  d: "M12.99 6.472c0-.547-.443-.794-.99-.794a2.793 2.793 0 0 0-2.79 2.79c0 .547.315.99.862.99a.99.99 0 0 0 .981-.855l.01-.135c0-.405.428-.939.817-.997l.12-.009a.99.99 0 0 0 .99-.99"
2203
2566
  })));
2204
2567
  };
@@ -2624,7 +2987,7 @@ var SvgIconLoadingSmall = function SvgIconLoadingSmall(props) {
2624
2987
  }))));
2625
2988
  };
2626
2989
 
2627
- var _path$13, _path2$h;
2990
+ var _path$13, _path2$f;
2628
2991
  function _extends$16() { return _extends$16 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$16.apply(null, arguments); }
2629
2992
  var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2630
2993
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
@@ -2633,7 +2996,7 @@ var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2633
2996
  height: 16
2634
2997
  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
2635
2998
  d: "M8 3.733c-1.067 0-1.92.854-1.92 1.92v.96h3.733v-.96C9.92 4.587 9.067 3.733 8 3.733m0 4.374c-.427 0-.64.32-.64.64q0 .32.32.64v.96q0 .32.32.32t.32-.32v-.96q.32-.16.32-.64c.107-.32-.213-.64-.64-.64"
2636
- })), _path2$h || (_path2$h = /*#__PURE__*/React__namespace.createElement("path", {
2999
+ })), _path2$f || (_path2$f = /*#__PURE__*/React__namespace.createElement("path", {
2637
3000
  fillRule: "evenodd",
2638
3001
  d: "M8 0C3.627 0 0 3.627 0 8s3.627 8 8 8 8-3.627 8-8-3.52-8-8-8m3.733 11.2c0 .533-.426.96-.96.96H5.227a.956.956 0 0 1-.96-.96V7.467c0-.534.426-.96.96-.96v-.96c0-1.494 1.28-2.774 2.773-2.774s2.773 1.28 2.773 2.774v.96c.534 0 .96.426.96.96z"
2639
3002
  })));
@@ -2690,7 +3053,7 @@ var SvgIconOpenSmall = function SvgIconOpenSmall(props) {
2690
3053
  })));
2691
3054
  };
2692
3055
 
2693
- var _path$_, _path2$g;
3056
+ var _path$_, _path2$e;
2694
3057
  function _extends$11() { return _extends$11 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$11.apply(null, arguments); }
2695
3058
  var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2696
3059
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$11({
@@ -2701,7 +3064,7 @@ var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2701
3064
  fillRule: "evenodd",
2702
3065
  d: "M9.853 7.185c.664 0 1.636.425 1.686 1.376v6.57a1.687 1.687 0 0 1-3.371 0V8.567c.042-.899 1.036-1.382 1.685-1.382m-.451 7.603a.45.45 0 0 0 .9 0V9.223c-.01-.19-.202-.449-.45-.449-.249 0-.44.248-.45.451zm6.43-6.228c-.05-.95-1.022-1.375-1.686-1.375-.65 0-1.643.483-1.685 1.381v6.565c0 .93.756 1.686 1.685 1.686.93 0 1.686-.756 1.686-1.686zm-1.688 6.668a.45.45 0 0 1-.45-.44V9.225c.01-.203.202-.45.45-.45.25 0 .44.258.45.448v5.565a.45.45 0 0 1-.45.44",
2703
3066
  clipRule: "evenodd"
2704
- })), _path2$g || (_path2$g = /*#__PURE__*/React__namespace.createElement("path", {
3067
+ })), _path2$e || (_path2$e = /*#__PURE__*/React__namespace.createElement("path", {
2705
3068
  fillRule: "evenodd",
2706
3069
  d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m0-1.667a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666",
2707
3070
  clipRule: "evenodd"
@@ -2795,7 +3158,7 @@ var SvgIconPinSmall = function SvgIconPinSmall(props) {
2795
3158
  })));
2796
3159
  };
2797
3160
 
2798
- var _path$S, _path2$f;
3161
+ var _path$S, _path2$d;
2799
3162
  function _extends$V() { return _extends$V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$V.apply(null, arguments); }
2800
3163
  var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
2801
3164
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$V({
@@ -2805,7 +3168,7 @@ var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
2805
3168
  }, props), _path$S || (_path$S = /*#__PURE__*/React__namespace.createElement("path", {
2806
3169
  fillRule: "evenodd",
2807
3170
  d: "M12 20.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"
2808
- })), _path2$f || (_path2$f = /*#__PURE__*/React__namespace.createElement("path", {
3171
+ })), _path2$d || (_path2$d = /*#__PURE__*/React__namespace.createElement("path", {
2809
3172
  fillRule: "evenodd",
2810
3173
  d: "m15.333 12.333-5.5-3.175v6.35zm1.334 1.155a1.333 1.333 0 0 0 0-2.31l-6.5-3.752c-.89-.513-2 .128-2 1.155v7.505a1.333 1.333 0 0 0 2 1.155z"
2811
3174
  })));
@@ -2837,7 +3200,7 @@ var SvgIconPlusSmall = function SvgIconPlusSmall(props) {
2837
3200
  })));
2838
3201
  };
2839
3202
 
2840
- var _path$P, _path2$e;
3203
+ var _path$P, _path2$c;
2841
3204
  function _extends$S() { return _extends$S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$S.apply(null, arguments); }
2842
3205
  var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
2843
3206
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$S({
@@ -2848,13 +3211,13 @@ var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
2848
3211
  fill: "#CCC",
2849
3212
  fillRule: "evenodd",
2850
3213
  d: "M21.828 5.775c-.15-.225-.374-.375-.598-.525l.075-.525c.15-1.35-.822-2.55-2.167-2.625H9.576c-.224 0-.448-.075-.597-.3L8.232.9C7.709.375 7.036 0 6.289 0H3.675C3.002 0 2.33.3 1.882.825c-.523.525-.747 1.2-.673 1.95l.3 2.4c-.3.15-.598.3-.897.6A2.48 2.48 0 0 0 .014 7.65l.822 9.375A2.76 2.76 0 0 0 3.6 19.5h9.637c-.075-.3-.075-.6-.075-.9 0-.225 0-.525.075-.75H3.6c-.598 0-1.046-.45-1.046-.975L1.658 7.5a.85.85 0 0 1 .224-.6c.15-.15.373-.3.597-.3h17.556c.224 0 .448.075.597.3a.85.85 0 0 1 .224.6l-.522 5.7c.597.15 1.12.45 1.568.75l.598-6.3c0-.675-.224-1.35-.672-1.875m-2.241-.825H3.152l-.3-2.4c0-.225.076-.45.225-.6s.374-.3.598-.3h2.614c.224 0 .449.075.598.3l.747.9c.448.6 1.12.9 1.868.9h9.263c.224 0 .448.075.597.225.15.15.225.375.225.6z"
2851
- })), _path2$e || (_path2$e = /*#__PURE__*/React__namespace.createElement("path", {
3214
+ })), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
2852
3215
  fillRule: "evenodd",
2853
3216
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
2854
3217
  })));
2855
3218
  };
2856
3219
 
2857
- var _path$O, _path2$d;
3220
+ var _path$O, _path2$b;
2858
3221
  function _extends$R() { return _extends$R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$R.apply(null, arguments); }
2859
3222
  var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
2860
3223
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$R({
@@ -2865,7 +3228,7 @@ var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
2865
3228
  fill: "#CCC",
2866
3229
  fillRule: "evenodd",
2867
3230
  d: "M13.123 19.05v-.45c0-.225 0-.525.075-.75H3.61c-.6 0-1.049-.45-1.049-.975L1.662 7.5c0-.225.075-.45.225-.6s.374-.3.6-.3h17.602c.225 0 .45.075.6.3.149.15.224.375.224.6l-.524 5.7c.3.075.524.15.748.3 0 0 .075 0 .075.075.225.15.45.225.675.375l.599-6.3a2.47 2.47 0 0 0-.6-1.875c-.15-.225-.374-.375-.599-.525l.075-.525c.15-1.35-.824-2.55-2.172-2.625H9.602c-.225 0-.45-.075-.6-.3L8.255.9C7.729.375 7.055 0 6.306 0H3.685C3.01 0 2.336.3 1.887.825c-.525.525-.75 1.2-.674 1.95l.3 2.4c-.3.15-.6.3-.9.6A2.48 2.48 0 0 0 .014 7.65l.824 9.375A2.767 2.767 0 0 0 3.61 19.5h9.662c-.075-.15-.075-.3-.15-.45ZM3.085 1.95c.15-.15.375-.3.6-.3h2.621c.225 0 .45.075.6.3l.749.9c.449.6 1.123.9 1.872.9h9.288a.85.85 0 0 1 .6.225.85.85 0 0 1 .224.6l-.075.375H3.085l-.224-2.4c0-.225.075-.45.224-.6"
2868
- })), _path2$d || (_path2$d = /*#__PURE__*/React__namespace.createElement("path", {
3231
+ })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
2869
3232
  fillRule: "evenodd",
2870
3233
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052a5.606 5.606 0 0 0-5.156-5.156m.673.822.672.224c.15.075.224.15.374.15.598.298 1.12.672 1.569 1.195 0 0 .075.075.075.15v.298c0 .075-.075.15-.075.225 0 .149.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .074 0 .149-.074.224a1.6 1.6 0 0 0-.3.373c-.149.3-.298.747-.522.972-.15.15-.3.298-.3.448-.074.15 0 .299-.074.373 0 .075-.075.075-.15 0-.223-.298-.298-.597-.373-.896-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.075-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.3-.149-.597.225-1.27.748-1.568.075-.075.15-.075.224-.15.15-.15.224-.299.15-.523 0-.074-.075-.074-.075-.074-.15.074-.3.074-.374.149-.075 0-.15 0-.15-.075 0-.224 0-.448.075-.747s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.299c.074.075.074.075.149.075m-2.391.075c.075 0 .075 0 .15.075.074.149.149.224.223.373.15.299.224.673.075.897-.15.299-.523.448-.822.672-.672.299-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.299.447.299s.374-.15.598-.224a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.447s.374.225.598.225c.075 0 .075 0 .15.074a.58.58 0 0 1-.15.598c-.15.224-.373.299-.523.523-.373.448-.523 1.12-.822 1.644-.075.075-.15.224-.224.299-.15.15-.15.299-.15.523 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.672-2.017c-.15-.224-.3-.523-.523-.672-.075-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.747-1.718c-.075-.075-.224-.15-.224-.224-.075-.075-.075-.224-.075-.299l-.299-.299c-.075 0-.075-.075-.075-.15.3-1.643 1.644-2.988 3.363-3.436"
2871
3234
  })));
@@ -2949,7 +3312,7 @@ var SvgIconRefreshSmall = function SvgIconRefreshSmall(props) {
2949
3312
  })));
2950
3313
  };
2951
3314
 
2952
- var _path$H, _path2$c, _path3$3;
3315
+ var _path$H, _path2$a, _path3$3;
2953
3316
  function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
2954
3317
  var SvgIconReportLarge = function SvgIconReportLarge(props) {
2955
3318
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$K({
@@ -2958,7 +3321,7 @@ var SvgIconReportLarge = function SvgIconReportLarge(props) {
2958
3321
  height: 24
2959
3322
  }, props), _path$H || (_path$H = /*#__PURE__*/React__namespace.createElement("path", {
2960
3323
  d: "M3.142 21.243h11.554a.77.77 0 1 0 0-1.54H3.912V2.756h9.244v3.851c0 .425.344.77.77.77h3.851V9.69a.77.77 0 1 0 1.54 0V6.61a.78.78 0 0 0-.226-.546l-4.62-4.62a.78.78 0 0 0-.545-.226H3.142a.77.77 0 0 0-.77.77v18.486c0 .425.345.77.77.77ZM14.696 3.846l1.992 1.992h-1.992z"
2961
- })), _path2$c || (_path2$c = /*#__PURE__*/React__namespace.createElement("path", {
3324
+ })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
2962
3325
  d: "M11.615 9.305c0-2.18-2.018-4.627-2.104-4.73-.294-.35-.89-.35-1.184 0-.086.103-2.104 2.55-2.104 4.73A2.7 2.7 0 0 0 8.92 12a2.7 2.7 0 0 0 2.696-2.695Zm-3.851 0c0-.942.618-2.113 1.156-2.932.537.817 1.154 1.987 1.154 2.932a1.157 1.157 0 0 1-2.31 0m0 5.005a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m-6.932 3.082a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m.77-5.392v2.31a.77.77 0 0 0 .77.771v5.392a2.313 2.313 0 0 0 2.311 2.31 2.313 2.313 0 0 0 2.31-2.31V15.08a.77.77 0 0 0 .771-.77V12a.77.77 0 0 0-.77-.77h-4.622a.77.77 0 0 0-.77.77m3.851 8.473a.771.771 0 0 1-1.54 0V15.08h1.54zm-2.31-7.703h3.08v.77h-3.08z"
2963
3326
  })), _path3$3 || (_path3$3 = /*#__PURE__*/React__namespace.createElement("path", {
2964
3327
  fillRule: "evenodd",
@@ -3005,7 +3368,7 @@ var SvgIconRotateRightSmall = function SvgIconRotateRightSmall(props) {
3005
3368
  })));
3006
3369
  };
3007
3370
 
3008
- var _path$D, _path2$b;
3371
+ var _path$D, _path2$9;
3009
3372
  function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
3010
3373
  var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
3011
3374
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$G({
@@ -3015,7 +3378,7 @@ var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
3015
3378
  }, props), _path$D || (_path$D = /*#__PURE__*/React__namespace.createElement("path", {
3016
3379
  fillRule: "evenodd",
3017
3380
  d: "M15.98 14.544a3.98 3.98 0 1 1-7.96 0 3.98 3.98 0 0 1 7.96 0m-1.713 0a2.267 2.267 0 1 1-4.534 0 2.267 2.267 0 0 1 4.534 0"
3018
- })), _path2$b || (_path2$b = /*#__PURE__*/React__namespace.createElement("path", {
3381
+ })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
3019
3382
  fillRule: "evenodd",
3020
3383
  d: "M3.182 2.182a1 1 0 0 0-1 1v17.636a1 1 0 0 0 1 1h17.636a1 1 0 0 0 1-1V7.024a1 1 0 0 0-.293-.707l-3.842-3.842a1 1 0 0 0-.707-.293zm13.92 2.134 3.003 3.003v12.787H3.895V3.895h3v3.854a1 1 0 0 0 1 1h8.207a1 1 0 0 0 1-1zm-8.495 2.72V3.895h6.782v3.14z"
3021
3384
  })));
@@ -3053,7 +3416,7 @@ var SvgIconSearchLarge = function SvgIconSearchLarge(props) {
3053
3416
  })));
3054
3417
  };
3055
3418
 
3056
- var _path$B, _path2$a;
3419
+ var _path$B, _path2$8;
3057
3420
  function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
3058
3421
  var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3Large(props) {
3059
3422
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$D({
@@ -3062,13 +3425,13 @@ var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3L
3062
3425
  height: 24
3063
3426
  }, props), _path$B || (_path$B = /*#__PURE__*/React__namespace.createElement("path", {
3064
3427
  d: "M6.51 5.694a.818.818 0 1 0 0 1.636h4.362a.818.818 0 0 0 0-1.636zM5.692 9.24c0-.453.366-.819.818-.819h6.543a.818.818 0 0 1 0 1.636H6.51a.82.82 0 0 1-.818-.818Zm.818 1.908a.818.818 0 1 0 0 1.637h2.726a.818.818 0 1 0 0-1.637z"
3065
- })), _path2$a || (_path2$a = /*#__PURE__*/React__namespace.createElement("path", {
3428
+ })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
3066
3429
  fillRule: "evenodd",
3067
3430
  d: "M14.81 3.679a7.87 7.87 0 0 1 .681 10.352q.04.033.08.071l6.75 6.751a1.036 1.036 0 0 1-1.465 1.466l-6.751-6.75a1 1 0 0 1-.072-.08 7.876 7.876 0 0 1-10.355-.683 7.865 7.865 0 0 1 0-11.127 7.874 7.874 0 0 1 11.132 0m-1.503 9.628a5.8 5.8 0 1 0-8.203-8.203 5.8 5.8 0 0 0 8.203 8.203"
3068
3431
  })));
3069
3432
  };
3070
3433
 
3071
- var _path$A, _path2$9;
3434
+ var _path$A, _path2$7;
3072
3435
  function _extends$C() { return _extends$C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$C.apply(null, arguments); }
3073
3436
  var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3Small(props) {
3074
3437
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$C({
@@ -3077,7 +3440,7 @@ var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3S
3077
3440
  height: 16
3078
3441
  }, props), _path$A || (_path$A = /*#__PURE__*/React__namespace.createElement("path", {
3079
3442
  d: "M4.378 3.799a.516.516 0 1 0 0 1.033h3.099a.516.516 0 1 0 0-1.033zm-.516 2.324c0-.285.23-.517.516-.517H8.51a.516.516 0 1 1 0 1.033H4.378a.516.516 0 0 1-.516-.516m.516 1.291a.516.516 0 1 0 0 1.033h2.066a.516.516 0 0 0 0-1.033z"
3080
- })), _path2$9 || (_path2$9 = /*#__PURE__*/React__namespace.createElement("path", {
3443
+ })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
3081
3444
  fillRule: "evenodd",
3082
3445
  d: "M9.843 2.508a5.19 5.19 0 0 1 .501 6.753 1 1 0 0 1 .079.07l4.36 4.36a.773.773 0 1 1-1.093 1.094l-4.36-4.361a1 1 0 0 1-.07-.08 5.187 5.187 0 1 1 .583-7.836m-1.144 6.19a3.602 3.602 0 1 0-5.095-5.095A3.602 3.602 0 0 0 8.7 8.698Z"
3083
3446
  })));
@@ -3174,7 +3537,7 @@ var SvgIconStarburstSmall = function SvgIconStarburstSmall(props) {
3174
3537
  })));
3175
3538
  };
3176
3539
 
3177
- var _path$s, _path2$8;
3540
+ var _path$s, _path2$6;
3178
3541
  function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
3179
3542
  var SvgIconStarLarge = function SvgIconStarLarge(props) {
3180
3543
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
@@ -3184,7 +3547,7 @@ var SvgIconStarLarge = function SvgIconStarLarge(props) {
3184
3547
  }, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
3185
3548
  fillRule: "evenodd",
3186
3549
  d: "m11.992 8.712-.64 1.538a1.86 1.86 0 0 1-1.563 1.136l-1.66.133 1.264 1.084c.528.452.759 1.162.598 1.838l-.387 1.62 1.422-.868a1.86 1.86 0 0 1 1.933 0l1.421.868-.386-1.62a1.85 1.85 0 0 1 .597-1.838l1.265-1.084-1.66-.133a1.86 1.86 0 0 1-1.564-1.136zM13 7.015c-.372-.896-1.641-.896-2.014 0L9.892 9.642a.27.27 0 0 1-.23.167l-2.837.228c-.967.077-1.36 1.284-.622 1.916l2.161 1.851a.27.27 0 0 1 .088.27l-.66 2.769c-.225.944.801 1.69 1.63 1.184l2.428-1.484a.27.27 0 0 1 .284 0l2.43 1.484c.827.505 1.854-.24 1.629-1.184l-.66-2.769a.27.27 0 0 1 .087-.27l2.162-1.851c.737-.632.344-1.839-.623-1.916l-2.837-.228a.27.27 0 0 1-.23-.167z"
3187
- })), _path2$8 || (_path2$8 = /*#__PURE__*/React__namespace.createElement("path", {
3550
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
3188
3551
  d: "M11.201 2.111a.79.79 0 1 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zm11.055 9.091a.79.79 0 0 1 0 1.582h-1.691a.79.79 0 0 1 0-1.582zm-3.466-7.13a.791.791 0 0 1 1.119 1.119l-1.196 1.195a.79.79 0 1 1-1.119-1.118zm1.945 14.727a.79.79 0 1 1-1.119 1.118l-1.195-1.195a.79.79 0 1 1 1.118-1.119zm-9.534 1.386a.79.79 0 0 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zM3.42 11.202a.79.79 0 1 1 0 1.582H1.73a.79.79 0 1 1 0-1.582zm1.028 6.401a.79.79 0 1 1 1.119 1.119L4.37 19.917A.791.791 0 0 1 3.253 18.8zM6.39 5.268a.79.79 0 1 1-1.12 1.118L4.076 5.191a.79.79 0 1 1 1.119-1.119z"
3189
3552
  })));
3190
3553
  };
@@ -3240,7 +3603,7 @@ var SvgIconThumbsUpSmall = function SvgIconThumbsUpSmall(props) {
3240
3603
  }))));
3241
3604
  };
3242
3605
 
3243
- var _path$q, _path2$7, _path3$2;
3606
+ var _path$q, _path2$5, _path3$2;
3244
3607
  function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
3245
3608
  var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3246
3609
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
@@ -3250,7 +3613,7 @@ var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3250
3613
  }, props), _path$q || (_path$q = /*#__PURE__*/React__namespace.createElement("path", {
3251
3614
  fillRule: "evenodd",
3252
3615
  d: "M9.188 2.202a2.18 2.18 0 0 0-2.181 2.181v.648H4.102a.49.49 0 0 0-.49.491v.557c0 .27.219.49.49.49h15.796a.49.49 0 0 0 .491-.49v-.557a.49.49 0 0 0-.49-.49h-2.903v-.649a2.18 2.18 0 0 0-2.182-2.181zm-.64 2.201c0-.361.293-.654.655-.654h5.594c.362 0 .655.293.655.654v.62H8.548z"
3253
- })), _path2$7 || (_path2$7 = /*#__PURE__*/React__namespace.createElement("path", {
3616
+ })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
3254
3617
  d: "M17.714 7.828a.22.22 0 0 1 .218-.209h1.103c.124 0 .223.103.218.227l-.492 12.336c-.023.411-.213 1.007-.528 1.29s-.732.44-1.166.44H6.929c-.434 0-.852-.157-1.167-.44s-.501-.88-.524-1.29L4.733 7.845a.22.22 0 0 1 .218-.227h1.117c.117 0 .213.093.218.21l.506 12.296s.047.293.363.292l9.698.008c.308 0 .353-.316.353-.316z"
3255
3618
  })), _path3$2 || (_path3$2 = /*#__PURE__*/React__namespace.createElement("path", {
3256
3619
  d: "M8.496 9.62a.44.44 0 0 1 .418-.454l.436-.02a.436.436 0 0 1 .454.418l.369 9.175a.44.44 0 0 1-.418.454l-.436.02a.435.435 0 0 1-.454-.418zm3.286-.469a.436.436 0 0 0-.436.437v9.15c0 .241.195.437.436.437h.437c.24 0 .436-.196.436-.437v-9.15a.436.436 0 0 0-.436-.437zm2.424.413a.435.435 0 0 1 .454-.417l.436.019c.24.01.428.214.418.455l-.378 9.174a.435.435 0 0 1-.454.417l-.436-.02a.44.44 0 0 1-.418-.454z"
@@ -3295,7 +3658,7 @@ var SvgIconTreeHorizontalLarge = function SvgIconTreeHorizontalLarge(props) {
3295
3658
  })));
3296
3659
  };
3297
3660
 
3298
- var _path$m, _path2$6;
3661
+ var _path$m, _path2$4;
3299
3662
  function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
3300
3663
  var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLarge(props) {
3301
3664
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
@@ -3306,13 +3669,13 @@ var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLar
3306
3669
  fill: "#CCC",
3307
3670
  fillRule: "evenodd",
3308
3671
  d: "M13.71 15.9H9.652v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.059c.076-.525.306-.9.613-1.35Zm1.533-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
3309
- })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
3672
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
3310
3673
  fillRule: "evenodd",
3311
3674
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
3312
3675
  })));
3313
3676
  };
3314
3677
 
3315
- var _path$l, _path2$5;
3678
+ var _path$l, _path2$3;
3316
3679
  function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
3317
3680
  var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge(props) {
3318
3681
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
@@ -3323,7 +3686,7 @@ var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge
3323
3686
  fill: "#CCC",
3324
3687
  fillRule: "evenodd",
3325
3688
  d: "M13.94 15.9H9.651v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.289a2.75 2.75 0 0 1 .612-1.35m1.303-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
3326
- })), _path2$5 || (_path2$5 = /*#__PURE__*/React__namespace.createElement("path", {
3689
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
3327
3690
  fillRule: "evenodd",
3328
3691
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
3329
3692
  })));
@@ -3442,7 +3805,7 @@ var SvgIconUploadLarge = function SvgIconUploadLarge(props) {
3442
3805
  })));
3443
3806
  };
3444
3807
 
3445
- var _path$b, _path2$4;
3808
+ var _path$b, _path2$2;
3446
3809
  function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
3447
3810
  var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3448
3811
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
@@ -3451,12 +3814,12 @@ var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3451
3814
  height: 16
3452
3815
  }, props), _path$b || (_path$b = /*#__PURE__*/React__namespace.createElement("path", {
3453
3816
  d: "M8.006 11.976a.98.98 0 0 1-.713-.299 1.02 1.02 0 0 1-.288-.735v-6.1L5.892 6.139a.98.98 0 0 1-.942.334 1 1 0 0 1-.75-.674 1.03 1.03 0 0 1 .208-1.001l2.847-3.314a.98.98 0 0 1 .74-.34c.284 0 .554.124.742.341l2.844 3.31c.254.282.332.68.205 1.036a.98.98 0 0 1-1.685.31L8.986 4.844v6.094c.006.276-.096.538-.28.733a1 1 0 0 1-.57.296z"
3454
- })), _path2$4 || (_path2$4 = /*#__PURE__*/React__namespace.createElement("path", {
3817
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
3455
3818
  d: "M12.526 11.253c0-.554.417-1.012.956-1.074l.126-.008c.597 0 1.082.485 1.082 1.082l-.002 2.484-.01.178c-.062.538-.52.956-1.074.956H2.396a1.083 1.083 0 0 1-1.081-1.09v-2.527a1.082 1.082 0 1 1 2.163 0l-.001 1.452h9.048z"
3456
3819
  })));
3457
3820
  };
3458
3821
 
3459
- var _path$a, _path2$3, _path3$1, _path4;
3822
+ var _path$a, _path2$1, _path3$1, _path4;
3460
3823
  function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
3461
3824
  var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3462
3825
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
@@ -3465,7 +3828,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3465
3828
  height: 24
3466
3829
  }, props), _path$a || (_path$a = /*#__PURE__*/React__namespace.createElement("path", {
3467
3830
  d: "M20.62 10.487c0-.382.308-.803.807-.803.498 0 .785.421.785.803v2.764c0 .28-.15.536-.36.672a6.7 6.7 0 0 0-1.231-.852v-.405h-1.047a5.6 5.6 0 0 0-1.454-.19c-.06 0-.23-.002-.289 0 .014-.167.02-.441.02-.61a6.095 6.095 0 0 0-6.106-6.112c-3.336 0-6.115 2.777-6.115 6.115a6.104 6.104 0 0 0 6.115 6.115c.253 0 .604-.025.852-.055l.001.203c0 .413.068 1.011.153 1.399-.064.008-.15.023-.213.029v1.185h.66c.178.34.445.755.686 1.049-.136.345-.447.57-.749.545h-2.763c-.382 0-.809-.307-.809-.801s.417-.793.799-.793h.586V19.56a7.17 7.17 0 0 1-4.025-1.708l-.89.854.414.415c.268.27.35.765 0 1.117s-.861.268-1.13 0l-1.942-1.942a.8.8 0 0 1-.072-1.202c.382-.382.94-.242 1.189.085l.41.41.862-.896a7.18 7.18 0 0 1-1.677-4.027H2.864v.585c0 .381-.288.797-.793.797a.79.79 0 0 1-.796-.797v-2.764c0-.382.306-.802.796-.802s.793.42.793.802v.585h1.223A7.2 7.2 0 0 1 5.768 7.04l-.852-.889-.416.416a.793.793 0 0 1-1.12 0c-.35-.35-.27-.867-.003-1.137L5.32 3.49c.249-.338.832-.43 1.2-.062s.25.936-.077 1.185l-.415.415.894.86a7.2 7.2 0 0 1 4.027-1.676v-1.22h-.586a.8.8 0 0 1-.795-.796c0-.486.413-.797.795-.797h2.763c.382 0 .797.31.797.797s-.415.796-.797.796h-.588v1.22a7.2 7.2 0 0 1 4.032 1.682l.89-.852-.415-.415c-.305-.261-.393-.82-.038-1.175s.906-.249 1.162.05l1.956 1.942c.267.27.348.777.001 1.127-.347.349-.856.265-1.126-.002l-.412-.413-.828.893a7.2 7.2 0 0 1 1.678 4.027h1.184v-.589Z"
3468
- })), _path2$3 || (_path2$3 = /*#__PURE__*/React__namespace.createElement("path", {
3831
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
3469
3832
  fillRule: "evenodd",
3470
3833
  d: "M22.726 17.988c0 2.486-2.014 4.62-4.598 4.62a4.6 4.6 0 0 1-4.61-4.624 4.584 4.584 0 0 1 4.602-4.59c2.55 0 4.606 2.109 4.606 4.594m-3.396 2.284c.293-.264.426-.6.426-1.014 0-.413-.072-.528-.24-.808q-.277-.363-1.029-.722a8 8 0 0 1-.721-.373.8.8 0 0 1-.22-.216.9.9 0 0 1-.112-.361.64.64 0 0 1 .265-.49c.114-.1.31-.145.525-.145q.27 0 .55.07c.187.046.355.105.64.222l.283-.695a4.3 4.3 0 0 0-.705-.243 3.2 3.2 0 0 0-.8-.092c-.573.027-.965.179-1.288.45-.285.326-.358.603-.358 1.016 0 .251.025.364.122.552q.147.282.392.495c.164.141.405.285.736.443.35.166.565.278.678.353.114.076.295.216.318.31.058.081.06.193.06.298 0 .226-.127.452-.303.523q-.197.142-.571.142-.312 0-.688-.099a5 5 0 0 1-.815-.293v.814c.44.215.844.292 1.415.292.62 0 1.147-.164 1.44-.429"
3471
3834
  })), _path3$1 || (_path3$1 = /*#__PURE__*/React__namespace.createElement("path", {
@@ -3476,7 +3839,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3476
3839
  })));
3477
3840
  };
3478
3841
 
3479
- var _path$9, _path2$2, _path3;
3842
+ var _path$9, _path2, _path3;
3480
3843
  function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
3481
3844
  var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3482
3845
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
@@ -3486,7 +3849,7 @@ var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3486
3849
  }, props), _path$9 || (_path$9 = /*#__PURE__*/React__namespace.createElement("path", {
3487
3850
  fillRule: "evenodd",
3488
3851
  d: "M20.874 10.618c0-.381.297-.8.796-.8s.793.419.793.8v2.764c0 .381-.29.796-.793.796a.79.79 0 0 1-.796-.796v-.585h-1.185c-.155 1.528-.7 2.874-1.692 4.046l.83.87.413-.412c.274-.234.71-.347 1.09.033s.265.813.03 1.087l-.988 1.016-.974.974a.787.787 0 0 1-1.134-.012c-.373-.373-.254-.838.014-1.108l.401-.429-.85-.85a7.2 7.2 0 0 1-4.034 1.68v1.185h.584c.382 0 .802.286.802.796s-.42.793-.802.793h-2.763a.785.785 0 0 1-.791-.793c0-.503.409-.796.79-.796h.586v-1.185a7.23 7.23 0 0 1-4.04-1.717l-.882.852.417.416a.79.79 0 0 1-.002 1.122c-.355.355-.857.26-1.126-.008l-.981-.967-.96-.974a.785.785 0 0 1-.052-1.2c.4-.395.916-.242 1.165.086l.424.41.846-.888a7.15 7.15 0 0 1-1.67-4.019H3.12v.577c0 .381-.25.796-.796.796s-.798-.448-.798-.83v-2.763c0-.381.304-.763.798-.763.493 0 .796.415.796.796v.585h1.22a7.2 7.2 0 0 1 1.679-4.03l-.856-.887-.417.418a.79.79 0 0 1-1.114-.007.8.8 0 0 1 0-1.121l.967-.981.974-.96c.25-.338.826-.453 1.2-.079s.242.943-.086 1.193l-.406.406.905.85c1.177-.98 2.49-1.518 4.015-1.663V3.124h-.585c-.382 0-.803-.303-.803-.793s.421-.801.803-.801h2.763c.382 0 .8.31.8.801 0 .49-.418.793-.8.793h-.585v1.218c1.525.145 2.875.672 4.052 1.653l.861-.825-.419-.419a.8.8 0 0 1-.019-1.165.78.78 0 0 1 1.147.038l.98.967.975.974c.268.27.384.751.016 1.12a.803.803 0 0 1-1.143.008l-.416-.402-.813.873a7.2 7.2 0 0 1 1.674 4.04h1.185zM5.887 12c0 3.312 2.811 6.103 6.107 6.103 3.295 0 6.118-2.645 6.118-6.079s-2.68-6.139-6.115-6.139S5.887 8.689 5.887 12"
3489
- })), _path2$2 || (_path2$2 = /*#__PURE__*/React__namespace.createElement("path", {
3852
+ })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
3490
3853
  d: "M8.674 10.683c.822 0 1.312.649 1.312 1.317s-.52 1.321-1.312 1.321S7.361 12.669 7.361 12s.491-1.317 1.313-1.317m3.583 2.607c1.046 0 1.792.864 1.792 1.796 0 .933-.74 1.801-1.792 1.801-1.05 0-1.791-.868-1.791-1.8 0-.933.745-1.798 1.791-1.798Z"
3491
3854
  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
3492
3855
  fillRule: "evenodd",
@@ -3993,54 +4356,36 @@ var iconMap = {
3993
4356
  },
3994
4357
  };
3995
4358
 
4359
+ var doNotForwardProps$s = ["sdsIcon", "sdsSize", "iconColor"];
3996
4360
  /**
3997
4361
  * @see https://mui.com/material-ui/icons/#svgicon
3998
4362
  */
3999
- function iconSize(props) {
4000
- var _a, _b;
4001
- var sdsSize = props.sdsSize;
4002
- var iconSizes = getIconSizes(props);
4003
- return react.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n "], ["\n height: ", "px;\n width: ", "px;\n "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
4004
- }
4005
- function buttonStyle() {
4006
- return react.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
4007
- }
4008
- function staticStyle(props) {
4009
- var _a;
4010
- var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
4011
- var colors = getColors(props);
4012
- return react.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade]);
4013
- }
4014
- function interactive(props) {
4015
- var _a, _b, _c, _d;
4016
- var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
4017
- var colors = getColors(props);
4018
- var semanticColors = getSemanticColors(props);
4019
- return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
4020
- }
4021
- var doNotForwardProps$s = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
4022
4363
  var StyledSvgIcon = styled__default.default(material.SvgIcon, {
4023
4364
  shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
4024
- })(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4025
- var sdsType = props.sdsType;
4026
- return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
4365
+ })(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4366
+ var _a, _b, _c;
4367
+ var mode = getMode(props);
4368
+ var _d = props.iconColor, iconColor = _d === void 0 ? "blue" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
4369
+ var iconSizes = getIconSizes(props);
4370
+ var colors = getColors(props);
4371
+ return react.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
4027
4372
  });
4028
- var StyledIcon = styled__default.default("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
4029
- var templateObject_1$V, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
4373
+ var StyledIcon = styled__default.default("div")(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
4374
+ var templateObject_1$V, templateObject_2$A, templateObject_3$r;
4030
4375
 
4031
4376
  /**
4032
4377
  * @see https://mui.com/material-ui/icons/#icons
4033
4378
  */
4034
4379
  var Icon = React.forwardRef(function Icon(_a, ref) {
4035
4380
  var _b;
4036
- var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize, sdsType = _a.sdsType;
4381
+ var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize;
4037
4382
  var icon = (_b = iconMap[sdsIcon]) !== null && _b !== void 0 ? _b : {};
4038
4383
  var largeIcon = icon.largeIcon, smallIcon = icon.smallIcon;
4039
4384
  if ((sdsSize === "xs" || sdsSize === "s") && smallIcon) {
4040
- return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
4385
+ return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
4041
4386
  }
4042
4387
  if ((sdsSize === "l" || sdsSize === "xl") && largeIcon) {
4043
- return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
4388
+ return (jsxRuntime.jsx(StyledIcon, { ref: ref, children: jsxRuntime.jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
4044
4389
  }
4045
4390
  // eslint-disable-next-line no-console
4046
4391
  console.error("Error: Icon ".concat(sdsIcon, " not found for size ").concat(sdsSize, ". This is a @czi-sds/components problem."));
@@ -4049,7 +4394,7 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
4049
4394
 
4050
4395
  var AccordionHeader = function (props) {
4051
4396
  var children = props.children, id = props.id, subtitle = props.subtitle;
4052
- return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
4397
+ return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
4053
4398
  };
4054
4399
 
4055
4400
  var sdsPropNames$3 = ["useDivider", "togglePosition"];
@@ -4057,15 +4402,14 @@ var StyledAccordion = styled__default.default(material.Accordion, {
4057
4402
  shouldForwardProp: function (prop) {
4058
4403
  return !sdsPropNames$3.includes(prop.toString());
4059
4404
  },
4060
- })(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4061
- var _a, _b, _c;
4405
+ })(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4406
+ var _a, _b;
4062
4407
  var useDivider = props.useDivider, togglePosition = props.togglePosition;
4063
4408
  var shadows = getShadows(props);
4064
4409
  var typography = getTypography(props);
4065
4410
  var borders = getBorders(props);
4066
4411
  var spaces = getSpaces(props);
4067
- var semanticColors = getSemanticColors(props);
4068
- return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceBackground, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_b = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _b === void 0 ? void 0 : _b.body, useDivider ? (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4412
+ return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4069
4413
  });
4070
4414
  var leftPosition = function (props) {
4071
4415
  var _a, _b, _c;
@@ -4075,7 +4419,7 @@ var leftPosition = function (props) {
4075
4419
  ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
4076
4420
  ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
4077
4421
  };
4078
- var templateObject_1$U, templateObject_2$y, templateObject_3$q;
4422
+ var templateObject_1$U, templateObject_2$z, templateObject_3$q;
4079
4423
 
4080
4424
  /**
4081
4425
  * @see https://mui.com/material-ui/react-accordion/
@@ -4158,7 +4502,7 @@ var SDSWarningTypes;
4158
4502
  SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
4159
4503
  SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
4160
4504
  SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
4161
- SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
4505
+ SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
4162
4506
  })(SDSWarningTypes || (SDSWarningTypes = {}));
4163
4507
  var SDS_WARNINGS = (_a = {},
4164
4508
  _a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
@@ -4193,9 +4537,9 @@ var SDS_WARNINGS = (_a = {},
4193
4537
  hasWarned: false,
4194
4538
  message: "Warning: The 'wide' width is only available for light tooltips!",
4195
4539
  },
4196
- _a[SDSWarningTypes.TooltipInverted] = {
4540
+ _a[SDSWarningTypes.TooltipInvertStyle] = {
4197
4541
  hasWarned: false,
4198
- message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
4542
+ message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
4199
4543
  },
4200
4544
  _a);
4201
4545
  var showWarningIfFirstOccurence = function (warningType) {
@@ -4237,10 +4581,10 @@ var ButtonStyles = function (props) {
4237
4581
  : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
4238
4582
  var contentColor = variant === "outlined"
4239
4583
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
4240
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4584
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4241
4585
  var ornamentColor = variant === "outlined"
4242
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
4243
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4586
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornament
4587
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4244
4588
  var backgroundColor = variant === "outlined"
4245
4589
  ? "transparent"
4246
4590
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
@@ -4248,11 +4592,14 @@ var ButtonStyles = function (props) {
4248
4592
  var disabledBorder = variant === "outlined"
4249
4593
  ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
4250
4594
  : "none";
4251
- return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.iconPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4595
+ var boxshadow = variant === "outlined"
4596
+ ? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
4597
+ : "none";
4598
+ return react.css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4252
4599
  };
4253
4600
  var Rounded = function (props) {
4254
4601
  var corners = getCorners(props);
4255
- return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
4602
+ return react.css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
4256
4603
  };
4257
4604
  var DestructiveButton = function (props) {
4258
4605
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
@@ -4261,14 +4608,17 @@ var DestructiveButton = function (props) {
4261
4608
  var semanticColors = getSemanticColors(props);
4262
4609
  var contentColor = variant === "outlined"
4263
4610
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
4264
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4611
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4265
4612
  var ornamentColor = variant === "outlined"
4266
4613
  ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
4267
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4614
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4268
4615
  var backgroundColor = variant === "outlined"
4269
4616
  ? "transparent"
4270
4617
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4271
- return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.iconPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.iconPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.iconDisabled);
4618
+ var boxshadow = variant === "outlined"
4619
+ ? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
4620
+ : "none";
4621
+ return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
4272
4622
  };
4273
4623
  var StyledButton$3 = styled__default.default(material.Button, {
4274
4624
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4278,22 +4628,22 @@ var StyledButton$3 = styled__default.default(material.Button, {
4278
4628
  });
4279
4629
  // Minimal Button Styles
4280
4630
  var Minimal = function (props) {
4281
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4631
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4282
4632
  var isAllCaps = props.isAllCaps;
4283
4633
  var spaces = getSpaces(props);
4284
4634
  var iconSizes = getIconSizes(props);
4285
4635
  var semanticColors = getSemanticColors(props);
4286
- return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4636
+ return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4287
4637
  };
4288
4638
  var PrimaryMinimalButton = function (props) {
4289
- var _a;
4639
+ var _a, _b;
4290
4640
  var semanticColors = getSemanticColors(props);
4291
- return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction);
4641
+ return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
4292
4642
  };
4293
4643
  var SecondaryMinimalButton = function (props) {
4294
- var _a;
4644
+ var _a, _b;
4295
4645
  var semanticColors = getSemanticColors(props);
4296
- return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary);
4646
+ return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
4297
4647
  };
4298
4648
  var StyledMinimalButton = styled__default.default(material.Button, {
4299
4649
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4310,27 +4660,27 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
4310
4660
  var spaces = getSpaces(props);
4311
4661
  return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
4312
4662
  });
4313
- var templateObject_1$S, templateObject_2$x, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
4663
+ var templateObject_1$S, templateObject_2$y, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
4314
4664
 
4315
4665
  var isDisabled$1 = function (props) {
4316
4666
  var _a, _b;
4317
4667
  var semanticColors = getSemanticColors(props);
4318
- return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled);
4668
+ return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
4319
4669
  };
4320
4670
  var primary$2 = function (props) {
4321
4671
  var _a, _b, _c, _d, _e, _f, _g, _h;
4322
4672
  var semanticColors = getSemanticColors(props);
4323
- return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.textActionPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
4673
+ return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
4324
4674
  };
4325
4675
  var secondary$2 = function (props) {
4326
4676
  var _a, _b, _c, _d, _e, _f, _g, _h;
4327
4677
  var semanticColors = getSemanticColors(props);
4328
- return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
4678
+ return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
4329
4679
  };
4330
4680
  var tertiary = function (props) {
4331
4681
  var _a, _b, _c, _d, _e, _f;
4332
4682
  var semanticColors = getSemanticColors(props);
4333
- return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryPressed);
4683
+ return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
4334
4684
  };
4335
4685
  var small$1 = function (props) {
4336
4686
  var sdsType = props.sdsType;
@@ -4370,7 +4720,7 @@ var StyledButtonIcon = styled__default.default(material.IconButton, {
4370
4720
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
4371
4721
  return react.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
4372
4722
  });
4373
- var templateObject_1$R, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
4723
+ var templateObject_1$R, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
4374
4724
 
4375
4725
  var ButtonIconSizeToSdsIconSize = {
4376
4726
  large: "xl",
@@ -4403,7 +4753,7 @@ var ButtonIcon = React.forwardRef(function ButtonIcon(props, ref) {
4403
4753
  return icon;
4404
4754
  }
4405
4755
  else {
4406
- return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4756
+ return (jsxRuntime.jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4407
4757
  }
4408
4758
  }
4409
4759
  };
@@ -4476,12 +4826,13 @@ var rounded$3 = function (props) {
4476
4826
  var applyIntentColor$2 = function (props, intent) {
4477
4827
  var _a, _b, _c, _d;
4478
4828
  var semanticColors = getSemanticColors(props);
4479
- return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
4829
+ var borders = getBorders(props);
4830
+ return react.css(templateObject_2$w || (templateObject_2$w = __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
4831
  };
4481
4832
  var disabledStyled$2 = function (props) {
4482
- var _a, _b, _c, _d;
4833
+ var _a, _b, _c, _d, _e;
4483
4834
  var semanticColors = getSemanticColors(props);
4484
- return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
4835
+ return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, material.inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
4485
4836
  };
4486
4837
  var StyledLabel$2 = styled__default.default("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4487
4838
  var spaces = getSpaces(props);
@@ -4492,15 +4843,15 @@ var StyledSearchBase = styled__default.default(material.TextField, {
4492
4843
  return !sdsPropNames$2.includes(prop.toString());
4493
4844
  },
4494
4845
  })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4495
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4846
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4496
4847
  var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4497
4848
  var spaces = getSpaces(props);
4498
4849
  var iconSizes = getIconSizes(props);
4499
4850
  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 opacity: 0;\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 opacity: 1;\n\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 opacity: 0;\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 opacity: 1;\n\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));
4851
+ 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 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 }\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 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 }\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, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.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, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, material.outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, material.outlinedInputClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.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
4852
  });
4502
4853
  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
- var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4854
+ var templateObject_1$Q, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4504
4855
 
4505
4856
  var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4506
4857
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4508,9 +4859,9 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
4508
4859
  var fontWeights = getFontWeights(props);
4509
4860
  var spaces = getSpaces(props);
4510
4861
  var semanticColors = getSemanticColors(props);
4511
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4862
+ return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.ornamentPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4512
4863
  });
4513
- var ContentWrapper = styled__default.default("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
4864
+ var ContentWrapper = styled__default.default("span")(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
4514
4865
  var disabledStyles = function (props) {
4515
4866
  var _a;
4516
4867
  var disabled = props.disabled;
@@ -4530,7 +4881,7 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$j || (
4530
4881
  var spaces = getSpaces(props);
4531
4882
  var iconSizes = getIconSizes(props);
4532
4883
  var semanticColors = getSemanticColors(props);
4533
- return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
4884
+ return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n }\n ");
4534
4885
  });
4535
4886
  var ColumnWrapper = styled__default.default("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4536
4887
  var _a;
@@ -4551,8 +4902,8 @@ var StyledCheck = styled__default.default(iconsMaterial.Check, {
4551
4902
  var iconSizes = getIconSizes(props);
4552
4903
  var semanticColors = getSemanticColors(props);
4553
4904
  var selectedColor = disabled
4554
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4555
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4905
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4906
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4556
4907
  return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\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 &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
4557
4908
  });
4558
4909
  var StyledMinus = styled__default.default(iconsMaterial.Remove, {
@@ -4563,11 +4914,11 @@ var StyledMinus = styled__default.default(iconsMaterial.Remove, {
4563
4914
  var semanticColors = getSemanticColors(props);
4564
4915
  var iconSizes = getIconSizes(props);
4565
4916
  var selectedColor = disabled
4566
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4567
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4917
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4918
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4568
4919
  return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\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 &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
4569
4920
  });
4570
- var templateObject_1$P, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
4921
+ var templateObject_1$P, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
4571
4922
 
4572
4923
  /**
4573
4924
  * @see https://mui.com/material-ui/react-menu/
@@ -4601,7 +4952,7 @@ var MenuItem = React.forwardRef(function MenuItem(props, ref) {
4601
4952
  return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: icon }));
4602
4953
  }
4603
4954
  else {
4604
- return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: jsxRuntime.jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsType: "static", sdsIcon: icon, sdsSize: "s" })) }));
4955
+ return (jsxRuntime.jsx(StyledMenuItemIcon, { disabled: disabled, children: jsxRuntime.jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsIcon: icon, sdsSize: "s" })) }));
4605
4956
  }
4606
4957
  }
4607
4958
  };
@@ -4719,12 +5070,8 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
4719
5070
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4720
5071
  // passed to mui Input
4721
5072
  InputProps: {
4722
- endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4723
- sdsType: "iconButton",
4724
- }, icon: "XMarkCircle" }) })) : null,
4725
- startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4726
- sdsType: "interactive",
4727
- }, icon: "Search" }) })),
5073
+ endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
5074
+ startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
4728
5075
  }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4729
5076
  /**
4730
5077
  * (masoudmanson): This prevents the browser's default auto completion
@@ -4749,11 +5096,11 @@ var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
4749
5096
  var spaces = getSpaces(props);
4750
5097
  var borders = getBorders(props);
4751
5098
  var semanticColors = getSemanticColors(props);
4752
- return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\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\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5099
+ return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\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\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4753
5100
  });
4754
5101
  var InputBaseWrapper$1 = styled__default.default("div", {
4755
5102
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
4756
- })(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5103
+ })(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4757
5104
  var search = props.search;
4758
5105
  if (!search) {
4759
5106
  // (thuang): We cannot use `display: none;` here, since
@@ -4775,7 +5122,7 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$i |
4775
5122
  var shadows = getShadows(props);
4776
5123
  var borders = getBorders(props);
4777
5124
  var semanticColors = getSemanticColors(props);
4778
- return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
5125
+ return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
4779
5126
  });
4780
5127
  var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
4781
5128
  var _a;
@@ -4783,13 +5130,13 @@ var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$d ||
4783
5130
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n white-space: pre-wrap;\n ");
4784
5131
  });
4785
5132
  var StyledMenuItemText = styled__default.default("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
4786
- var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
5133
+ var templateObject_1$O, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
4787
5134
 
4788
5135
  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;
5136
+ 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
5137
  var theme = material.useTheme();
4791
5138
  var ref = React.useRef(null);
4792
- var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
5139
+ var _s = React.useState(""), inputValue = _s[0], setInputValue = _s[1];
4793
5140
  useDetectUserTabbing(ref);
4794
5141
  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
5142
  /**
@@ -4854,9 +5201,7 @@ var AutocompleteBase = function (props) {
4854
5201
  , {
4855
5202
  // (masoudmanson): This is to ensure that the clear button won't be focusable
4856
5203
  // when the search prop is set to false.
4857
- tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4858
- sdsType: "iconButton",
4859
- }, icon: "XMarkCircle" })) })),
5204
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle" })) })),
4860
5205
  /**
4861
5206
  * (thuang): Works with css caret-color: "transparent" to hide
4862
5207
  * mobile keyboard
@@ -4864,9 +5209,7 @@ var AutocompleteBase = function (props) {
4864
5209
  inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "Search Button",
4865
5210
  // (masoudmanson): This is to ensure that the search button won't be focusable
4866
5211
  // when the search prop is set to false.
4867
- tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4868
- sdsType: "interactive",
4869
- }, icon: "Search" }) })) }) }, InputBaseProps)) }));
5212
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
4870
5213
  }
4871
5214
  function defaultOnBlur(event) {
4872
5215
  var _a;
@@ -4944,7 +5287,7 @@ var AutocompleteBase = function (props) {
4944
5287
  else {
4945
5288
  MenuItemContent = (jsxRuntime.jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsxRuntime.jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
4946
5289
  }
4947
- return (jsxRuntime.jsx(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { children: MenuItemContent })));
5290
+ return (React.createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { key: option.name }), MenuItemContent));
4948
5291
  }
4949
5292
  };
4950
5293
 
@@ -4955,7 +5298,7 @@ var StyledColumn = styled__default.default("div")(templateObject_1$N || (templat
4955
5298
  var borders = getBorders(props);
4956
5299
  return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
4957
5300
  });
4958
- var StyledColumnTitle = styled__default.default("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
5301
+ var StyledColumnTitle = styled__default.default("p")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
4959
5302
  var _a;
4960
5303
  var spaces = getSpaces(props);
4961
5304
  var semanticColors = getSemanticColors(props);
@@ -4966,9 +5309,9 @@ var StyledColumnIcon = styled__default.default("span")(templateObject_3$k || (te
4966
5309
  var spaces = getSpaces(props);
4967
5310
  var iconSizes = getIconSizes(props);
4968
5311
  var semanticColors = getSemanticColors(props);
4969
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
5312
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
4970
5313
  });
4971
- var templateObject_1$N, templateObject_2$s, templateObject_3$k;
5314
+ var templateObject_1$N, templateObject_2$t, templateObject_3$k;
4972
5315
 
4973
5316
  var AutocompleteGroup = function (props) {
4974
5317
  var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
@@ -5030,15 +5373,15 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
5030
5373
  var spaces = getSpaces(props);
5031
5374
  var borders = getBorders(props);
5032
5375
  var semanticColors = getSemanticColors(props);
5033
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5376
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5034
5377
  });
5035
5378
  var StyledPaper$2 = styled__default.default(material.Paper, {
5036
5379
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
5037
- })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5380
+ })(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5038
5381
  var _a;
5039
5382
  var shadows = getShadows(props);
5040
5383
  var semanticColors = getSemanticColors(props);
5041
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
5384
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
5042
5385
  });
5043
5386
  var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5044
5387
  var StyledAutocompleteInput = styled__default.default(InputSearch, {
@@ -5050,7 +5393,7 @@ var StyledAutocompleteInput = styled__default.default(InputSearch, {
5050
5393
  var search = _a.search;
5051
5394
  return (search ? "auto" : "transparent");
5052
5395
  });
5053
- var templateObject_1$M, templateObject_2$r, templateObject_3$j, templateObject_4$h;
5396
+ var templateObject_1$M, templateObject_2$s, templateObject_3$j, templateObject_4$h;
5054
5397
 
5055
5398
  var AutocompleteMultiColumn = function (props) {
5056
5399
  var _a;
@@ -5088,16 +5431,12 @@ var AutocompleteMultiColumn = function (props) {
5088
5431
  });
5089
5432
  onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
5090
5433
  };
5091
- return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5092
- sdsType: "iconButton",
5093
- }, icon: "XMarkCircle", onClick: clearInput })) })),
5434
+ return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle", onClick: clearInput })) })),
5094
5435
  /**
5095
5436
  * (thuang): Works with css caret-color: "transparent" to hide
5096
5437
  * mobile keyboard
5097
5438
  */
5098
- inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5099
- sdsType: "interactive",
5100
- }, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
5439
+ inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
5101
5440
  {
5102
5441
  name: "offset",
5103
5442
  options: {
@@ -5242,13 +5581,13 @@ var IconWrapper$1 = styled__default.default("div", {
5242
5581
  shouldForwardProp: function (prop) {
5243
5582
  return !doNotForwardPropsIconWrapper.includes(prop);
5244
5583
  },
5245
- })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5584
+ })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5246
5585
  var _a, _b;
5247
5586
  var bannerType = props.bannerType;
5248
5587
  var iconSizes = getIconSizes(props);
5249
5588
  var spaces = getSpaces(props);
5250
5589
  var semanticColors = getSemanticColors(props);
5251
- return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n svg {\n fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n }\n ");
5590
+ return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n svg {\n fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n }\n ");
5252
5591
  });
5253
5592
  var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
5254
5593
  var StyledButton$2 = styled__default.default(Button, {
@@ -5259,20 +5598,20 @@ var StyledButton$2 = styled__default.default(Button, {
5259
5598
  var _a, _b;
5260
5599
  var bannerType = props.bannerType;
5261
5600
  var semanticColors = getSemanticColors(props);
5262
- if (bannerType !== "primary")
5263
- return "";
5264
- return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, ";\n }\n\n svg:hover {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverseHover, ";\n }\n ");
5601
+ if (bannerType === "primary")
5602
+ return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill, ";\n opacity: .65;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
5603
+ return "\n svg {\n fill: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary, ";\n opacity: .55;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
5265
5604
  });
5266
5605
  styled__default.default("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
5267
5606
  var primary$1 = function (props) {
5268
5607
  var _a, _b;
5269
5608
  var semanticColors = getSemanticColors(props);
5270
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n ");
5609
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill, ";\n ");
5271
5610
  };
5272
5611
  var secondary$1 = function (props) {
5273
5612
  var _a, _b;
5274
5613
  var semanticColors = getSemanticColors(props);
5275
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
5614
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
5276
5615
  };
5277
5616
  var doNotForwardProps$n = ["sdsType", "textChild"];
5278
5617
  var StyledBanner = styled__default.default("div", {
@@ -5282,7 +5621,7 @@ var StyledBanner = styled__default.default("div", {
5282
5621
  var spaces = getSpaces(props);
5283
5622
  return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
5284
5623
  });
5285
- var templateObject_1$L, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5624
+ var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5286
5625
 
5287
5626
  var Banner = React.forwardRef(function Banner(props, ref) {
5288
5627
  var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
@@ -5303,11 +5642,11 @@ var Banner = React.forwardRef(function Banner(props, ref) {
5303
5642
  return icon;
5304
5643
  }
5305
5644
  else {
5306
- return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5645
+ return jsxRuntime.jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l" }, sdsIconProps));
5307
5646
  }
5308
5647
  }
5309
5648
  else {
5310
- return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5649
+ return jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l" }, sdsIconProps));
5311
5650
  }
5312
5651
  };
5313
5652
  return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { bannerType: sdsType, children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
@@ -5330,7 +5669,7 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
5330
5669
  return icon;
5331
5670
  }
5332
5671
  else {
5333
- return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5672
+ return (jsxRuntime.jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5334
5673
  }
5335
5674
  }
5336
5675
  };
@@ -5344,7 +5683,7 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
5344
5683
  }
5345
5684
  }
5346
5685
  else {
5347
- return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5686
+ return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5348
5687
  }
5349
5688
  });
5350
5689
 
@@ -5362,7 +5701,7 @@ var StyledButtonToggle = styled__default.default(ButtonIcon, {
5362
5701
  var _a;
5363
5702
  var sdsStage = props.sdsStage;
5364
5703
  var semanticColors = getSemanticColors(props);
5365
- return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover : "transparent", ";\n ");
5704
+ return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen : "transparent", ";\n ");
5366
5705
  });
5367
5706
  var templateObject_1$K;
5368
5707
 
@@ -5395,7 +5734,7 @@ var StyledCallout = styled__default.default(material.Alert, {
5395
5734
  var typography = getTypography(props);
5396
5735
  var semanticColors = getSemanticColors(props);
5397
5736
  var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
5398
- var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
5737
+ var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
5399
5738
  // when a title is present Mui's default styling has vertical margin,
5400
5739
  // but for an expandable callout that is collapsed, we do not want
5401
5740
  // any bottom margin
@@ -5404,7 +5743,7 @@ var StyledCallout = styled__default.default(material.Alert, {
5404
5743
  // Title. The padding-top of the Callout Message is calculated based on the difference
5405
5744
  // between the height of the Icon and the line-height of the Callout Title.
5406
5745
  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.styles) === 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"))) /
5746
+ 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
5747
  2);
5409
5748
  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
5749
  });
@@ -5440,17 +5779,17 @@ var Callout = function (_a) {
5440
5779
  return icon;
5441
5780
  }
5442
5781
  else {
5443
- return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
5782
+ return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
5444
5783
  }
5445
5784
  }
5446
5785
  else {
5447
5786
  switch (intent) {
5448
5787
  case "positive":
5449
- return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
5788
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
5450
5789
  case "info":
5451
- return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
5790
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
5452
5791
  default:
5453
- return (jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
5792
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
5454
5793
  }
5455
5794
  }
5456
5795
  };
@@ -5475,7 +5814,7 @@ var Callout = function (_a) {
5475
5814
  return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Grow, { in: !hide, children: jsxRuntime.jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
5476
5815
  };
5477
5816
 
5478
- var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
5817
+ var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodySemiboldXs, function (props) {
5479
5818
  var spaces = getSpaces(props);
5480
5819
  return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5481
5820
  });
@@ -5492,13 +5831,13 @@ var dark = function (props) {
5492
5831
  var _a, _b;
5493
5832
  var spaces = getSpaces(props);
5494
5833
  var semanticColors = getSemanticColors(props);
5495
- return css.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5834
+ return css.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5496
5835
  };
5497
5836
  var light = function (props) {
5498
5837
  var _a, _b;
5499
5838
  var spaces = getSpaces(props);
5500
5839
  var semanticColors = getSemanticColors(props);
5501
- return css.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5840
+ return css.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5502
5841
  };
5503
5842
  var wide = function () {
5504
5843
  return css.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
@@ -5508,29 +5847,32 @@ var tableStyles = function (props) {
5508
5847
  return css.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
5509
5848
  };
5510
5849
  var Subtitle$1 = styled__default.default("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5511
- var _a;
5850
+ var _a, _b;
5851
+ var hasInvertedStyle = props.hasInvertedStyle;
5512
5852
  var semanticColors = getSemanticColors(props);
5513
- return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
5853
+ return "\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
5514
5854
  });
5515
5855
  var tooltipCss = function (props) {
5516
- var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5856
+ var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5517
5857
  var shadows = getShadows(props);
5518
- return css.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
5858
+ return css.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
5859
+ ? dark(props)
5860
+ : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
5519
5861
  };
5520
5862
  var arrowCss = function (props) {
5521
5863
  var _a, _b;
5522
- var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5864
+ var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5523
5865
  var semanticColors = getSemanticColors(props);
5524
- return css.css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, inverted || sdsStyle === "dark"
5525
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
5526
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
5866
+ return css.css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
5867
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
5868
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
5527
5869
  };
5528
5870
  /*
5529
5871
  * (masoudmanson): !important is needed to override arrow's
5530
5872
  * default placement which is calculated by javascript
5531
5873
  */
5532
5874
  var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
5533
- var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
5875
+ var templateObject_1$H, templateObject_2$q, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
5534
5876
 
5535
5877
  /**
5536
5878
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5540,24 +5882,20 @@ var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4
5540
5882
  * https://mui.com/components/tooltips/#disabled-elements
5541
5883
  */
5542
5884
  var Tooltip = React.forwardRef(function Tooltip(props, ref) {
5543
- var arrowOffset = props.arrowOffset, classes = props.classes, inverted = props.inverted, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "light" : _a, subtitle = props.subtitle, title = props.title, _b = props.width, width = _b === void 0 ? "default" : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper$1 : _c, rest = __rest(props, ["arrowOffset", "classes", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
5885
+ var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
5544
5886
  var children = rest.children;
5545
- if (inverted) {
5546
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
5887
+ if (inverted || sdsStyle) {
5888
+ showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
5547
5889
  }
5548
- if (width === "wide" && sdsStyle === "dark") {
5890
+ if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
5549
5891
  showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
5550
5892
  }
5551
- if (subtitle && sdsStyle === "light") {
5552
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
5553
- }
5554
5893
  var theme = material.useTheme();
5555
5894
  var extraProps = {
5556
5895
  /* stylelint-disable property-no-unknown -- false positive */
5557
5896
  arrowOffset: arrowOffset,
5558
5897
  classes: classes,
5559
- inverted: inverted,
5560
- sdsStyle: sdsStyle,
5898
+ hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
5561
5899
  theme: theme,
5562
5900
  width: width,
5563
5901
  /* stylelint-enable property-no-unknown -- false positive */
@@ -5576,8 +5914,8 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
5576
5914
  // a tooltip. this matches with the native MUI behavior.
5577
5915
  if (!title && !subtitle)
5578
5916
  return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
5579
- var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsxRuntime.jsx(Subtitle$1, { children: subtitle })] }));
5580
- var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
5917
+ var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, subtitle && (jsxRuntime.jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
5918
+ var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
5581
5919
  return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
5582
5920
  // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
5583
5921
  // focusable and allows keyboard navigation.
@@ -5587,6 +5925,21 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
5587
5925
  // the arrow is always rendered.
5588
5926
  arrow: true }, rest)));
5589
5927
  });
5928
+ /**
5929
+ * (masoudmanson): Temporary function to handle the inversion of the tooltip
5930
+ * based on the sdsStyle, invert and hasInvertedStyle props.
5931
+ * Once the sdsStyle and invert props are completely removed,
5932
+ * this function will be removed as well.
5933
+ */
5934
+ function invertStyleValue(inverted, sdsStyle, hasInvertedStyle) {
5935
+ return hasInvertedStyle !== undefined
5936
+ ? hasInvertedStyle
5937
+ : sdsStyle === "dark"
5938
+ ? true
5939
+ : sdsStyle === "light"
5940
+ ? false
5941
+ : inverted;
5942
+ }
5590
5943
  function mergeClass$1(_a) {
5591
5944
  var props = _a.props, className = _a.className, key = _a.key;
5592
5945
  var classes = props.classes;
@@ -5636,7 +5989,7 @@ var ShouldWrap = function (lineCount) {
5636
5989
  var ShouldTruncate = function () {
5637
5990
  return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
5638
5991
  };
5639
- var StyledCellContent = styled__default.default("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5992
+ var StyledCellContent = styled__default.default("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5640
5993
  var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
5641
5994
  var StyledCellIconWrapper = styled__default.default("div", {
5642
5995
  shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
@@ -5687,7 +6040,7 @@ var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templa
5687
6040
  var spaces = getSpaces(props);
5688
6041
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5689
6042
  });
5690
- var templateObject_1$G, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
6043
+ var templateObject_1$G, templateObject_2$p, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
5691
6044
 
5692
6045
  var CellBasicContent = function (props) {
5693
6046
  var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
@@ -5732,20 +6085,20 @@ var doNotForwardProps$i = [
5732
6085
  var StyledSortingIcon = styled__default.default(Icon, {
5733
6086
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
5734
6087
  })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5735
- var _a, _b;
5736
- var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
6088
+ var _a;
6089
+ var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
5737
6090
  var spaces = getSpaces(props);
5738
6091
  var semanticColors = getSemanticColors(props);
5739
- return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n opacity: ").concat(hideSortIcon ? (active ? 1 : 0) : 1, ";\n outline: none !important;\n ");
6092
+ return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament : "transparent", ";\n display: ").concat(hideSortIcon ? (active ? "block" : "none") : "block", ";\n outline: none !important;\n ");
5740
6093
  });
5741
6094
  var StyledTableHeader$1 = styled__default.default("th", {
5742
6095
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
5743
- })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6096
+ })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
5744
6097
  var _a, _b, _c, _d, _e, _f, _g, _h;
5745
6098
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
5746
6099
  var spaces = getSpaces(props);
5747
6100
  var semanticColors = getSemanticColors(props);
5748
- return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, ";\n }\n }\n ");
6101
+ return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, ";\n }\n }\n ");
5749
6102
  });
5750
6103
  var StyledCellHeaderContainer = styled__default.default("div", {
5751
6104
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -5753,14 +6106,14 @@ var StyledCellHeaderContainer = styled__default.default("div", {
5753
6106
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
5754
6107
  return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
5755
6108
  });
5756
- var templateObject_1$E, templateObject_2$n, templateObject_3$f;
6109
+ var templateObject_1$E, templateObject_2$o, templateObject_3$f;
5757
6110
 
5758
6111
  var CellHeaderContent = function (props) {
5759
6112
  var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
5760
6113
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
5761
6114
  var sortIcon = (jsxRuntime.jsx(StyledSortingIcon, { "aria-label": direction === "asc"
5762
6115
  ? "Change sort direction from ascending to descending"
5763
- : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6116
+ : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
5764
6117
  return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
5765
6118
  };
5766
6119
  var CellHeader = React.forwardRef(function (props, ref) {
@@ -5778,7 +6131,7 @@ var small = function (props) {
5778
6131
  var medium = function (props) {
5779
6132
  var spaces = getSpaces(props);
5780
6133
  var colors = getColors(props);
5781
- return react.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
6134
+ return react.css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5782
6135
  };
5783
6136
  var rounded$2 = function (props) {
5784
6137
  var corners = getCorners(props);
@@ -5815,27 +6168,27 @@ function createStatusCss(props, status) {
5815
6168
  var statusToColors = {
5816
6169
  beta: {
5817
6170
  dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
5818
- light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
6171
+ light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfaceSecondary,
5819
6172
  },
5820
6173
  error: {
5821
6174
  dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
5822
- light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
6175
+ light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfaceSecondary,
5823
6176
  },
5824
6177
  info: {
5825
6178
  dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
5826
- light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
6179
+ light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfaceSecondary,
5827
6180
  },
5828
6181
  pending: {
5829
6182
  dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
5830
- light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
6183
+ light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfaceSecondary,
5831
6184
  },
5832
6185
  success: {
5833
6186
  dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
5834
- light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
6187
+ light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfaceSecondary,
5835
6188
  },
5836
6189
  warning: {
5837
6190
  dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
5838
- light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
6191
+ light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfaceSecondary,
5839
6192
  },
5840
6193
  };
5841
6194
  var statusColors = statusToColors[status];
@@ -5856,7 +6209,7 @@ var StyledChip = styled__default.default(material.Chip, {
5856
6209
  var size = props.size, status = props.status, isRounded = props.isRounded;
5857
6210
  return react.css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
5858
6211
  });
5859
- var templateObject_1$D, templateObject_2$m, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
6212
+ var templateObject_1$D, templateObject_2$n, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
5860
6213
 
5861
6214
  /**
5862
6215
  * @see https://mui.com/material-ui/react-chip/
@@ -5895,7 +6248,7 @@ var StyledHeaderTitle = styled__default.default("div", {
5895
6248
  var semanticColors = getSemanticColors(props);
5896
6249
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
5897
6250
  });
5898
- var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
6251
+ var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
5899
6252
  var StyledPopper = styled__default.default(material.Popper, {
5900
6253
  shouldForwardProp: function (prop) {
5901
6254
  return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
@@ -5906,7 +6259,7 @@ var StyledPopper = styled__default.default(material.Popper, {
5906
6259
  var corners = getCorners(props);
5907
6260
  var shadows = getShadows(props);
5908
6261
  var semanticColors = getSemanticColors(props);
5909
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
6262
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
5910
6263
  });
5911
6264
  var StyledPaper$1 = styled__default.default(material.Paper, {
5912
6265
  shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
@@ -5916,14 +6269,14 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
5916
6269
  var borders = getBorders(props);
5917
6270
  var shadows = getShadows(props);
5918
6271
  var semanticColors = getSemanticColors(props);
5919
- return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
6272
+ return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
5920
6273
  });
5921
6274
  var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5922
6275
  var search = props.search;
5923
6276
  var spaces = getSpaces(props);
5924
6277
  return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
5925
6278
  });
5926
- var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
6279
+ var templateObject_1$C, templateObject_2$m, templateObject_3$d, templateObject_4$c, templateObject_5$8;
5927
6280
 
5928
6281
  // (masoudmanson): Represents the minimum width defined by design specifications
5929
6282
  // for the dropdownMenu's popper component
@@ -5971,10 +6324,16 @@ var doNotForwardProps$f = [
5971
6324
  "value",
5972
6325
  "sdsStyle",
5973
6326
  ];
6327
+ var intentToColor$2 = {
6328
+ default: "accent",
6329
+ negative: "negative",
6330
+ notice: "notice",
6331
+ positive: "positive",
6332
+ };
5974
6333
  var labelFontBodyS = fontBody("s", "regular");
5975
6334
  var labelFontBodyXs = fontBody("xs", "regular");
5976
6335
  var inputDropdownStyles = function (props) {
5977
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
6336
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5978
6337
  var spaces = getSpaces(props);
5979
6338
  var borders = getBorders(props);
5980
6339
  var semanticColors = getSemanticColors(props);
@@ -5983,13 +6342,13 @@ var inputDropdownStyles = function (props) {
5983
6342
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
5984
6343
  */
5985
6344
  var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
5986
- return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, padding, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_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.surfacePrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = borders === null || borders === void 0 ? void 0 : borders.base) === null || _l === void 0 ? void 0 : _l.pressed, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.iconPrimaryPressed);
6345
+ return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n\n border: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
5987
6346
  };
5988
6347
  var minimal$1 = function (props) {
5989
6348
  var _a, _b, _c, _d, _e, _f, _g;
5990
6349
  var spaces = getSpaces(props);
5991
6350
  var semanticColors = getSemanticColors(props);
5992
- return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
6351
+ return react.css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
5993
6352
  };
5994
6353
  var square$1 = function (props) {
5995
6354
  var corners = getCorners(props);
@@ -6000,23 +6359,28 @@ var rounded$1 = function (props) {
6000
6359
  return react.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
6001
6360
  };
6002
6361
  var userInput = function (props) {
6003
- var _a, _b, _c, _d, _e, _f;
6362
+ var _a, _b, _c, _d;
6004
6363
  var sdsStyle = props.sdsStyle;
6005
6364
  var semanticColors = getSemanticColors(props);
6006
6365
  return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
6007
- ? "\n \n background-color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, "47;\n border: none;\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n path {\n fill: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n ")
6366
+ ? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
6008
6367
  : "");
6009
6368
  };
6010
6369
  var isOpen = function (props) {
6011
- var _a, _b, _c, _d, _e, _f, _g, _h;
6012
- var sdsStyle = props.sdsStyle;
6370
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6371
+ var sdsStyle = props.sdsStyle, _k = props.intent, intent = _k === void 0 ? "default" : _k;
6013
6372
  var borders = getBorders(props);
6014
6373
  var semanticColors = getSemanticColors(props);
6015
- 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"
6374
+ var inputColor = intentToColor$2[intent];
6375
+ 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\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\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
6376
  ? "\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
- : "", (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen, sdsStyle === "minimal" ? borders === null || borders === void 0 ? void 0 : borders.none : (_e = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _e === void 0 ? void 0 : _e.open, sdsStyle === "minimal"
6018
- ? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
6019
- : "transparent", (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconPrimaryHover, (_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover);
6377
+ : "", inputColor === "accent"
6378
+ ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
6379
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
6380
+ ? borders === null || borders === void 0 ? void 0 : borders.none
6381
+ : (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
6382
+ ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
6383
+ : "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderHover);
6020
6384
  };
6021
6385
  var applyIntentColor$1 = function (props, intent) {
6022
6386
  var _a, _b, _c;
@@ -6026,7 +6390,7 @@ var applyIntentColor$1 = function (props, intent) {
6026
6390
  var isDisabled = function (props) {
6027
6391
  var _a, _b, _c, _d;
6028
6392
  var semanticColors = getSemanticColors(props);
6029
- return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
6393
+ return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
6030
6394
  };
6031
6395
  /**
6032
6396
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -6075,7 +6439,7 @@ var StyledCounter = styled__default.default("span", {
6075
6439
  var corners = getCorners(props);
6076
6440
  var spaces = getSpaces(props);
6077
6441
  var semanticColors = getSemanticColors(props);
6078
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
6442
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
6079
6443
  });
6080
6444
  var MinimalDetails = styled__default.default("div", {
6081
6445
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
@@ -6103,7 +6467,7 @@ function labelStyle(props) {
6103
6467
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6104
6468
  return react.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
6105
6469
  }
6106
- var templateObject_1$B, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
6470
+ var templateObject_1$B, templateObject_2$l, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
6107
6471
 
6108
6472
  /**
6109
6473
  * @see https://mui.com/material-ui/react-button/
@@ -6124,7 +6488,7 @@ var InputDropdown = function (props) {
6124
6488
  sdsType: sdsType,
6125
6489
  shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
6126
6490
  value: value,
6127
- }) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6491
+ }) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6128
6492
  };
6129
6493
  function renderLabelText(props) {
6130
6494
  var sdsType = props.sdsType;
@@ -6170,14 +6534,14 @@ var tagSizeS = function (props) {
6170
6534
  var spaces = getSpaces(props);
6171
6535
  var iconSizes = getIconSizes(props);
6172
6536
  var semanticColors = getSemanticColors(props);
6173
- return react.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6537
+ return react.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6174
6538
  };
6175
6539
  var tagSizeL = function (props) {
6176
6540
  var _a;
6177
6541
  var spaces = getSpaces(props);
6178
6542
  var iconSizes = getIconSizes(props);
6179
6543
  var semanticColors = getSemanticColors(props);
6180
- return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6544
+ return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6181
6545
  };
6182
6546
  var rounded = function (props) {
6183
6547
  var corners = getCorners(props);
@@ -6216,12 +6580,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6216
6580
  backgroundHover: colors.length >= 2
6217
6581
  ? material.darken(colors[1], 0.15)
6218
6582
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
6219
- iconColor: colors.length > 2
6220
- ? colors[2]
6221
- : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
6222
- label: colors.length
6223
- ? colors[0]
6224
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
6583
+ iconColor: colors.length > 2 ? colors[2] : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill,
6584
+ label: colors.length ? colors[0] : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill,
6225
6585
  };
6226
6586
  }
6227
6587
  else {
@@ -6229,8 +6589,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6229
6589
  background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
6230
6590
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6231
6591
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6232
- iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
6233
- label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
6592
+ iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentOnFill,
6593
+ label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textOnFill,
6234
6594
  };
6235
6595
  }
6236
6596
  }
@@ -6251,7 +6611,7 @@ function generateSecondaryTagColors(intent, colors, semanticColors) {
6251
6611
  }
6252
6612
  else {
6253
6613
  return {
6254
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
6614
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillSecondary,
6255
6615
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6256
6616
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6257
6617
  iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
@@ -6269,7 +6629,7 @@ function createTypeCss(props, type) {
6269
6629
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
6270
6630
  };
6271
6631
  var typeColors = typeToColors[type];
6272
- return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6632
+ return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6273
6633
  }
6274
6634
  var typeToCss = {
6275
6635
  primary: primary,
@@ -6290,7 +6650,7 @@ var StyledTag$1 = styled__default.default(material.Chip, {
6290
6650
  var type = sdsType || "primary";
6291
6651
  return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
6292
6652
  });
6293
- var templateObject_1$A, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6653
+ var templateObject_1$A, templateObject_2$k, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6294
6654
 
6295
6655
  /**
6296
6656
  * @see https://mui.com/material-ui/react-chip/
@@ -6304,14 +6664,14 @@ var Tag = function (props) {
6304
6664
  return jsxRuntime.jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
6305
6665
  };
6306
6666
 
6307
- var StyledTag = styled__default.default(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6308
- var _a, _b, _c, _d, _e, _f, _g;
6667
+ var StyledTag = styled__default.default(Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6668
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6309
6669
  var spaces = getSpaces(props);
6310
6670
  var iconSizes = getIconSizes(props);
6311
6671
  var semanticColors = getSemanticColors(props);
6312
- return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _f === void 0 ? void 0 : _f.width, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _g === void 0 ? void 0 : _g.height);
6672
+ return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
6313
6673
  });
6314
- var templateObject_1$z, templateObject_2$i;
6674
+ var templateObject_1$z, templateObject_2$j;
6315
6675
 
6316
6676
  /**
6317
6677
  * @see https://mui.com/material-ui/react-chip/
@@ -6335,11 +6695,11 @@ var Chips = function (_a) {
6335
6695
  };
6336
6696
 
6337
6697
  var Wrapper$1 = styled__default.default("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
6338
- var StyledChipsWrapper = styled__default.default("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6698
+ var StyledChipsWrapper = styled__default.default("div")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6339
6699
  var spaces = getSpaces(props);
6340
6700
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
6341
6701
  });
6342
- var templateObject_1$y, templateObject_2$h;
6702
+ var templateObject_1$y, templateObject_2$i;
6343
6703
 
6344
6704
  // eslint-disable-next-line sonarjs/cognitive-complexity
6345
6705
  var ComplexFilter = function (_a) {
@@ -6440,7 +6800,7 @@ var StyledPaper = styled__default.default(material.Paper, {
6440
6800
  var corners = getCorners(props);
6441
6801
  var shadows = getShadows(props);
6442
6802
  var semanticColors = getSemanticColors(props);
6443
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n ");
6803
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n ");
6444
6804
  });
6445
6805
  function paperDimensions(props) {
6446
6806
  var sdsSize = props.sdsSize;
@@ -6546,7 +6906,7 @@ var StyledDialogTitle = styled__default.default(material.DialogTitle)(templateOb
6546
6906
  var spaces = getSpaces(props);
6547
6907
  return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
6548
6908
  });
6549
- var Title = styled__default.default(material.Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6909
+ var Title = styled__default.default(material.Typography)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6550
6910
  var _a;
6551
6911
  var semanticColors = getSemanticColors(props);
6552
6912
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
@@ -6562,7 +6922,7 @@ var Overline = styled__default.default(material.Typography)(templateObject_4$9 |
6562
6922
  var spaces = getSpaces(props);
6563
6923
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
6564
6924
  });
6565
- var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
6925
+ var templateObject_1$t, templateObject_2$h, templateObject_3$a, templateObject_4$9;
6566
6926
 
6567
6927
  /**
6568
6928
  * @see https://mui.com/material-ui/react-dialog/
@@ -6581,11 +6941,11 @@ var StyledButtonsWrapper = styled__default.default("div", {
6581
6941
  });
6582
6942
  var StyledButton = styled__default.default(Button, {
6583
6943
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
6584
- })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6944
+ })(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6585
6945
  var spaces = getSpaces(props);
6586
6946
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
6587
6947
  });
6588
- var templateObject_1$s, templateObject_2$f;
6948
+ var templateObject_1$s, templateObject_2$g;
6589
6949
 
6590
6950
  // eslint-disable-next-line sonarjs/cognitive-complexity
6591
6951
  var Dropdown = function (props) {
@@ -6715,7 +7075,7 @@ var Dropdown = function (props) {
6715
7075
  }
6716
7076
  };
6717
7077
 
6718
- var _path$4, _path2$1;
7078
+ var _path$4;
6719
7079
  function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
6720
7080
  var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
6721
7081
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
@@ -6723,15 +7083,11 @@ var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
6723
7083
  width: 16,
6724
7084
  height: 16
6725
7085
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
6726
- d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
6727
- })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
6728
- fill: "#fff",
6729
- fillRule: "evenodd",
6730
- d: "M11.744 3.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
7086
+ d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.744 1.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
6731
7087
  })));
6732
7088
  };
6733
7089
 
6734
- var _path$3, _path2;
7090
+ var _path$3;
6735
7091
  function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
6736
7092
  var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props) {
6737
7093
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
@@ -6739,10 +7095,7 @@ var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props)
6739
7095
  width: 16,
6740
7096
  height: 16
6741
7097
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
6742
- d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
6743
- })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
6744
- fill: "#fff",
6745
- d: "M12.286 8.004a.625.625 0 0 0-.625-.625H4.339a.625.625 0 0 0 0 1.25h7.322c.345 0 .625-.28.625-.625"
7098
+ d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.661 5.379H4.339a.625.625 0 0 0 0 1.25h7.322a.625.625 0 0 0 0-1.25"
6746
7099
  })));
6747
7100
  };
6748
7101
 
@@ -6758,24 +7111,27 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
6758
7111
  })));
6759
7112
  };
6760
7113
 
7114
+ var intentToColor$1 = {
7115
+ default: "base",
7116
+ negative: "negative",
7117
+ notice: "notice",
7118
+ positive: "positive",
7119
+ };
6761
7120
  var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6762
7121
  var _a, _b, _c, _d, _e, _f;
6763
7122
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6764
7123
  var iconSizes = getIconSizes(props);
6765
7124
  var spaces = getSpaces(props);
6766
7125
  var semanticColors = getSemanticColors(props);
6767
- var intentToColor = {
6768
- default: "base",
6769
- negative: "negative",
6770
- notice: "notice",
6771
- positive: "positive",
6772
- };
6773
- var checkboxColor = intentToColor[intent];
7126
+ var checkboxColor = intentToColor$1[intent];
6774
7127
  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
7128
  });
6776
- var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7129
+ var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7130
+ var _a, _b, _c, _d;
7131
+ var disabled = props.disabled;
6777
7132
  var spaces = getSpaces(props);
6778
- 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 ");
7133
+ var semanticColors = getSemanticColors(props);
7134
+ 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
7135
  });
6780
7136
  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
7137
  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) {
@@ -6788,7 +7144,7 @@ var StyledCheckboxCaption = styled__default.default("span")(templateObject_5$5 |
6788
7144
  var semanticColors = getSemanticColors(props);
6789
7145
  return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
6790
7146
  });
6791
- var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
7147
+ var templateObject_1$r, templateObject_2$f, templateObject_3$9, templateObject_4$8, templateObject_5$5;
6792
7148
 
6793
7149
  /**
6794
7150
  * @see https://mui.com/material-ui/react-checkbox/
@@ -6839,24 +7195,27 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
6839
7195
  })));
6840
7196
  };
6841
7197
 
7198
+ var intentToColor = {
7199
+ default: "base",
7200
+ negative: "negative",
7201
+ notice: "notice",
7202
+ positive: "positive",
7203
+ };
6842
7204
  var StyledRadioButton = styled__default.default(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6843
7205
  var _a, _b, _c, _d, _e, _f;
6844
7206
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6845
7207
  var spaces = getSpaces(props);
6846
7208
  var iconSizes = getIconSizes(props);
6847
7209
  var semanticColors = getSemanticColors(props);
6848
- var intentToColor = {
6849
- default: "base",
6850
- negative: "negative",
6851
- notice: "notice",
6852
- positive: "positive",
6853
- };
6854
7210
  var radioColor = intentToColor[intent];
6855
7211
  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
7212
  });
6857
- var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7213
+ var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7214
+ var _a, _b, _c, _d;
7215
+ var disabled = props.disabled;
6858
7216
  var spaces = getSpaces(props);
6859
- 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 ");
7217
+ var semanticColors = getSemanticColors(props);
7218
+ 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
7219
  });
6861
7220
  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
7221
  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) {
@@ -6869,7 +7228,7 @@ var StyledRadioCaption = styled__default.default("span")(templateObject_5$4 || (
6869
7228
  var semanticColors = getSemanticColors(props);
6870
7229
  return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
6871
7230
  });
6872
- var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
7231
+ var templateObject_1$q, templateObject_2$e, templateObject_3$8, templateObject_4$7, templateObject_5$4;
6873
7232
 
6874
7233
  /**
6875
7234
  * @see https://mui.com/material-ui/react-radio-button/
@@ -6903,7 +7262,7 @@ var inputSlider = function (props) {
6903
7262
  var corners = getCorners(props);
6904
7263
  var shadows = getShadows(props);
6905
7264
  var semanticColors = getSemanticColors(props);
6906
- return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n opacity:1;\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(props), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n // (masoudmanson): Although the mark is not a icon, but since we don't have \n // a specific color for the mark, we use the iconDisabled color for it.\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconDisabled, ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n }\n ");
7265
+ return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n opacity:1;\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(props), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfaceSecondary, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n // (masoudmanson): Although the mark is not a icon, but since we don't have \n // a specific color for the mark, we use the ornamentDisabled color for it.\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.backgroundPrimary, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n }\n ");
6907
7266
  };
6908
7267
  var horizontal = function (props) {
6909
7268
  var marks = props.marks;
@@ -6912,10 +7271,8 @@ var horizontal = function (props) {
6912
7271
  };
6913
7272
  var disabledSlider = function (props) {
6914
7273
  var _a, _b, _c, _d, _e, _f, _g;
6915
- var colors = getColors(props);
6916
7274
  var semanticColors = getSemanticColors(props);
6917
- var mode = getMode(props);
6918
- return "\n .".concat(material.sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
7275
+ return "\n .".concat(material.sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundSecondary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
6919
7276
  };
6920
7277
  var StyledSlider = styled__default.default(material.Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6921
7278
  var disabled = props.disabled;
@@ -6936,13 +7293,13 @@ var applyIntentColor = function (props, intent) {
6936
7293
  var _a, _b, _c, _d;
6937
7294
  var borders = getBorders(props);
6938
7295
  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.base) === null || _c === void 0 ? void 0 : _c.hover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
7296
+ 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
7297
  };
6941
7298
  var disabledStyled$1 = function (props) {
6942
7299
  var _a, _b, _c;
6943
7300
  var borders = getBorders(props);
6944
7301
  var semanticColors = getSemanticColors(props);
6945
- return react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
7302
+ return react.css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
6946
7303
  };
6947
7304
  var textArea = function (props) {
6948
7305
  var spaces = getSpaces(props);
@@ -6957,15 +7314,14 @@ var StyledInputBase = styled__default.default(material.TextField, {
6957
7314
  return !sdsPropNames$1.includes(prop.toString());
6958
7315
  },
6959
7316
  })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6960
- var _a, _b, _c, _d;
7317
+ var _a, _b, _c;
6961
7318
  var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
6962
7319
  var spaces = getSpaces(props);
6963
7320
  var borders = getBorders(props);
6964
7321
  var corners = getCorners(props);
6965
- var semanticColors = getSemanticColors(props);
6966
- return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
7322
+ return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), 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.accent) === null || _c === void 0 ? void 0 : _c.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
6967
7323
  });
6968
- var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
7324
+ var templateObject_1$o, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
6969
7325
 
6970
7326
  /**
6971
7327
  * @see https://mui.com/material-ui/react-text-field/
@@ -7004,27 +7360,27 @@ var toggle = function (props) {
7004
7360
  var shadows = getShadows(props);
7005
7361
  var iconSizes = getIconSizes(props);
7006
7362
  var semanticColors = getSemanticColors(props);
7007
- return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(props), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n opacity: 1;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n }\n ");
7363
+ return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(props), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n // background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, ";\n opacity: 1;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n }\n ");
7008
7364
  };
7009
7365
  var toggleOn = function (props) {
7010
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7366
+ var _a, _b, _c, _d, _e, _f, _g, _h;
7011
7367
  var disabled = props.disabled, value = props.value;
7012
7368
  var borders = getBorders(props);
7013
7369
  var spaces = getSpaces(props);
7014
7370
  var semanticColors = getSemanticColors(props);
7015
- return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.icon, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n content: \"").concat(value, "\";\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7016
- "&:hover {\n outline: ".concat((_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.iconHover, ";\n }\n }"), "\n ");
7371
+ return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornament, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n content: \"").concat(value, "\";\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7372
+ "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentHover, ";\n }\n }"), "\n ");
7017
7373
  };
7018
7374
  var toggleOff = function (props) {
7019
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7375
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
7020
7376
  var disabled = props.disabled, value = props.value;
7021
7377
  var borders = getBorders(props);
7022
7378
  var spaces = getSpaces(props);
7023
7379
  var semanticColors = getSemanticColors(props);
7024
7380
  return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled
7025
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
7026
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7027
- "&:hover {\n outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n }\n }"), "\n ");
7381
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled
7382
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7383
+ "&:hover {\n outline: ".concat((_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentSecondaryHover, ";\n }\n }"), "\n ");
7028
7384
  };
7029
7385
  var Toggle = styled__default.default(material.Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
7030
7386
  var checked = props.checked;
@@ -7055,7 +7411,7 @@ var defaultStyle = function (props) {
7055
7411
  return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
7056
7412
  };
7057
7413
  var dashedStyle = function () {
7058
- return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "], ["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "])));
7414
+ return react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "], ["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "])));
7059
7415
  };
7060
7416
  var smallStyle = function (props) {
7061
7417
  return fontBodyS$1(props);
@@ -7071,7 +7427,7 @@ var StyledLink = styled__default.default(material.Link, {
7071
7427
  var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
7072
7428
  return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
7073
7429
  });
7074
- var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
7430
+ var templateObject_1$m, templateObject_2$c, templateObject_3$6, templateObject_4$5;
7075
7431
 
7076
7432
  /**
7077
7433
  * @see https://mui.com/material-ui/react-link/
@@ -7158,11 +7514,11 @@ function propsToMarginBottom(props) {
7158
7514
  var marginBottom = props.marginBottom;
7159
7515
  return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
7160
7516
  }
7161
- var ListItemLabel = styled__default.default("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7517
+ var ListItemLabel = styled__default.default("span")(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7162
7518
  var fontWeights = getFontWeights(props);
7163
7519
  return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
7164
7520
  });
7165
- var templateObject_1$k, templateObject_2$a;
7521
+ var templateObject_1$k, templateObject_2$b;
7166
7522
 
7167
7523
  /**
7168
7524
  * @see https://mui.com/material-ui/react-list/
@@ -7193,13 +7549,13 @@ var minimal = function (props) {
7193
7549
  var _a, _b;
7194
7550
  var iconSizes = getIconSizes(props);
7195
7551
  var semanticColors = getSemanticColors(props);
7196
- return react.css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary);
7552
+ return react.css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
7197
7553
  };
7198
7554
  var tag = function (props) {
7199
7555
  var _a, _b, _c;
7200
7556
  var corners = getCorners(props);
7201
7557
  var semanticColors = getSemanticColors(props);
7202
- return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
7558
+ return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
7203
7559
  };
7204
7560
  var doNotForwardProps$7 = ["sdsStyle"];
7205
7561
  var StyledLoadingIndicator = styled__default.default("div", {
@@ -7210,18 +7566,18 @@ var StyledLoadingIndicator = styled__default.default("div", {
7210
7566
  var style = react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
7211
7567
  return react.css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
7212
7568
  });
7213
- var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7569
+ var templateObject_1$i, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7214
7570
 
7215
7571
  var LoadingIndicator = function (_a) {
7216
7572
  var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
7217
- return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7573
+ return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7218
7574
  };
7219
7575
 
7220
7576
  var StyledMenu = styled__default.default(material.Menu)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), material.menuClasses.paper, function (props) {
7221
7577
  var _a;
7222
7578
  var spaces = getSpaces(props);
7223
7579
  var semanticColors = getSemanticColors(props);
7224
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7580
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7225
7581
  });
7226
7582
  var templateObject_1$h;
7227
7583
 
@@ -7246,7 +7602,7 @@ var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
7246
7602
  // per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
7247
7603
  var StyledAutocomplete = styled__default.default(material.Autocomplete, {
7248
7604
  shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
7249
- })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7605
+ })(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7250
7606
  var search = _a.search;
7251
7607
  return !search && "height: 0; margin: 0 !important;";
7252
7608
  });
@@ -7269,7 +7625,7 @@ var StyledMenuInputSearch = styled__default.default(InputSearch, {
7269
7625
  var search = _a.search;
7270
7626
  return (search ? "auto" : "transparent");
7271
7627
  });
7272
- var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
7628
+ var templateObject_1$g, templateObject_2$9, templateObject_3$4, templateObject_4$3;
7273
7629
 
7274
7630
  /**
7275
7631
  * @see https://mui.com/material-ui/react-autocomplete/
@@ -7295,9 +7651,7 @@ var MenuSelect = function (props) {
7295
7651
  * (thuang): Works with css caret-color: "transparent" to hide
7296
7652
  * mobile keyboard
7297
7653
  */
7298
- inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
7299
- sdsType: "interactive",
7300
- }, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7654
+ inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7301
7655
  if (event && event.type === "blur") {
7302
7656
  setInputValue("");
7303
7657
  }
@@ -7384,13 +7738,13 @@ var StyledTabs$1 = styled__default.default(material.Tabs, {
7384
7738
  });
7385
7739
  var StyledTab$1 = styled__default.default(material.Tab, {
7386
7740
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
7387
- })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7388
- var _a, _b, _c, _d;
7741
+ })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7742
+ var _a, _b, _c;
7389
7743
  var spaces = getSpaces(props);
7390
7744
  var semanticColors = getSemanticColors(props);
7391
- return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
7745
+ return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
7392
7746
  });
7393
- var templateObject_1$f, templateObject_2$7;
7747
+ var templateObject_1$f, templateObject_2$8;
7394
7748
 
7395
7749
  /**
7396
7750
  * Custom hook that observes elements to determine if they are in the viewport.
@@ -7477,9 +7831,9 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
7477
7831
  };
7478
7832
  };
7479
7833
  // Emit changes only once
7480
- var handleOnChange = React.useCallback(function (value) {
7834
+ var handleOnChange = React.useCallback(function (value, event, type) {
7481
7835
  if (value !== emittedValue) {
7482
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
7836
+ onChange === null || onChange === void 0 ? void 0 : onChange(value, event, type);
7483
7837
  setEmittedValue(value);
7484
7838
  }
7485
7839
  }, [emittedValue, onChange]);
@@ -7505,7 +7859,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
7505
7859
  // Update the tab value to newValue to adjust the position of the tabsIndicator
7506
7860
  setFirstTabIndexInview(newValue);
7507
7861
  // Invoke the custom onChange prop
7508
- handleOnChange(newValue);
7862
+ handleOnChange(newValue, event, "click");
7509
7863
  };
7510
7864
  // Observe changes in the sectionIsInView object to update the tabs value
7511
7865
  // based on the index of the visible sections in the viewport.
@@ -7518,9 +7872,12 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
7518
7872
  if (sectionInView > -1 && !navItemClicked) {
7519
7873
  setFirstTabIndexInview(sectionInView);
7520
7874
  // Invoke the custom onChange prop
7521
- handleOnChange(sectionInView);
7875
+ handleOnChange(sectionInView, {
7876
+ target: items[sectionInView],
7877
+ type: "scroll",
7878
+ }, "scroll");
7522
7879
  }
7523
- }, [handleOnChange, navItemClicked, sectionIsInView]);
7880
+ }, [handleOnChange, items, navItemClicked, sectionIsInView]);
7524
7881
  // Set navItemClicked to false to re-enable the option
7525
7882
  // to update the tab value based on scroll.
7526
7883
  useScrollStopListener(function () {
@@ -7549,20 +7906,20 @@ var StyledNotification = styled__default.default(material.Alert, {
7549
7906
  var typography = getTypography(props);
7550
7907
  var borders = getBorders(props);
7551
7908
  var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
7552
- var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
7909
+ var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
7553
7910
  // (masoudmanson): The Notification Icon should be vertically centered with the Notification
7554
7911
  // Title. The padding-top of the Notification Title is calculated based on the difference
7555
7912
  // between the height of the Icon and the line-height of the Notification Title.
7556
7913
  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.styles) === 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"))) /
7914
+ 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
7915
  2);
7559
7916
  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
7917
  });
7561
- var StyledButtonWrapper = styled__default.default("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7918
+ var StyledButtonWrapper = styled__default.default("div")(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7562
7919
  var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
7563
7920
  return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n ");
7564
7921
  });
7565
- var templateObject_1$e, templateObject_2$6;
7922
+ var templateObject_1$e, templateObject_2$7;
7566
7923
 
7567
7924
  /**
7568
7925
  * @see https://mui.com/material-ui/react-alert/
@@ -7593,17 +7950,17 @@ var Notification = function (_a) {
7593
7950
  return icon;
7594
7951
  }
7595
7952
  else {
7596
- return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
7953
+ return (jsxRuntime.jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
7597
7954
  }
7598
7955
  }
7599
7956
  else {
7600
7957
  switch (intent) {
7601
7958
  case "positive":
7602
- return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
7959
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
7603
7960
  case "info":
7604
- return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
7961
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
7605
7962
  default:
7606
- return (jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
7963
+ return jsxRuntime.jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
7607
7964
  }
7608
7965
  }
7609
7966
  };
@@ -7626,16 +7983,16 @@ var doNotForwardProps$3 = [
7626
7983
  var StyledPaginationButton = styled__default.default(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7627
7984
  var _a, _b, _c;
7628
7985
  var semanticColors = getSemanticColors(props);
7629
- return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, "\n }\n\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, "\n }\n }\n ");
7986
+ return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, ";\n }\n\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, "\n }\n }\n ");
7630
7987
  });
7631
7988
  var StyledPaginationChevronList = styled__default.default("li", {
7632
7989
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
7633
- })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7990
+ })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7634
7991
  var _a, _b, _c, _d, _e;
7635
7992
  var disabled = props.disabled;
7636
7993
  var spaces = getSpaces(props);
7637
7994
  var semanticColors = getSemanticColors(props);
7638
- return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(props), "\n ");
7995
+ return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(props), "\n ");
7639
7996
  });
7640
7997
  var StyledPagination = styled__default.default("ul", {
7641
7998
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
@@ -7655,7 +8012,7 @@ var Page = styled__default.default("li", {
7655
8012
  var semanticColors = getSemanticColors(props);
7656
8013
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(props), "\n ");
7657
8014
  });
7658
- var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
8015
+ var templateObject_1$d, templateObject_2$6, templateObject_3$3, templateObject_4$2;
7659
8016
 
7660
8017
  var StyledPaginationDropdownMenu = styled__default.default(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"], ["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"])));
7661
8018
  var templateObject_1$c;
@@ -7763,7 +8120,7 @@ var Pagination = React.forwardRef(function (props, ref) {
7763
8120
  return null;
7764
8121
  }
7765
8122
  var lastPage = paginationRange[paginationRange.length - 1];
7766
- return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
8123
+ return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "onNextPage")] })));
7767
8124
  function handleGoBackButtonKeyDown(event) {
7768
8125
  if ((event.key === "Enter" || event.code === "Space") &&
7769
8126
  currentPage > 1) {
@@ -7792,14 +8149,14 @@ var basicPanelStyles = function (props) {
7792
8149
  var _a;
7793
8150
  var semanticColors = getSemanticColors(props);
7794
8151
  var spaces = getSpaces(props);
7795
- return react.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
8152
+ return react.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
7796
8153
  };
7797
8154
  var overlayPanelStyles = function (props) {
7798
8155
  var _a;
7799
8156
  var semanticColors = getSemanticColors(props);
7800
8157
  var spaces = getSpaces(props);
7801
8158
  var shadows = getShadows(props);
7802
- return react.css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "], ["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
8159
+ return react.css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "], ["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
7803
8160
  };
7804
8161
  var StyledDrawer = styled__default.default(material.Drawer, {
7805
8162
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7814,7 +8171,7 @@ var StyledHeaderComponent = styled__default.default("div")(templateObject_6 || (
7814
8171
  var spaces = getSpaces(props);
7815
8172
  return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
7816
8173
  });
7817
- var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
8174
+ var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
7818
8175
 
7819
8176
  var StyledPanelHeader = styled__default.default("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7820
8177
  var spaces = getSpaces(props);
@@ -7888,9 +8245,17 @@ var StyledSegmentedControl = styled__default.default(material.ToggleButtonGroup,
7888
8245
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7889
8246
  var spaces = getSpaces(props);
7890
8247
  var semanticColors = getSemanticColors(props);
7891
- return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n }\n\n .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
8248
+ return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n }\n\n .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornamentSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: transparent;\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
7892
8249
  });
7893
- var templateObject_1$8;
8250
+ var StyledToggleButton = styled__default.default(material.ToggleButton, {
8251
+ shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
8252
+ })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8253
+ var _a;
8254
+ var disabled = props.disabled;
8255
+ var semanticColors = getSemanticColors(props);
8256
+ return "\n svg {\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : "currentColor", ";\n }\n ");
8257
+ });
8258
+ var templateObject_1$8, templateObject_2$4;
7894
8259
 
7895
8260
  /**
7896
8261
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -7913,8 +8278,8 @@ var SegmentedControl = function (props) {
7913
8278
  };
7914
8279
  return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
7915
8280
  var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
7916
- var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
7917
- var toggleButton = (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
8281
+ var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
8282
+ var toggleButton = (jsxRuntime.jsx(StyledToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
7918
8283
  // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
7919
8284
  return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
7920
8285
  }), ";"] })));
@@ -7938,10 +8303,9 @@ var doNotForwardProps = [
7938
8303
  "hover",
7939
8304
  ];
7940
8305
  var disabledStyled = function (props) {
7941
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
8306
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7942
8307
  var semanticColors = getSemanticColors(props);
7943
- var mode = getMode(props);
7944
- return "\n // eslint-disable-next-line sonarjs/no-all-duplicated-branches\n background-color: ".concat(mode === "light" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n user-select: none;\n\n &:hover {\n background-color: ").concat(mode === "light" ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.surfacePrimary, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n }\n\n & span, & div {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n }\n\n .cell-component {\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textDisabled, ";\n pointer-events: none;\n user-select: none;\n & span, & div {\n color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textDisabled, ";\n background-color: ").concat(mode === "light" ? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.surfaceSecondary : (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.surfacePrimary, ";\n }\n\n svg {\n fill: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconDisabled, ";\n }\n\n filter: grayscale(100%);\n }\n ");
8308
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, ";\n user-select: none;\n\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.backgroundSecondary, ";\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled, ";\n }\n\n & span, & div {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n\n .cell-component {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n pointer-events: none;\n user-select: none;\n & div {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.backgroundSecondary, ";\n }\n\n & .MuiChip-root {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillDisabled, ";\n\n & span {\n color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textDisabled, " !important;\n }\n }\n\n svg {\n fill: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentDisabled, ";\n }\n\n filter: grayscale(100%);\n }\n ");
7945
8309
  };
7946
8310
  var hoverStyled = function (props) {
7947
8311
  var _a;
@@ -8116,7 +8480,7 @@ var TooltipCondensed = React.forwardRef(function TooltipCondensed(props, ref) {
8116
8480
  key: "tooltip",
8117
8481
  props: props,
8118
8482
  });
8119
- return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
8483
+ return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, hasInvertedStyle: false, children: children }));
8120
8484
  });
8121
8485
  function mergeClass(_a) {
8122
8486
  var props = _a.props, className = _a.className, key = _a.key;
@@ -8236,6 +8600,8 @@ exports.Panel = Panel;
8236
8600
  exports.SDSChooseTheme = SDSChooseTheme;
8237
8601
  exports.SDSDarkAppTheme = SDSDarkAppTheme;
8238
8602
  exports.SDSLightAppTheme = SDSLightAppTheme;
8603
+ exports.SDSPaletteDark = SDSPaletteDark;
8604
+ exports.SDSPaletteLight = SDSPaletteLight;
8239
8605
  exports.SegmentedControl = SegmentedControl;
8240
8606
  exports.Tab = Tab;
8241
8607
  exports.Table = Table;
@@ -8288,6 +8654,7 @@ exports.fontTabularSemiboldS = fontTabularSemiboldS;
8288
8654
  exports.fontTabularSemiboldXs = fontTabularSemiboldXs;
8289
8655
  exports.fontTabularXs = fontTabularXs;
8290
8656
  exports.getBorders = getBorders;
8657
+ exports.getBreakpoints = getBreakpoints;
8291
8658
  exports.getColors = getColors;
8292
8659
  exports.getCorners = getCorners;
8293
8660
  exports.getFontWeights = getFontWeights;