@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.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
- import React__default, { forwardRef, useEffect, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
4
+ import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, useContext } from 'react';
5
5
  import { css } from '@emotion/react';
6
6
  import { createTheme, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box, Drawer, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
7
7
  import styled from '@emotion/styled';
@@ -115,12 +115,12 @@ var SDSLightThemeColors = {
115
115
  purple: {
116
116
  "100": "#efeafe",
117
117
  "200": "#e4dbfc",
118
- "300": "#cbbaf8",
118
+ "300": "#cbbaF8",
119
119
  "400": "#b296f2",
120
120
  "500": "#8b54e2",
121
121
  "600": "#6526b5",
122
122
  "700": "#490092",
123
- "800": "#1a004c",
123
+ "800": "#26004c",
124
124
  },
125
125
  red: {
126
126
  "100": "#ffe8e6",
@@ -128,31 +128,31 @@ var SDSLightThemeColors = {
128
128
  "300": "#ffafa8",
129
129
  "400": "#ff7e78",
130
130
  "500": "#db2131",
131
- "600": "#980013",
131
+ "600": "#980017",
132
132
  "700": "#6f0008",
133
133
  "800": "#340000",
134
134
  },
135
135
  yellow: {
136
- "100": "#ffefcf",
136
+ "100": "#fff3db",
137
137
  "200": "#ffdb97",
138
138
  "300": "#ffca5c",
139
139
  "400": "#fab700",
140
140
  "500": "#da9900",
141
- "600": "#b77800",
141
+ "600": "#b07300",
142
142
  "700": "#7c3e00",
143
143
  "800": "#541700",
144
144
  },
145
145
  };
146
146
  var SDSDarkThemeColors = {
147
147
  blue: {
148
- "100": "#002573",
149
- "200": "#0048c5",
150
- "300": "#2573f4",
151
- "400": "#5b9aff",
152
- "500": "#a2c9ff",
153
- "600": "#cde3ff",
154
- "700": "#e2eeff",
155
- "800": "#f7faff",
148
+ "100": "#0f1d4a",
149
+ "200": "#0a216e",
150
+ "300": "#0647b8",
151
+ "400": "#2573f4",
152
+ "500": "#5b9aff",
153
+ "600": "#a2c9ff",
154
+ "700": "#cde3ff",
155
+ "800": "#e2eeff",
156
156
  },
157
157
  gray: {
158
158
  "100": "#333333",
@@ -168,44 +168,44 @@ var SDSDarkThemeColors = {
168
168
  "900": "#ffffff",
169
169
  },
170
170
  green: {
171
- "100": "#053918",
172
- "200": "#12612e",
173
- "300": "#288b49",
174
- "400": "#43ae63",
175
- "500": "#85d898",
176
- "600": "#bcecc5",
177
- "700": "#daf4de",
178
- "800": "#f7fbf6",
171
+ "100": "#082608",
172
+ "200": "#063617",
173
+ "300": "#10632e",
174
+ "400": "#278b48",
175
+ "500": "#4bae68",
176
+ "600": "#85d898",
177
+ "700": "#bcecc5",
178
+ "800": "#daf4de",
179
179
  },
180
180
  purple: {
181
- "100": "#4b0190",
182
- "200": "#6b2ebc",
183
- "300": "#905de6",
184
- "400": "#aa89ef",
185
- "500": "#cebef8",
186
- "600": "#e4dcfc",
187
- "700": "#f0ebfe",
188
- "800": "#fbf9ff",
181
+ "100": "#331252",
182
+ "200": "#410f70",
183
+ "300": "#6429b2",
184
+ "400": "#905de6",
185
+ "500": "#aa89ef",
186
+ "600": "#cebef8",
187
+ "700": "#e4dcfc",
188
+ "800": "#f0ebfe",
189
189
  },
190
190
  red: {
191
- "100": "#630008",
192
- "200": "#A30000",
193
- "300": "#E52722",
194
- "400": "#FF695B",
195
- "500": "#FF9385",
196
- "600": "#FFBDB3",
197
- "700": "#FFD8D1",
198
- "800": "#FFF1EE",
191
+ "100": "#330603",
192
+ "200": "#660a12",
193
+ "300": "#9e1c1c",
194
+ "400": "#c73028",
195
+ "500": "#e05043",
196
+ "600": "#ff988a",
197
+ "700": "#ffbdb3",
198
+ "800": "#ffd8d1",
199
199
  },
200
200
  yellow: {
201
- "100": "#552300",
202
- "200": "#834500",
203
- "300": "#985a00",
204
- "400": "#ac6c00",
205
- "500": "#cf8e00",
206
- "600": "#efad00",
207
- "700": "#ffdc9a",
208
- "800": "#fcf2e3",
201
+ "100": "#361b07",
202
+ "200": "#52270a",
203
+ "300": "#965a0b",
204
+ "400": "#bd8804",
205
+ "500": "#d9a943",
206
+ "600": "#e5bc63",
207
+ "700": "#f5d789",
208
+ "800": "#ffe6a8",
209
209
  },
210
210
  };
211
211
  /**
@@ -263,7 +263,270 @@ var sharedAppTheme = {
263
263
  header: fontFamily,
264
264
  tabular: fontFamily,
265
265
  },
266
- styles: {
266
+ narrowStyles: {
267
+ body: {
268
+ regular: {
269
+ button: {
270
+ fontSize: 13,
271
+ fontWeight: FontWeight.regular,
272
+ letterSpacing: "0.08px",
273
+ lineHeight: "20px",
274
+ textTransform: "none",
275
+ },
276
+ l: {
277
+ fontSize: 16,
278
+ fontWeight: FontWeight.regular,
279
+ letterSpacing: "0px",
280
+ lineHeight: "26px",
281
+ textTransform: "none",
282
+ },
283
+ m: {
284
+ fontSize: 14,
285
+ fontWeight: FontWeight.regular,
286
+ letterSpacing: "0px",
287
+ lineHeight: "24px",
288
+ textTransform: "none",
289
+ },
290
+ s: {
291
+ fontSize: 14,
292
+ fontWeight: FontWeight.regular,
293
+ letterSpacing: "0.08px",
294
+ lineHeight: "24px",
295
+ textTransform: "none",
296
+ },
297
+ xs: {
298
+ fontSize: 13,
299
+ fontWeight: FontWeight.regular,
300
+ letterSpacing: "0.08px",
301
+ lineHeight: "20px",
302
+ textTransform: "none",
303
+ },
304
+ xxs: {
305
+ fontSize: 12,
306
+ fontWeight: FontWeight.regular,
307
+ letterSpacing: "0.1px",
308
+ lineHeight: "18px",
309
+ textTransform: "none",
310
+ },
311
+ xxxs: {
312
+ fontSize: 12,
313
+ fontWeight: FontWeight.regular,
314
+ letterSpacing: "0.1px",
315
+ lineHeight: "18px",
316
+ textTransform: "none",
317
+ },
318
+ },
319
+ semibold: {
320
+ button: {
321
+ fontSize: 13,
322
+ fontWeight: FontWeight.semibold,
323
+ letterSpacing: "0.08px",
324
+ lineHeight: "20px",
325
+ textTransform: "none",
326
+ },
327
+ l: {
328
+ fontSize: 16,
329
+ fontWeight: FontWeight.semibold,
330
+ letterSpacing: "0px",
331
+ lineHeight: "26px",
332
+ textTransform: "none",
333
+ },
334
+ m: {
335
+ fontSize: 14,
336
+ fontWeight: FontWeight.semibold,
337
+ letterSpacing: "0px",
338
+ lineHeight: "24px",
339
+ textTransform: "none",
340
+ },
341
+ s: {
342
+ fontSize: 14,
343
+ fontWeight: FontWeight.semibold,
344
+ letterSpacing: "0.08px",
345
+ lineHeight: "24px",
346
+ textTransform: "none",
347
+ },
348
+ xs: {
349
+ fontSize: 13,
350
+ fontWeight: FontWeight.semibold,
351
+ letterSpacing: "0.08px",
352
+ lineHeight: "20px",
353
+ textTransform: "none",
354
+ },
355
+ xxs: {
356
+ fontSize: 12,
357
+ fontWeight: FontWeight.semibold,
358
+ letterSpacing: "0.1px",
359
+ lineHeight: "18px",
360
+ textTransform: "none",
361
+ },
362
+ xxxs: {
363
+ fontSize: 12,
364
+ fontWeight: FontWeight.semibold,
365
+ letterSpacing: "0.1px",
366
+ lineHeight: "18px",
367
+ textTransform: "none",
368
+ },
369
+ },
370
+ },
371
+ caps: {
372
+ semibold: {
373
+ xxs: {
374
+ fontSize: 12,
375
+ fontWeight: FontWeight.semibold,
376
+ letterSpacing: "0.5px",
377
+ lineHeight: "18px",
378
+ textTransform: "uppercase",
379
+ },
380
+ xxxs: {
381
+ fontSize: 11,
382
+ fontWeight: FontWeight.semibold,
383
+ letterSpacing: "0.5px",
384
+ lineHeight: "16px",
385
+ textTransform: "uppercase",
386
+ },
387
+ xxxxs: {
388
+ fontSize: 11,
389
+ fontWeight: FontWeight.semibold,
390
+ letterSpacing: "0.5px",
391
+ lineHeight: "16px",
392
+ textTransform: "uppercase",
393
+ },
394
+ },
395
+ },
396
+ code: {
397
+ regular: {
398
+ s: {
399
+ fontSize: 14,
400
+ fontWeight: FontWeight.regular,
401
+ letterSpacing: "0px",
402
+ lineHeight: "24px",
403
+ textTransform: "none",
404
+ },
405
+ xs: {
406
+ fontSize: 13,
407
+ fontWeight: FontWeight.regular,
408
+ letterSpacing: "0px",
409
+ lineHeight: "20px",
410
+ textTransform: "none",
411
+ },
412
+ },
413
+ semibold: {
414
+ s: {
415
+ fontSize: 14,
416
+ fontWeight: FontWeight.semibold,
417
+ letterSpacing: "0px",
418
+ lineHeight: "24px",
419
+ textTransform: "none",
420
+ },
421
+ xs: {
422
+ fontSize: 13,
423
+ fontWeight: FontWeight.semibold,
424
+ letterSpacing: "0px",
425
+ lineHeight: "20px",
426
+ textTransform: "none",
427
+ },
428
+ },
429
+ },
430
+ header: {
431
+ semibold: {
432
+ l: {
433
+ fontSize: 16,
434
+ fontWeight: FontWeight.semibold,
435
+ letterSpacing: "0px",
436
+ lineHeight: "22px",
437
+ textTransform: "none",
438
+ },
439
+ m: {
440
+ fontSize: 14,
441
+ fontWeight: FontWeight.semibold,
442
+ letterSpacing: "0px",
443
+ lineHeight: "20px",
444
+ textTransform: "none",
445
+ },
446
+ s: {
447
+ fontSize: 14,
448
+ fontWeight: FontWeight.semibold,
449
+ letterSpacing: "0.08px",
450
+ lineHeight: "20px",
451
+ textTransform: "none",
452
+ },
453
+ xl: {
454
+ fontSize: 18,
455
+ fontWeight: FontWeight.semibold,
456
+ letterSpacing: "0px",
457
+ lineHeight: "24px",
458
+ textTransform: "none",
459
+ },
460
+ xs: {
461
+ fontSize: 13,
462
+ fontWeight: FontWeight.semibold,
463
+ letterSpacing: "0.08px",
464
+ lineHeight: "18px",
465
+ textTransform: "none",
466
+ },
467
+ xxl: {
468
+ fontSize: 22,
469
+ fontWeight: FontWeight.semibold,
470
+ letterSpacing: "0px",
471
+ lineHeight: "30px",
472
+ textTransform: "none",
473
+ },
474
+ xxs: {
475
+ fontSize: 12,
476
+ fontWeight: FontWeight.semibold,
477
+ letterSpacing: "0.1px",
478
+ lineHeight: "18px",
479
+ textTransform: "none",
480
+ },
481
+ xxxs: {
482
+ fontSize: 12,
483
+ fontWeight: FontWeight.semibold,
484
+ letterSpacing: "0.1px",
485
+ lineHeight: "18px",
486
+ textTransform: "none",
487
+ },
488
+ },
489
+ },
490
+ tabular: {
491
+ regular: {
492
+ s: {
493
+ fontSize: 14,
494
+ fontVariantNumeric: tabularNums,
495
+ fontWeight: FontWeight.regular,
496
+ letterSpacing: "0px",
497
+ lineHeight: "24px",
498
+ textTransform: "none",
499
+ },
500
+ xs: {
501
+ fontSize: 13,
502
+ fontVariantNumeric: tabularNums,
503
+ fontWeight: FontWeight.regular,
504
+ letterSpacing: "0px",
505
+ lineHeight: "20px",
506
+ textTransform: "none",
507
+ },
508
+ },
509
+ semibold: {
510
+ s: {
511
+ fontSize: 14,
512
+ fontVariantNumeric: tabularNums,
513
+ fontWeight: FontWeight.semibold,
514
+ letterSpacing: "0px",
515
+ lineHeight: "24px",
516
+ textTransform: "none",
517
+ },
518
+ xs: {
519
+ fontSize: 13,
520
+ fontVariantNumeric: tabularNums,
521
+ fontWeight: FontWeight.semibold,
522
+ letterSpacing: "0px",
523
+ lineHeight: "20px",
524
+ textTransform: "none",
525
+ },
526
+ },
527
+ },
528
+ },
529
+ wideStyles: {
267
530
  body: {
268
531
  regular: {
269
532
  button: {
@@ -531,68 +794,128 @@ var sharedAppTheme = {
531
794
  /**
532
795
  * Create a SDS App Theme with custom colors that follows the SDS color model.
533
796
  */
534
- var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), {
535
- // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
536
- // applications to override those colors using their own custom theme.
537
- // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
538
- // we allow other apps to specify their colors once, and have them apply
539
- // throughout the application, such as in borders, etc without having to manually
540
- // override every theme property that makes use of colors.
541
- borders: {
542
- accent: {
543
- default: "1px solid ".concat(colors.blue[500]),
544
- focused: "1px solid ".concat(colors.blue[500]),
545
- hover: "1px solid ".concat(colors.blue[600]),
546
- open: "1px solid ".concat(colors.blue[500]),
547
- pressed: "1px solid ".concat(colors.blue[700]),
548
- selected: "1px solid ".concat(colors.blue[500]),
549
- },
550
- base: {
551
- default: "1px solid ".concat(colors.gray[500]),
552
- disabled: "1px solid ".concat(colors.gray[300]),
553
- divider: "1px solid ".concat(colors.gray[200]),
554
- hover: "1px solid ".concat(colors.gray[900]),
555
- pressed: "1px solid ".concat(colors.gray[900]),
556
- table: "1px solid ".concat(colors.gray[300]),
557
- },
558
- beta: {
559
- default: "1px solid ".concat(colors.purple[600]),
560
- extraThick: "4px solid ".concat(colors.purple[600]),
561
- thick: "2px solid ".concat(colors.purple[600]),
562
- },
563
- info: {
564
- default: "1px solid ".concat(colors.blue[600]),
565
- extraThick: "4px solid ".concat(colors.blue[600]),
566
- thick: "2px solid ".concat(colors.blue[600]),
567
- },
568
- link: {
569
- dashed: "1px dashed",
570
- solid: "1px solid",
571
- },
572
- negative: {
573
- default: "1px solid ".concat(colors.red[600]),
574
- extraThick: "4px solid ".concat(colors.red[600]),
575
- thick: "2px solid ".concat(colors.red[600]),
576
- },
577
- neutral: {
578
- default: "1px solid ".concat(colors.gray[500]),
579
- extraThick: "4px solid ".concat(colors.gray[500]),
580
- thick: "2px solid ".concat(colors.gray[500]),
581
- },
582
- none: "none",
583
- notice: {
584
- default: "1px solid ".concat(colors.yellow[600]),
585
- extraThick: "4px solid ".concat(colors.yellow[600]),
586
- thick: "2px solid ".concat(colors.yellow[600]),
587
- },
588
- positive: {
589
- default: "1px solid ".concat(colors.green[600]),
590
- extraThick: "4px solid ".concat(colors.green[600]),
591
- thick: "2px solid ".concat(colors.green[600]),
592
- },
593
- }, colors: colors })); };
797
+ var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
594
798
  var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
595
799
  var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
800
+ // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
801
+ // applications to override those colors using their own custom theme.
802
+ // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
803
+ // we allow other apps to specify their colors once, and have them apply
804
+ // throughout the application, such as in borders, etc without having to manually
805
+ // override every theme property that makes use of colors.
806
+ //
807
+ // (masoudmanson): We need to define borders separately for light and dark themes
808
+ // because the border colors are different for each theme.
809
+ SDSLightAppTheme.borders = {
810
+ accent: {
811
+ default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
812
+ focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
813
+ hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
814
+ open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
815
+ pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
816
+ selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
817
+ },
818
+ base: {
819
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
820
+ disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
821
+ divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
822
+ dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
823
+ hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
824
+ inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
825
+ pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
826
+ table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
827
+ },
828
+ beta: {
829
+ default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
830
+ extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
831
+ thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
832
+ },
833
+ info: {
834
+ default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
835
+ extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
836
+ thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
837
+ },
838
+ link: {
839
+ dashed: "1px dashed",
840
+ solid: "1px solid",
841
+ },
842
+ negative: {
843
+ default: "1px solid ".concat(SDSLightThemeColors.red[600]),
844
+ extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
845
+ thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
846
+ },
847
+ neutral: {
848
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
849
+ extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
850
+ thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
851
+ },
852
+ none: "none",
853
+ notice: {
854
+ default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
855
+ extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
856
+ thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
857
+ },
858
+ positive: {
859
+ default: "1px solid ".concat(SDSLightThemeColors.green[600]),
860
+ extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
861
+ thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
862
+ },
863
+ };
864
+ SDSDarkAppTheme.borders = {
865
+ accent: {
866
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
867
+ focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
868
+ hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
869
+ open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
870
+ pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
871
+ selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
872
+ },
873
+ base: {
874
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
875
+ disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
876
+ divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
877
+ dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
878
+ hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
879
+ inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
880
+ pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
881
+ table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
882
+ },
883
+ beta: {
884
+ default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
885
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
886
+ thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
887
+ },
888
+ info: {
889
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
890
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
891
+ thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
892
+ },
893
+ link: {
894
+ dashed: "1px dashed",
895
+ solid: "1px solid",
896
+ },
897
+ negative: {
898
+ default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
899
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
900
+ thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
901
+ },
902
+ neutral: {
903
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
904
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
905
+ thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
906
+ },
907
+ none: "none",
908
+ notice: {
909
+ default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
910
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
911
+ thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
912
+ },
913
+ positive: {
914
+ default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
915
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
916
+ thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
917
+ },
918
+ };
596
919
  /**
597
920
  * Helper function to select the appropriate theme settings.
598
921
  *
@@ -626,25 +949,32 @@ var SDSPaletteLight = function (appTheme) {
626
949
  fillHover: appTheme.colors.blue[600],
627
950
  fillPressed: appTheme.colors.blue[700],
628
951
  fillPrimary: appTheme.colors.blue[500],
629
- icon: appTheme.colors.blue[500],
630
- iconFocus: appTheme.colors.blue[500],
631
- iconHover: appTheme.colors.blue[600],
632
- iconOpen: appTheme.colors.blue[500],
633
- iconPressed: appTheme.colors.blue[700],
634
- iconSelected: appTheme.colors.blue[500],
635
- surfacePrimary: appTheme.colors.blue[100],
636
- surfaceSecondary: appTheme.colors.blue[500],
952
+ ornament: appTheme.colors.blue[500],
953
+ ornamentFocus: appTheme.colors.blue[500],
954
+ ornamentHover: appTheme.colors.blue[600],
955
+ ornamentOpen: appTheme.colors.blue[500],
956
+ ornamentPressed: appTheme.colors.blue[700],
957
+ ornamentSelected: appTheme.colors.blue[500],
958
+ surfacePrimary: appTheme.colors.blue[500],
959
+ surfaceSecondary: appTheme.colors.blue[100],
637
960
  textAction: appTheme.colors.blue[500],
638
961
  textActionHover: appTheme.colors.blue[600],
639
962
  textActionPressed: appTheme.colors.blue[700],
640
963
  },
641
964
  base: {
642
- border: appTheme.colors.gray[500],
965
+ backgroundPrimary: appTheme.colors.gray[50],
966
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
967
+ backgroundSecondary: appTheme.colors.gray[100],
968
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
969
+ backgroundTertiary: appTheme.colors.gray[200],
970
+ border: appTheme.colors.gray[600],
643
971
  borderDisabled: appTheme.colors.gray[300],
644
972
  borderHover: appTheme.colors.gray[900],
973
+ borderInverse: appTheme.colors.gray[50],
645
974
  borderPressed: appTheme.colors.gray[900],
646
975
  borderTable: appTheme.colors.gray[300],
647
976
  divider: appTheme.colors.gray[200],
977
+ dividerInverse: appTheme.colors.gray[600],
648
978
  fillDisabled: appTheme.colors.gray[200],
649
979
  /* the number 47 is the opacity of the color, which is equal to 28% */
650
980
  fillHover: appTheme.colors.gray[300] + "47",
@@ -652,56 +982,53 @@ var SDSPaletteLight = function (appTheme) {
652
982
  fillPressed: appTheme.colors.gray[300] + "47",
653
983
  fillPrimary: appTheme.colors.gray[50],
654
984
  fillSelected: appTheme.colors.gray[900],
655
- iconDisabled: appTheme.colors.gray[300],
656
- iconPrimary: appTheme.colors.gray[500],
657
- iconPrimaryHover: appTheme.colors.gray[900],
658
- iconPrimaryInverse: appTheme.colors.gray[50],
659
- iconPrimaryInverseHover: appTheme.colors.gray[400],
660
- iconPrimaryInversePressed: appTheme.colors.gray[400],
661
- iconPrimaryPressed: appTheme.colors.gray[900],
662
- iconSecondary: appTheme.colors.gray[900],
663
- surfaceBackground: appTheme.colors.gray[50],
664
- surfacePrimary: appTheme.colors.gray[50],
665
- surfacePrimaryInverse: appTheme.colors.gray[900],
666
- surfaceSecondary: appTheme.colors.gray[100],
667
- surfaceTertiary: appTheme.colors.gray[200],
985
+ ornamentDisabled: appTheme.colors.gray[300],
986
+ ornamentOnFill: appTheme.colors.gray[50],
987
+ ornamentPrimary: appTheme.colors.gray[900],
988
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
989
+ ornamentSecondary: appTheme.colors.gray[600],
990
+ ornamentSecondaryHover: appTheme.colors.gray[900],
991
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
992
+ surface: appTheme.colors.gray[50],
993
+ surfaceInverse: appTheme.colors.gray[900],
668
994
  textDisabled: appTheme.colors.gray[300],
995
+ textOnFill: appTheme.colors.gray[50],
669
996
  textPrimary: appTheme.colors.gray[900],
670
997
  textPrimaryInverse: appTheme.colors.gray[50],
671
998
  textSecondary: appTheme.colors.gray[600],
672
999
  textSecondaryInverse: appTheme.colors.gray[300],
673
1000
  },
674
1001
  beta: {
675
- border: appTheme.colors.purple[500],
1002
+ border: appTheme.colors.purple[600],
676
1003
  fillHover: appTheme.colors.purple[600],
677
1004
  fillPressed: appTheme.colors.purple[700],
678
1005
  fillPrimary: appTheme.colors.purple[500],
679
1006
  fillSecondary: appTheme.colors.purple[100],
680
1007
  ornament: appTheme.colors.purple[600],
681
- surfacePrimary: appTheme.colors.purple[100],
682
- surfaceSecondary: appTheme.colors.purple[500],
1008
+ surfacePrimary: appTheme.colors.purple[500],
1009
+ surfaceSecondary: appTheme.colors.purple[100],
683
1010
  text: appTheme.colors.purple[600],
684
1011
  },
685
1012
  info: {
686
- border: appTheme.colors.blue[500],
1013
+ border: appTheme.colors.blue[600],
687
1014
  fillHover: appTheme.colors.blue[600],
688
1015
  fillPressed: appTheme.colors.blue[700],
689
1016
  fillPrimary: appTheme.colors.blue[500],
690
1017
  fillSecondary: appTheme.colors.blue[100],
691
1018
  ornament: appTheme.colors.blue[600],
692
- surfacePrimary: appTheme.colors.blue[100],
693
- surfaceSecondary: appTheme.colors.blue[500],
1019
+ surfacePrimary: appTheme.colors.blue[500],
1020
+ surfaceSecondary: appTheme.colors.blue[100],
694
1021
  text: appTheme.colors.blue[600],
695
1022
  },
696
1023
  negative: {
697
- border: appTheme.colors.red[500],
1024
+ border: appTheme.colors.red[600],
698
1025
  fillHover: appTheme.colors.red[600],
699
1026
  fillPressed: appTheme.colors.red[700],
700
1027
  fillPrimary: appTheme.colors.red[500],
701
1028
  fillSecondary: appTheme.colors.red[100],
702
1029
  ornament: appTheme.colors.red[600],
703
- surfacePrimary: appTheme.colors.red[100],
704
- surfaceSecondary: appTheme.colors.red[500],
1030
+ surfacePrimary: appTheme.colors.red[500],
1031
+ surfaceSecondary: appTheme.colors.red[100],
705
1032
  text: appTheme.colors.red[600],
706
1033
  },
707
1034
  neutral: {
@@ -709,32 +1036,32 @@ var SDSPaletteLight = function (appTheme) {
709
1036
  fillHover: appTheme.colors.gray[600],
710
1037
  fillPressed: appTheme.colors.gray[700],
711
1038
  fillPrimary: appTheme.colors.gray[500],
712
- fillSecondary: appTheme.colors.gray[100],
1039
+ fillSecondary: appTheme.colors.gray[200],
713
1040
  ornament: appTheme.colors.gray[700],
714
- surfacePrimary: appTheme.colors.gray[200],
715
- surfaceSecondary: appTheme.colors.gray[500],
1041
+ surfacePrimary: appTheme.colors.gray[500],
1042
+ surfaceSecondary: appTheme.colors.gray[200],
716
1043
  text: appTheme.colors.gray[700],
717
1044
  },
718
1045
  notice: {
719
- border: appTheme.colors.yellow[500],
1046
+ border: appTheme.colors.yellow[600],
720
1047
  fillHover: appTheme.colors.yellow[600],
721
1048
  fillPressed: appTheme.colors.yellow[700],
722
1049
  fillPrimary: appTheme.colors.yellow[500],
723
1050
  fillSecondary: appTheme.colors.yellow[100],
724
1051
  ornament: appTheme.colors.yellow[600],
725
- surfacePrimary: appTheme.colors.yellow[100],
726
- surfaceSecondary: appTheme.colors.yellow[500],
1052
+ surfacePrimary: appTheme.colors.yellow[500],
1053
+ surfaceSecondary: appTheme.colors.yellow[100],
727
1054
  text: appTheme.colors.yellow[600],
728
1055
  },
729
1056
  positive: {
730
- border: appTheme.colors.green[500],
1057
+ border: appTheme.colors.green[600],
731
1058
  fillHover: appTheme.colors.green[600],
732
1059
  fillPressed: appTheme.colors.green[700],
733
1060
  fillPrimary: appTheme.colors.green[500],
734
1061
  fillSecondary: appTheme.colors.green[100],
735
1062
  ornament: appTheme.colors.green[600],
736
- surfacePrimary: appTheme.colors.green[100],
737
- surfaceSecondary: appTheme.colors.green[500],
1063
+ surfacePrimary: appTheme.colors.green[500],
1064
+ surfaceSecondary: appTheme.colors.green[100],
738
1065
  text: appTheme.colors.green[600],
739
1066
  },
740
1067
  };
@@ -742,34 +1069,41 @@ var SDSPaletteLight = function (appTheme) {
742
1069
  var SDSPaletteDark = function (appTheme) {
743
1070
  return {
744
1071
  accent: {
745
- border: appTheme.colors.blue[500],
746
- borderFocus: appTheme.colors.blue[500],
747
- borderHover: appTheme.colors.blue[600],
748
- borderOpen: appTheme.colors.blue[500],
749
- borderPressed: appTheme.colors.blue[700],
750
- borderSelected: appTheme.colors.blue[500],
751
- fillHover: appTheme.colors.blue[600],
752
- fillPressed: appTheme.colors.blue[700],
753
- fillPrimary: appTheme.colors.blue[500],
754
- icon: appTheme.colors.blue[500],
755
- iconFocus: appTheme.colors.blue[500],
756
- iconHover: appTheme.colors.blue[600],
757
- iconOpen: appTheme.colors.blue[500],
758
- iconPressed: appTheme.colors.blue[700],
759
- iconSelected: appTheme.colors.blue[500],
760
- surfacePrimary: appTheme.colors.blue[100],
761
- surfaceSecondary: appTheme.colors.blue[500],
762
- textAction: appTheme.colors.blue[500],
763
- textActionHover: appTheme.colors.blue[600],
764
- textActionPressed: appTheme.colors.blue[700],
1072
+ border: appTheme.colors.blue[600],
1073
+ borderFocus: appTheme.colors.blue[600],
1074
+ borderHover: appTheme.colors.blue[700],
1075
+ borderOpen: appTheme.colors.blue[600],
1076
+ borderPressed: appTheme.colors.blue[800],
1077
+ borderSelected: appTheme.colors.blue[600],
1078
+ fillHover: appTheme.colors.blue[700],
1079
+ fillPressed: appTheme.colors.blue[800],
1080
+ fillPrimary: appTheme.colors.blue[400],
1081
+ ornament: appTheme.colors.blue[600],
1082
+ ornamentFocus: appTheme.colors.blue[600],
1083
+ ornamentHover: appTheme.colors.blue[700],
1084
+ ornamentOpen: appTheme.colors.blue[600],
1085
+ ornamentPressed: appTheme.colors.blue[800],
1086
+ ornamentSelected: appTheme.colors.blue[600],
1087
+ surfacePrimary: appTheme.colors.blue[400],
1088
+ surfaceSecondary: appTheme.colors.blue[100],
1089
+ textAction: appTheme.colors.blue[600],
1090
+ textActionHover: appTheme.colors.blue[700],
1091
+ textActionPressed: appTheme.colors.blue[800],
765
1092
  },
766
1093
  base: {
767
- border: appTheme.colors.gray[500],
1094
+ backgroundPrimary: appTheme.colors.gray[75],
1095
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
1096
+ backgroundSecondary: appTheme.colors.gray[100],
1097
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
1098
+ backgroundTertiary: appTheme.colors.gray[200],
1099
+ border: appTheme.colors.gray[600],
768
1100
  borderDisabled: appTheme.colors.gray[300],
769
1101
  borderHover: appTheme.colors.gray[900],
1102
+ borderInverse: appTheme.colors.gray[50],
770
1103
  borderPressed: appTheme.colors.gray[900],
771
1104
  borderTable: appTheme.colors.gray[300],
772
1105
  divider: appTheme.colors.gray[200],
1106
+ dividerInverse: appTheme.colors.gray[600],
773
1107
  fillDisabled: appTheme.colors.gray[200],
774
1108
  /* the number 47 is the opacity of the color, which is equal to 28% */
775
1109
  fillHover: appTheme.colors.gray[300] + "47",
@@ -777,56 +1111,53 @@ var SDSPaletteDark = function (appTheme) {
777
1111
  fillPressed: appTheme.colors.gray[300] + "47",
778
1112
  fillPrimary: appTheme.colors.gray[100],
779
1113
  fillSelected: appTheme.colors.gray[900],
780
- iconDisabled: appTheme.colors.gray[300],
781
- iconPrimary: appTheme.colors.gray[500],
782
- iconPrimaryHover: appTheme.colors.gray[900],
783
- iconPrimaryInverse: appTheme.colors.gray[50],
784
- iconPrimaryInverseHover: appTheme.colors.gray[400],
785
- iconPrimaryInversePressed: appTheme.colors.gray[400],
786
- iconPrimaryPressed: appTheme.colors.gray[900],
787
- iconSecondary: appTheme.colors.gray[900],
788
- surfaceBackground: appTheme.colors.gray[75],
789
- surfacePrimary: appTheme.colors.gray[100],
790
- surfacePrimaryInverse: appTheme.colors.gray[900],
791
- surfaceSecondary: appTheme.colors.gray[200],
792
- surfaceTertiary: appTheme.colors.gray[300],
1114
+ ornamentDisabled: appTheme.colors.gray[300],
1115
+ ornamentOnFill: appTheme.colors.gray[900],
1116
+ ornamentPrimary: appTheme.colors.gray[900],
1117
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
1118
+ ornamentSecondary: appTheme.colors.gray[600],
1119
+ ornamentSecondaryHover: appTheme.colors.gray[900],
1120
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
1121
+ surface: appTheme.colors.gray[100],
1122
+ surfaceInverse: appTheme.colors.gray[900],
793
1123
  textDisabled: appTheme.colors.gray[300],
1124
+ textOnFill: appTheme.colors.gray[900],
794
1125
  textPrimary: appTheme.colors.gray[900],
795
1126
  textPrimaryInverse: appTheme.colors.gray[50],
796
1127
  textSecondary: appTheme.colors.gray[600],
797
1128
  textSecondaryInverse: appTheme.colors.gray[300],
798
1129
  },
799
1130
  beta: {
800
- border: appTheme.colors.purple[500],
801
- fillHover: appTheme.colors.purple[600],
802
- fillPressed: appTheme.colors.purple[700],
803
- fillPrimary: appTheme.colors.purple[500],
1131
+ border: appTheme.colors.purple[600],
1132
+ fillHover: appTheme.colors.purple[700],
1133
+ fillPressed: appTheme.colors.purple[800],
1134
+ fillPrimary: appTheme.colors.purple[400],
804
1135
  fillSecondary: appTheme.colors.purple[100],
805
1136
  ornament: appTheme.colors.purple[600],
806
- surfacePrimary: appTheme.colors.purple[100],
807
- surfaceSecondary: appTheme.colors.purple[500],
1137
+ surfacePrimary: appTheme.colors.purple[400],
1138
+ surfaceSecondary: appTheme.colors.purple[100],
808
1139
  text: appTheme.colors.purple[600],
809
1140
  },
810
1141
  info: {
811
- border: appTheme.colors.blue[500],
812
- fillHover: appTheme.colors.blue[600],
813
- fillPressed: appTheme.colors.blue[700],
814
- fillPrimary: appTheme.colors.blue[500],
1142
+ border: appTheme.colors.blue[600],
1143
+ fillHover: appTheme.colors.blue[700],
1144
+ fillPressed: appTheme.colors.blue[800],
1145
+ fillPrimary: appTheme.colors.blue[400],
815
1146
  fillSecondary: appTheme.colors.blue[100],
816
1147
  ornament: appTheme.colors.blue[600],
817
- surfacePrimary: appTheme.colors.blue[100],
818
- surfaceSecondary: appTheme.colors.blue[500],
1148
+ surfacePrimary: appTheme.colors.blue[400],
1149
+ surfaceSecondary: appTheme.colors.blue[100],
819
1150
  text: appTheme.colors.blue[600],
820
1151
  },
821
1152
  negative: {
822
- border: appTheme.colors.red[500],
823
- fillHover: appTheme.colors.red[600],
824
- fillPressed: appTheme.colors.red[700],
825
- fillPrimary: appTheme.colors.red[500],
1153
+ border: appTheme.colors.red[600],
1154
+ fillHover: appTheme.colors.red[700],
1155
+ fillPressed: appTheme.colors.red[800],
1156
+ fillPrimary: appTheme.colors.red[400],
826
1157
  fillSecondary: appTheme.colors.red[100],
827
1158
  ornament: appTheme.colors.red[600],
828
- surfacePrimary: appTheme.colors.red[100],
829
- surfaceSecondary: appTheme.colors.red[500],
1159
+ surfacePrimary: appTheme.colors.red[400],
1160
+ surfaceSecondary: appTheme.colors.red[100],
830
1161
  text: appTheme.colors.red[600],
831
1162
  },
832
1163
  neutral: {
@@ -834,32 +1165,32 @@ var SDSPaletteDark = function (appTheme) {
834
1165
  fillHover: appTheme.colors.gray[600],
835
1166
  fillPressed: appTheme.colors.gray[700],
836
1167
  fillPrimary: appTheme.colors.gray[500],
837
- fillSecondary: appTheme.colors.gray[100],
1168
+ fillSecondary: appTheme.colors.gray[200],
838
1169
  ornament: appTheme.colors.gray[700],
839
- surfacePrimary: appTheme.colors.gray[200],
840
- surfaceSecondary: appTheme.colors.gray[500],
1170
+ surfacePrimary: appTheme.colors.gray[500],
1171
+ surfaceSecondary: appTheme.colors.gray[200],
841
1172
  text: appTheme.colors.gray[700],
842
1173
  },
843
1174
  notice: {
844
- border: appTheme.colors.yellow[500],
845
- fillHover: appTheme.colors.yellow[600],
846
- fillPressed: appTheme.colors.yellow[700],
847
- fillPrimary: appTheme.colors.yellow[500],
1175
+ border: appTheme.colors.yellow[600],
1176
+ fillHover: appTheme.colors.yellow[700],
1177
+ fillPressed: appTheme.colors.yellow[800],
1178
+ fillPrimary: appTheme.colors.yellow[400],
848
1179
  fillSecondary: appTheme.colors.yellow[100],
849
1180
  ornament: appTheme.colors.yellow[600],
850
- surfacePrimary: appTheme.colors.yellow[100],
851
- surfaceSecondary: appTheme.colors.yellow[500],
852
- text: appTheme.colors.yellow[700],
1181
+ surfacePrimary: appTheme.colors.yellow[400],
1182
+ surfaceSecondary: appTheme.colors.yellow[100],
1183
+ text: appTheme.colors.yellow[600],
853
1184
  },
854
1185
  positive: {
855
- border: appTheme.colors.green[500],
856
- fillHover: appTheme.colors.green[600],
857
- fillPressed: appTheme.colors.green[700],
858
- fillPrimary: appTheme.colors.green[500],
1186
+ border: appTheme.colors.green[600],
1187
+ fillHover: appTheme.colors.green[700],
1188
+ fillPressed: appTheme.colors.green[800],
1189
+ fillPrimary: appTheme.colors.green[400],
859
1190
  fillSecondary: appTheme.colors.green[100],
860
1191
  ornament: appTheme.colors.green[600],
861
- surfacePrimary: appTheme.colors.green[100],
862
- surfaceSecondary: appTheme.colors.green[500],
1192
+ surfacePrimary: appTheme.colors.green[400],
1193
+ surfaceSecondary: appTheme.colors.green[100],
863
1194
  text: appTheme.colors.green[600],
864
1195
  },
865
1196
  };
@@ -870,6 +1201,13 @@ var SDSPaletteDark = function (appTheme) {
870
1201
  function makeThemeOptions(appTheme, mode) {
871
1202
  return {
872
1203
  app: appTheme,
1204
+ breakpoints: {
1205
+ values: {
1206
+ lg: 1024,
1207
+ md: 512,
1208
+ sm: 0,
1209
+ },
1210
+ },
873
1211
  components: {
874
1212
  MuiButtonBase: {
875
1213
  defaultProps: {
@@ -1048,20 +1386,20 @@ function makeThemeOptions(appTheme, mode) {
1048
1386
  },
1049
1387
  },
1050
1388
  typography: {
1051
- body1: appTheme.typography.styles.body.regular.xs,
1052
- body2: appTheme.typography.styles.body.regular.xxs,
1053
- button: appTheme.typography.styles.body.regular.button,
1054
- caption: appTheme.typography.styles.body.regular.xxxs,
1389
+ body1: appTheme.typography.wideStyles.body.regular.xs,
1390
+ body2: appTheme.typography.wideStyles.body.regular.xxs,
1391
+ button: appTheme.typography.wideStyles.body.regular.button,
1392
+ caption: appTheme.typography.wideStyles.body.regular.xxxs,
1055
1393
  fontFamily: "".concat(appTheme.typography.fontFamily.body, ", sans-serif"),
1056
- h1: appTheme.typography.styles.header.semibold.xxl,
1057
- h2: appTheme.typography.styles.header.semibold.xl,
1058
- h3: appTheme.typography.styles.header.semibold.l,
1059
- h4: appTheme.typography.styles.header.semibold.m,
1060
- h5: appTheme.typography.styles.header.semibold.s,
1061
- h6: appTheme.typography.styles.header.semibold.xs,
1062
- overline: appTheme.typography.styles.caps.semibold.xxxs,
1063
- subtitle1: appTheme.typography.styles.body.regular.xs,
1064
- subtitle2: appTheme.typography.styles.header.semibold.xxs,
1394
+ h1: appTheme.typography.wideStyles.header.semibold.xxl,
1395
+ h2: appTheme.typography.wideStyles.header.semibold.xl,
1396
+ h3: appTheme.typography.wideStyles.header.semibold.l,
1397
+ h4: appTheme.typography.wideStyles.header.semibold.m,
1398
+ h5: appTheme.typography.wideStyles.header.semibold.s,
1399
+ h6: appTheme.typography.wideStyles.header.semibold.xs,
1400
+ overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
1401
+ subtitle1: appTheme.typography.wideStyles.body.regular.xs,
1402
+ subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
1065
1403
  },
1066
1404
  };
1067
1405
  }
@@ -1145,6 +1483,10 @@ var getBorders = function (_a) {
1145
1483
  var theme = _a.theme;
1146
1484
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
1147
1485
  };
1486
+ var getBreakpoints = function (_a) {
1487
+ var theme = _a.theme;
1488
+ return (theme === null || theme === void 0 ? void 0 : theme.breakpoints) || null;
1489
+ };
1148
1490
 
1149
1491
  function focusVisibleA11yStyle(props) {
1150
1492
  var _a;
@@ -1152,13 +1494,18 @@ function focusVisibleA11yStyle(props) {
1152
1494
  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 ");
1153
1495
  }
1154
1496
 
1155
- var fontBody = function (fontSize, fontWeight) {
1497
+ var fontBody = function (fontSize, fontWeight, isNarrow) {
1156
1498
  if (fontWeight === void 0) { fontWeight = "regular"; }
1499
+ if (isNarrow === void 0) { isNarrow = false; }
1157
1500
  return function (props) {
1501
+ var _a;
1158
1502
  var typography = getTypography(props);
1159
1503
  if (!typography)
1160
1504
  return null;
1161
- var body = typography.styles.body, bodyFontFamily = typography.fontFamily.body;
1505
+ var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
1506
+ if (isNarrow) {
1507
+ return 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));
1508
+ }
1162
1509
  return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
1163
1510
  };
1164
1511
  };
@@ -1174,24 +1521,32 @@ var fontBodySemiboldS = fontBody("s", "semibold");
1174
1521
  var fontBodySemiboldXs = fontBody("xs", "semibold");
1175
1522
  var fontBodySemiboldXxs = fontBody("xxs", "semibold");
1176
1523
  var fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
1177
- var fontCaps = function (fontSize) {
1524
+ var fontCaps = function (fontSize, isNarrow) {
1525
+ if (isNarrow === void 0) { isNarrow = false; }
1178
1526
  return function (props) {
1527
+ var _a;
1179
1528
  var typography = getTypography(props);
1180
1529
  if (!typography)
1181
1530
  return null;
1182
- var caps = typography.styles.caps, capsFontFamily = typography.fontFamily.caps;
1183
- return 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));
1531
+ var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
1532
+ return css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
1533
+ ? 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));
1184
1534
  };
1185
1535
  };
1186
1536
  var fontCapsXxs = fontCaps("xxs");
1187
1537
  var fontCapsXxxs = fontCaps("xxxs");
1188
1538
  var fontCapsXxxxs = fontCaps("xxxxs");
1189
- var fontHeader = function (fontSize) {
1539
+ var fontHeader = function (fontSize, isNarrow) {
1540
+ if (isNarrow === void 0) { isNarrow = false; }
1190
1541
  return function (props) {
1542
+ var _a;
1191
1543
  var typography = getTypography(props);
1192
1544
  if (!typography)
1193
1545
  return null;
1194
- var header = typography.styles.header, headerFontFamily = typography.fontFamily.header;
1546
+ var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
1547
+ if (isNarrow) {
1548
+ return 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));
1549
+ }
1195
1550
  return themeToCss(header.semibold[fontSize], headerFontFamily);
1196
1551
  };
1197
1552
  };
@@ -1203,28 +1558,36 @@ var fontHeaderS = fontHeader("s");
1203
1558
  var fontHeaderXs = fontHeader("xs");
1204
1559
  var fontHeaderXxs = fontHeader("xxs");
1205
1560
  var fontHeaderXxxs = fontHeader("xxxs");
1206
- var fontCode = function (fontSize, fontWeight) {
1561
+ var fontCode = function (fontSize, fontWeight, isNarrow) {
1207
1562
  if (fontWeight === void 0) { fontWeight = "regular"; }
1563
+ if (isNarrow === void 0) { isNarrow = false; }
1208
1564
  return function (props) {
1565
+ var _a;
1209
1566
  var typography = getTypography(props);
1210
1567
  if (!typography)
1211
1568
  return null;
1212
- var code = typography.styles.code, codeFontFamily = typography.fontFamily.code;
1213
- return css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), themeToCss(code[fontWeight][fontSize], codeFontFamily));
1569
+ var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
1570
+ if (isNarrow) {
1571
+ return 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));
1572
+ }
1573
+ return themeToCss(code[fontWeight][fontSize], codeFontFamily);
1214
1574
  };
1215
1575
  };
1216
1576
  var fontCodeXs = fontCode("xs", "regular");
1217
1577
  var fontCodeS = fontCode("s", "regular");
1218
1578
  var fontCodeSemiboldXs = fontCode("xs", "semibold");
1219
1579
  var fontCodeSemiboldS = fontCode("s", "semibold");
1220
- var fontTabular = function (fontSize, fontWeight) {
1580
+ var fontTabular = function (fontSize, fontWeight, isNarrow) {
1221
1581
  if (fontWeight === void 0) { fontWeight = "regular"; }
1582
+ if (isNarrow === void 0) { isNarrow = false; }
1222
1583
  return function (props) {
1584
+ var _a;
1223
1585
  var typography = getTypography(props);
1224
1586
  if (!typography)
1225
1587
  return null;
1226
- var tabular = typography.styles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1227
- return 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));
1588
+ var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1589
+ return 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
1590
+ ? 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));
1228
1591
  };
1229
1592
  };
1230
1593
  var fontTabularXs = fontTabular("xs", "regular");
@@ -1233,35 +1596,35 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
1233
1596
  var fontTabularSemiboldS = fontTabular("s", "semibold");
1234
1597
  function themeToCss(fontTheme, fontFamily) {
1235
1598
  if (fontFamily === void 0) { fontFamily = "inherit"; }
1236
- return 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);
1599
+ return 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);
1237
1600
  }
1238
- var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p;
1601
+ 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;
1239
1602
 
1240
- var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1603
+ var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1241
1604
  var spaces = getSpaces(props);
1242
1605
  return 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);
1243
1606
  });
1244
- var templateObject_1$X, templateObject_2$B;
1607
+ var templateObject_1$X, templateObject_2$C;
1245
1608
 
1246
1609
  var AccordionDetails = function (props) {
1247
1610
  var children = props.children;
1248
1611
  return jsx(StyledAccordionDetails, { children: children });
1249
1612
  };
1250
1613
 
1251
- var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1614
+ var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1252
1615
  var _a, _b;
1253
1616
  var spaces = getSpaces(props);
1254
1617
  var semanticColors = getSemanticColors(props);
1255
- return 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, accordionSummaryClasses.content, accordionSummaryClasses.expanded, 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, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
1618
+ return 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, accordionSummaryClasses.content, accordionSummaryClasses.expanded, 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, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
1256
1619
  });
1257
- var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1620
+ var StyledSubtitle = styled("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1258
1621
  var _a;
1259
1622
  var semanticColors = getSemanticColors(props);
1260
1623
  return 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);
1261
1624
  });
1262
- var templateObject_1$W, templateObject_2$A, templateObject_3$s, templateObject_4$o;
1625
+ var templateObject_1$W, templateObject_2$B, templateObject_3$s, templateObject_4$n;
1263
1626
 
1264
- var _path$2b, _path2$E, _path3$6;
1627
+ var _path$2b, _path2$C, _path3$6;
1265
1628
  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); }
1266
1629
  var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1267
1630
  return /*#__PURE__*/React.createElement("svg", _extends$2g({
@@ -1271,7 +1634,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1271
1634
  }, props), _path$2b || (_path$2b = /*#__PURE__*/React.createElement("path", {
1272
1635
  fillRule: "evenodd",
1273
1636
  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"
1274
- })), _path2$E || (_path2$E = /*#__PURE__*/React.createElement("path", {
1637
+ })), _path2$C || (_path2$C = /*#__PURE__*/React.createElement("path", {
1275
1638
  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"
1276
1639
  })), _path3$6 || (_path3$6 = /*#__PURE__*/React.createElement("path", {
1277
1640
  fillRule: "evenodd",
@@ -1279,7 +1642,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1279
1642
  })));
1280
1643
  };
1281
1644
 
1282
- var _path$2a, _path2$D;
1645
+ var _path$2a, _path2$B;
1283
1646
  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); }
1284
1647
  var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1285
1648
  return /*#__PURE__*/React.createElement("svg", _extends$2f({
@@ -1288,7 +1651,7 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1288
1651
  height: 16
1289
1652
  }, props), _path$2a || (_path$2a = /*#__PURE__*/React.createElement("path", {
1290
1653
  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"
1291
- })), _path2$D || (_path2$D = /*#__PURE__*/React.createElement("path", {
1654
+ })), _path2$B || (_path2$B = /*#__PURE__*/React.createElement("path", {
1292
1655
  fillRule: "evenodd",
1293
1656
  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"
1294
1657
  })));
@@ -1333,7 +1696,7 @@ var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props
1333
1696
  })));
1334
1697
  };
1335
1698
 
1336
- var _path$26, _path2$C;
1699
+ var _path$26, _path2$A;
1337
1700
  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); }
1338
1701
  var SvgIconBookLarge = function SvgIconBookLarge(props) {
1339
1702
  return /*#__PURE__*/React.createElement("svg", _extends$2b({
@@ -1344,7 +1707,7 @@ var SvgIconBookLarge = function SvgIconBookLarge(props) {
1344
1707
  fillRule: "evenodd",
1345
1708
  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",
1346
1709
  clipRule: "evenodd"
1347
- })), _path2$C || (_path2$C = /*#__PURE__*/React.createElement("path", {
1710
+ })), _path2$A || (_path2$A = /*#__PURE__*/React.createElement("path", {
1348
1711
  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"
1349
1712
  })));
1350
1713
  };
@@ -1363,7 +1726,7 @@ var SvgIconBookSmall = function SvgIconBookSmall(props) {
1363
1726
  })));
1364
1727
  };
1365
1728
 
1366
- var _path$24, _path2$B;
1729
+ var _path$24, _path2$z;
1367
1730
  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); }
1368
1731
  var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1369
1732
  return /*#__PURE__*/React.createElement("svg", _extends$29({
@@ -1372,7 +1735,7 @@ var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1372
1735
  height: 24
1373
1736
  }, props), _path$24 || (_path$24 = /*#__PURE__*/React.createElement("path", {
1374
1737
  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"
1375
- })), _path2$B || (_path2$B = /*#__PURE__*/React.createElement("path", {
1738
+ })), _path2$z || (_path2$z = /*#__PURE__*/React.createElement("path", {
1376
1739
  fillRule: "evenodd",
1377
1740
  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"
1378
1741
  })));
@@ -1430,7 +1793,7 @@ var SvgIconChevronDownSmall = function SvgIconChevronDownSmall(props) {
1430
1793
  })));
1431
1794
  };
1432
1795
 
1433
- var _path$1$, _path2$A;
1796
+ var _path$1$, _path2$y;
1434
1797
  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); }
1435
1798
  var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1436
1799
  return /*#__PURE__*/React.createElement("svg", _extends$24({
@@ -1439,12 +1802,12 @@ var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1439
1802
  height: 16
1440
1803
  }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React.createElement("path", {
1441
1804
  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"
1442
- })), _path2$A || (_path2$A = /*#__PURE__*/React.createElement("path", {
1805
+ })), _path2$y || (_path2$y = /*#__PURE__*/React.createElement("path", {
1443
1806
  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"
1444
1807
  })));
1445
1808
  };
1446
1809
 
1447
- var _path$1_, _path2$z;
1810
+ var _path$1_, _path2$x;
1448
1811
  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); }
1449
1812
  var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1450
1813
  return /*#__PURE__*/React.createElement("svg", _extends$23({
@@ -1453,7 +1816,7 @@ var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1453
1816
  height: 16
1454
1817
  }, props), _path$1_ || (_path$1_ = /*#__PURE__*/React.createElement("path", {
1455
1818
  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"
1456
- })), _path2$z || (_path2$z = /*#__PURE__*/React.createElement("path", {
1819
+ })), _path2$x || (_path2$x = /*#__PURE__*/React.createElement("path", {
1457
1820
  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"
1458
1821
  })));
1459
1822
  };
@@ -1484,7 +1847,7 @@ var SvgIconChevronLeftSmall = function SvgIconChevronLeftSmall(props) {
1484
1847
  })));
1485
1848
  };
1486
1849
 
1487
- var _path$1X, _path2$y;
1850
+ var _path$1X, _path2$w;
1488
1851
  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); }
1489
1852
  var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1490
1853
  return /*#__PURE__*/React.createElement("svg", _extends$20({
@@ -1493,7 +1856,7 @@ var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1493
1856
  height: 16
1494
1857
  }, props), _path$1X || (_path$1X = /*#__PURE__*/React.createElement("path", {
1495
1858
  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"
1496
- })), _path2$y || (_path2$y = /*#__PURE__*/React.createElement("path", {
1859
+ })), _path2$w || (_path2$w = /*#__PURE__*/React.createElement("path", {
1497
1860
  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"
1498
1861
  })));
1499
1862
  };
@@ -1550,7 +1913,7 @@ var SvgIconChevronUpSmall = function SvgIconChevronUpSmall(props) {
1550
1913
  })));
1551
1914
  };
1552
1915
 
1553
- var _path$1S, _path2$x;
1916
+ var _path$1S, _path2$v;
1554
1917
  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); }
1555
1918
  var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1556
1919
  return /*#__PURE__*/React.createElement("svg", _extends$1X({
@@ -1559,7 +1922,7 @@ var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1559
1922
  height: 16
1560
1923
  }, props), _path$1S || (_path$1S = /*#__PURE__*/React.createElement("path", {
1561
1924
  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"
1562
- })), _path2$x || (_path2$x = /*#__PURE__*/React.createElement("path", {
1925
+ })), _path2$v || (_path2$v = /*#__PURE__*/React.createElement("path", {
1563
1926
  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"
1564
1927
  })));
1565
1928
  };
@@ -1577,7 +1940,7 @@ var SvgIconCirclesOverlap2Large = function SvgIconCirclesOverlap2Large(props) {
1577
1940
  })));
1578
1941
  };
1579
1942
 
1580
- var _path$1Q, _path2$w;
1943
+ var _path$1Q, _path2$u;
1581
1944
  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); }
1582
1945
  var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1583
1946
  return /*#__PURE__*/React.createElement("svg", _extends$1V({
@@ -1587,12 +1950,12 @@ var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1587
1950
  }, props), _path$1Q || (_path$1Q = /*#__PURE__*/React.createElement("path", {
1588
1951
  fillRule: "evenodd",
1589
1952
  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"
1590
- })), _path2$w || (_path2$w = /*#__PURE__*/React.createElement("path", {
1953
+ })), _path2$u || (_path2$u = /*#__PURE__*/React.createElement("path", {
1591
1954
  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"
1592
1955
  })));
1593
1956
  };
1594
1957
 
1595
- var _path$1P, _path2$v;
1958
+ var _path$1P, _path2$t;
1596
1959
  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); }
1597
1960
  var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1598
1961
  return /*#__PURE__*/React.createElement("svg", _extends$1U({
@@ -1601,7 +1964,7 @@ var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1601
1964
  height: 24
1602
1965
  }, props), _path$1P || (_path$1P = /*#__PURE__*/React.createElement("path", {
1603
1966
  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"
1604
- })), _path2$v || (_path2$v = /*#__PURE__*/React.createElement("path", {
1967
+ })), _path2$t || (_path2$t = /*#__PURE__*/React.createElement("path", {
1605
1968
  fillRule: "evenodd",
1606
1969
  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"
1607
1970
  })));
@@ -1620,7 +1983,7 @@ var SvgIconCodeSmall = function SvgIconCodeSmall(props) {
1620
1983
  })));
1621
1984
  };
1622
1985
 
1623
- var _path$1N, _path2$u;
1986
+ var _path$1N, _path2$s;
1624
1987
  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); }
1625
1988
  var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1626
1989
  return /*#__PURE__*/React.createElement("svg", _extends$1S({
@@ -1630,13 +1993,13 @@ var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1630
1993
  }, props), _path$1N || (_path$1N = /*#__PURE__*/React.createElement("path", {
1631
1994
  fillRule: "evenodd",
1632
1995
  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"
1633
- })), _path2$u || (_path2$u = /*#__PURE__*/React.createElement("path", {
1996
+ })), _path2$s || (_path2$s = /*#__PURE__*/React.createElement("path", {
1634
1997
  fillRule: "evenodd",
1635
1998
  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"
1636
1999
  })));
1637
2000
  };
1638
2001
 
1639
- var _path$1M, _path2$t;
2002
+ var _path$1M, _path2$r;
1640
2003
  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); }
1641
2004
  var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1642
2005
  return /*#__PURE__*/React.createElement("svg", _extends$1R({
@@ -1645,7 +2008,7 @@ var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1645
2008
  height: 24
1646
2009
  }, props), _path$1M || (_path$1M = /*#__PURE__*/React.createElement("path", {
1647
2010
  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"
1648
- })), _path2$t || (_path2$t = /*#__PURE__*/React.createElement("path", {
2011
+ })), _path2$r || (_path2$r = /*#__PURE__*/React.createElement("path", {
1649
2012
  fillRule: "evenodd",
1650
2013
  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"
1651
2014
  })));
@@ -1664,7 +2027,7 @@ var SvgIconCopySmall = function SvgIconCopySmall(props) {
1664
2027
  })));
1665
2028
  };
1666
2029
 
1667
- var _path$1K, _path2$s, _path3$5;
2030
+ var _path$1K, _path2$q, _path3$5;
1668
2031
  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); }
1669
2032
  var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1670
2033
  return /*#__PURE__*/React.createElement("svg", _extends$1P({
@@ -1674,7 +2037,7 @@ var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1674
2037
  }, props), _path$1K || (_path$1K = /*#__PURE__*/React.createElement("path", {
1675
2038
  fillRule: "evenodd",
1676
2039
  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"
1677
- })), _path2$s || (_path2$s = /*#__PURE__*/React.createElement("path", {
2040
+ })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
1678
2041
  fillRule: "evenodd",
1679
2042
  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"
1680
2043
  })), _path3$5 || (_path3$5 = /*#__PURE__*/React.createElement("path", {
@@ -1798,7 +2161,7 @@ var SvgIconEditSmall = function SvgIconEditSmall(props) {
1798
2161
  })));
1799
2162
  };
1800
2163
 
1801
- var _path$1A, _path2$r;
2164
+ var _path$1A, _path2$p;
1802
2165
  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); }
1803
2166
  var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
1804
2167
  return /*#__PURE__*/React.createElement("svg", _extends$1F({
@@ -1807,12 +2170,12 @@ var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
1807
2170
  height: 16
1808
2171
  }, props), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("path", {
1809
2172
  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"
1810
- })), _path2$r || (_path2$r = /*#__PURE__*/React.createElement("path", {
2173
+ })), _path2$p || (_path2$p = /*#__PURE__*/React.createElement("path", {
1811
2174
  d: "M8.58 8.987 15.2 2H.8l6.62 6.987a.8.8 0 0 0 1.16 0"
1812
2175
  })));
1813
2176
  };
1814
2177
 
1815
- var _path$1z, _path2$q;
2178
+ var _path$1z, _path2$o;
1816
2179
  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); }
1817
2180
  var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLarge(props) {
1818
2181
  return /*#__PURE__*/React.createElement("svg", _extends$1E({
@@ -1822,7 +2185,7 @@ var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLar
1822
2185
  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
1823
2186
  fillRule: "evenodd",
1824
2187
  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"
1825
- })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
2188
+ })), _path2$o || (_path2$o = /*#__PURE__*/React.createElement("path", {
1826
2189
  fillRule: "evenodd",
1827
2190
  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"
1828
2191
  })));
@@ -1841,7 +2204,7 @@ var SvgIconExclamationMarkCircleSmall = function SvgIconExclamationMarkCircleSma
1841
2204
  })));
1842
2205
  };
1843
2206
 
1844
- var _path$1x, _path2$p, _path3$4;
2207
+ var _path$1x, _path2$n, _path3$4;
1845
2208
  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); }
1846
2209
  var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpeechBubbleLarge(props) {
1847
2210
  return /*#__PURE__*/React.createElement("svg", _extends$1C({
@@ -1850,7 +2213,7 @@ var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpe
1850
2213
  height: 24
1851
2214
  }, props), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
1852
2215
  d: "M10.931 9.436a1.036 1.036 0 0 0 2.073 0V2.782a1.036 1.036 0 0 0-2.073 0z"
1853
- })), _path2$p || (_path2$p = /*#__PURE__*/React.createElement("path", {
2216
+ })), _path2$n || (_path2$n = /*#__PURE__*/React.createElement("path", {
1854
2217
  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"
1855
2218
  })), _path3$4 || (_path3$4 = /*#__PURE__*/React.createElement("path", {
1856
2219
  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"
@@ -1870,7 +2233,7 @@ var SvgIconEyeClosedSmall = function SvgIconEyeClosedSmall(props) {
1870
2233
  })));
1871
2234
  };
1872
2235
 
1873
- var _path$1v, _path2$o;
2236
+ var _path$1v, _path2$m;
1874
2237
  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); }
1875
2238
  var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
1876
2239
  return /*#__PURE__*/React.createElement("svg", _extends$1A({
@@ -1879,7 +2242,7 @@ var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
1879
2242
  height: 16
1880
2243
  }, props), _path$1v || (_path$1v = /*#__PURE__*/React.createElement("path", {
1881
2244
  d: "M9.89 8a1.89 1.89 0 1 0-3.78 0 1.89 1.89 0 0 0 3.78 0"
1882
- })), _path2$o || (_path2$o = /*#__PURE__*/React.createElement("path", {
2245
+ })), _path2$m || (_path2$m = /*#__PURE__*/React.createElement("path", {
1883
2246
  fillRule: "evenodd",
1884
2247
  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"
1885
2248
  })));
@@ -1962,7 +2325,7 @@ var SvgIconFlaskLarge = function SvgIconFlaskLarge(props) {
1962
2325
  })));
1963
2326
  };
1964
2327
 
1965
- var _path$1o, _path2$n;
2328
+ var _path$1o, _path2$l;
1966
2329
  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); }
1967
2330
  var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
1968
2331
  return /*#__PURE__*/React.createElement("svg", _extends$1t({
@@ -1974,14 +2337,14 @@ var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
1974
2337
  fillRule: "evenodd",
1975
2338
  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",
1976
2339
  clipRule: "evenodd"
1977
- })), _path2$n || (_path2$n = /*#__PURE__*/React.createElement("path", {
2340
+ })), _path2$l || (_path2$l = /*#__PURE__*/React.createElement("path", {
1978
2341
  fillRule: "evenodd",
1979
2342
  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",
1980
2343
  clipRule: "evenodd"
1981
2344
  })));
1982
2345
  };
1983
2346
 
1984
- var _path$1n, _path2$m;
2347
+ var _path$1n, _path2$k;
1985
2348
  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); }
1986
2349
  var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
1987
2350
  return /*#__PURE__*/React.createElement("svg", _extends$1s({
@@ -1992,7 +2355,7 @@ var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
1992
2355
  fill: "#CCC",
1993
2356
  fillRule: "evenodd",
1994
2357
  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"
1995
- })), _path2$m || (_path2$m = /*#__PURE__*/React.createElement("path", {
2358
+ })), _path2$k || (_path2$k = /*#__PURE__*/React.createElement("path", {
1996
2359
  fillRule: "evenodd",
1997
2360
  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"
1998
2361
  })));
@@ -2050,7 +2413,7 @@ var SvgIconGridLarge = function SvgIconGridLarge(props) {
2050
2413
  })));
2051
2414
  };
2052
2415
 
2053
- var _path$1i, _path2$l;
2416
+ var _path$1i, _path2$j;
2054
2417
  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); }
2055
2418
  var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2056
2419
  return /*#__PURE__*/React.createElement("svg", _extends$1n({
@@ -2061,13 +2424,13 @@ var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2061
2424
  fill: "#CCC",
2062
2425
  fillRule: "evenodd",
2063
2426
  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"
2064
- })), _path2$l || (_path2$l = /*#__PURE__*/React.createElement("path", {
2427
+ })), _path2$j || (_path2$j = /*#__PURE__*/React.createElement("path", {
2065
2428
  fillRule: "evenodd",
2066
2429
  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"
2067
2430
  })));
2068
2431
  };
2069
2432
 
2070
- var _path$1h, _path2$k;
2433
+ var _path$1h, _path2$i;
2071
2434
  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); }
2072
2435
  var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2073
2436
  return /*#__PURE__*/React.createElement("svg", _extends$1m({
@@ -2078,7 +2441,7 @@ var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2078
2441
  fill: "#CCC",
2079
2442
  fillRule: "evenodd",
2080
2443
  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"
2081
- })), _path2$k || (_path2$k = /*#__PURE__*/React.createElement("path", {
2444
+ })), _path2$i || (_path2$i = /*#__PURE__*/React.createElement("path", {
2082
2445
  fillRule: "evenodd",
2083
2446
  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"
2084
2447
  })));
@@ -2109,7 +2472,7 @@ var SvgIconHouseSmall = function SvgIconHouseSmall(props) {
2109
2472
  })));
2110
2473
  };
2111
2474
 
2112
- var _path$1e, _path2$j;
2475
+ var _path$1e, _path2$h;
2113
2476
  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); }
2114
2477
  var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2115
2478
  return /*#__PURE__*/React.createElement("svg", _extends$1j({
@@ -2119,7 +2482,7 @@ var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2119
2482
  }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
2120
2483
  fillRule: "evenodd",
2121
2484
  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"
2122
- })), _path2$j || (_path2$j = /*#__PURE__*/React.createElement("path", {
2485
+ })), _path2$h || (_path2$h = /*#__PURE__*/React.createElement("path", {
2123
2486
  fillRule: "evenodd",
2124
2487
  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"
2125
2488
  })));
@@ -2164,7 +2527,7 @@ var SvgIconLifeRingSmall = function SvgIconLifeRingSmall(props) {
2164
2527
  })));
2165
2528
  };
2166
2529
 
2167
- var _path$1a, _path2$i;
2530
+ var _path$1a, _path2$g;
2168
2531
  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); }
2169
2532
  var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2170
2533
  return /*#__PURE__*/React.createElement("svg", _extends$1f({
@@ -2174,7 +2537,7 @@ var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2174
2537
  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
2175
2538
  fillRule: "evenodd",
2176
2539
  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"
2177
- })), _path2$i || (_path2$i = /*#__PURE__*/React.createElement("path", {
2540
+ })), _path2$g || (_path2$g = /*#__PURE__*/React.createElement("path", {
2178
2541
  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"
2179
2542
  })));
2180
2543
  };
@@ -2600,7 +2963,7 @@ var SvgIconLoadingSmall = function SvgIconLoadingSmall(props) {
2600
2963
  }))));
2601
2964
  };
2602
2965
 
2603
- var _path$13, _path2$h;
2966
+ var _path$13, _path2$f;
2604
2967
  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); }
2605
2968
  var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2606
2969
  return /*#__PURE__*/React.createElement("svg", _extends$16({
@@ -2609,7 +2972,7 @@ var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2609
2972
  height: 16
2610
2973
  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
2611
2974
  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"
2612
- })), _path2$h || (_path2$h = /*#__PURE__*/React.createElement("path", {
2975
+ })), _path2$f || (_path2$f = /*#__PURE__*/React.createElement("path", {
2613
2976
  fillRule: "evenodd",
2614
2977
  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"
2615
2978
  })));
@@ -2666,7 +3029,7 @@ var SvgIconOpenSmall = function SvgIconOpenSmall(props) {
2666
3029
  })));
2667
3030
  };
2668
3031
 
2669
- var _path$_, _path2$g;
3032
+ var _path$_, _path2$e;
2670
3033
  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); }
2671
3034
  var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2672
3035
  return /*#__PURE__*/React.createElement("svg", _extends$11({
@@ -2677,7 +3040,7 @@ var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2677
3040
  fillRule: "evenodd",
2678
3041
  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",
2679
3042
  clipRule: "evenodd"
2680
- })), _path2$g || (_path2$g = /*#__PURE__*/React.createElement("path", {
3043
+ })), _path2$e || (_path2$e = /*#__PURE__*/React.createElement("path", {
2681
3044
  fillRule: "evenodd",
2682
3045
  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",
2683
3046
  clipRule: "evenodd"
@@ -2771,7 +3134,7 @@ var SvgIconPinSmall = function SvgIconPinSmall(props) {
2771
3134
  })));
2772
3135
  };
2773
3136
 
2774
- var _path$S, _path2$f;
3137
+ var _path$S, _path2$d;
2775
3138
  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); }
2776
3139
  var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
2777
3140
  return /*#__PURE__*/React.createElement("svg", _extends$V({
@@ -2781,7 +3144,7 @@ var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
2781
3144
  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
2782
3145
  fillRule: "evenodd",
2783
3146
  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"
2784
- })), _path2$f || (_path2$f = /*#__PURE__*/React.createElement("path", {
3147
+ })), _path2$d || (_path2$d = /*#__PURE__*/React.createElement("path", {
2785
3148
  fillRule: "evenodd",
2786
3149
  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"
2787
3150
  })));
@@ -2813,7 +3176,7 @@ var SvgIconPlusSmall = function SvgIconPlusSmall(props) {
2813
3176
  })));
2814
3177
  };
2815
3178
 
2816
- var _path$P, _path2$e;
3179
+ var _path$P, _path2$c;
2817
3180
  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); }
2818
3181
  var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
2819
3182
  return /*#__PURE__*/React.createElement("svg", _extends$S({
@@ -2824,13 +3187,13 @@ var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
2824
3187
  fill: "#CCC",
2825
3188
  fillRule: "evenodd",
2826
3189
  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"
2827
- })), _path2$e || (_path2$e = /*#__PURE__*/React.createElement("path", {
3190
+ })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
2828
3191
  fillRule: "evenodd",
2829
3192
  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"
2830
3193
  })));
2831
3194
  };
2832
3195
 
2833
- var _path$O, _path2$d;
3196
+ var _path$O, _path2$b;
2834
3197
  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); }
2835
3198
  var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
2836
3199
  return /*#__PURE__*/React.createElement("svg", _extends$R({
@@ -2841,7 +3204,7 @@ var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
2841
3204
  fill: "#CCC",
2842
3205
  fillRule: "evenodd",
2843
3206
  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"
2844
- })), _path2$d || (_path2$d = /*#__PURE__*/React.createElement("path", {
3207
+ })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
2845
3208
  fillRule: "evenodd",
2846
3209
  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"
2847
3210
  })));
@@ -2925,7 +3288,7 @@ var SvgIconRefreshSmall = function SvgIconRefreshSmall(props) {
2925
3288
  })));
2926
3289
  };
2927
3290
 
2928
- var _path$H, _path2$c, _path3$3;
3291
+ var _path$H, _path2$a, _path3$3;
2929
3292
  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); }
2930
3293
  var SvgIconReportLarge = function SvgIconReportLarge(props) {
2931
3294
  return /*#__PURE__*/React.createElement("svg", _extends$K({
@@ -2934,7 +3297,7 @@ var SvgIconReportLarge = function SvgIconReportLarge(props) {
2934
3297
  height: 24
2935
3298
  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
2936
3299
  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"
2937
- })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
3300
+ })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
2938
3301
  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"
2939
3302
  })), _path3$3 || (_path3$3 = /*#__PURE__*/React.createElement("path", {
2940
3303
  fillRule: "evenodd",
@@ -2981,7 +3344,7 @@ var SvgIconRotateRightSmall = function SvgIconRotateRightSmall(props) {
2981
3344
  })));
2982
3345
  };
2983
3346
 
2984
- var _path$D, _path2$b;
3347
+ var _path$D, _path2$9;
2985
3348
  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); }
2986
3349
  var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
2987
3350
  return /*#__PURE__*/React.createElement("svg", _extends$G({
@@ -2991,7 +3354,7 @@ var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
2991
3354
  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
2992
3355
  fillRule: "evenodd",
2993
3356
  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"
2994
- })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
3357
+ })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
2995
3358
  fillRule: "evenodd",
2996
3359
  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"
2997
3360
  })));
@@ -3029,7 +3392,7 @@ var SvgIconSearchLarge = function SvgIconSearchLarge(props) {
3029
3392
  })));
3030
3393
  };
3031
3394
 
3032
- var _path$B, _path2$a;
3395
+ var _path$B, _path2$8;
3033
3396
  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); }
3034
3397
  var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3Large(props) {
3035
3398
  return /*#__PURE__*/React.createElement("svg", _extends$D({
@@ -3038,13 +3401,13 @@ var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3L
3038
3401
  height: 24
3039
3402
  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
3040
3403
  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"
3041
- })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
3404
+ })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
3042
3405
  fillRule: "evenodd",
3043
3406
  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"
3044
3407
  })));
3045
3408
  };
3046
3409
 
3047
- var _path$A, _path2$9;
3410
+ var _path$A, _path2$7;
3048
3411
  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); }
3049
3412
  var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3Small(props) {
3050
3413
  return /*#__PURE__*/React.createElement("svg", _extends$C({
@@ -3053,7 +3416,7 @@ var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3S
3053
3416
  height: 16
3054
3417
  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
3055
3418
  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"
3056
- })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
3419
+ })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
3057
3420
  fillRule: "evenodd",
3058
3421
  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"
3059
3422
  })));
@@ -3150,7 +3513,7 @@ var SvgIconStarburstSmall = function SvgIconStarburstSmall(props) {
3150
3513
  })));
3151
3514
  };
3152
3515
 
3153
- var _path$s, _path2$8;
3516
+ var _path$s, _path2$6;
3154
3517
  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); }
3155
3518
  var SvgIconStarLarge = function SvgIconStarLarge(props) {
3156
3519
  return /*#__PURE__*/React.createElement("svg", _extends$u({
@@ -3160,7 +3523,7 @@ var SvgIconStarLarge = function SvgIconStarLarge(props) {
3160
3523
  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
3161
3524
  fillRule: "evenodd",
3162
3525
  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"
3163
- })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
3526
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
3164
3527
  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"
3165
3528
  })));
3166
3529
  };
@@ -3216,7 +3579,7 @@ var SvgIconThumbsUpSmall = function SvgIconThumbsUpSmall(props) {
3216
3579
  }))));
3217
3580
  };
3218
3581
 
3219
- var _path$q, _path2$7, _path3$2;
3582
+ var _path$q, _path2$5, _path3$2;
3220
3583
  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); }
3221
3584
  var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3222
3585
  return /*#__PURE__*/React.createElement("svg", _extends$q({
@@ -3226,7 +3589,7 @@ var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3226
3589
  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
3227
3590
  fillRule: "evenodd",
3228
3591
  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"
3229
- })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
3592
+ })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
3230
3593
  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"
3231
3594
  })), _path3$2 || (_path3$2 = /*#__PURE__*/React.createElement("path", {
3232
3595
  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"
@@ -3271,7 +3634,7 @@ var SvgIconTreeHorizontalLarge = function SvgIconTreeHorizontalLarge(props) {
3271
3634
  })));
3272
3635
  };
3273
3636
 
3274
- var _path$m, _path2$6;
3637
+ var _path$m, _path2$4;
3275
3638
  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); }
3276
3639
  var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLarge(props) {
3277
3640
  return /*#__PURE__*/React.createElement("svg", _extends$m({
@@ -3282,13 +3645,13 @@ var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLar
3282
3645
  fill: "#CCC",
3283
3646
  fillRule: "evenodd",
3284
3647
  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"
3285
- })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
3648
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
3286
3649
  fillRule: "evenodd",
3287
3650
  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"
3288
3651
  })));
3289
3652
  };
3290
3653
 
3291
- var _path$l, _path2$5;
3654
+ var _path$l, _path2$3;
3292
3655
  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); }
3293
3656
  var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge(props) {
3294
3657
  return /*#__PURE__*/React.createElement("svg", _extends$l({
@@ -3299,7 +3662,7 @@ var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge
3299
3662
  fill: "#CCC",
3300
3663
  fillRule: "evenodd",
3301
3664
  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"
3302
- })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
3665
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
3303
3666
  fillRule: "evenodd",
3304
3667
  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"
3305
3668
  })));
@@ -3418,7 +3781,7 @@ var SvgIconUploadLarge = function SvgIconUploadLarge(props) {
3418
3781
  })));
3419
3782
  };
3420
3783
 
3421
- var _path$b, _path2$4;
3784
+ var _path$b, _path2$2;
3422
3785
  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); }
3423
3786
  var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3424
3787
  return /*#__PURE__*/React.createElement("svg", _extends$b({
@@ -3427,12 +3790,12 @@ var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3427
3790
  height: 16
3428
3791
  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
3429
3792
  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"
3430
- })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
3793
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
3431
3794
  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"
3432
3795
  })));
3433
3796
  };
3434
3797
 
3435
- var _path$a, _path2$3, _path3$1, _path4;
3798
+ var _path$a, _path2$1, _path3$1, _path4;
3436
3799
  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); }
3437
3800
  var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3438
3801
  return /*#__PURE__*/React.createElement("svg", _extends$a({
@@ -3441,7 +3804,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3441
3804
  height: 24
3442
3805
  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
3443
3806
  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"
3444
- })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
3807
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
3445
3808
  fillRule: "evenodd",
3446
3809
  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"
3447
3810
  })), _path3$1 || (_path3$1 = /*#__PURE__*/React.createElement("path", {
@@ -3452,7 +3815,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3452
3815
  })));
3453
3816
  };
3454
3817
 
3455
- var _path$9, _path2$2, _path3;
3818
+ var _path$9, _path2, _path3;
3456
3819
  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); }
3457
3820
  var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3458
3821
  return /*#__PURE__*/React.createElement("svg", _extends$9({
@@ -3462,7 +3825,7 @@ var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3462
3825
  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
3463
3826
  fillRule: "evenodd",
3464
3827
  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"
3465
- })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
3828
+ })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
3466
3829
  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"
3467
3830
  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
3468
3831
  fillRule: "evenodd",
@@ -3969,54 +4332,36 @@ var iconMap = {
3969
4332
  },
3970
4333
  };
3971
4334
 
4335
+ var doNotForwardProps$s = ["sdsIcon", "sdsSize", "iconColor"];
3972
4336
  /**
3973
4337
  * @see https://mui.com/material-ui/icons/#svgicon
3974
4338
  */
3975
- function iconSize(props) {
3976
- var _a, _b;
3977
- var sdsSize = props.sdsSize;
3978
- var iconSizes = getIconSizes(props);
3979
- return 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);
3980
- }
3981
- function buttonStyle() {
3982
- return css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
3983
- }
3984
- function staticStyle(props) {
3985
- var _a;
3986
- var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
3987
- var colors = getColors(props);
3988
- return 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]);
3989
- }
3990
- function interactive(props) {
3991
- var _a, _b, _c, _d;
3992
- var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
3993
- var colors = getColors(props);
3994
- var semanticColors = getSemanticColors(props);
3995
- return 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);
3996
- }
3997
- var doNotForwardProps$s = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
3998
4339
  var StyledSvgIcon = styled(SvgIcon, {
3999
4340
  shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
4000
- })(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4001
- var sdsType = props.sdsType;
4002
- return 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());
4341
+ })(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4342
+ var _a, _b, _c;
4343
+ var mode = getMode(props);
4344
+ 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;
4345
+ var iconSizes = getIconSizes(props);
4346
+ var colors = getColors(props);
4347
+ return 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);
4003
4348
  });
4004
- var StyledIcon = styled("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"])));
4005
- var templateObject_1$V, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
4349
+ var StyledIcon = styled("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"])));
4350
+ var templateObject_1$V, templateObject_2$A, templateObject_3$r;
4006
4351
 
4007
4352
  /**
4008
4353
  * @see https://mui.com/material-ui/icons/#icons
4009
4354
  */
4010
4355
  var Icon = forwardRef(function Icon(_a, ref) {
4011
4356
  var _b;
4012
- var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize, sdsType = _a.sdsType;
4357
+ var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize;
4013
4358
  var icon = (_b = iconMap[sdsIcon]) !== null && _b !== void 0 ? _b : {};
4014
4359
  var largeIcon = icon.largeIcon, smallIcon = icon.smallIcon;
4015
4360
  if ((sdsSize === "xs" || sdsSize === "s") && smallIcon) {
4016
- return (jsx(StyledIcon, { ref: ref, children: 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 }) }));
4361
+ return (jsx(StyledIcon, { ref: ref, children: 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 }) }));
4017
4362
  }
4018
4363
  if ((sdsSize === "l" || sdsSize === "xl") && largeIcon) {
4019
- return (jsx(StyledIcon, { ref: ref, children: 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 }) }));
4364
+ return (jsx(StyledIcon, { ref: ref, children: 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 }) }));
4020
4365
  }
4021
4366
  // eslint-disable-next-line no-console
4022
4367
  console.error("Error: Icon ".concat(sdsIcon, " not found for size ").concat(sdsSize, ". This is a @czi-sds/components problem."));
@@ -4025,7 +4370,7 @@ var Icon = forwardRef(function Icon(_a, ref) {
4025
4370
 
4026
4371
  var AccordionHeader = function (props) {
4027
4372
  var children = props.children, id = props.id, subtitle = props.subtitle;
4028
- return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
4373
+ return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
4029
4374
  };
4030
4375
 
4031
4376
  var sdsPropNames$3 = ["useDivider", "togglePosition"];
@@ -4033,15 +4378,14 @@ var StyledAccordion = styled(Accordion$1, {
4033
4378
  shouldForwardProp: function (prop) {
4034
4379
  return !sdsPropNames$3.includes(prop.toString());
4035
4380
  },
4036
- })(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4037
- var _a, _b, _c;
4381
+ })(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4382
+ var _a, _b;
4038
4383
  var useDivider = props.useDivider, togglePosition = props.togglePosition;
4039
4384
  var shadows = getShadows(props);
4040
4385
  var typography = getTypography(props);
4041
4386
  var borders = getBorders(props);
4042
4387
  var spaces = getSpaces(props);
4043
- var semanticColors = getSemanticColors(props);
4044
- return 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 "])), 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", accordionSummaryClasses.root, focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4388
+ return 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 "])), 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", accordionSummaryClasses.root, focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4045
4389
  });
4046
4390
  var leftPosition = function (props) {
4047
4391
  var _a, _b, _c;
@@ -4051,7 +4395,7 @@ var leftPosition = function (props) {
4051
4395
  ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
4052
4396
  ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
4053
4397
  };
4054
- var templateObject_1$U, templateObject_2$y, templateObject_3$q;
4398
+ var templateObject_1$U, templateObject_2$z, templateObject_3$q;
4055
4399
 
4056
4400
  /**
4057
4401
  * @see https://mui.com/material-ui/react-accordion/
@@ -4134,7 +4478,7 @@ var SDSWarningTypes;
4134
4478
  SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
4135
4479
  SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
4136
4480
  SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
4137
- SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
4481
+ SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
4138
4482
  })(SDSWarningTypes || (SDSWarningTypes = {}));
4139
4483
  var SDS_WARNINGS = (_a = {},
4140
4484
  _a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
@@ -4169,9 +4513,9 @@ var SDS_WARNINGS = (_a = {},
4169
4513
  hasWarned: false,
4170
4514
  message: "Warning: The 'wide' width is only available for light tooltips!",
4171
4515
  },
4172
- _a[SDSWarningTypes.TooltipInverted] = {
4516
+ _a[SDSWarningTypes.TooltipInvertStyle] = {
4173
4517
  hasWarned: false,
4174
- message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
4518
+ message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
4175
4519
  },
4176
4520
  _a);
4177
4521
  var showWarningIfFirstOccurence = function (warningType) {
@@ -4213,10 +4557,10 @@ var ButtonStyles = function (props) {
4213
4557
  : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
4214
4558
  var contentColor = variant === "outlined"
4215
4559
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
4216
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4560
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4217
4561
  var ornamentColor = variant === "outlined"
4218
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
4219
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4562
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornament
4563
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4220
4564
  var backgroundColor = variant === "outlined"
4221
4565
  ? "transparent"
4222
4566
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
@@ -4224,11 +4568,14 @@ var ButtonStyles = function (props) {
4224
4568
  var disabledBorder = variant === "outlined"
4225
4569
  ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
4226
4570
  : "none";
4227
- return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4571
+ var boxshadow = variant === "outlined"
4572
+ ? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
4573
+ : "none";
4574
+ return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4228
4575
  };
4229
4576
  var Rounded = function (props) {
4230
4577
  var corners = getCorners(props);
4231
- return 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);
4578
+ return 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);
4232
4579
  };
4233
4580
  var DestructiveButton = function (props) {
4234
4581
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
@@ -4237,14 +4584,17 @@ var DestructiveButton = function (props) {
4237
4584
  var semanticColors = getSemanticColors(props);
4238
4585
  var contentColor = variant === "outlined"
4239
4586
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
4240
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4587
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4241
4588
  var ornamentColor = variant === "outlined"
4242
4589
  ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
4243
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4590
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4244
4591
  var backgroundColor = variant === "outlined"
4245
4592
  ? "transparent"
4246
4593
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4247
- return 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);
4594
+ var boxshadow = variant === "outlined"
4595
+ ? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
4596
+ : "none";
4597
+ return 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);
4248
4598
  };
4249
4599
  var StyledButton$3 = styled(Button$1, {
4250
4600
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4254,22 +4604,22 @@ var StyledButton$3 = styled(Button$1, {
4254
4604
  });
4255
4605
  // Minimal Button Styles
4256
4606
  var Minimal = function (props) {
4257
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4607
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4258
4608
  var isAllCaps = props.isAllCaps;
4259
4609
  var spaces = getSpaces(props);
4260
4610
  var iconSizes = getIconSizes(props);
4261
4611
  var semanticColors = getSemanticColors(props);
4262
- return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4612
+ return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4263
4613
  };
4264
4614
  var PrimaryMinimalButton = function (props) {
4265
- var _a;
4615
+ var _a, _b;
4266
4616
  var semanticColors = getSemanticColors(props);
4267
- return 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);
4617
+ return 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);
4268
4618
  };
4269
4619
  var SecondaryMinimalButton = function (props) {
4270
- var _a;
4620
+ var _a, _b;
4271
4621
  var semanticColors = getSemanticColors(props);
4272
- return 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);
4622
+ return 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);
4273
4623
  };
4274
4624
  var StyledMinimalButton = styled(Button$1, {
4275
4625
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4286,27 +4636,27 @@ var StyledButtonLegacy = styled(Button$1, {
4286
4636
  var spaces = getSpaces(props);
4287
4637
  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 ");
4288
4638
  });
4289
- 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;
4639
+ 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;
4290
4640
 
4291
4641
  var isDisabled$1 = function (props) {
4292
4642
  var _a, _b;
4293
4643
  var semanticColors = getSemanticColors(props);
4294
- return 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);
4644
+ return 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);
4295
4645
  };
4296
4646
  var primary$2 = function (props) {
4297
4647
  var _a, _b, _c, _d, _e, _f, _g, _h;
4298
4648
  var semanticColors = getSemanticColors(props);
4299
- return 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);
4649
+ return 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);
4300
4650
  };
4301
4651
  var secondary$2 = function (props) {
4302
4652
  var _a, _b, _c, _d, _e, _f, _g, _h;
4303
4653
  var semanticColors = getSemanticColors(props);
4304
- return 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);
4654
+ return 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);
4305
4655
  };
4306
4656
  var tertiary = function (props) {
4307
4657
  var _a, _b, _c, _d, _e, _f;
4308
4658
  var semanticColors = getSemanticColors(props);
4309
- return 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);
4659
+ return 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);
4310
4660
  };
4311
4661
  var small$1 = function (props) {
4312
4662
  var sdsType = props.sdsType;
@@ -4346,7 +4696,7 @@ var StyledButtonIcon = styled(IconButton, {
4346
4696
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
4347
4697
  return 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));
4348
4698
  });
4349
- 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;
4699
+ 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;
4350
4700
 
4351
4701
  var ButtonIconSizeToSdsIconSize = {
4352
4702
  large: "xl",
@@ -4379,7 +4729,7 @@ var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
4379
4729
  return icon;
4380
4730
  }
4381
4731
  else {
4382
- return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4732
+ return (jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4383
4733
  }
4384
4734
  }
4385
4735
  };
@@ -4452,12 +4802,13 @@ var rounded$3 = function (props) {
4452
4802
  var applyIntentColor$2 = function (props, intent) {
4453
4803
  var _a, _b, _c, _d;
4454
4804
  var semanticColors = getSemanticColors(props);
4455
- return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
4805
+ var borders = getBorders(props);
4806
+ return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
4456
4807
  };
4457
4808
  var disabledStyled$2 = function (props) {
4458
- var _a, _b, _c, _d;
4809
+ var _a, _b, _c, _d, _e;
4459
4810
  var semanticColors = getSemanticColors(props);
4460
- return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, 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);
4811
+ return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, 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);
4461
4812
  };
4462
4813
  var StyledLabel$2 = styled("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4463
4814
  var spaces = getSpaces(props);
@@ -4468,15 +4819,15 @@ var StyledSearchBase = styled(TextField, {
4468
4819
  return !sdsPropNames$2.includes(prop.toString());
4469
4820
  },
4470
4821
  })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4471
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4822
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4472
4823
  var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4473
4824
  var spaces = getSpaces(props);
4474
4825
  var iconSizes = getIconSizes(props);
4475
4826
  var semanticColors = getSemanticColors(props);
4476
- return 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, 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, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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, 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, outlinedInputClasses.root, buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, 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));
4827
+ return 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, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, outlinedInputClasses.root, buttonBaseClasses.root, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, 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));
4477
4828
  });
4478
4829
  var StyledInputAdornment = styled(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"])));
4479
- var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4830
+ var templateObject_1$Q, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4480
4831
 
4481
4832
  var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4482
4833
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4484,9 +4835,9 @@ var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$P || (templateObject_
4484
4835
  var fontWeights = getFontWeights(props);
4485
4836
  var spaces = getSpaces(props);
4486
4837
  var semanticColors = getSemanticColors(props);
4487
- 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(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(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(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 ");
4838
+ 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(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(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(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 ");
4488
4839
  });
4489
- var ContentWrapper = styled("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"])));
4840
+ var ContentWrapper = styled("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"])));
4490
4841
  var disabledStyles = function (props) {
4491
4842
  var _a;
4492
4843
  var disabled = props.disabled;
@@ -4506,7 +4857,7 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$
4506
4857
  var spaces = getSpaces(props);
4507
4858
  var iconSizes = getIconSizes(props);
4508
4859
  var semanticColors = getSemanticColors(props);
4509
- 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 ");
4860
+ 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 ");
4510
4861
  });
4511
4862
  var ColumnWrapper = styled("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4512
4863
  var _a;
@@ -4527,8 +4878,8 @@ var StyledCheck = styled(Check, {
4527
4878
  var iconSizes = getIconSizes(props);
4528
4879
  var semanticColors = getSemanticColors(props);
4529
4880
  var selectedColor = disabled
4530
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4531
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4881
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4882
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4532
4883
  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 ");
4533
4884
  });
4534
4885
  var StyledMinus = styled(Remove, {
@@ -4539,11 +4890,11 @@ var StyledMinus = styled(Remove, {
4539
4890
  var semanticColors = getSemanticColors(props);
4540
4891
  var iconSizes = getIconSizes(props);
4541
4892
  var selectedColor = disabled
4542
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4543
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4893
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4894
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4544
4895
  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 ");
4545
4896
  });
4546
- 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;
4897
+ 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;
4547
4898
 
4548
4899
  /**
4549
4900
  * @see https://mui.com/material-ui/react-menu/
@@ -4577,7 +4928,7 @@ var MenuItem = forwardRef(function MenuItem(props, ref) {
4577
4928
  return (jsx(StyledMenuItemIcon, { disabled: disabled, children: icon }));
4578
4929
  }
4579
4930
  else {
4580
- return (jsx(StyledMenuItemIcon, { disabled: disabled, children: jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsType: "static", sdsIcon: icon, sdsSize: "s" })) }));
4931
+ return (jsx(StyledMenuItemIcon, { disabled: disabled, children: jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsIcon: icon, sdsSize: "s" })) }));
4581
4932
  }
4582
4933
  }
4583
4934
  };
@@ -4695,12 +5046,8 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
4695
5046
  return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4696
5047
  // passed to mui Input
4697
5048
  InputProps: {
4698
- endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4699
- sdsType: "iconButton",
4700
- }, icon: "XMarkCircle" }) })) : null,
4701
- startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4702
- sdsType: "interactive",
4703
- }, icon: "Search" }) })),
5049
+ endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
5050
+ startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
4704
5051
  }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4705
5052
  /**
4706
5053
  * (masoudmanson): This prevents the browser's default auto completion
@@ -4725,11 +5072,11 @@ var StyledAutocompleteBase = styled(Autocomplete$1, {
4725
5072
  var spaces = getSpaces(props);
4726
5073
  var borders = getBorders(props);
4727
5074
  var semanticColors = getSemanticColors(props);
4728
- 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(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(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(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(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(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(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(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(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(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(autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5075
+ 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(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(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(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(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(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(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(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(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(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(autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4729
5076
  });
4730
5077
  var InputBaseWrapper$1 = styled("div", {
4731
5078
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
4732
- })(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5079
+ })(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4733
5080
  var search = props.search;
4734
5081
  if (!search) {
4735
5082
  // (thuang): We cannot use `display: none;` here, since
@@ -4751,7 +5098,7 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$i || (templateObject_4$i = __
4751
5098
  var shadows = getShadows(props);
4752
5099
  var borders = getBorders(props);
4753
5100
  var semanticColors = getSemanticColors(props);
4754
- 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 ");
5101
+ 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 ");
4755
5102
  });
4756
5103
  var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
4757
5104
  var _a;
@@ -4759,13 +5106,13 @@ var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_
4759
5106
  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 ");
4760
5107
  });
4761
5108
  var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
4762
- var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
5109
+ var templateObject_1$O, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
4763
5110
 
4764
5111
  var AutocompleteBase = function (props) {
4765
- 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;
5112
+ 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;
4766
5113
  var theme = useTheme();
4767
5114
  var ref = useRef(null);
4768
- var _r = useState(""), inputValue = _r[0], setInputValue = _r[1];
5115
+ var _s = useState(""), inputValue = _s[0], setInputValue = _s[1];
4769
5116
  useDetectUserTabbing(ref);
4770
5117
  return (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,
4771
5118
  /**
@@ -4830,9 +5177,7 @@ var AutocompleteBase = function (props) {
4830
5177
  , {
4831
5178
  // (masoudmanson): This is to ensure that the clear button won't be focusable
4832
5179
  // when the search prop is set to false.
4833
- 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: {
4834
- sdsType: "iconButton",
4835
- }, icon: "XMarkCircle" })) })),
5180
+ 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" })) })),
4836
5181
  /**
4837
5182
  * (thuang): Works with css caret-color: "transparent" to hide
4838
5183
  * mobile keyboard
@@ -4840,9 +5185,7 @@ var AutocompleteBase = function (props) {
4840
5185
  inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "Search Button",
4841
5186
  // (masoudmanson): This is to ensure that the search button won't be focusable
4842
5187
  // when the search prop is set to false.
4843
- tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
4844
- sdsType: "interactive",
4845
- }, icon: "Search" }) })) }) }, InputBaseProps)) }));
5188
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
4846
5189
  }
4847
5190
  function defaultOnBlur(event) {
4848
5191
  var _a;
@@ -4920,7 +5263,7 @@ var AutocompleteBase = function (props) {
4920
5263
  else {
4921
5264
  MenuItemContent = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
4922
5265
  }
4923
- return (jsx(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { children: MenuItemContent })));
5266
+ return (createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { key: option.name }), MenuItemContent));
4924
5267
  }
4925
5268
  };
4926
5269
 
@@ -4931,7 +5274,7 @@ var StyledColumn = styled("div")(templateObject_1$N || (templateObject_1$N = __m
4931
5274
  var borders = getBorders(props);
4932
5275
  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 ");
4933
5276
  });
4934
- var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
5277
+ var StyledColumnTitle = styled("p")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
4935
5278
  var _a;
4936
5279
  var spaces = getSpaces(props);
4937
5280
  var semanticColors = getSemanticColors(props);
@@ -4942,9 +5285,9 @@ var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k
4942
5285
  var spaces = getSpaces(props);
4943
5286
  var iconSizes = getIconSizes(props);
4944
5287
  var semanticColors = getSemanticColors(props);
4945
- 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 ");
5288
+ 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 ");
4946
5289
  });
4947
- var templateObject_1$N, templateObject_2$s, templateObject_3$k;
5290
+ var templateObject_1$N, templateObject_2$t, templateObject_3$k;
4948
5291
 
4949
5292
  var AutocompleteGroup = function (props) {
4950
5293
  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"]);
@@ -5006,15 +5349,15 @@ var StyledPopper$2 = styled(Popper, {
5006
5349
  var spaces = getSpaces(props);
5007
5350
  var borders = getBorders(props);
5008
5351
  var semanticColors = getSemanticColors(props);
5009
- 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(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5352
+ 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(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5010
5353
  });
5011
5354
  var StyledPaper$2 = styled(Paper, {
5012
5355
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
5013
- })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5356
+ })(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5014
5357
  var _a;
5015
5358
  var shadows = getShadows(props);
5016
5359
  var semanticColors = getSemanticColors(props);
5017
- 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 ");
5360
+ 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 ");
5018
5361
  });
5019
5362
  var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5020
5363
  var StyledAutocompleteInput = styled(InputSearch, {
@@ -5026,7 +5369,7 @@ var StyledAutocompleteInput = styled(InputSearch, {
5026
5369
  var search = _a.search;
5027
5370
  return (search ? "auto" : "transparent");
5028
5371
  });
5029
- var templateObject_1$M, templateObject_2$r, templateObject_3$j, templateObject_4$h;
5372
+ var templateObject_1$M, templateObject_2$s, templateObject_3$j, templateObject_4$h;
5030
5373
 
5031
5374
  var AutocompleteMultiColumn = function (props) {
5032
5375
  var _a;
@@ -5064,16 +5407,12 @@ var AutocompleteMultiColumn = function (props) {
5064
5407
  });
5065
5408
  onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
5066
5409
  };
5067
- return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [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: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5068
- sdsType: "iconButton",
5069
- }, icon: "XMarkCircle", onClick: clearInput })) })),
5410
+ return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [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: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle", onClick: clearInput })) })),
5070
5411
  /**
5071
5412
  * (thuang): Works with css caret-color: "transparent" to hide
5072
5413
  * mobile keyboard
5073
5414
  */
5074
- inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5075
- sdsType: "interactive",
5076
- }, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
5415
+ inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
5077
5416
  {
5078
5417
  name: "offset",
5079
5418
  options: {
@@ -5218,13 +5557,13 @@ var IconWrapper$1 = styled("div", {
5218
5557
  shouldForwardProp: function (prop) {
5219
5558
  return !doNotForwardPropsIconWrapper.includes(prop);
5220
5559
  },
5221
- })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5560
+ })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5222
5561
  var _a, _b;
5223
5562
  var bannerType = props.bannerType;
5224
5563
  var iconSizes = getIconSizes(props);
5225
5564
  var spaces = getSpaces(props);
5226
5565
  var semanticColors = getSemanticColors(props);
5227
- 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 ");
5566
+ 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 ");
5228
5567
  });
5229
5568
  var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
5230
5569
  var StyledButton$2 = styled(Button, {
@@ -5235,20 +5574,20 @@ var StyledButton$2 = styled(Button, {
5235
5574
  var _a, _b;
5236
5575
  var bannerType = props.bannerType;
5237
5576
  var semanticColors = getSemanticColors(props);
5238
- if (bannerType !== "primary")
5239
- return "";
5240
- 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 ");
5577
+ if (bannerType === "primary")
5578
+ 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 ");
5579
+ 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 ");
5241
5580
  });
5242
5581
  styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
5243
5582
  var primary$1 = function (props) {
5244
5583
  var _a, _b;
5245
5584
  var semanticColors = getSemanticColors(props);
5246
- 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 ");
5585
+ 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 ");
5247
5586
  };
5248
5587
  var secondary$1 = function (props) {
5249
5588
  var _a, _b;
5250
5589
  var semanticColors = getSemanticColors(props);
5251
- 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 ");
5590
+ 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 ");
5252
5591
  };
5253
5592
  var doNotForwardProps$n = ["sdsType", "textChild"];
5254
5593
  var StyledBanner = styled("div", {
@@ -5258,7 +5597,7 @@ var StyledBanner = styled("div", {
5258
5597
  var spaces = getSpaces(props);
5259
5598
  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 ");
5260
5599
  });
5261
- var templateObject_1$L, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5600
+ var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5262
5601
 
5263
5602
  var Banner = forwardRef(function Banner(props, ref) {
5264
5603
  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"]);
@@ -5279,11 +5618,11 @@ var Banner = forwardRef(function Banner(props, ref) {
5279
5618
  return icon;
5280
5619
  }
5281
5620
  else {
5282
- return (jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5621
+ return jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l" }, sdsIconProps));
5283
5622
  }
5284
5623
  }
5285
5624
  else {
5286
- return (jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5625
+ return jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l" }, sdsIconProps));
5287
5626
  }
5288
5627
  };
5289
5628
  return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { bannerType: sdsType, children: iconItem() }), children] }), dismissible && (jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
@@ -5306,7 +5645,7 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
5306
5645
  return icon;
5307
5646
  }
5308
5647
  else {
5309
- return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5648
+ return (jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5310
5649
  }
5311
5650
  }
5312
5651
  };
@@ -5320,7 +5659,7 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
5320
5659
  }
5321
5660
  }
5322
5661
  else {
5323
- return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5662
+ return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5324
5663
  }
5325
5664
  });
5326
5665
 
@@ -5338,7 +5677,7 @@ var StyledButtonToggle = styled(ButtonIcon, {
5338
5677
  var _a;
5339
5678
  var sdsStage = props.sdsStage;
5340
5679
  var semanticColors = getSemanticColors(props);
5341
- 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 ");
5680
+ 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 ");
5342
5681
  });
5343
5682
  var templateObject_1$K;
5344
5683
 
@@ -5371,7 +5710,7 @@ var StyledCallout = styled(Alert$2, {
5371
5710
  var typography = getTypography(props);
5372
5711
  var semanticColors = getSemanticColors(props);
5373
5712
  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";
5374
- 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";
5713
+ 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";
5375
5714
  // when a title is present Mui's default styling has vertical margin,
5376
5715
  // but for an expandable callout that is collapsed, we do not want
5377
5716
  // any bottom margin
@@ -5380,7 +5719,7 @@ var StyledCallout = styled(Alert$2, {
5380
5719
  // Title. The padding-top of the Callout Message is calculated based on the difference
5381
5720
  // between the height of the Icon and the line-height of the Callout Title.
5382
5721
  var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
5383
- 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"))) /
5722
+ 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"))) /
5384
5723
  2);
5385
5724
  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(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(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(alertTitleClasses.root, " {\n margin-top: 0;\n ").concat(titleBottomMargin, "\n }\n }\n\n .").concat(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 ");
5386
5725
  });
@@ -5416,17 +5755,17 @@ var Callout = function (_a) {
5416
5755
  return icon;
5417
5756
  }
5418
5757
  else {
5419
- return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
5758
+ return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
5420
5759
  }
5421
5760
  }
5422
5761
  else {
5423
5762
  switch (intent) {
5424
5763
  case "positive":
5425
- return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
5764
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
5426
5765
  case "info":
5427
- return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
5766
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
5428
5767
  default:
5429
- return (jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
5768
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
5430
5769
  }
5431
5770
  }
5432
5771
  };
@@ -5451,7 +5790,7 @@ var Callout = function (_a) {
5451
5790
  return (jsx(Fragment, { children: jsx(Grow, { in: !hide, children: jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
5452
5791
  };
5453
5792
 
5454
- var StyledCalloutTitle = styled(AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
5793
+ var StyledCalloutTitle = styled(AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodySemiboldXs, function (props) {
5455
5794
  var spaces = getSpaces(props);
5456
5795
  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 ");
5457
5796
  });
@@ -5468,13 +5807,13 @@ var dark = function (props) {
5468
5807
  var _a, _b;
5469
5808
  var spaces = getSpaces(props);
5470
5809
  var semanticColors = getSemanticColors(props);
5471
- return css$1(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);
5810
+ return css$1(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);
5472
5811
  };
5473
5812
  var light = function (props) {
5474
5813
  var _a, _b;
5475
5814
  var spaces = getSpaces(props);
5476
5815
  var semanticColors = getSemanticColors(props);
5477
- return css$1(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);
5816
+ return css$1(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);
5478
5817
  };
5479
5818
  var wide = function () {
5480
5819
  return css$1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
@@ -5484,29 +5823,32 @@ var tableStyles = function (props) {
5484
5823
  return css$1(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
5485
5824
  };
5486
5825
  var Subtitle$1 = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5487
- var _a;
5826
+ var _a, _b;
5827
+ var hasInvertedStyle = props.hasInvertedStyle;
5488
5828
  var semanticColors = getSemanticColors(props);
5489
- return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
5829
+ 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 ");
5490
5830
  });
5491
5831
  var tooltipCss = function (props) {
5492
- var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5832
+ var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5493
5833
  var shadows = getShadows(props);
5494
- return css$1(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));
5834
+ return css$1(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
5835
+ ? dark(props)
5836
+ : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
5495
5837
  };
5496
5838
  var arrowCss = function (props) {
5497
5839
  var _a, _b;
5498
- var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5840
+ var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5499
5841
  var semanticColors = getSemanticColors(props);
5500
- return css$1(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"
5501
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
5502
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
5842
+ return css$1(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"
5843
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
5844
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
5503
5845
  };
5504
5846
  /*
5505
5847
  * (masoudmanson): !important is needed to override arrow's
5506
5848
  * default placement which is calculated by javascript
5507
5849
  */
5508
5850
  var StyledPopper$1 = styled(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"])));
5509
- 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;
5851
+ 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;
5510
5852
 
5511
5853
  /**
5512
5854
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5516,24 +5858,20 @@ var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4
5516
5858
  * https://mui.com/components/tooltips/#disabled-elements
5517
5859
  */
5518
5860
  var Tooltip = forwardRef(function Tooltip(props, ref) {
5519
- 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"]);
5861
+ 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"]);
5520
5862
  var children = rest.children;
5521
- if (inverted) {
5522
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
5863
+ if (inverted || sdsStyle) {
5864
+ showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
5523
5865
  }
5524
- if (width === "wide" && sdsStyle === "dark") {
5866
+ if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
5525
5867
  showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
5526
5868
  }
5527
- if (subtitle && sdsStyle === "light") {
5528
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
5529
- }
5530
5869
  var theme = useTheme();
5531
5870
  var extraProps = {
5532
5871
  /* stylelint-disable property-no-unknown -- false positive */
5533
5872
  arrowOffset: arrowOffset,
5534
5873
  classes: classes,
5535
- inverted: inverted,
5536
- sdsStyle: sdsStyle,
5874
+ hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
5537
5875
  theme: theme,
5538
5876
  width: width,
5539
5877
  /* stylelint-enable property-no-unknown -- false positive */
@@ -5552,8 +5890,8 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
5552
5890
  // a tooltip. this matches with the native MUI behavior.
5553
5891
  if (!title && !subtitle)
5554
5892
  return jsx(Fragment, { children: children });
5555
- var content = (jsxs(Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsx(Subtitle$1, { children: subtitle })] }));
5556
- var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
5893
+ var content = (jsxs(Fragment, { children: [title, subtitle && (jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
5894
+ var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
5557
5895
  return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
5558
5896
  // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
5559
5897
  // focusable and allows keyboard navigation.
@@ -5563,6 +5901,21 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
5563
5901
  // the arrow is always rendered.
5564
5902
  arrow: true }, rest)));
5565
5903
  });
5904
+ /**
5905
+ * (masoudmanson): Temporary function to handle the inversion of the tooltip
5906
+ * based on the sdsStyle, invert and hasInvertedStyle props.
5907
+ * Once the sdsStyle and invert props are completely removed,
5908
+ * this function will be removed as well.
5909
+ */
5910
+ function invertStyleValue(inverted, sdsStyle, hasInvertedStyle) {
5911
+ return hasInvertedStyle !== undefined
5912
+ ? hasInvertedStyle
5913
+ : sdsStyle === "dark"
5914
+ ? true
5915
+ : sdsStyle === "light"
5916
+ ? false
5917
+ : inverted;
5918
+ }
5566
5919
  function mergeClass$1(_a) {
5567
5920
  var props = _a.props, className = _a.className, key = _a.key;
5568
5921
  var classes = props.classes;
@@ -5612,7 +5965,7 @@ var ShouldWrap = function (lineCount) {
5612
5965
  var ShouldTruncate = function () {
5613
5966
  return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
5614
5967
  };
5615
- var StyledCellContent = styled("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5968
+ var StyledCellContent = styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5616
5969
  var StyledCellContentWrapper = styled("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
5617
5970
  var StyledCellIconWrapper = styled("div", {
5618
5971
  shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
@@ -5663,7 +6016,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
5663
6016
  var spaces = getSpaces(props);
5664
6017
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5665
6018
  });
5666
- 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;
6019
+ 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;
5667
6020
 
5668
6021
  var CellBasicContent = function (props) {
5669
6022
  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;
@@ -5708,20 +6061,20 @@ var doNotForwardProps$i = [
5708
6061
  var StyledSortingIcon = styled(Icon, {
5709
6062
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
5710
6063
  })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5711
- var _a, _b;
5712
- var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
6064
+ var _a;
6065
+ var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
5713
6066
  var spaces = getSpaces(props);
5714
6067
  var semanticColors = getSemanticColors(props);
5715
- 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 ");
6068
+ 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 ");
5716
6069
  });
5717
6070
  var StyledTableHeader$1 = styled("th", {
5718
6071
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
5719
- })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6072
+ })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
5720
6073
  var _a, _b, _c, _d, _e, _f, _g, _h;
5721
6074
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
5722
6075
  var spaces = getSpaces(props);
5723
6076
  var semanticColors = getSemanticColors(props);
5724
- 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 ");
6077
+ 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 ");
5725
6078
  });
5726
6079
  var StyledCellHeaderContainer = styled("div", {
5727
6080
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -5729,14 +6082,14 @@ var StyledCellHeaderContainer = styled("div", {
5729
6082
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
5730
6083
  return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
5731
6084
  });
5732
- var templateObject_1$E, templateObject_2$n, templateObject_3$f;
6085
+ var templateObject_1$E, templateObject_2$o, templateObject_3$f;
5733
6086
 
5734
6087
  var CellHeaderContent = function (props) {
5735
6088
  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;
5736
6089
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
5737
6090
  var sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
5738
6091
  ? "Change sort direction from ascending to descending"
5739
- : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6092
+ : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
5740
6093
  return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
5741
6094
  };
5742
6095
  var CellHeader = forwardRef(function (props, ref) {
@@ -5754,7 +6107,7 @@ var small = function (props) {
5754
6107
  var medium = function (props) {
5755
6108
  var spaces = getSpaces(props);
5756
6109
  var colors = getColors(props);
5757
- return 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);
6110
+ return 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);
5758
6111
  };
5759
6112
  var rounded$2 = function (props) {
5760
6113
  var corners = getCorners(props);
@@ -5791,27 +6144,27 @@ function createStatusCss(props, status) {
5791
6144
  var statusToColors = {
5792
6145
  beta: {
5793
6146
  dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
5794
- light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
6147
+ light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfaceSecondary,
5795
6148
  },
5796
6149
  error: {
5797
6150
  dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
5798
- light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
6151
+ light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfaceSecondary,
5799
6152
  },
5800
6153
  info: {
5801
6154
  dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
5802
- light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
6155
+ light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfaceSecondary,
5803
6156
  },
5804
6157
  pending: {
5805
6158
  dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
5806
- light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
6159
+ light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfaceSecondary,
5807
6160
  },
5808
6161
  success: {
5809
6162
  dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
5810
- light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
6163
+ light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfaceSecondary,
5811
6164
  },
5812
6165
  warning: {
5813
6166
  dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
5814
- light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
6167
+ light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfaceSecondary,
5815
6168
  },
5816
6169
  };
5817
6170
  var statusColors = statusToColors[status];
@@ -5832,7 +6185,7 @@ var StyledChip = styled(Chip$1, {
5832
6185
  var size = props.size, status = props.status, isRounded = props.isRounded;
5833
6186
  return 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));
5834
6187
  });
5835
- var templateObject_1$D, templateObject_2$m, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
6188
+ var templateObject_1$D, templateObject_2$n, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
5836
6189
 
5837
6190
  /**
5838
6191
  * @see https://mui.com/material-ui/react-chip/
@@ -5871,7 +6224,7 @@ var StyledHeaderTitle = styled("div", {
5871
6224
  var semanticColors = getSemanticColors(props);
5872
6225
  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 ");
5873
6226
  });
5874
- var StyledDropdownMenuAutocompleteWrapper = styled("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"])), autocompleteClasses.popper, autocompleteClasses.paper);
6227
+ var StyledDropdownMenuAutocompleteWrapper = styled("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"])), autocompleteClasses.popper, autocompleteClasses.paper);
5875
6228
  var StyledPopper = styled(Popper, {
5876
6229
  shouldForwardProp: function (prop) {
5877
6230
  return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
@@ -5882,7 +6235,7 @@ var StyledPopper = styled(Popper, {
5882
6235
  var corners = getCorners(props);
5883
6236
  var shadows = getShadows(props);
5884
6237
  var semanticColors = getSemanticColors(props);
5885
- 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 ");
6238
+ 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 ");
5886
6239
  });
5887
6240
  var StyledPaper$1 = styled(Paper, {
5888
6241
  shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
@@ -5892,14 +6245,14 @@ var StyledPaper$1 = styled(Paper, {
5892
6245
  var borders = getBorders(props);
5893
6246
  var shadows = getShadows(props);
5894
6247
  var semanticColors = getSemanticColors(props);
5895
- 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 ");
6248
+ 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 ");
5896
6249
  });
5897
6250
  var StyledDropdownMenuHeader = styled("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5898
6251
  var search = props.search;
5899
6252
  var spaces = getSpaces(props);
5900
6253
  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 ");
5901
6254
  });
5902
- var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
6255
+ var templateObject_1$C, templateObject_2$m, templateObject_3$d, templateObject_4$c, templateObject_5$8;
5903
6256
 
5904
6257
  // (masoudmanson): Represents the minimum width defined by design specifications
5905
6258
  // for the dropdownMenu's popper component
@@ -5947,10 +6300,16 @@ var doNotForwardProps$f = [
5947
6300
  "value",
5948
6301
  "sdsStyle",
5949
6302
  ];
6303
+ var intentToColor$2 = {
6304
+ default: "accent",
6305
+ negative: "negative",
6306
+ notice: "notice",
6307
+ positive: "positive",
6308
+ };
5950
6309
  var labelFontBodyS = fontBody("s", "regular");
5951
6310
  var labelFontBodyXs = fontBody("xs", "regular");
5952
6311
  var inputDropdownStyles = function (props) {
5953
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
6312
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5954
6313
  var spaces = getSpaces(props);
5955
6314
  var borders = getBorders(props);
5956
6315
  var semanticColors = getSemanticColors(props);
@@ -5959,13 +6318,13 @@ var inputDropdownStyles = function (props) {
5959
6318
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
5960
6319
  */
5961
6320
  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");
5962
- return 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);
6321
+ return 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);
5963
6322
  };
5964
6323
  var minimal$1 = function (props) {
5965
6324
  var _a, _b, _c, _d, _e, _f, _g;
5966
6325
  var spaces = getSpaces(props);
5967
6326
  var semanticColors = getSemanticColors(props);
5968
- return 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);
6327
+ return 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);
5969
6328
  };
5970
6329
  var square$1 = function (props) {
5971
6330
  var corners = getCorners(props);
@@ -5976,23 +6335,28 @@ var rounded$1 = function (props) {
5976
6335
  return 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);
5977
6336
  };
5978
6337
  var userInput = function (props) {
5979
- var _a, _b, _c, _d, _e, _f;
6338
+ var _a, _b, _c, _d;
5980
6339
  var sdsStyle = props.sdsStyle;
5981
6340
  var semanticColors = getSemanticColors(props);
5982
6341
  return 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"
5983
- ? "\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 ")
6342
+ ? "\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 ")
5984
6343
  : "");
5985
6344
  };
5986
6345
  var isOpen = function (props) {
5987
- var _a, _b, _c, _d, _e, _f, _g, _h;
5988
- var sdsStyle = props.sdsStyle;
6346
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6347
+ var sdsStyle = props.sdsStyle, _k = props.intent, intent = _k === void 0 ? "default" : _k;
5989
6348
  var borders = getBorders(props);
5990
6349
  var semanticColors = getSemanticColors(props);
5991
- return 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"
6350
+ var inputColor = intentToColor$2[intent];
6351
+ return 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"
5992
6352
  ? "\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 ")
5993
- : "", (_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"
5994
- ? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
5995
- : "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);
6353
+ : "", inputColor === "accent"
6354
+ ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
6355
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
6356
+ ? borders === null || borders === void 0 ? void 0 : borders.none
6357
+ : (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
6358
+ ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
6359
+ : "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);
5996
6360
  };
5997
6361
  var applyIntentColor$1 = function (props, intent) {
5998
6362
  var _a, _b, _c;
@@ -6002,7 +6366,7 @@ var applyIntentColor$1 = function (props, intent) {
6002
6366
  var isDisabled = function (props) {
6003
6367
  var _a, _b, _c, _d;
6004
6368
  var semanticColors = getSemanticColors(props);
6005
- return 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);
6369
+ return 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);
6006
6370
  };
6007
6371
  /**
6008
6372
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -6051,7 +6415,7 @@ var StyledCounter = styled("span", {
6051
6415
  var corners = getCorners(props);
6052
6416
  var spaces = getSpaces(props);
6053
6417
  var semanticColors = getSemanticColors(props);
6054
- 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 ");
6418
+ 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 ");
6055
6419
  });
6056
6420
  var MinimalDetails = styled("div", {
6057
6421
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
@@ -6079,7 +6443,7 @@ function labelStyle(props) {
6079
6443
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6080
6444
  return 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);
6081
6445
  }
6082
- 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;
6446
+ 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;
6083
6447
 
6084
6448
  /**
6085
6449
  * @see https://mui.com/material-ui/react-button/
@@ -6100,7 +6464,7 @@ var InputDropdown = function (props) {
6100
6464
  sdsType: sdsType,
6101
6465
  shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
6102
6466
  value: value,
6103
- }) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6467
+ }) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6104
6468
  };
6105
6469
  function renderLabelText(props) {
6106
6470
  var sdsType = props.sdsType;
@@ -6146,14 +6510,14 @@ var tagSizeS = function (props) {
6146
6510
  var spaces = getSpaces(props);
6147
6511
  var iconSizes = getIconSizes(props);
6148
6512
  var semanticColors = getSemanticColors(props);
6149
- return 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);
6513
+ return 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);
6150
6514
  };
6151
6515
  var tagSizeL = function (props) {
6152
6516
  var _a;
6153
6517
  var spaces = getSpaces(props);
6154
6518
  var iconSizes = getIconSizes(props);
6155
6519
  var semanticColors = getSemanticColors(props);
6156
- return 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);
6520
+ return 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);
6157
6521
  };
6158
6522
  var rounded = function (props) {
6159
6523
  var corners = getCorners(props);
@@ -6192,12 +6556,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6192
6556
  backgroundHover: colors.length >= 2
6193
6557
  ? darken(colors[1], 0.15)
6194
6558
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
6195
- iconColor: colors.length > 2
6196
- ? colors[2]
6197
- : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
6198
- label: colors.length
6199
- ? colors[0]
6200
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
6559
+ iconColor: colors.length > 2 ? colors[2] : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill,
6560
+ label: colors.length ? colors[0] : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill,
6201
6561
  };
6202
6562
  }
6203
6563
  else {
@@ -6205,8 +6565,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6205
6565
  background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
6206
6566
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6207
6567
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6208
- iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
6209
- label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
6568
+ iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentOnFill,
6569
+ label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textOnFill,
6210
6570
  };
6211
6571
  }
6212
6572
  }
@@ -6227,7 +6587,7 @@ function generateSecondaryTagColors(intent, colors, semanticColors) {
6227
6587
  }
6228
6588
  else {
6229
6589
  return {
6230
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
6590
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillSecondary,
6231
6591
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6232
6592
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6233
6593
  iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
@@ -6245,7 +6605,7 @@ function createTypeCss(props, type) {
6245
6605
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
6246
6606
  };
6247
6607
  var typeColors = typeToColors[type];
6248
- return 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);
6608
+ return 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);
6249
6609
  }
6250
6610
  var typeToCss = {
6251
6611
  primary: primary,
@@ -6266,7 +6626,7 @@ var StyledTag$1 = styled(Chip$1, {
6266
6626
  var type = sdsType || "primary";
6267
6627
  return 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;");
6268
6628
  });
6269
- var templateObject_1$A, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6629
+ var templateObject_1$A, templateObject_2$k, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6270
6630
 
6271
6631
  /**
6272
6632
  * @see https://mui.com/material-ui/react-chip/
@@ -6280,14 +6640,14 @@ var Tag = function (props) {
6280
6640
  return jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
6281
6641
  };
6282
6642
 
6283
- var StyledTag = styled(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6284
- var _a, _b, _c, _d, _e, _f, _g;
6643
+ var StyledTag = styled(Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6644
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6285
6645
  var spaces = getSpaces(props);
6286
6646
  var iconSizes = getIconSizes(props);
6287
6647
  var semanticColors = getSemanticColors(props);
6288
- return 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);
6648
+ return 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);
6289
6649
  });
6290
- var templateObject_1$z, templateObject_2$i;
6650
+ var templateObject_1$z, templateObject_2$j;
6291
6651
 
6292
6652
  /**
6293
6653
  * @see https://mui.com/material-ui/react-chip/
@@ -6311,11 +6671,11 @@ var Chips = function (_a) {
6311
6671
  };
6312
6672
 
6313
6673
  var Wrapper$1 = styled("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
6314
- var StyledChipsWrapper = styled("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6674
+ var StyledChipsWrapper = styled("div")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6315
6675
  var spaces = getSpaces(props);
6316
6676
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
6317
6677
  });
6318
- var templateObject_1$y, templateObject_2$h;
6678
+ var templateObject_1$y, templateObject_2$i;
6319
6679
 
6320
6680
  // eslint-disable-next-line sonarjs/cognitive-complexity
6321
6681
  var ComplexFilter = function (_a) {
@@ -6416,7 +6776,7 @@ var StyledPaper = styled(Paper, {
6416
6776
  var corners = getCorners(props);
6417
6777
  var shadows = getShadows(props);
6418
6778
  var semanticColors = getSemanticColors(props);
6419
- 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 ");
6779
+ 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 ");
6420
6780
  });
6421
6781
  function paperDimensions(props) {
6422
6782
  var sdsSize = props.sdsSize;
@@ -6522,7 +6882,7 @@ var StyledDialogTitle = styled(DialogTitle$1)(templateObject_1$t || (templateObj
6522
6882
  var spaces = getSpaces(props);
6523
6883
  return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
6524
6884
  });
6525
- var Title = styled(Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6885
+ var Title = styled(Typography)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6526
6886
  var _a;
6527
6887
  var semanticColors = getSemanticColors(props);
6528
6888
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
@@ -6538,7 +6898,7 @@ var Overline = styled(Typography)(templateObject_4$9 || (templateObject_4$9 = __
6538
6898
  var spaces = getSpaces(props);
6539
6899
  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 ");
6540
6900
  });
6541
- var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
6901
+ var templateObject_1$t, templateObject_2$h, templateObject_3$a, templateObject_4$9;
6542
6902
 
6543
6903
  /**
6544
6904
  * @see https://mui.com/material-ui/react-dialog/
@@ -6557,11 +6917,11 @@ var StyledButtonsWrapper = styled("div", {
6557
6917
  });
6558
6918
  var StyledButton = styled(Button, {
6559
6919
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
6560
- })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6920
+ })(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6561
6921
  var spaces = getSpaces(props);
6562
6922
  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 ");
6563
6923
  });
6564
- var templateObject_1$s, templateObject_2$f;
6924
+ var templateObject_1$s, templateObject_2$g;
6565
6925
 
6566
6926
  // eslint-disable-next-line sonarjs/cognitive-complexity
6567
6927
  var Dropdown = function (props) {
@@ -6691,7 +7051,7 @@ var Dropdown = function (props) {
6691
7051
  }
6692
7052
  };
6693
7053
 
6694
- var _path$4, _path2$1;
7054
+ var _path$4;
6695
7055
  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); }
6696
7056
  var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
6697
7057
  return /*#__PURE__*/React.createElement("svg", _extends$4({
@@ -6699,15 +7059,11 @@ var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
6699
7059
  width: 16,
6700
7060
  height: 16
6701
7061
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
6702
- 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"
6703
- })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
6704
- fill: "#fff",
6705
- fillRule: "evenodd",
6706
- 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"
7062
+ 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"
6707
7063
  })));
6708
7064
  };
6709
7065
 
6710
- var _path$3, _path2;
7066
+ var _path$3;
6711
7067
  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); }
6712
7068
  var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props) {
6713
7069
  return /*#__PURE__*/React.createElement("svg", _extends$3({
@@ -6715,10 +7071,7 @@ var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props)
6715
7071
  width: 16,
6716
7072
  height: 16
6717
7073
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
6718
- 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"
6719
- })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
6720
- fill: "#fff",
6721
- 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"
7074
+ 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"
6722
7075
  })));
6723
7076
  };
6724
7077
 
@@ -6734,24 +7087,27 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
6734
7087
  })));
6735
7088
  };
6736
7089
 
7090
+ var intentToColor$1 = {
7091
+ default: "base",
7092
+ negative: "negative",
7093
+ notice: "notice",
7094
+ positive: "positive",
7095
+ };
6737
7096
  var StyledCheckbox = styled(Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6738
7097
  var _a, _b, _c, _d, _e, _f;
6739
7098
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6740
7099
  var iconSizes = getIconSizes(props);
6741
7100
  var spaces = getSpaces(props);
6742
7101
  var semanticColors = getSemanticColors(props);
6743
- var intentToColor = {
6744
- default: "base",
6745
- negative: "negative",
6746
- notice: "notice",
6747
- positive: "positive",
6748
- };
6749
- var checkboxColor = intentToColor[intent];
7102
+ var checkboxColor = intentToColor$1[intent];
6750
7103
  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(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(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(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(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 ");
6751
7104
  });
6752
- var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7105
+ var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7106
+ var _a, _b, _c, _d;
7107
+ var disabled = props.disabled;
6753
7108
  var spaces = getSpaces(props);
6754
- 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 ");
7109
+ var semanticColors = getSemanticColors(props);
7110
+ 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(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(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(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 ");
6755
7111
  });
6756
7112
  var StyledLabelContainer$1 = styled("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"])));
6757
7113
  var StyledCheckboxLabel = styled("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
@@ -6764,7 +7120,7 @@ var StyledCheckboxCaption = styled("span")(templateObject_5$5 || (templateObject
6764
7120
  var semanticColors = getSemanticColors(props);
6765
7121
  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 ");
6766
7122
  });
6767
- var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
7123
+ var templateObject_1$r, templateObject_2$f, templateObject_3$9, templateObject_4$8, templateObject_5$5;
6768
7124
 
6769
7125
  /**
6770
7126
  * @see https://mui.com/material-ui/react-checkbox/
@@ -6815,24 +7171,27 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
6815
7171
  })));
6816
7172
  };
6817
7173
 
7174
+ var intentToColor = {
7175
+ default: "base",
7176
+ negative: "negative",
7177
+ notice: "notice",
7178
+ positive: "positive",
7179
+ };
6818
7180
  var StyledRadioButton = styled(Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6819
7181
  var _a, _b, _c, _d, _e, _f;
6820
7182
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6821
7183
  var spaces = getSpaces(props);
6822
7184
  var iconSizes = getIconSizes(props);
6823
7185
  var semanticColors = getSemanticColors(props);
6824
- var intentToColor = {
6825
- default: "base",
6826
- negative: "negative",
6827
- notice: "notice",
6828
- positive: "positive",
6829
- };
6830
7186
  var radioColor = intentToColor[intent];
6831
7187
  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(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(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(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(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 ");
6832
7188
  });
6833
- var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7189
+ var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7190
+ var _a, _b, _c, _d;
7191
+ var disabled = props.disabled;
6834
7192
  var spaces = getSpaces(props);
6835
- 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 ");
7193
+ var semanticColors = getSemanticColors(props);
7194
+ 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(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(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(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 ");
6836
7195
  });
6837
7196
  var StyledLabelContainer = styled("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"])));
6838
7197
  var StyledRadioLabel = styled("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
@@ -6845,7 +7204,7 @@ var StyledRadioCaption = styled("span")(templateObject_5$4 || (templateObject_5$
6845
7204
  var semanticColors = getSemanticColors(props);
6846
7205
  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 ");
6847
7206
  });
6848
- var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
7207
+ var templateObject_1$q, templateObject_2$e, templateObject_3$8, templateObject_4$7, templateObject_5$4;
6849
7208
 
6850
7209
  /**
6851
7210
  * @see https://mui.com/material-ui/react-radio-button/
@@ -6879,7 +7238,7 @@ var inputSlider = function (props) {
6879
7238
  var corners = getCorners(props);
6880
7239
  var shadows = getShadows(props);
6881
7240
  var semanticColors = getSemanticColors(props);
6882
- return "\n position: relative;\n\n .".concat(sliderClasses.rail, ",\n .").concat(sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(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(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(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(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(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(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(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(sliderClasses.mark, ".").concat(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(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(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 ");
7241
+ return "\n position: relative;\n\n .".concat(sliderClasses.rail, ",\n .").concat(sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(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(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(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(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(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(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(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(sliderClasses.mark, ".").concat(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(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(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 ");
6883
7242
  };
6884
7243
  var horizontal = function (props) {
6885
7244
  var marks = props.marks;
@@ -6888,10 +7247,8 @@ var horizontal = function (props) {
6888
7247
  };
6889
7248
  var disabledSlider = function (props) {
6890
7249
  var _a, _b, _c, _d, _e, _f, _g;
6891
- var colors = getColors(props);
6892
7250
  var semanticColors = getSemanticColors(props);
6893
- var mode = getMode(props);
6894
- return "\n .".concat(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(sliderClasses.thumb, ".").concat(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(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(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(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 ");
7251
+ return "\n .".concat(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(sliderClasses.thumb, ".").concat(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(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(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(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 ");
6895
7252
  };
6896
7253
  var StyledSlider = styled(Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6897
7254
  var disabled = props.disabled;
@@ -6912,13 +7269,13 @@ var applyIntentColor = function (props, intent) {
6912
7269
  var _a, _b, _c, _d;
6913
7270
  var borders = getBorders(props);
6914
7271
  var semanticColors = getSemanticColors(props);
6915
- return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
7272
+ return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
6916
7273
  };
6917
7274
  var disabledStyled$1 = function (props) {
6918
7275
  var _a, _b, _c;
6919
7276
  var borders = getBorders(props);
6920
7277
  var semanticColors = getSemanticColors(props);
6921
- return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, 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);
7278
+ return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, 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);
6922
7279
  };
6923
7280
  var textArea = function (props) {
6924
7281
  var spaces = getSpaces(props);
@@ -6933,15 +7290,14 @@ var StyledInputBase = styled(TextField, {
6933
7290
  return !sdsPropNames$1.includes(prop.toString());
6934
7291
  },
6935
7292
  })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6936
- var _a, _b, _c, _d;
7293
+ var _a, _b, _c;
6937
7294
  var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
6938
7295
  var spaces = getSpaces(props);
6939
7296
  var borders = getBorders(props);
6940
7297
  var corners = getCorners(props);
6941
- var semanticColors = getSemanticColors(props);
6942
- return 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, outlinedInputClasses.root, 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, 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, outlinedInputClasses.input, outlinedInputClasses.input, focusVisibleA11yStyle(props), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, outlinedInputClasses.root, outlinedInputClasses.focused, 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));
7298
+ return 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, outlinedInputClasses.root, outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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, outlinedInputClasses.input, outlinedInputClasses.input, focusVisibleA11yStyle(props), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, 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));
6943
7299
  });
6944
- var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
7300
+ var templateObject_1$o, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
6945
7301
 
6946
7302
  /**
6947
7303
  * @see https://mui.com/material-ui/react-text-field/
@@ -6980,27 +7336,27 @@ var toggle = function (props) {
6980
7336
  var shadows = getShadows(props);
6981
7337
  var iconSizes = getIconSizes(props);
6982
7338
  var semanticColors = getSemanticColors(props);
6983
- 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(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(switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(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(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 ");
7339
+ 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(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(switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(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(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 ");
6984
7340
  };
6985
7341
  var toggleOn = function (props) {
6986
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7342
+ var _a, _b, _c, _d, _e, _f, _g, _h;
6987
7343
  var disabled = props.disabled, value = props.value;
6988
7344
  var borders = getBorders(props);
6989
7345
  var spaces = getSpaces(props);
6990
7346
  var semanticColors = getSemanticColors(props);
6991
- 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(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(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(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 &&
6992
- "&: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(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 ");
7347
+ 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(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(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(switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7348
+ "&: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(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 ");
6993
7349
  };
6994
7350
  var toggleOff = function (props) {
6995
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7351
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
6996
7352
  var disabled = props.disabled, value = props.value;
6997
7353
  var borders = getBorders(props);
6998
7354
  var spaces = getSpaces(props);
6999
7355
  var semanticColors = getSemanticColors(props);
7000
7356
  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(switchClasses.thumb, " {\n color: ").concat(disabled
7001
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
7002
- : (_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(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(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(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 &&
7003
- "&: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(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 ");
7357
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled
7358
+ : (_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(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(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(switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7359
+ "&: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(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 ");
7004
7360
  };
7005
7361
  var Toggle = styled(Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
7006
7362
  var checked = props.checked;
@@ -7031,7 +7387,7 @@ var defaultStyle = function (props) {
7031
7387
  return 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);
7032
7388
  };
7033
7389
  var dashedStyle = function () {
7034
- return 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 "])));
7390
+ return 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 "])));
7035
7391
  };
7036
7392
  var smallStyle = function (props) {
7037
7393
  return fontBodyS$1(props);
@@ -7047,7 +7403,7 @@ var StyledLink = styled(Link$1, {
7047
7403
  var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
7048
7404
  return 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");
7049
7405
  });
7050
- var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
7406
+ var templateObject_1$m, templateObject_2$c, templateObject_3$6, templateObject_4$5;
7051
7407
 
7052
7408
  /**
7053
7409
  * @see https://mui.com/material-ui/react-link/
@@ -7134,11 +7490,11 @@ function propsToMarginBottom(props) {
7134
7490
  var marginBottom = props.marginBottom;
7135
7491
  return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
7136
7492
  }
7137
- var ListItemLabel = styled("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7493
+ var ListItemLabel = styled("span")(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7138
7494
  var fontWeights = getFontWeights(props);
7139
7495
  return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
7140
7496
  });
7141
- var templateObject_1$k, templateObject_2$a;
7497
+ var templateObject_1$k, templateObject_2$b;
7142
7498
 
7143
7499
  /**
7144
7500
  * @see https://mui.com/material-ui/react-list/
@@ -7169,13 +7525,13 @@ var minimal = function (props) {
7169
7525
  var _a, _b;
7170
7526
  var iconSizes = getIconSizes(props);
7171
7527
  var semanticColors = getSemanticColors(props);
7172
- return 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);
7528
+ return 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);
7173
7529
  };
7174
7530
  var tag = function (props) {
7175
7531
  var _a, _b, _c;
7176
7532
  var corners = getCorners(props);
7177
7533
  var semanticColors = getSemanticColors(props);
7178
- return 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);
7534
+ return 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);
7179
7535
  };
7180
7536
  var doNotForwardProps$7 = ["sdsStyle"];
7181
7537
  var StyledLoadingIndicator = styled("div", {
@@ -7186,18 +7542,18 @@ var StyledLoadingIndicator = styled("div", {
7186
7542
  var style = 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);
7187
7543
  return 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));
7188
7544
  });
7189
- var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7545
+ var templateObject_1$i, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7190
7546
 
7191
7547
  var LoadingIndicator = function (_a) {
7192
7548
  var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
7193
- return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7549
+ return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7194
7550
  };
7195
7551
 
7196
7552
  var StyledMenu = styled(Menu$1)(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"])), menuClasses.paper, function (props) {
7197
7553
  var _a;
7198
7554
  var spaces = getSpaces(props);
7199
7555
  var semanticColors = getSemanticColors(props);
7200
- 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 ");
7556
+ 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 ");
7201
7557
  });
7202
7558
  var templateObject_1$h;
7203
7559
 
@@ -7222,7 +7578,7 @@ var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
7222
7578
  // per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
7223
7579
  var StyledAutocomplete = styled(Autocomplete$1, {
7224
7580
  shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
7225
- })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7581
+ })(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7226
7582
  var search = _a.search;
7227
7583
  return !search && "height: 0; margin: 0 !important;";
7228
7584
  });
@@ -7245,7 +7601,7 @@ var StyledMenuInputSearch = styled(InputSearch, {
7245
7601
  var search = _a.search;
7246
7602
  return (search ? "auto" : "transparent");
7247
7603
  });
7248
- var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
7604
+ var templateObject_1$g, templateObject_2$9, templateObject_3$4, templateObject_4$3;
7249
7605
 
7250
7606
  /**
7251
7607
  * @see https://mui.com/material-ui/react-autocomplete/
@@ -7271,9 +7627,7 @@ var MenuSelect = function (props) {
7271
7627
  * (thuang): Works with css caret-color: "transparent" to hide
7272
7628
  * mobile keyboard
7273
7629
  */
7274
- inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
7275
- sdsType: "interactive",
7276
- }, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7630
+ inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7277
7631
  if (event && event.type === "blur") {
7278
7632
  setInputValue("");
7279
7633
  }
@@ -7360,13 +7714,13 @@ var StyledTabs$1 = styled(Tabs$1, {
7360
7714
  });
7361
7715
  var StyledTab$1 = styled(Tab$1, {
7362
7716
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
7363
- })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7364
- var _a, _b, _c, _d;
7717
+ })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7718
+ var _a, _b, _c;
7365
7719
  var spaces = getSpaces(props);
7366
7720
  var semanticColors = getSemanticColors(props);
7367
- 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 ");
7721
+ 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 ");
7368
7722
  });
7369
- var templateObject_1$f, templateObject_2$7;
7723
+ var templateObject_1$f, templateObject_2$8;
7370
7724
 
7371
7725
  /**
7372
7726
  * Custom hook that observes elements to determine if they are in the viewport.
@@ -7453,9 +7807,9 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7453
7807
  };
7454
7808
  };
7455
7809
  // Emit changes only once
7456
- var handleOnChange = useCallback(function (value) {
7810
+ var handleOnChange = useCallback(function (value, event, type) {
7457
7811
  if (value !== emittedValue) {
7458
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
7812
+ onChange === null || onChange === void 0 ? void 0 : onChange(value, event, type);
7459
7813
  setEmittedValue(value);
7460
7814
  }
7461
7815
  }, [emittedValue, onChange]);
@@ -7481,7 +7835,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7481
7835
  // Update the tab value to newValue to adjust the position of the tabsIndicator
7482
7836
  setFirstTabIndexInview(newValue);
7483
7837
  // Invoke the custom onChange prop
7484
- handleOnChange(newValue);
7838
+ handleOnChange(newValue, event, "click");
7485
7839
  };
7486
7840
  // Observe changes in the sectionIsInView object to update the tabs value
7487
7841
  // based on the index of the visible sections in the viewport.
@@ -7494,9 +7848,12 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7494
7848
  if (sectionInView > -1 && !navItemClicked) {
7495
7849
  setFirstTabIndexInview(sectionInView);
7496
7850
  // Invoke the custom onChange prop
7497
- handleOnChange(sectionInView);
7851
+ handleOnChange(sectionInView, {
7852
+ target: items[sectionInView],
7853
+ type: "scroll",
7854
+ }, "scroll");
7498
7855
  }
7499
- }, [handleOnChange, navItemClicked, sectionIsInView]);
7856
+ }, [handleOnChange, items, navItemClicked, sectionIsInView]);
7500
7857
  // Set navItemClicked to false to re-enable the option
7501
7858
  // to update the tab value based on scroll.
7502
7859
  useScrollStopListener(function () {
@@ -7525,20 +7882,20 @@ var StyledNotification = styled(Alert$2, {
7525
7882
  var typography = getTypography(props);
7526
7883
  var borders = getBorders(props);
7527
7884
  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";
7528
- 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";
7885
+ 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";
7529
7886
  // (masoudmanson): The Notification Icon should be vertically centered with the Notification
7530
7887
  // Title. The padding-top of the Notification Title is calculated based on the difference
7531
7888
  // between the height of the Icon and the line-height of the Notification Title.
7532
7889
  var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
7533
- 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"))) /
7890
+ 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"))) /
7534
7891
  2);
7535
7892
  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 ");
7536
7893
  });
7537
- var StyledButtonWrapper = styled("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7894
+ var StyledButtonWrapper = styled("div")(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7538
7895
  var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
7539
7896
  return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n ");
7540
7897
  });
7541
- var templateObject_1$e, templateObject_2$6;
7898
+ var templateObject_1$e, templateObject_2$7;
7542
7899
 
7543
7900
  /**
7544
7901
  * @see https://mui.com/material-ui/react-alert/
@@ -7569,17 +7926,17 @@ var Notification = function (_a) {
7569
7926
  return icon;
7570
7927
  }
7571
7928
  else {
7572
- return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
7929
+ return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
7573
7930
  }
7574
7931
  }
7575
7932
  else {
7576
7933
  switch (intent) {
7577
7934
  case "positive":
7578
- return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
7935
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
7579
7936
  case "info":
7580
- return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
7937
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
7581
7938
  default:
7582
- return (jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
7939
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
7583
7940
  }
7584
7941
  }
7585
7942
  };
@@ -7602,16 +7959,16 @@ var doNotForwardProps$3 = [
7602
7959
  var StyledPaginationButton = styled(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7603
7960
  var _a, _b, _c;
7604
7961
  var semanticColors = getSemanticColors(props);
7605
- 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 ");
7962
+ 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 ");
7606
7963
  });
7607
7964
  var StyledPaginationChevronList = styled("li", {
7608
7965
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
7609
- })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7966
+ })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7610
7967
  var _a, _b, _c, _d, _e;
7611
7968
  var disabled = props.disabled;
7612
7969
  var spaces = getSpaces(props);
7613
7970
  var semanticColors = getSemanticColors(props);
7614
- 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 ");
7971
+ 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 ");
7615
7972
  });
7616
7973
  var StyledPagination = styled("ul", {
7617
7974
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
@@ -7631,7 +7988,7 @@ var Page = styled("li", {
7631
7988
  var semanticColors = getSemanticColors(props);
7632
7989
  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 ");
7633
7990
  });
7634
- var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
7991
+ var templateObject_1$d, templateObject_2$6, templateObject_3$3, templateObject_4$2;
7635
7992
 
7636
7993
  var StyledPaginationDropdownMenu = styled(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"])));
7637
7994
  var templateObject_1$c;
@@ -7739,7 +8096,7 @@ var Pagination = forwardRef(function (props, ref) {
7739
8096
  return null;
7740
8097
  }
7741
8098
  var lastPage = paginationRange[paginationRange.length - 1];
7742
- return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
8099
+ return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "onNextPage")] })));
7743
8100
  function handleGoBackButtonKeyDown(event) {
7744
8101
  if ((event.key === "Enter" || event.code === "Space") &&
7745
8102
  currentPage > 1) {
@@ -7768,14 +8125,14 @@ var basicPanelStyles = function (props) {
7768
8125
  var _a;
7769
8126
  var semanticColors = getSemanticColors(props);
7770
8127
  var spaces = getSpaces(props);
7771
- return 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 "])), 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);
8128
+ return 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 "])), 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);
7772
8129
  };
7773
8130
  var overlayPanelStyles = function (props) {
7774
8131
  var _a;
7775
8132
  var semanticColors = getSemanticColors(props);
7776
8133
  var spaces = getSpaces(props);
7777
8134
  var shadows = getShadows(props);
7778
- return 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 "])), 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);
8135
+ return 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 "])), 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);
7779
8136
  };
7780
8137
  var StyledDrawer = styled(Drawer, {
7781
8138
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7790,7 +8147,7 @@ var StyledHeaderComponent = styled("div")(templateObject_6 || (templateObject_6
7790
8147
  var spaces = getSpaces(props);
7791
8148
  return 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);
7792
8149
  });
7793
- var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
8150
+ var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
7794
8151
 
7795
8152
  var StyledPanelHeader = styled("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7796
8153
  var spaces = getSpaces(props);
@@ -7864,9 +8221,17 @@ var StyledSegmentedControl = styled(ToggleButtonGroup, {
7864
8221
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7865
8222
  var spaces = getSpaces(props);
7866
8223
  var semanticColors = getSemanticColors(props);
7867
- return "\n .".concat(toggleButtonClasses.root, ".").concat(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(toggleButtonClasses.root, ".").concat(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(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 ");
8224
+ return "\n .".concat(toggleButtonClasses.root, ".").concat(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(toggleButtonClasses.root, ".").concat(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(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 ");
7868
8225
  });
7869
- var templateObject_1$8;
8226
+ var StyledToggleButton = styled(ToggleButton, {
8227
+ shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
8228
+ })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8229
+ var _a;
8230
+ var disabled = props.disabled;
8231
+ var semanticColors = getSemanticColors(props);
8232
+ 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 ");
8233
+ });
8234
+ var templateObject_1$8, templateObject_2$4;
7870
8235
 
7871
8236
  /**
7872
8237
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -7889,8 +8254,8 @@ var SegmentedControl = function (props) {
7889
8254
  };
7890
8255
  return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
7891
8256
  var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
7892
- var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
7893
- var toggleButton = (jsx(ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
8257
+ var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
8258
+ var toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
7894
8259
  // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
7895
8260
  return disabled ? (toggleButton) : (jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
7896
8261
  }), ";"] })));
@@ -7914,10 +8279,9 @@ var doNotForwardProps = [
7914
8279
  "hover",
7915
8280
  ];
7916
8281
  var disabledStyled = function (props) {
7917
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
8282
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7918
8283
  var semanticColors = getSemanticColors(props);
7919
- var mode = getMode(props);
7920
- 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 ");
8284
+ 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 ");
7921
8285
  };
7922
8286
  var hoverStyled = function (props) {
7923
8287
  var _a;
@@ -8092,7 +8456,7 @@ var TooltipCondensed = forwardRef(function TooltipCondensed(props, ref) {
8092
8456
  key: "tooltip",
8093
8457
  props: props,
8094
8458
  });
8095
- return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
8459
+ return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, hasInvertedStyle: false, children: children }));
8096
8460
  });
8097
8461
  function mergeClass(_a) {
8098
8462
  var props = _a.props, className = _a.className, key = _a.key;
@@ -8150,4 +8514,4 @@ var TooltipTableContent = function (props) {
8150
8514
  return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
8151
8515
  };
8152
8516
 
8153
- export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
8517
+ export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };