@czi-sds/components 20.8.0 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs.d.ts +127 -282
  2. package/dist/index.cjs.js +914 -628
  3. package/dist/index.esm.d.ts +127 -282
  4. package/dist/index.esm.js +910 -627
  5. package/dist/tailwind.json +318 -128
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +567 -251
  8. package/dist/variables.scss +452 -142
  9. package/package.json +2 -2
package/dist/index.esm.js CHANGED
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
4
  import React__default, { forwardRef, useEffect, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
5
5
  import { css } from '@emotion/react';
6
- import { colors, 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, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, 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, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
6
+ import { 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, 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, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
7
7
  import { createTheme, styled, useTheme } from '@mui/material/styles';
8
8
  import { Check, Remove, Clear } from '@mui/icons-material';
9
9
  import { css as css$1 } from '@emotion/css';
@@ -78,62 +78,145 @@ var FontWeight;
78
78
  FontWeight[FontWeight["regular"] = 400] = "regular";
79
79
  FontWeight[FontWeight["semibold"] = 600] = "semibold";
80
80
  })(FontWeight || (FontWeight = {}));
81
- var SDSThemeColors = {
81
+ var SDSLightThemeColors = {
82
82
  blue: {
83
- "100": "#F5F9FF",
84
- "200": "#E9F1FF",
85
- "300": "#A6C9FF",
86
- "400": "#0B68F8",
87
- "500": "#0142A4",
88
- "600": "#002660",
83
+ "100": "#e2eeff",
84
+ "200": "#cce1ff",
85
+ "300": "#9dc6ff",
86
+ "400": "#6ca6ff",
87
+ "500": "#1a6cef",
88
+ "600": "#0041b9",
89
+ "700": "#002d90",
90
+ "800": "#00114a",
89
91
  },
90
- common: {
91
- black: "#000000",
92
- white: "#FFFFFF",
92
+ gray: {
93
+ "100": "#f3f3f3",
94
+ "200": "#dfdfdf",
95
+ "300": "#c3c3c3",
96
+ "400": "#a5a5a5",
97
+ "50": "#ffffff",
98
+ "500": "#969696",
99
+ "600": "#6c6c6c",
100
+ "700": "#3b3b3b",
101
+ "75": "#fafafa",
102
+ "800": "#1b1b1b",
103
+ "900": "#000000",
104
+ },
105
+ green: {
106
+ "100": "#daf4de",
107
+ "200": "#b9ecc3",
108
+ "300": "#7fd693",
109
+ "400": "#50b96d",
110
+ "500": "#238444",
111
+ "600": "#105b2b",
112
+ "700": "#07431d",
113
+ "800": "#001f00",
114
+ },
115
+ purple: {
116
+ "100": "#efeafe",
117
+ "200": "#e4dbfc",
118
+ "300": "#cbbaf8",
119
+ "400": "#b296f2",
120
+ "500": "#8b54e2",
121
+ "600": "#6526b5",
122
+ "700": "#490092",
123
+ "800": "#1a004c",
124
+ },
125
+ red: {
126
+ "100": "#ffe8e6",
127
+ "200": "#ffd6d2",
128
+ "300": "#ffafa8",
129
+ "400": "#ff7e78",
130
+ "500": "#db2131",
131
+ "600": "#980013",
132
+ "700": "#6f0008",
133
+ "800": "#340000",
134
+ },
135
+ yellow: {
136
+ "100": "#ffefcf",
137
+ "200": "#ffdb97",
138
+ "300": "#ffca5c",
139
+ "400": "#fab700",
140
+ "500": "#da9900",
141
+ "600": "#b77800",
142
+ "700": "#7c3e00",
143
+ "800": "#541700",
144
+ },
145
+ };
146
+ var SDSDarkThemeColors = {
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",
93
156
  },
94
157
  gray: {
95
- "100": "#F8F8F8",
96
- "200": "#EAEAEA",
97
- "300": "#CCCCCC",
98
- "400": "#999999",
99
- "500": "#767676",
100
- "600": "#545454",
158
+ "100": "#333333",
159
+ "200": "#494949",
160
+ "300": "#696969",
161
+ "400": "#9b9b9b",
162
+ "50": "#000000",
163
+ "500": "#aaaaaa",
164
+ "600": "#cdcdcd",
165
+ "700": "#ededed",
166
+ "75": "#101010",
167
+ "800": "#fafafa",
168
+ "900": "#ffffff",
101
169
  },
102
170
  green: {
103
- "100": "#ECF5F0",
104
- "200": "#E6F7ED",
105
- "300": "transparent",
106
- "400": "#3CB371",
107
- "500": "#349A61",
108
- "600": "#1C7F48",
171
+ "100": "#053918",
172
+ "200": "#12612e",
173
+ "300": "#288b49",
174
+ "400": "#43ae63",
175
+ "500": "#85d898",
176
+ "600": "#bcecc5",
177
+ "700": "#daf4de",
178
+ "800": "#f7fbf6",
109
179
  },
110
180
  purple: {
111
- "100": "#F4F0F9",
112
- "200": "#F0EBF6",
113
- "300": "transparent",
114
- "400": "#7A41CE",
115
- "500": "#703CBE",
116
- "600": "#693BAC",
181
+ "100": "#4b0190",
182
+ "200": "#6b2ebc",
183
+ "300": "#905de6",
184
+ "400": "#aa89ef",
185
+ "500": "#cebef8",
186
+ "600": "#e4dcfc",
187
+ "700": "#f0ebfe",
188
+ "800": "#fbf9ff",
117
189
  },
118
190
  red: {
119
- "100": "#FEF2F2",
120
- "200": "#F8E8E8",
121
- "300": "transparent",
122
- "400": "#DC132C",
123
- "500": "#C61128",
124
- "600": "#B70016",
191
+ "100": "#630008",
192
+ "200": "#A30000",
193
+ "300": "#E52722",
194
+ "400": "#FF695B",
195
+ "500": "#FF9385",
196
+ "600": "#FFBDB3",
197
+ "700": "#FFD8D1",
198
+ "800": "#FFF1EE",
125
199
  },
126
200
  yellow: {
127
- "100": "#FCF6EC",
128
- "200": "#FFF3E1",
129
- "300": "transparent",
130
- "400": "#F5A623",
131
- "500": "#D8921F",
132
- "600": "#946314",
201
+ "100": "#552300",
202
+ "200": "#834500",
203
+ "300": "#985a00",
204
+ "400": "#ac6c00",
205
+ "500": "#cf8e00",
206
+ "600": "#efad00",
207
+ "700": "#ffdc9a",
208
+ "800": "#fcf2e3",
133
209
  },
134
210
  };
135
- var SDSAppTheme = {
136
- colors: SDSThemeColors,
211
+ /**
212
+ * Base app theme for properties shared between light and dark mode. Generally, if a theme
213
+ * property doesn't deal with colors it belongs here, otherwise it'll have its specific
214
+ * theme variant defined in `lightAppTheme` or `darkAppTheme`.
215
+ *
216
+ * `colors` and `mode` are omitted because they must be defined by the `lightAppTheme` and
217
+ * `darkAppTheme` objects before use in the `makeThemeOptions` function.
218
+ */
219
+ var sharedAppTheme = {
137
220
  corners: {
138
221
  l: 20,
139
222
  m: 4,
@@ -445,66 +528,371 @@ var SDSAppTheme = {
445
528
  },
446
529
  },
447
530
  };
448
- /**
449
- * (masoudmanson): This is to make sure that the old defaultAppTheme
450
- * export is still available for backward compatibility.
451
- *
452
- * @deprecated
453
- * Please use `SDSAppTheme` instead. This export will be removed in the future.
454
- */
455
- var defaultAppTheme = SDSAppTheme;
531
+ var SDSLightAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSLightThemeColors });
456
532
  // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
457
533
  // applications to override those colors using their own custom theme.
458
534
  // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
459
535
  // we allow other apps to specify their colors once, and have them apply
460
536
  // throughout the application, such as in borders, etc without having to manually
461
537
  // override every theme property that makes use of colors.
462
- SDSAppTheme.borders = {
538
+ SDSLightAppTheme.borders = {
539
+ accent: {
540
+ default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
541
+ focused: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
542
+ hover: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
543
+ open: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
544
+ pressed: "1px solid ".concat(SDSLightAppTheme.colors.blue[700]),
545
+ selected: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
546
+ },
547
+ base: {
548
+ default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
549
+ disabled: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
550
+ divider: "1px solid ".concat(SDSLightAppTheme.colors.gray[200]),
551
+ hover: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
552
+ pressed: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
553
+ table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
554
+ },
555
+ beta: {
556
+ default: "1px solid ".concat(SDSLightAppTheme.colors.purple[500]),
557
+ },
558
+ info: {
559
+ default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
560
+ },
561
+ link: {
562
+ dashed: "1px dashed",
563
+ solid: "1px solid",
564
+ },
565
+ negative: {
566
+ default: "1px solid ".concat(SDSLightAppTheme.colors.red[500]),
567
+ },
568
+ neutral: {
569
+ default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
570
+ },
571
+ none: "none",
572
+ notice: {
573
+ default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[500]),
574
+ },
575
+ positive: {
576
+ default: "1px solid ".concat(SDSLightAppTheme.colors.green[500]),
577
+ },
578
+ };
579
+ var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
580
+ SDSDarkAppTheme.borders = {
463
581
  accent: {
464
- dashed: "1px dashed ".concat(SDSAppTheme.colors.blue[400]),
465
- default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
466
- disabled: "1px solid ".concat(SDSAppTheme.colors.blue[300]),
467
- hover: "1px solid ".concat(SDSAppTheme.colors.blue[500]),
582
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
583
+ focused: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
584
+ hover: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
585
+ open: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
586
+ pressed: "1px solid ".concat(SDSDarkAppTheme.colors.blue[700]),
587
+ selected: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
468
588
  },
469
589
  base: {
470
- black: "1px solid ".concat(SDSAppTheme.colors.common.black),
471
- dashed: "1px dashed ".concat(SDSAppTheme.colors.gray[400]),
472
- default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
473
- disabled: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
474
- divider: "1px solid ".concat(SDSAppTheme.colors.gray[200]),
475
- hover: "1px solid ".concat(SDSAppTheme.colors.common.black),
476
- table: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
590
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
591
+ disabled: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
592
+ divider: "1px solid ".concat(SDSDarkAppTheme.colors.gray[200]),
593
+ hover: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
594
+ pressed: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
595
+ table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
477
596
  },
478
597
  beta: {
479
- default: "1px solid ".concat(SDSAppTheme.colors.purple[400]),
598
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[500]),
480
599
  },
481
600
  info: {
482
- default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
601
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
483
602
  },
484
603
  link: {
485
604
  dashed: "1px dashed",
486
605
  solid: "1px solid",
487
606
  },
488
607
  negative: {
489
- default: "1px solid ".concat(SDSAppTheme.colors.red[400]),
608
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.red[500]),
490
609
  },
491
610
  neutral: {
492
- default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
611
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
493
612
  },
494
613
  none: "none",
495
614
  notice: {
496
- default: "1px solid ".concat(SDSAppTheme.colors.yellow[400]),
615
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[500]),
497
616
  },
498
617
  positive: {
499
- default: "1px solid ".concat(SDSAppTheme.colors.green[400]),
618
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.green[500]),
500
619
  },
501
620
  };
621
+ /**
622
+ * Helper function to select the appropriate theme settings.
623
+ *
624
+ * @param theme The theme to choose from. Currently supports a light and dark variant.
625
+ * @returns The appropriate app theme for the variant.
626
+ */
627
+ var SDSChooseTheme = function (theme) {
628
+ if (theme === "dark") {
629
+ return SDSDarkAppTheme;
630
+ }
631
+ return SDSLightAppTheme;
632
+ };
633
+ /**
634
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
635
+ * export is still available for backward compatibility.
636
+ *
637
+ * @deprecated
638
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
639
+ */
640
+ var defaultAppTheme = SDSLightAppTheme;
502
641
 
503
- var common = colors.common;
642
+ var SDSPaletteLight = function (appTheme) {
643
+ return {
644
+ accent: {
645
+ border: appTheme.colors.blue[500],
646
+ borderFocus: appTheme.colors.blue[500],
647
+ borderHover: appTheme.colors.blue[600],
648
+ borderOpen: appTheme.colors.blue[500],
649
+ borderPressed: appTheme.colors.blue[700],
650
+ borderSelected: appTheme.colors.blue[500],
651
+ fillHover: appTheme.colors.blue[600],
652
+ fillPressed: appTheme.colors.blue[700],
653
+ fillPrimary: appTheme.colors.blue[500],
654
+ icon: appTheme.colors.blue[500],
655
+ iconFocus: appTheme.colors.blue[500],
656
+ iconHover: appTheme.colors.blue[600],
657
+ iconOpen: appTheme.colors.blue[500],
658
+ iconPressed: appTheme.colors.blue[700],
659
+ iconSelected: appTheme.colors.blue[500],
660
+ surfacePrimary: appTheme.colors.blue[100],
661
+ surfaceSecondary: appTheme.colors.blue[500],
662
+ textAction: appTheme.colors.blue[500],
663
+ textActionHover: appTheme.colors.blue[600],
664
+ textActionPressed: appTheme.colors.blue[700],
665
+ },
666
+ base: {
667
+ border: appTheme.colors.gray[500],
668
+ borderDisabled: appTheme.colors.gray[300],
669
+ borderHover: appTheme.colors.gray[900],
670
+ borderPressed: appTheme.colors.gray[900],
671
+ borderTable: appTheme.colors.gray[300],
672
+ divider: appTheme.colors.gray[200],
673
+ fillDisabled: appTheme.colors.gray[200],
674
+ /* the number 47 is the opacity of the color, which is equal to 28% */
675
+ fillHover: appTheme.colors.gray[300] + "47",
676
+ fillOpen: appTheme.colors.gray[300] + "47",
677
+ fillPressed: appTheme.colors.gray[300] + "47",
678
+ fillPrimary: appTheme.colors.gray[50],
679
+ fillSelected: appTheme.colors.gray[900],
680
+ iconDisabled: appTheme.colors.gray[300],
681
+ iconPrimary: appTheme.colors.gray[500],
682
+ iconPrimaryHover: appTheme.colors.gray[900],
683
+ iconPrimaryInverse: appTheme.colors.gray[50],
684
+ iconPrimaryInverseHover: appTheme.colors.gray[400],
685
+ iconPrimaryInversePressed: appTheme.colors.gray[400],
686
+ iconPrimaryPressed: appTheme.colors.gray[900],
687
+ iconSecondary: appTheme.colors.gray[900],
688
+ surfaceBackground: appTheme.colors.gray[50],
689
+ surfacePrimary: appTheme.colors.gray[50],
690
+ surfacePrimaryInverse: appTheme.colors.gray[900],
691
+ surfaceSecondary: appTheme.colors.gray[100],
692
+ surfaceTertiary: appTheme.colors.gray[200],
693
+ textDisabled: appTheme.colors.gray[300],
694
+ textPrimary: appTheme.colors.gray[900],
695
+ textPrimaryInverse: appTheme.colors.gray[50],
696
+ textSecondary: appTheme.colors.gray[600],
697
+ textSecondaryInverse: appTheme.colors.gray[300],
698
+ },
699
+ beta: {
700
+ border: appTheme.colors.purple[500],
701
+ fillHover: appTheme.colors.purple[600],
702
+ fillPressed: appTheme.colors.purple[700],
703
+ fillPrimary: appTheme.colors.purple[500],
704
+ fillSecondary: appTheme.colors.purple[100],
705
+ ornament: appTheme.colors.purple[600],
706
+ surfacePrimary: appTheme.colors.purple[100],
707
+ surfaceSecondary: appTheme.colors.purple[500],
708
+ text: appTheme.colors.purple[600],
709
+ },
710
+ info: {
711
+ border: appTheme.colors.blue[500],
712
+ fillHover: appTheme.colors.blue[600],
713
+ fillPressed: appTheme.colors.blue[700],
714
+ fillPrimary: appTheme.colors.blue[500],
715
+ fillSecondary: appTheme.colors.blue[100],
716
+ ornament: appTheme.colors.blue[600],
717
+ surfacePrimary: appTheme.colors.blue[100],
718
+ surfaceSecondary: appTheme.colors.blue[500],
719
+ text: appTheme.colors.blue[600],
720
+ },
721
+ negative: {
722
+ border: appTheme.colors.red[500],
723
+ fillHover: appTheme.colors.red[600],
724
+ fillPressed: appTheme.colors.red[700],
725
+ fillPrimary: appTheme.colors.red[500],
726
+ fillSecondary: appTheme.colors.red[100],
727
+ ornament: appTheme.colors.red[600],
728
+ surfacePrimary: appTheme.colors.red[100],
729
+ surfaceSecondary: appTheme.colors.red[500],
730
+ text: appTheme.colors.red[600],
731
+ },
732
+ neutral: {
733
+ border: appTheme.colors.gray[500],
734
+ fillHover: appTheme.colors.gray[600],
735
+ fillPressed: appTheme.colors.gray[700],
736
+ fillPrimary: appTheme.colors.gray[500],
737
+ fillSecondary: appTheme.colors.gray[100],
738
+ ornament: appTheme.colors.gray[700],
739
+ surfacePrimary: appTheme.colors.gray[200],
740
+ surfaceSecondary: appTheme.colors.gray[500],
741
+ text: appTheme.colors.gray[700],
742
+ },
743
+ notice: {
744
+ border: appTheme.colors.yellow[500],
745
+ fillHover: appTheme.colors.yellow[600],
746
+ fillPressed: appTheme.colors.yellow[700],
747
+ fillPrimary: appTheme.colors.yellow[500],
748
+ fillSecondary: appTheme.colors.yellow[100],
749
+ ornament: appTheme.colors.yellow[600],
750
+ surfacePrimary: appTheme.colors.yellow[100],
751
+ surfaceSecondary: appTheme.colors.yellow[500],
752
+ text: appTheme.colors.yellow[600],
753
+ },
754
+ positive: {
755
+ border: appTheme.colors.green[500],
756
+ fillHover: appTheme.colors.green[600],
757
+ fillPressed: appTheme.colors.green[700],
758
+ fillPrimary: appTheme.colors.green[500],
759
+ fillSecondary: appTheme.colors.green[100],
760
+ ornament: appTheme.colors.green[600],
761
+ surfacePrimary: appTheme.colors.green[100],
762
+ surfaceSecondary: appTheme.colors.green[500],
763
+ text: appTheme.colors.green[600],
764
+ },
765
+ };
766
+ };
767
+ var SDSPaletteDark = function (appTheme) {
768
+ return {
769
+ accent: {
770
+ border: appTheme.colors.blue[500],
771
+ borderFocus: appTheme.colors.blue[500],
772
+ borderHover: appTheme.colors.blue[600],
773
+ borderOpen: appTheme.colors.blue[500],
774
+ borderPressed: appTheme.colors.blue[700],
775
+ borderSelected: appTheme.colors.blue[500],
776
+ fillHover: appTheme.colors.blue[600],
777
+ fillPressed: appTheme.colors.blue[700],
778
+ fillPrimary: appTheme.colors.blue[500],
779
+ icon: appTheme.colors.blue[500],
780
+ iconFocus: appTheme.colors.blue[500],
781
+ iconHover: appTheme.colors.blue[600],
782
+ iconOpen: appTheme.colors.blue[500],
783
+ iconPressed: appTheme.colors.blue[700],
784
+ iconSelected: appTheme.colors.blue[500],
785
+ surfacePrimary: appTheme.colors.blue[100],
786
+ surfaceSecondary: appTheme.colors.blue[500],
787
+ textAction: appTheme.colors.blue[500],
788
+ textActionHover: appTheme.colors.blue[600],
789
+ textActionPressed: appTheme.colors.blue[700],
790
+ },
791
+ base: {
792
+ border: appTheme.colors.gray[500],
793
+ borderDisabled: appTheme.colors.gray[300],
794
+ borderHover: appTheme.colors.gray[900],
795
+ borderPressed: appTheme.colors.gray[900],
796
+ borderTable: appTheme.colors.gray[300],
797
+ divider: appTheme.colors.gray[200],
798
+ fillDisabled: appTheme.colors.gray[200],
799
+ /* the number 47 is the opacity of the color, which is equal to 28% */
800
+ fillHover: appTheme.colors.gray[300] + "47",
801
+ fillOpen: appTheme.colors.gray[300] + "47",
802
+ fillPressed: appTheme.colors.gray[300] + "47",
803
+ fillPrimary: appTheme.colors.gray[100],
804
+ fillSelected: appTheme.colors.gray[900],
805
+ iconDisabled: appTheme.colors.gray[300],
806
+ iconPrimary: appTheme.colors.gray[500],
807
+ iconPrimaryHover: appTheme.colors.gray[900],
808
+ iconPrimaryInverse: appTheme.colors.gray[50],
809
+ iconPrimaryInverseHover: appTheme.colors.gray[400],
810
+ iconPrimaryInversePressed: appTheme.colors.gray[400],
811
+ iconPrimaryPressed: appTheme.colors.gray[900],
812
+ iconSecondary: appTheme.colors.gray[900],
813
+ surfaceBackground: appTheme.colors.gray[75],
814
+ surfacePrimary: appTheme.colors.gray[100],
815
+ surfacePrimaryInverse: appTheme.colors.gray[900],
816
+ surfaceSecondary: appTheme.colors.gray[200],
817
+ surfaceTertiary: appTheme.colors.gray[300],
818
+ textDisabled: appTheme.colors.gray[300],
819
+ textPrimary: appTheme.colors.gray[900],
820
+ textPrimaryInverse: appTheme.colors.gray[50],
821
+ textSecondary: appTheme.colors.gray[600],
822
+ textSecondaryInverse: appTheme.colors.gray[300],
823
+ },
824
+ beta: {
825
+ border: appTheme.colors.purple[500],
826
+ fillHover: appTheme.colors.purple[600],
827
+ fillPressed: appTheme.colors.purple[700],
828
+ fillPrimary: appTheme.colors.purple[500],
829
+ fillSecondary: appTheme.colors.purple[100],
830
+ ornament: appTheme.colors.purple[600],
831
+ surfacePrimary: appTheme.colors.purple[100],
832
+ surfaceSecondary: appTheme.colors.purple[500],
833
+ text: appTheme.colors.purple[600],
834
+ },
835
+ info: {
836
+ border: appTheme.colors.blue[500],
837
+ fillHover: appTheme.colors.blue[600],
838
+ fillPressed: appTheme.colors.blue[700],
839
+ fillPrimary: appTheme.colors.blue[500],
840
+ fillSecondary: appTheme.colors.blue[100],
841
+ ornament: appTheme.colors.blue[600],
842
+ surfacePrimary: appTheme.colors.blue[100],
843
+ surfaceSecondary: appTheme.colors.blue[500],
844
+ text: appTheme.colors.blue[600],
845
+ },
846
+ negative: {
847
+ border: appTheme.colors.red[500],
848
+ fillHover: appTheme.colors.red[600],
849
+ fillPressed: appTheme.colors.red[700],
850
+ fillPrimary: appTheme.colors.red[500],
851
+ fillSecondary: appTheme.colors.red[100],
852
+ ornament: appTheme.colors.red[600],
853
+ surfacePrimary: appTheme.colors.red[100],
854
+ surfaceSecondary: appTheme.colors.red[500],
855
+ text: appTheme.colors.red[600],
856
+ },
857
+ neutral: {
858
+ border: appTheme.colors.gray[500],
859
+ fillHover: appTheme.colors.gray[600],
860
+ fillPressed: appTheme.colors.gray[700],
861
+ fillPrimary: appTheme.colors.gray[500],
862
+ fillSecondary: appTheme.colors.gray[100],
863
+ ornament: appTheme.colors.gray[700],
864
+ surfacePrimary: appTheme.colors.gray[200],
865
+ surfaceSecondary: appTheme.colors.gray[500],
866
+ text: appTheme.colors.gray[700],
867
+ },
868
+ notice: {
869
+ border: appTheme.colors.yellow[500],
870
+ fillHover: appTheme.colors.yellow[600],
871
+ fillPressed: appTheme.colors.yellow[700],
872
+ fillPrimary: appTheme.colors.yellow[500],
873
+ fillSecondary: appTheme.colors.yellow[100],
874
+ ornament: appTheme.colors.yellow[600],
875
+ surfacePrimary: appTheme.colors.yellow[100],
876
+ surfaceSecondary: appTheme.colors.yellow[500],
877
+ text: appTheme.colors.yellow[700],
878
+ },
879
+ positive: {
880
+ border: appTheme.colors.green[500],
881
+ fillHover: appTheme.colors.green[600],
882
+ fillPressed: appTheme.colors.green[700],
883
+ fillPrimary: appTheme.colors.green[500],
884
+ fillSecondary: appTheme.colors.green[100],
885
+ ornament: appTheme.colors.green[600],
886
+ surfacePrimary: appTheme.colors.green[100],
887
+ surfaceSecondary: appTheme.colors.green[500],
888
+ text: appTheme.colors.green[600],
889
+ },
890
+ };
891
+ };
504
892
  /**
505
893
  * This function creates the theme options for the MUI theme provider
506
894
  */
507
- function makeThemeOptions(appTheme) {
895
+ function makeThemeOptions(appTheme, mode) {
508
896
  return {
509
897
  app: appTheme,
510
898
  components: {
@@ -529,6 +917,9 @@ function makeThemeOptions(appTheme) {
529
917
  disabled: appTheme.colors.gray[400],
530
918
  disabledBackground: appTheme.colors.gray[300],
531
919
  },
920
+ background: {
921
+ default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50],
922
+ },
532
923
  divider: appTheme.colors.gray[200],
533
924
  error: {
534
925
  "100": appTheme.colors.red[100],
@@ -537,7 +928,7 @@ function makeThemeOptions(appTheme) {
537
928
  "400": appTheme.colors.red[400],
538
929
  "500": appTheme.colors.red[500],
539
930
  "600": appTheme.colors.red[600],
540
- contrastText: common.white,
931
+ contrastText: appTheme.colors.gray[50],
541
932
  dark: appTheme.colors.red[600],
542
933
  light: appTheme.colors.red[200],
543
934
  main: appTheme.colors.red[400],
@@ -557,12 +948,12 @@ function makeThemeOptions(appTheme) {
557
948
  "400": appTheme.colors.blue[400],
558
949
  "500": appTheme.colors.blue[500],
559
950
  "600": appTheme.colors.blue[600],
560
- contrastText: common.white,
951
+ contrastText: appTheme.colors.gray[50],
561
952
  dark: appTheme.colors.blue[600],
562
953
  light: appTheme.colors.blue[200],
563
954
  main: appTheme.colors.blue[400],
564
955
  },
565
- mode: "light",
956
+ mode: mode,
566
957
  primary: {
567
958
  "100": appTheme.colors.blue[100],
568
959
  "200": appTheme.colors.blue[200],
@@ -570,129 +961,12 @@ function makeThemeOptions(appTheme) {
570
961
  "400": appTheme.colors.blue[400],
571
962
  "500": appTheme.colors.blue[500],
572
963
  "600": appTheme.colors.blue[600],
573
- contrastText: common.white,
964
+ contrastText: appTheme.colors.gray[50],
574
965
  dark: appTheme.colors.blue[600],
575
966
  light: appTheme.colors.blue[200],
576
967
  main: appTheme.colors.blue[400],
577
968
  },
578
- sds: {
579
- component: {
580
- accent: {
581
- border: appTheme.colors.blue[400],
582
- borderDisabled: appTheme.colors.blue[300],
583
- borderFocus: appTheme.colors.blue[400],
584
- borderHover: appTheme.colors.blue[500],
585
- borderOpen: appTheme.colors.blue[400],
586
- borderPressed: appTheme.colors.blue[600],
587
- borderSelected: appTheme.colors.blue[400],
588
- fill: appTheme.colors.blue[400],
589
- fillDisabled: appTheme.colors.blue[300],
590
- fillHover: appTheme.colors.blue[500],
591
- fillOnFill: appTheme.colors.common.white,
592
- fillPressed: appTheme.colors.blue[600],
593
- icon: appTheme.colors.blue[400],
594
- surface: appTheme.colors.blue[200],
595
- },
596
- base: {
597
- border: appTheme.colors.gray[400],
598
- borderDisabled: appTheme.colors.gray[300],
599
- borderHover: appTheme.colors.common.black,
600
- borderPressed: appTheme.colors.common.black,
601
- borderTable: appTheme.colors.gray[300],
602
- divider: appTheme.colors.gray[200],
603
- fill: appTheme.colors.common.white,
604
- fillDisabled: appTheme.colors.gray[300],
605
- fillHover: appTheme.colors.gray[100],
606
- fillOpen: appTheme.colors.gray[100],
607
- fillPressed: appTheme.colors.gray[100],
608
- fillSelected: appTheme.colors.common.black,
609
- icon: appTheme.colors.gray[500],
610
- iconDisabled: appTheme.colors.gray[300],
611
- iconHover: appTheme.colors.common.black,
612
- iconPressed: appTheme.colors.common.black,
613
- onFillDisabled: appTheme.colors.gray[400],
614
- surface: appTheme.colors.common.white,
615
- surfacePrimary: appTheme.colors.common.white,
616
- surfaceSecondary: appTheme.colors.gray[100],
617
- surfaceTertiary: appTheme.colors.gray[200],
618
- },
619
- beta: {
620
- border: appTheme.colors.purple[400],
621
- fill: appTheme.colors.purple[400],
622
- fillHover: appTheme.colors.purple[500],
623
- fillOnFill: appTheme.colors.common.white,
624
- fillPressed: appTheme.colors.purple[600],
625
- icon: appTheme.colors.purple[400],
626
- surface: appTheme.colors.purple[200],
627
- },
628
- info: {
629
- border: appTheme.colors.blue[400],
630
- fill: appTheme.colors.blue[400],
631
- fillHover: appTheme.colors.blue[500],
632
- fillOnFill: appTheme.colors.common.white,
633
- fillPressed: appTheme.colors.blue[600],
634
- icon: appTheme.colors.blue[400],
635
- surface: appTheme.colors.blue[200],
636
- },
637
- negative: {
638
- border: appTheme.colors.red[400],
639
- fill: appTheme.colors.red[400],
640
- fillHover: appTheme.colors.red[500],
641
- fillOnFill: appTheme.colors.common.white,
642
- fillPressed: appTheme.colors.red[600],
643
- icon: appTheme.colors.red[400],
644
- surface: appTheme.colors.red[200],
645
- },
646
- neutral: {
647
- border: appTheme.colors.gray[400],
648
- fill: appTheme.colors.gray[400],
649
- fillHover: appTheme.colors.gray[500],
650
- fillOnFill: appTheme.colors.common.white,
651
- fillPressed: appTheme.colors.gray[600],
652
- icon: appTheme.colors.gray[400],
653
- surface: appTheme.colors.gray[200],
654
- },
655
- notice: {
656
- border: appTheme.colors.yellow[400],
657
- fill: appTheme.colors.yellow[400],
658
- fillHover: appTheme.colors.yellow[500],
659
- fillOnFill: appTheme.colors.common.white,
660
- fillPressed: appTheme.colors.yellow[600],
661
- icon: appTheme.colors.yellow[400],
662
- surface: appTheme.colors.yellow[200],
663
- },
664
- positive: {
665
- border: appTheme.colors.green[400],
666
- fill: appTheme.colors.green[400],
667
- fillHover: appTheme.colors.green[500],
668
- fillOnFill: appTheme.colors.common.white,
669
- fillPressed: appTheme.colors.green[600],
670
- icon: appTheme.colors.green[400],
671
- surface: appTheme.colors.green[200],
672
- },
673
- },
674
- text: {
675
- action: {
676
- default: appTheme.colors.blue[400],
677
- hover: appTheme.colors.blue[500],
678
- pressed: appTheme.colors.blue[600],
679
- },
680
- base: {
681
- accent: appTheme.colors.blue[600],
682
- disabled: appTheme.colors.gray[300],
683
- onFill: appTheme.colors.common.white,
684
- onFillDisabled: appTheme.colors.gray[400],
685
- primary: appTheme.colors.common.black,
686
- secondary: appTheme.colors.gray[500],
687
- },
688
- beta: appTheme.colors.purple[600],
689
- info: appTheme.colors.blue[600],
690
- negative: appTheme.colors.red[600],
691
- neutral: appTheme.colors.gray[600],
692
- notice: appTheme.colors.yellow[600],
693
- positive: appTheme.colors.green[600],
694
- },
695
- },
969
+ sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
696
970
  secondary: {
697
971
  "100": appTheme.colors.green[100],
698
972
  "200": appTheme.colors.green[200],
@@ -700,7 +974,7 @@ function makeThemeOptions(appTheme) {
700
974
  "400": appTheme.colors.green[400],
701
975
  "500": appTheme.colors.green[500],
702
976
  "600": appTheme.colors.green[600],
703
- contrastText: common.white,
977
+ contrastText: appTheme.colors.gray[50],
704
978
  dark: appTheme.colors.green[600],
705
979
  light: appTheme.colors.green[200],
706
980
  main: appTheme.colors.green[400],
@@ -712,15 +986,15 @@ function makeThemeOptions(appTheme) {
712
986
  "400": appTheme.colors.green[400],
713
987
  "500": appTheme.colors.green[500],
714
988
  "600": appTheme.colors.green[600],
715
- contrastText: common.white,
989
+ contrastText: appTheme.colors.gray[50],
716
990
  dark: appTheme.colors.green[600],
717
991
  light: appTheme.colors.green[200],
718
992
  main: appTheme.colors.green[400],
719
993
  },
720
994
  text: {
721
995
  disabled: appTheme.colors.gray[300],
722
- primary: common.black,
723
- secondary: appTheme.colors.gray[500],
996
+ primary: appTheme.colors.gray[900],
997
+ secondary: appTheme.colors.gray[600],
724
998
  },
725
999
  warning: {
726
1000
  "100": appTheme.colors.yellow[100],
@@ -729,7 +1003,7 @@ function makeThemeOptions(appTheme) {
729
1003
  "400": appTheme.colors.yellow[400],
730
1004
  "500": appTheme.colors.yellow[500],
731
1005
  "600": appTheme.colors.yellow[600],
732
- contrastText: common.black,
1006
+ contrastText: appTheme.colors.gray[900],
733
1007
  dark: appTheme.colors.yellow[600],
734
1008
  light: appTheme.colors.yellow[200],
735
1009
  main: appTheme.colors.yellow[400],
@@ -812,12 +1086,21 @@ function makeThemeOptions(appTheme) {
812
1086
  };
813
1087
  }
814
1088
 
815
- var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
816
- var defaultTheme = createTheme(defaultThemeOptions);
817
-
818
- function focusVisibleA11yStyle() {
819
- return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n ";
820
- }
1089
+ /**
1090
+ * Theme adaptor with light/dark mode support.
1091
+ *
1092
+ * @param t The theme to use. Currently supports a light and dark variant.
1093
+ * @returns The selected theme object to be used in the ThemeProvider
1094
+ */
1095
+ var Theme = function (t) {
1096
+ return createTheme(makeThemeOptions(SDSChooseTheme(t), t));
1097
+ };
1098
+ /**
1099
+ * Default theme, uses light mode with no option to change it.
1100
+ *
1101
+ * Use the `theme` export to get a flexible light/dark mode theme function
1102
+ */
1103
+ var defaultTheme = Theme("light");
821
1104
 
822
1105
  var getSpaces = function (_a) {
823
1106
  var _b;
@@ -838,6 +1121,11 @@ var getTypography = function (_a) {
838
1121
  var theme = _a.theme;
839
1122
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.typography) || null;
840
1123
  };
1124
+ var getMode = function (_a) {
1125
+ var _b;
1126
+ var theme = _a.theme;
1127
+ return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
1128
+ };
841
1129
  var getPalette = function (_a) {
842
1130
  var theme = _a.theme;
843
1131
  return theme === null || theme === void 0 ? void 0 : theme.palette;
@@ -847,15 +1135,10 @@ var getColors = function (_a) {
847
1135
  var theme = _a.theme;
848
1136
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.colors) || null;
849
1137
  };
850
- var getSemanticComponentColors = function (_a) {
851
- var _b, _c;
852
- var theme = _a.theme;
853
- return ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) === null || _c === void 0 ? void 0 : _c.component) || null;
854
- };
855
- var getSemanticTextColors = function (_a) {
856
- var _b, _c;
1138
+ var getSemanticColors = function (_a) {
1139
+ var _b;
857
1140
  var theme = _a.theme;
858
- return ((_c = (_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) === null || _c === void 0 ? void 0 : _c.text) || null;
1141
+ return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) || null;
859
1142
  };
860
1143
  var getShadows = function (_a) {
861
1144
  var _b;
@@ -883,6 +1166,12 @@ var getBorders = function (_a) {
883
1166
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
884
1167
  };
885
1168
 
1169
+ function focusVisibleA11yStyle(props) {
1170
+ var _a;
1171
+ var semanticColors = getSemanticColors(props);
1172
+ 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 ");
1173
+ }
1174
+
886
1175
  var fontBody = function (fontSize, fontWeight) {
887
1176
  if (fontWeight === void 0) { fontWeight = "regular"; }
888
1177
  return function (props) {
@@ -980,15 +1269,15 @@ var AccordionDetails = function (props) {
980
1269
  };
981
1270
 
982
1271
  var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
983
- var _a;
1272
+ var _a, _b;
984
1273
  var spaces = getSpaces(props);
985
- var semanticComponentColors = getSemanticComponentColors(props);
986
- return css(templateObject_1$S || (templateObject_1$S = __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 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 "])), 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon);
1274
+ var semanticColors = getSemanticColors(props);
1275
+ return css(templateObject_1$S || (templateObject_1$S = __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);
987
1276
  });
988
1277
  var StyledSubtitle = styled("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
989
1278
  var _a;
990
- var semanticTextColors = getSemanticTextColors(props);
991
- return css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary);
1279
+ var semanticColors = getSemanticColors(props);
1280
+ return css(templateObject_3$r || (templateObject_3$r = __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);
992
1281
  });
993
1282
  var templateObject_1$S, templateObject_2$z, templateObject_3$r, templateObject_4$n;
994
1283
 
@@ -3638,16 +3927,16 @@ function buttonStyle() {
3638
3927
  }
3639
3928
  function staticStyle(props) {
3640
3929
  var _a;
3641
- var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 400 : _c;
3930
+ var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
3642
3931
  var colors = getColors(props);
3643
3932
  return css(templateObject_3$q || (templateObject_3$q = __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]);
3644
3933
  }
3645
3934
  function interactive(props) {
3646
3935
  var _a, _b, _c, _d;
3647
- var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 400 : _f;
3936
+ var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
3648
3937
  var colors = getColors(props);
3649
- var semanticComponentColors = getSemanticComponentColors(props);
3650
- return css(templateObject_4$m || (templateObject_4$m = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
3938
+ var semanticColors = getSemanticColors(props);
3939
+ return css(templateObject_4$m || (templateObject_4$m = __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);
3651
3940
  }
3652
3941
  var doNotForwardProps$q = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
3653
3942
  var StyledSvgIcon = styled(SvgIcon, {
@@ -3689,13 +3978,14 @@ var StyledAccordion = styled(Accordion$1, {
3689
3978
  return !sdsPropNames$3.includes(prop.toString());
3690
3979
  },
3691
3980
  })(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
3692
- var _a, _b;
3981
+ var _a, _b, _c;
3693
3982
  var useDivider = props.useDivider, togglePosition = props.togglePosition;
3694
3983
  var shadows = getShadows(props);
3695
3984
  var typography = getTypography(props);
3696
3985
  var borders = getBorders(props);
3697
3986
  var spaces = getSpaces(props);
3698
- return css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\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 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(), 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));
3987
+ var semanticColors = getSemanticColors(props);
3988
+ return css(templateObject_1$Q || (templateObject_1$Q = __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));
3699
3989
  });
3700
3990
  var leftPosition = function (props) {
3701
3991
  var _a, _b, _c;
@@ -3722,15 +4012,17 @@ var Accordion = React__default.forwardRef(function (props, ref) {
3722
4012
  });
3723
4013
 
3724
4014
  var StyledAlert = styled(Alert$2)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4015
+ var _a;
3725
4016
  var colors = getColors(props);
3726
4017
  var spaces = getSpaces(props);
3727
4018
  var shadows = getShadows(props);
3728
- var _a = props.severity, severity = _a === void 0 ? "success" : _a;
4019
+ var semanticColors = getSemanticColors(props);
4020
+ var _b = props.severity, severity = _b === void 0 ? "success" : _b;
3729
4021
  var borderColor = (colors && severityToColor(severity, colors)[400]) || "black";
3730
4022
  var alertColor = (colors && severityToColor(severity, colors)[100]) || "white";
3731
4023
  var iconColor = (colors && severityToColor(severity, colors)[400]) || "black";
3732
4024
  var backgroundColor = colors && severityToColor(severity, colors)[100];
3733
- return "\n background-color: ".concat(backgroundColor, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n color: ").concat(defaultTheme.palette.text.primary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px\n ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 9px;\n background-color: ").concat(alertColor, ";\n &.elevated {\n border-left: 5px solid;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n border-color: ").concat(borderColor, ";\n }\n .MuiAlert-icon {\n path {\n fill: ").concat(iconColor, ";\n }\n }\n ");
4025
+ return "\n background-color: ".concat(backgroundColor, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px\n ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 9px;\n background-color: ").concat(alertColor, ";\n &.elevated {\n border-left: 5px solid;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n border-color: ").concat(borderColor, ";\n }\n .MuiAlert-icon {\n path {\n fill: ").concat(iconColor, ";\n }\n }\n ");
3734
4026
  });
3735
4027
  function severityToColor(alertSeverity, colors) {
3736
4028
  switch (alertSeverity) {
@@ -3846,13 +4138,11 @@ var doNotForwardProps$p = [
3846
4138
  ];
3847
4139
  // Rounded + Square Button Styles
3848
4140
  var ButtonStyles = function (props) {
3849
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
3850
- var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
4141
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
4142
+ var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon, isAllCaps = props.isAllCaps;
3851
4143
  var spaces = getSpaces(props);
3852
- var shadows = getShadows(props);
3853
4144
  var iconSizes = getIconSizes(props);
3854
- var semanticTextColors = getSemanticTextColors(props);
3855
- var semanticComponentColors = getSemanticComponentColors(props);
4145
+ var semanticColors = getSemanticColors(props);
3856
4146
  var hasIcon = !!startIcon || !!endIcon;
3857
4147
  // (masoudmanson): The padding depends on the presence of an icon.
3858
4148
  // If the component has either a startIcon or endIcon, the padding will be spaces?.m pixels.
@@ -3861,58 +4151,70 @@ var ButtonStyles = function (props) {
3861
4151
  ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
3862
4152
  : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
3863
4153
  var contentColor = variant === "outlined"
3864
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default
3865
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
3866
- return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n 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\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\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 .", ", .", " {\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 border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n 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\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\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 .", ", .", " {\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 "])), (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.border, padding, contentColor, contentColor, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fill, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.onFill, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _l === void 0 ? void 0 : _l.fill, (_m = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _m === void 0 ? void 0 : _m.onFillDisabled, (_o = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _o === void 0 ? void 0 : _o.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.onFillDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_q = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _q === void 0 ? void 0 : _q.width, (_r = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _r === void 0 ? void 0 : _r.width, (_s = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _s === void 0 ? void 0 : _s.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4154
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
4155
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4156
+ var ornamentColor = variant === "outlined"
4157
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
4158
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4159
+ var backgroundColor = variant === "outlined"
4160
+ ? "transparent"
4161
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4162
+ var disabledBackgroundColor = variant === "outlined" ? "transparent" : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled;
4163
+ var disabledBorder = variant === "outlined"
4164
+ ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
4165
+ : "none";
4166
+ return css(templateObject_1$O || (templateObject_1$O = __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);
3867
4167
  };
3868
4168
  var Rounded = function (props) {
3869
4169
  var corners = getCorners(props);
3870
4170
  return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
3871
4171
  };
3872
4172
  var DestructiveButton = function (props) {
3873
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
4173
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
3874
4174
  var variant = props.variant;
3875
4175
  var shadows = getShadows(props);
3876
- var semanticTextColors = getSemanticTextColors(props);
3877
- var semanticComponentColors = getSemanticComponentColors(props);
4176
+ var semanticColors = getSemanticColors(props);
3878
4177
  var contentColor = variant === "outlined"
3879
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.icon
3880
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
4178
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
4179
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4180
+ var ornamentColor = variant === "outlined"
4181
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
4182
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
3881
4183
  var backgroundColor = variant === "outlined"
3882
4184
  ? "transparent"
3883
- : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.fill;
3884
- return css(templateObject_3$o || (templateObject_3$o = __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\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\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\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\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 "])), (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _d === void 0 ? void 0 : _d.border, contentColor, backgroundColor, contentColor, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFill, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _g === void 0 ? void 0 : _g.fillHover, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.fill, (_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.onFill, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _l === void 0 ? void 0 : _l.fillPressed, (_m = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _m === void 0 ? void 0 : _m.fill, (_o = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _o === void 0 ? void 0 : _o.onFillDisabled, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_q = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _q === void 0 ? void 0 : _q.onFillDisabled);
4185
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4186
+ return css(templateObject_3$o || (templateObject_3$o = __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);
3885
4187
  };
3886
4188
  var StyledButton$3 = styled(Button$1, {
3887
4189
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
3888
- })(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
3889
- var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
3890
- return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
4190
+ })(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4191
+ var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
4192
+ return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
3891
4193
  });
3892
4194
  // Minimal Button Styles
3893
4195
  var Minimal = function (props) {
3894
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
4196
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4197
+ var isAllCaps = props.isAllCaps;
3895
4198
  var spaces = getSpaces(props);
3896
4199
  var iconSizes = getIconSizes(props);
3897
- var semanticTextColors = getSemanticTextColors(props);
3898
- var semanticComponentColors = getSemanticComponentColors(props);
3899
- return css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px 0;\n\n &:hover,\n &:focus-visible {\n background-color: transparent;\n color: ", ";\n\n svg {\n 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 0;\n\n &:hover,\n &:focus-visible {\n background-color: transparent;\n color: ", ";\n\n svg {\n 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(), fontCapsXxxs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fillHover, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFillDisabled, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.onFillDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _g === void 0 ? void 0 : _g.width, (_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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4200
+ var semanticColors = getSemanticColors(props);
4201
+ return css(templateObject_6$b || (templateObject_6$b = __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);
3900
4202
  };
3901
4203
  var PrimaryMinimalButton = function (props) {
3902
4204
  var _a;
3903
- var semanticTextColors = getSemanticTextColors(props);
3904
- return css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default);
4205
+ var semanticColors = getSemanticColors(props);
4206
+ return css(templateObject_7$9 || (templateObject_7$9 = __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);
3905
4207
  };
3906
4208
  var SecondaryMinimalButton = function (props) {
3907
4209
  var _a;
3908
- var semanticTextColors = getSemanticTextColors(props);
3909
- return css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary);
4210
+ var semanticColors = getSemanticColors(props);
4211
+ return css(templateObject_8$7 || (templateObject_8$7 = __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);
3910
4212
  };
3911
4213
  var StyledMinimalButton = styled(Button$1, {
3912
4214
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
3913
4215
  })(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
3914
4216
  var sdsType = props.sdsType;
3915
- return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
4217
+ return css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
3916
4218
  });
3917
4219
  var StyledButtonLegacy = styled(Button$1, {
3918
4220
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
@@ -3923,27 +4225,27 @@ var StyledButtonLegacy = styled(Button$1, {
3923
4225
  var spaces = getSpaces(props);
3924
4226
  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 ");
3925
4227
  });
3926
- var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$f, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$2, templateObject_11$1;
4228
+ var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$f, templateObject_6$b, templateObject_7$9, templateObject_8$7, templateObject_9$3, templateObject_10$2, templateObject_11$1;
3927
4229
 
3928
4230
  var isDisabled$1 = function (props) {
3929
4231
  var _a, _b;
3930
- var semanticComponentColors = getSemanticComponentColors(props);
3931
- return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled);
4232
+ var semanticColors = getSemanticColors(props);
4233
+ return css(templateObject_1$N || (templateObject_1$N = __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);
3932
4234
  };
3933
4235
  var primary$2 = function (props) {
3934
4236
  var _a, _b, _c, _d, _e, _f, _g, _h;
3935
- var semanticComponentColors = getSemanticComponentColors(props);
3936
- return css(templateObject_2$v || (templateObject_2$v = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fill, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
4237
+ var semanticColors = getSemanticColors(props);
4238
+ return css(templateObject_2$v || (templateObject_2$v = __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);
3937
4239
  };
3938
4240
  var secondary$2 = function (props) {
3939
4241
  var _a, _b, _c, _d, _e, _f, _g, _h;
3940
- var semanticComponentColors = getSemanticComponentColors(props);
3941
- return css(templateObject_3$n || (templateObject_3$n = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
4242
+ var semanticColors = getSemanticColors(props);
4243
+ return css(templateObject_3$n || (templateObject_3$n = __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);
3942
4244
  };
3943
4245
  var tertiary = function (props) {
3944
4246
  var _a, _b, _c, _d, _e, _f;
3945
- var semanticComponentColors = getSemanticComponentColors(props);
3946
- return css(templateObject_4$k || (templateObject_4$k = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconPressed);
4247
+ var semanticColors = getSemanticColors(props);
4248
+ return css(templateObject_4$k || (templateObject_4$k = __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);
3947
4249
  };
3948
4250
  var small$1 = function (props) {
3949
4251
  var sdsType = props.sdsType;
@@ -3972,11 +4274,11 @@ var doNotForwardProps$o = [
3972
4274
  ];
3973
4275
  var StyledButtonIcon = styled(IconButton, {
3974
4276
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
3975
- })(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4277
+ })(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
3976
4278
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
3977
- return css(templateObject_8$7 || (templateObject_8$7 = __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));
4279
+ return css(templateObject_8$6 || (templateObject_8$6 = __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));
3978
4280
  });
3979
- var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$e, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$3;
4281
+ var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$e, templateObject_6$a, templateObject_7$8, templateObject_8$6, templateObject_9$2;
3980
4282
 
3981
4283
  var ButtonIconSizeToSdsIconSize = {
3982
4284
  large: "xl",
@@ -4036,8 +4338,12 @@ var Button = React__default.forwardRef(function (props, ref) {
4036
4338
  if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
4037
4339
  showWarningIfFirstOccurence(SDSWarningTypes.ButtonMinimalIsAllCaps);
4038
4340
  }
4039
- // isAllCaps is only used for the Minimal Button. It defaults to true.
4040
- var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
4341
+ // isAllCaps is only used for the Minimal Button.
4342
+ // It defaults to true for the Minimal Button.
4343
+ // It defaults to false for all other buttons.
4344
+ var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean"
4345
+ ? props === null || props === void 0 ? void 0 : props.isAllCaps
4346
+ : sdsStyle === "minimal";
4041
4347
  var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
4042
4348
  switch (true) {
4043
4349
  case sdsStyle === "icon":
@@ -4068,44 +4374,29 @@ var Button = React__default.forwardRef(function (props, ref) {
4068
4374
  }
4069
4375
  });
4070
4376
 
4071
- var sdsPropNames$2 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
4377
+ var sdsPropNames$2 = ["sdsStyle", "intent", "handleSubmit"];
4072
4378
  var rounded$3 = function (props) {
4073
4379
  var _a;
4074
4380
  var corners = getCorners(props);
4075
- var semanticComponentColors = getSemanticComponentColors(props);
4076
- return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border);
4381
+ var semanticColors = getSemanticColors(props);
4382
+ return css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border);
4077
4383
  };
4078
- var error$3 = function (props) {
4384
+ var error$1 = function (props) {
4079
4385
  var _a, _b, _c, _d;
4080
- var semanticComponentColors = getSemanticComponentColors(props);
4081
- return css(templateObject_2$u || (templateObject_2$u = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
4386
+ var semanticColors = getSemanticColors(props);
4387
+ return css(templateObject_2$u || (templateObject_2$u = __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.negative) === 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);
4082
4388
  };
4083
- var warning$3 = function (props) {
4389
+ var warning$1 = function (props) {
4084
4390
  var _a, _b, _c, _d;
4085
- var semanticComponentColors = getSemanticComponentColors(props);
4086
- return css(templateObject_3$m || (templateObject_3$m = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
4087
- };
4088
- var userInput$2 = function (props) {
4089
- var _a, _b, _c, _d, _e;
4090
- var intent = props.intent;
4091
- var semanticComponentColors = getSemanticComponentColors(props);
4092
- var border = intent === "error"
4093
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border
4094
- : intent === "warning"
4095
- ? (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border
4096
- : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.border;
4097
- var color = intent === "default"
4098
- ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.icon
4099
- : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon;
4100
- return css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
4391
+ var semanticColors = getSemanticColors(props);
4392
+ return css(templateObject_3$m || (templateObject_3$m = __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.notice) === 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);
4101
4393
  };
4102
4394
  var disabledStyled$2 = function (props) {
4103
- var _a, _b, _c;
4104
- var colors = getColors(props);
4105
- var semanticComponentColors = getSemanticComponentColors(props);
4106
- return css(templateObject_5$d || (templateObject_5$d = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
4395
+ var _a, _b, _c, _d;
4396
+ var semanticColors = getSemanticColors(props);
4397
+ return css(templateObject_4$j || (templateObject_4$j = __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);
4107
4398
  };
4108
- var StyledLabel$2 = styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4399
+ var StyledLabel$2 = styled("label")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4109
4400
  var spaces = getSpaces(props);
4110
4401
  return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n position: absolute;\n overflow: hidden;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px; \n padding: 0; \n border: 0;\n ");
4111
4402
  });
@@ -4113,26 +4404,24 @@ var StyledSearchBase = styled(TextField, {
4113
4404
  shouldForwardProp: function (prop) {
4114
4405
  return !sdsPropNames$2.includes(prop.toString());
4115
4406
  },
4116
- })(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4117
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4118
- var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage;
4407
+ })(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4408
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4409
+ var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4119
4410
  var spaces = getSpaces(props);
4120
4411
  var iconSizes = getIconSizes(props);
4121
- var semanticComponentColors = getSemanticComponentColors(props);
4122
- return css(templateObject_7$7 || (templateObject_7$7 = __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\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 .", " {\n border: 1px solid ", ";\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 black;\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\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 .", " {\n border: 1px solid ", ";\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 black;\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, outlinedInputClasses.root, sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
4412
+ var semanticColors = getSemanticColors(props);
4413
+ return css(templateObject_6$9 || (templateObject_6$9 = __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\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 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\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 "])), 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.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" && error$1(props), intent === "notice" && warning$1(props), disabled && disabledStyled$2(props));
4123
4414
  });
4124
- var StyledInputAdornment = styled(InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4125
- var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$2;
4415
+ var StyledInputAdornment = styled(InputAdornment)(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4416
+ var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$5;
4126
4417
 
4127
4418
  var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4128
- var _a, _b, _c, _d, _e, _f, _g;
4419
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
4129
4420
  var selected = props.selected;
4130
- var colors = getColors(props);
4131
4421
  var fontWeights = getFontWeights(props);
4132
4422
  var spaces = getSpaces(props);
4133
- var semanticComponentColors = getSemanticComponentColors(props);
4134
- var primary = colors === null || colors === void 0 ? void 0 : colors.blue[400];
4135
- 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? primary : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? primary : (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.icon, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: white;\n &:hover {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.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(primary, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat(primary, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4423
+ var semanticColors = getSemanticColors(props);
4424
+ 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 ");
4136
4425
  });
4137
4426
  var ContentWrapper = styled("span")(templateObject_2$t || (templateObject_2$t = __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"])));
4138
4427
  var disabledStyles = function (props) {
@@ -4140,27 +4429,27 @@ var disabledStyles = function (props) {
4140
4429
  var disabled = props.disabled;
4141
4430
  if (!disabled)
4142
4431
  return "";
4143
- var semanticComponentColors = getSemanticComponentColors(props);
4144
- return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";\n cursor: default;\n ");
4432
+ var semanticColors = getSemanticColors(props);
4433
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n cursor: default;\n ");
4145
4434
  };
4146
4435
  var TextWrapper = styled("span")(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4147
4436
  var _a;
4148
- var semanticTextColors = getSemanticTextColors(props);
4149
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n display: flex;\n white-space: pre-wrap;\n ");
4437
+ var semanticColors = getSemanticColors(props);
4438
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n display: flex;\n white-space: pre-wrap;\n ");
4150
4439
  }, disabledStyles);
4151
4440
  var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4152
4441
  var _a;
4153
4442
  var disabled = props.disabled;
4154
4443
  var spaces = getSpaces(props);
4155
4444
  var iconSizes = getIconSizes(props);
4156
- var semanticComponentColors = getSemanticComponentColors(props);
4157
- 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
4445
+ var semanticColors = getSemanticColors(props);
4446
+ 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 ");
4158
4447
  });
4159
4448
  var ColumnWrapper = styled("span")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4160
4449
  var _a;
4161
- var semanticTextColors = getSemanticTextColors(props);
4450
+ var semanticColors = getSemanticColors(props);
4162
4451
  var spaces = getSpaces(props);
4163
- return "\n text-align: right;\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
4452
+ return "\n text-align: right;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
4164
4453
  }, disabledStyles);
4165
4454
  var StyledIconWrapper = styled("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4166
4455
  var spaces = getSpaces(props);
@@ -4173,25 +4462,25 @@ var StyledCheck = styled(Check, {
4173
4462
  var _a, _b;
4174
4463
  var selected = props.selected, disabled = props.disabled;
4175
4464
  var iconSizes = getIconSizes(props);
4176
- var semanticComponentColors = getSemanticComponentColors(props);
4465
+ var semanticColors = getSemanticColors(props);
4177
4466
  var selectedColor = disabled
4178
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4179
- : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4467
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4468
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4180
4469
  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 ");
4181
4470
  });
4182
4471
  var StyledMinus = styled(Remove, {
4183
4472
  shouldForwardProp: function (prop) { return prop !== "selected"; },
4184
- })(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4473
+ })(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4185
4474
  var _a, _b;
4186
4475
  var selected = props.selected, disabled = props.disabled;
4187
- var semanticComponentColors = getSemanticComponentColors(props);
4476
+ var semanticColors = getSemanticColors(props);
4188
4477
  var iconSizes = getIconSizes(props);
4189
4478
  var selectedColor = disabled
4190
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4191
- : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4479
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4480
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4192
4481
  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 ");
4193
4482
  });
4194
- var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$6, templateObject_8$5;
4483
+ var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$6, templateObject_8$4;
4195
4484
 
4196
4485
  /**
4197
4486
  * @see https://mui.com/material-ui/react-menu/
@@ -4304,22 +4593,14 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
4304
4593
  * user is tabbing, we can apply different styles for :focus and :focus-visible states.
4305
4594
  */
4306
4595
  useDetectUserTabbing((ref ? ref : inputRef));
4307
- var _c = useState(false), hasValue = _c[0], setHasValue = _c[1];
4308
- var _d = useState(""), value = _d[0], setValue = _d[1];
4596
+ var _c = useState(""), value = _c[0], setValue = _c[1];
4309
4597
  var handleChange = function (event) {
4310
- if (event.target.value) {
4311
- setHasValue(true);
4312
- }
4313
- else {
4314
- setHasValue(false);
4315
- }
4316
4598
  setValue(event.target.value);
4317
4599
  if (onChange)
4318
4600
  onChange(event);
4319
4601
  };
4320
4602
  var clearInput = function () {
4321
4603
  setValue("");
4322
- setHasValue(false);
4323
4604
  if (handleSubmit)
4324
4605
  handleSubmit("");
4325
4606
  /**
@@ -4351,13 +4632,13 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
4351
4632
  return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4352
4633
  // passed to mui Input
4353
4634
  InputProps: {
4354
- endAdornment: (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: {
4635
+ 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: {
4355
4636
  sdsType: "iconButton",
4356
- }, icon: "XMarkCircle" }) })),
4637
+ }, icon: "XMarkCircle" }) })) : null,
4357
4638
  startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4358
4639
  sdsType: "interactive",
4359
4640
  }, icon: "Search" }) })),
4360
- }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4641
+ }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4361
4642
  /**
4362
4643
  * (masoudmanson): This prevents the browser's default auto completion
4363
4644
  * menu from being displayed for the InputSearch.
@@ -4376,13 +4657,12 @@ var doNotForwardProps$n = [
4376
4657
  var StyledAutocompleteBase = styled(Autocomplete$1, {
4377
4658
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
4378
4659
  })(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
4379
- var _a, _b, _c, _d, _e;
4660
+ var _a, _b, _c, _d, _e, _f, _g;
4380
4661
  var search = props.search;
4381
4662
  var spaces = getSpaces(props);
4382
4663
  var borders = getBorders(props);
4383
- var semanticTextColors = getSemanticTextColors(props);
4384
- var semanticComponentColors = getSemanticComponentColors(props);
4385
- return "\n ".concat(!search && "height: 0", ";\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 black;\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((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.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((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.secondary, ";\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((_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.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 ");
4664
+ var semanticColors = getSemanticColors(props);
4665
+ 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 ");
4386
4666
  });
4387
4667
  var InputBaseWrapper$1 = styled("div", {
4388
4668
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
@@ -4407,13 +4687,13 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$h || (templateObject_4$h = __
4407
4687
  var corners = getCorners(props);
4408
4688
  var shadows = getShadows(props);
4409
4689
  var borders = getBorders(props);
4410
- var semanticComponentColors = getSemanticComponentColors(props);
4411
- return "\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 ");
4690
+ var semanticColors = getSemanticColors(props);
4691
+ 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 ");
4412
4692
  });
4413
4693
  var StyledMenuItemDetails = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
4414
4694
  var _a;
4415
- var semanticTextColors = getSemanticTextColors(props);
4416
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n white-space: pre-wrap;\n ");
4695
+ var semanticColors = getSemanticColors(props);
4696
+ 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 ");
4417
4697
  });
4418
4698
  var StyledMenuItemText = styled("div")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
4419
4699
  var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
@@ -4591,15 +4871,15 @@ var StyledColumn = styled("div")(templateObject_1$J || (templateObject_1$J = __m
4591
4871
  var StyledColumnTitle = styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
4592
4872
  var _a;
4593
4873
  var spaces = getSpaces(props);
4594
- var semanticTextColors = getSemanticTextColors(props);
4595
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
4874
+ var semanticColors = getSemanticColors(props);
4875
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
4596
4876
  });
4597
4877
  var StyledColumnIcon = styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4598
4878
  var _a, _b;
4599
4879
  var spaces = getSpaces(props);
4600
4880
  var iconSizes = getIconSizes(props);
4601
- var semanticComponentColors = getSemanticComponentColors(props);
4602
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\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 ");
4881
+ var semanticColors = getSemanticColors(props);
4882
+ 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 ");
4603
4883
  });
4604
4884
  var templateObject_1$J, templateObject_2$r, templateObject_3$j;
4605
4885
 
@@ -4662,21 +4942,23 @@ var StyledPopper$2 = styled(Popper, {
4662
4942
  var shadows = getShadows(props);
4663
4943
  var spaces = getSpaces(props);
4664
4944
  var borders = getBorders(props);
4665
- var semanticComponentColors = getSemanticComponentColors(props);
4666
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 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 ");
4945
+ var semanticColors = getSemanticColors(props);
4946
+ 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 ");
4667
4947
  });
4668
4948
  var StyledPaper$2 = styled(Paper, {
4669
4949
  shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
4670
4950
  })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4951
+ var _a;
4671
4952
  var shadows = getShadows(props);
4672
- return "\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 ");
4953
+ var semanticColors = getSemanticColors(props);
4954
+ 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 ");
4673
4955
  });
4674
4956
  var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
4675
4957
  var StyledAutocompleteInput = styled(InputSearch, {
4676
4958
  shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
4677
4959
  })(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
4678
4960
  var search = _a.search;
4679
- return !search && "height: 0; display: none;";
4961
+ return !search && "height: 0; display: none; margin: 0 !important;";
4680
4962
  }, function (_a) {
4681
4963
  var search = _a.search;
4682
4964
  return (search ? "auto" : "transparent");
@@ -4868,10 +5150,18 @@ var Autocomplete = function (props) {
4868
5150
  };
4869
5151
 
4870
5152
  var Centered = styled("div")(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
4871
- var IconWrapper$1 = styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5153
+ var doNotForwardPropsIconWrapper = ["bannerType"];
5154
+ var IconWrapper$1 = styled("div", {
5155
+ shouldForwardProp: function (prop) {
5156
+ return !doNotForwardPropsIconWrapper.includes(prop);
5157
+ },
5158
+ })(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5159
+ var _a, _b;
5160
+ var bannerType = props.bannerType;
4872
5161
  var iconSizes = getIconSizes(props);
4873
5162
  var spaces = getSpaces(props);
4874
- 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 ");
5163
+ var semanticColors = getSemanticColors(props);
5164
+ 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 ");
4875
5165
  });
4876
5166
  var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
4877
5167
  var StyledButton$2 = styled(Button, {
@@ -4879,24 +5169,23 @@ var StyledButton$2 = styled(Button, {
4879
5169
  return !doNotForwardPropsButtonIcon.includes(prop);
4880
5170
  },
4881
5171
  })(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
5172
+ var _a, _b;
4882
5173
  var bannerType = props.bannerType;
4883
- var colors = getColors(props);
5174
+ var semanticColors = getSemanticColors(props);
4884
5175
  if (bannerType !== "primary")
4885
5176
  return "";
4886
- return "\n svg:hover {\n fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n }\n ");
5177
+ 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 ");
4887
5178
  });
4888
5179
  styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
4889
5180
  var primary$1 = function (props) {
4890
- var _a, _b, _c;
4891
- var semanticComponentColors = getSemanticComponentColors(props);
4892
- var semanticTextColors = getSemanticTextColors(props);
4893
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fill, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, ";\n svg {\n fill: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillOnFill, ";\n }\n ");
5181
+ var _a, _b;
5182
+ var semanticColors = getSemanticColors(props);
5183
+ 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 ");
4894
5184
  };
4895
5185
  var secondary$1 = function (props) {
4896
5186
  var _a, _b;
4897
- var semanticComponentColors = getSemanticComponentColors(props);
4898
- var semanticTextColors = getSemanticTextColors(props);
4899
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.surface, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.primary, ";\n ");
5187
+ var semanticColors = getSemanticColors(props);
5188
+ 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 ");
4900
5189
  };
4901
5190
  var doNotForwardProps$l = ["sdsType", "textChild"];
4902
5191
  var StyledBanner = styled("div", {
@@ -4934,7 +5223,7 @@ var Banner = forwardRef(function Banner(props, ref) {
4934
5223
  return (jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
4935
5224
  }
4936
5225
  };
4937
- return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
5226
+ 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" }))] })));
4938
5227
  });
4939
5228
 
4940
5229
  var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
@@ -4985,9 +5274,9 @@ var StyledCallout = styled(Alert$2, {
4985
5274
  var iconSizes = getIconSizes(props);
4986
5275
  var palette = getPalette(props);
4987
5276
  var typography = getTypography(props);
4988
- var semanticComponentColors = getSemanticComponentColors(props);
4989
- var iconColor = (_b = (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[intent]) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : "black";
4990
- var backgroundColor = (_d = (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[intent]) === null || _c === void 0 ? void 0 : _c.surface) !== null && _d !== void 0 ? _d : "white";
5277
+ var semanticColors = getSemanticColors(props);
5278
+ 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";
5279
+ 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";
4991
5280
  // when a title is present Mui's default styling has vertical margin,
4992
5281
  // but for an expandable callout that is collapsed, we do not want
4993
5282
  // any bottom margin
@@ -5081,12 +5370,16 @@ var CalloutTitle = function (_a) {
5081
5370
  CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
5082
5371
 
5083
5372
  var dark = function (props) {
5373
+ var _a, _b;
5084
5374
  var spaces = getSpaces(props);
5085
- return css$1(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n background-color: black;\n color: white;\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: black;\n color: white;\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5375
+ var semanticColors = getSemanticColors(props);
5376
+ return css$1(templateObject_1$E || (templateObject_1$E = __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);
5086
5377
  };
5087
5378
  var light = function (props) {
5379
+ var _a, _b;
5088
5380
  var spaces = getSpaces(props);
5089
- return css$1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n background-color: white;\n color: black;\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: white;\n color: black;\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5381
+ var semanticColors = getSemanticColors(props);
5382
+ return css$1(templateObject_2$o || (templateObject_2$o = __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);
5090
5383
  };
5091
5384
  var wide = function () {
5092
5385
  return css$1(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
@@ -5097,8 +5390,8 @@ var tableStyles = function (props) {
5097
5390
  };
5098
5391
  var Subtitle$1 = styled("div")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5099
5392
  var _a;
5100
- var semanticTextColors = getSemanticTextColors(props);
5101
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n ");
5393
+ var semanticColors = getSemanticColors(props);
5394
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
5102
5395
  });
5103
5396
  var tooltipCss = function (props) {
5104
5397
  var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
@@ -5106,15 +5399,19 @@ var tooltipCss = function (props) {
5106
5399
  return css$1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n ", "\n ", "\n\n ", "\n\n box-shadow: ", ";\n }\n "], ["\n &.MuiTooltip-tooltip {\n ", "\n ", "\n\n ", "\n\n box-shadow: ", ";\n }\n "])), sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props), shadows === null || shadows === void 0 ? void 0 : shadows.m);
5107
5400
  };
5108
5401
  var arrowCss = function (props) {
5402
+ var _a, _b;
5109
5403
  var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5110
- return css$1(templateObject_7$5 || (templateObject_7$5 = __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" ? "black" : "white");
5404
+ var semanticColors = getSemanticColors(props);
5405
+ return css$1(templateObject_7$5 || (templateObject_7$5 = __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"
5406
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
5407
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
5111
5408
  };
5112
5409
  /*
5113
5410
  * (masoudmanson): !important is needed to override arrow's
5114
5411
  * default placement which is calculated by javascript
5115
5412
  */
5116
- var StyledPopper$1 = styled(Popper)(templateObject_8$4 || (templateObject_8$4 = __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"])));
5117
- var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$9, templateObject_6$6, templateObject_7$5, templateObject_8$4;
5413
+ 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"])));
5414
+ var templateObject_1$E, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$9, templateObject_6$6, templateObject_7$5, templateObject_8$3;
5118
5415
 
5119
5416
  /**
5120
5417
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5247,19 +5544,19 @@ var SecondaryText = styled("span", {
5247
5544
  var _a;
5248
5545
  var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
5249
5546
  var spaces = getSpaces(props);
5250
- var semanticTextColors = getSemanticTextColors(props);
5251
- return "\n display: block;\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n padding-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n\n ").concat(props.shouldTextWrap
5547
+ var semanticColors = getSemanticColors(props);
5548
+ return "\n display: block;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n\n ").concat(props.shouldTextWrap
5252
5549
  ? ShouldWrap(secondaryTextWrapLineCount)
5253
5550
  : ShouldTruncate(), "\n ");
5254
5551
  });
5255
5552
  var TertiaryText = styled("span", {
5256
5553
  shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
5257
- })(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5554
+ })(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5258
5555
  var _a;
5259
5556
  var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
5260
5557
  var spaces = getSpaces(props);
5261
- var semanticTextColors = getSemanticTextColors(props);
5262
- return "\n display: block;\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n padding-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n\n ").concat(props.shouldTextWrap
5558
+ var semanticColors = getSemanticColors(props);
5559
+ return "\n display: block;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n\n ").concat(props.shouldTextWrap
5263
5560
  ? ShouldWrap(tertiaryTextWrapLineCount)
5264
5561
  : ShouldTruncate(), "\n ");
5265
5562
  });
@@ -5271,7 +5568,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
5271
5568
  var spaces = getSpaces(props);
5272
5569
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5273
5570
  });
5274
- var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$8, templateObject_6$5, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1;
5571
+ var templateObject_1$D, templateObject_2$n, templateObject_3$f, templateObject_4$d, templateObject_5$8, templateObject_6$5, templateObject_7$4, templateObject_8$2, templateObject_9$1, templateObject_10$1;
5275
5572
 
5276
5573
  var CellBasicContent = function (props) {
5277
5574
  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;
@@ -5317,10 +5614,10 @@ var StyledSortingIcon = styled(Icon, {
5317
5614
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
5318
5615
  })(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5319
5616
  var _a, _b;
5320
- var _c = props.active, active = _c === void 0 ? false : _c;
5617
+ var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
5321
5618
  var spaces = getSpaces(props);
5322
- var semanticComponentColors = getSemanticComponentColors(props);
5323
- 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n opacity: ").concat(active ? 1 : 0, ";\n outline: none !important;\n ");
5619
+ var semanticColors = getSemanticColors(props);
5620
+ 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 ");
5324
5621
  });
5325
5622
  var StyledTableHeader$1 = styled("th", {
5326
5623
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
@@ -5328,9 +5625,8 @@ var StyledTableHeader$1 = styled("th", {
5328
5625
  var _a, _b, _c, _d, _e, _f, _g, _h;
5329
5626
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
5330
5627
  var spaces = getSpaces(props);
5331
- var semanticComponentColors = getSemanticComponentColors(props);
5332
- var semanticTextColors = getSemanticTextColors(props);
5333
- return "\n color: ".concat(active ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fill : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary, ";\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillHover : (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover : (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconHover, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillHover : (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.primary, ";\n }\n }\n ");
5628
+ var semanticColors = getSemanticColors(props);
5629
+ 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 ");
5334
5630
  });
5335
5631
  var StyledCellHeaderContainer = styled("div", {
5336
5632
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
@@ -5345,8 +5641,8 @@ var CellHeaderContent = function (props) {
5345
5641
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
5346
5642
  var sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
5347
5643
  ? "Change sort direction from ascending to descending"
5348
- : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active }));
5349
- return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), !hideSortIcon && sortIcon] }));
5644
+ : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
5645
+ return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
5350
5646
  };
5351
5647
  var CellHeader = forwardRef(function (props, ref) {
5352
5648
  var children = props.children, _a = props.shouldShowTooltipOnHover, shouldShowTooltipOnHover = _a === void 0 ? false : _a, tooltipProps = props.tooltipProps, _b = props.tooltipText, tooltipText = _b === void 0 ? "" : _b, tooltipSubtitle = props.tooltipSubtitle, rest = __rest(props, ["children", "shouldShowTooltipOnHover", "tooltipProps", "tooltipText", "tooltipSubtitle"]);
@@ -5376,7 +5672,7 @@ var square$2 = function (props) {
5376
5672
  var success = function (props) {
5377
5673
  return createStatusCss(props, "success");
5378
5674
  };
5379
- var error$2 = function (props) {
5675
+ var error = function (props) {
5380
5676
  return createStatusCss(props, "error");
5381
5677
  };
5382
5678
  var beta = function (props) {
@@ -5385,40 +5681,42 @@ var beta = function (props) {
5385
5681
  var pending = function (props) {
5386
5682
  return createStatusCss(props, "pending");
5387
5683
  };
5388
- var warning$2 = function (props) {
5684
+ var warning = function (props) {
5389
5685
  return createStatusCss(props, "warning");
5390
5686
  };
5391
5687
  var info = function (props) {
5392
5688
  return createStatusCss(props, "info");
5393
5689
  };
5394
5690
  function createStatusCss(props, status) {
5691
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5395
5692
  var colors = getColors(props);
5693
+ var semanticColors = getSemanticColors(props);
5396
5694
  if (!colors)
5397
5695
  return;
5398
5696
  var statusToColors = {
5399
5697
  beta: {
5400
- dark: colors.purple[600],
5401
- light: colors.purple[200],
5698
+ dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
5699
+ light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
5402
5700
  },
5403
5701
  error: {
5404
- dark: colors.red[600],
5405
- light: colors.red[200],
5702
+ dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
5703
+ light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
5406
5704
  },
5407
5705
  info: {
5408
- dark: colors.blue[600],
5409
- light: colors.blue[200],
5706
+ dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
5707
+ light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
5410
5708
  },
5411
5709
  pending: {
5412
- dark: colors.gray[600],
5413
- light: colors.gray[200],
5710
+ dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
5711
+ light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
5414
5712
  },
5415
5713
  success: {
5416
- dark: colors.green[600],
5417
- light: colors.green[200],
5714
+ dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
5715
+ light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
5418
5716
  },
5419
5717
  warning: {
5420
- dark: colors.yellow[600],
5421
- light: colors.yellow[200],
5718
+ dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
5719
+ light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
5422
5720
  },
5423
5721
  };
5424
5722
  var statusColors = statusToColors[status];
@@ -5426,11 +5724,11 @@ function createStatusCss(props, status) {
5426
5724
  }
5427
5725
  var statusToCss = {
5428
5726
  beta: beta,
5429
- error: error$2,
5727
+ error: error,
5430
5728
  info: info,
5431
5729
  pending: pending,
5432
5730
  success: success,
5433
- warning: warning$2,
5731
+ warning: warning,
5434
5732
  };
5435
5733
  var doNotForwardProps$g = ["isRounded"];
5436
5734
  var StyledChip = styled(Chip$1, {
@@ -5473,9 +5771,11 @@ var doNotForwardProps$f = [
5473
5771
  var StyledHeaderTitle = styled("div", {
5474
5772
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
5475
5773
  })(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
5774
+ var _a;
5476
5775
  var search = props.search;
5477
5776
  var spaces = getSpaces(props);
5478
- return "\n padding-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 ");
5777
+ var semanticColors = getSemanticColors(props);
5778
+ 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 margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
5479
5779
  });
5480
5780
  var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$k || (templateObject_2$k = __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);
5481
5781
  var StyledPopper = styled(Popper, {
@@ -5487,16 +5787,18 @@ var StyledPopper = styled(Popper, {
5487
5787
  var borders = getBorders(props);
5488
5788
  var corners = getCorners(props);
5489
5789
  var shadows = getShadows(props);
5490
- var semanticComponentColors = getSemanticComponentColors(props);
5491
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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 z-index: 1400;\n ");
5790
+ var semanticColors = getSemanticColors(props);
5791
+ 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 ");
5492
5792
  });
5493
5793
  var StyledPaper$1 = styled(Paper, {
5494
5794
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
5495
5795
  })(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5796
+ var _a;
5496
5797
  var spaces = getSpaces(props);
5497
5798
  var borders = getBorders(props);
5498
5799
  var shadows = getShadows(props);
5499
- 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 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 ");
5800
+ var semanticColors = getSemanticColors(props);
5801
+ 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 ");
5500
5802
  });
5501
5803
  var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b;
5502
5804
 
@@ -5539,7 +5841,6 @@ var DropdownMenu = function (props) {
5539
5841
  var doNotForwardProps$e = [
5540
5842
  "intent",
5541
5843
  "state",
5542
- "sdsStage",
5543
5844
  "sdsType",
5544
5845
  "isMinimal",
5545
5846
  "shouldTruncateMinimalDetails",
@@ -5550,24 +5851,22 @@ var doNotForwardProps$e = [
5550
5851
  var labelFontBodyS = fontBody("s", "regular");
5551
5852
  var labelFontBodyXs = fontBody("xs", "regular");
5552
5853
  var inputDropdownStyles = function (props) {
5553
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5854
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
5554
5855
  var spaces = getSpaces(props);
5555
5856
  var borders = getBorders(props);
5556
- var semanticTextColors = getSemanticTextColors(props);
5557
- var semanticComponentColors = getSemanticComponentColors(props);
5857
+ var semanticColors = getSemanticColors(props);
5558
5858
  /**
5559
5859
  * (masoudmanson)
5560
5860
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
5561
5861
  */
5562
5862
  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");
5563
- return css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n 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: unset;\n border-color: black;\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 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: unset;\n border-color: black;\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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, padding, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.iconHover, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.primary, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.default, (_k = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _k === void 0 ? void 0 : _k.primary, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon);
5863
+ return css(templateObject_1$y || (templateObject_1$y = __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);
5564
5864
  };
5565
5865
  var minimal$1 = function (props) {
5566
5866
  var _a, _b, _c, _d, _e, _f, _g;
5567
5867
  var spaces = getSpaces(props);
5568
- var semanticTextColors = getSemanticTextColors(props);
5569
- var semanticComponentColors = getSemanticComponentColors(props);
5570
- return css(templateObject_2$j || (templateObject_2$j = __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\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\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(), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
5868
+ var semanticColors = getSemanticColors(props);
5869
+ return css(templateObject_2$j || (templateObject_2$j = __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);
5571
5870
  };
5572
5871
  var square$1 = function (props) {
5573
5872
  var corners = getCorners(props);
@@ -5577,39 +5876,39 @@ var rounded$1 = function (props) {
5577
5876
  var corners = getCorners(props);
5578
5877
  return css(templateObject_4$a || (templateObject_4$a = __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);
5579
5878
  };
5580
- var userInput$1 = function (props) {
5879
+ var userInput = function (props) {
5581
5880
  var _a, _b, _c, _d, _e, _f;
5582
5881
  var sdsStyle = props.sdsStyle;
5583
- var semanticTextColors = getSemanticTextColors(props);
5584
- var semanticComponentColors = getSemanticComponentColors(props);
5585
- return css(templateObject_5$6 || (templateObject_5$6 = __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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.primary, sdsStyle === "minimal"
5586
- ? "\n background-color: ".concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n border: none;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, ";\n\n path {\n fill: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n }\n ")
5882
+ var semanticColors = getSemanticColors(props);
5883
+ return css(templateObject_5$6 || (templateObject_5$6 = __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"
5884
+ ? "\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 ")
5587
5885
  : "");
5588
5886
  };
5589
5887
  var isOpen = function (props) {
5590
- var _a, _b;
5591
- var colors = getColors(props);
5592
- var semanticTextColors = getSemanticTextColors(props);
5593
- var semanticComponentColors = getSemanticComponentColors(props);
5594
- return css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
5595
- ? "& > span, &:hover > span { color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, "; }")
5596
- : "", (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400]);
5597
- };
5598
- var warning$1 = function (props) {
5599
- var colors = getColors(props);
5600
- var yellow = colors === null || colors === void 0 ? void 0 : colors.yellow[400];
5601
- return css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), yellow, yellow, yellow);
5888
+ var _a, _b, _c, _d, _e, _f, _g, _h;
5889
+ var sdsStyle = props.sdsStyle;
5890
+ var borders = getBorders(props);
5891
+ var semanticColors = getSemanticColors(props);
5892
+ return css(templateObject_6$3 || (templateObject_6$3 = __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"
5893
+ ? "\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 ")
5894
+ : "", (_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"
5895
+ ? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
5896
+ : "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);
5897
+ };
5898
+ var notice$1 = function (props) {
5899
+ var _a, _b, _c;
5900
+ var borders = getBorders(props);
5901
+ return css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
5602
5902
  };
5603
- var error$1 = function (props) {
5604
- var colors = getColors(props);
5605
- var red = colors === null || colors === void 0 ? void 0 : colors.red[400];
5606
- return css(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), red, red, red);
5903
+ var negative$1 = function (props) {
5904
+ var _a, _b, _c;
5905
+ var borders = getBorders(props);
5906
+ return css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
5607
5907
  };
5608
5908
  var isDisabled = function (props) {
5609
5909
  var _a, _b, _c, _d;
5610
- var semanticTextColors = getSemanticTextColors(props);
5611
- var semanticComponentColors = getSemanticComponentColors(props);
5612
- return css(templateObject_9 || (templateObject_9 = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
5910
+ var semanticColors = getSemanticColors(props);
5911
+ return css(templateObject_9 || (templateObject_9 = __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);
5613
5912
  };
5614
5913
  /**
5615
5914
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -5622,16 +5921,16 @@ var isDisabled = function (props) {
5622
5921
  var StyledInputDropdown = styled(Button, {
5623
5922
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5624
5923
  })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
5625
- var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
5626
- return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput$1(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
5924
+ var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
5925
+ return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" && sdsStyle !== "minimal" && notice$1(props), intent === "negative" && sdsStyle !== "minimal" && negative$1(props), state === "open" && isOpen(props), disabled && isDisabled(props));
5627
5926
  });
5628
5927
  var StyledDetail = styled("span", {
5629
5928
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5630
5929
  })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5631
5930
  var _a;
5632
5931
  var spaces = getSpaces(props);
5633
- var semanticTextColors = getSemanticTextColors(props);
5634
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
5932
+ var semanticColors = getSemanticColors(props);
5933
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
5635
5934
  });
5636
5935
  var StyledLabel$1 = styled("span", {
5637
5936
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5639,10 +5938,10 @@ var StyledLabel$1 = styled("span", {
5639
5938
  var _a, _b;
5640
5939
  var details = props.details, counter = props.counter, sdsType = props.sdsType;
5641
5940
  var fontWeights = getFontWeights(props);
5642
- var semanticTextColors = getSemanticTextColors(props);
5941
+ var semanticColors = getSemanticColors(props);
5643
5942
  var labelColor = details || counter !== undefined
5644
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary
5645
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary;
5943
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
5944
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
5646
5945
  return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
5647
5946
  });
5648
5947
  var StyledCounter = styled("span", {
@@ -5651,17 +5950,17 @@ var StyledCounter = styled("span", {
5651
5950
  var _a, _b;
5652
5951
  var corners = getCorners(props);
5653
5952
  var spaces = getSpaces(props);
5654
- var semanticComponentColors = getSemanticComponentColors(props);
5655
- var semanticTextColors = getSemanticTextColors(props);
5656
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.accent, ";\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 ");
5953
+ var semanticColors = getSemanticColors(props);
5954
+ 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 ");
5657
5955
  });
5658
5956
  var MinimalDetails = styled("div", {
5659
5957
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5660
- })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (_a) {
5661
- var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
5662
- if (shouldTruncateMinimalDetails) {
5663
- return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
5664
- }
5958
+ })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (props) {
5959
+ var _a;
5960
+ var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
5961
+ var semanticColors = getSemanticColors(props);
5962
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n ").concat(shouldTruncateMinimalDetails &&
5963
+ "overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
5665
5964
  });
5666
5965
  var LabelWrapper = styled("span", {
5667
5966
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5674,13 +5973,13 @@ var IconWrapper = styled("span", {
5674
5973
  })(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
5675
5974
  function labelStyle(props) {
5676
5975
  var _a, _b;
5677
- var semanticTextColors = getSemanticTextColors(props);
5976
+ var semanticColors = getSemanticColors(props);
5678
5977
  var labelColor = props.sdsType === "value"
5679
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary
5680
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary;
5978
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
5979
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
5681
5980
  return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
5682
5981
  }
5683
- var templateObject_1$y, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7$2, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
5982
+ var templateObject_1$y, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
5684
5983
 
5685
5984
  /**
5686
5985
  * @see https://mui.com/material-ui/react-button/
@@ -5743,14 +6042,18 @@ function renderDetailsText(_a) {
5743
6042
  }
5744
6043
 
5745
6044
  var tagSizeS = function (props) {
6045
+ var _a;
5746
6046
  var spaces = getSpaces(props);
5747
6047
  var iconSizes = getIconSizes(props);
5748
- return css(templateObject_1$x || (templateObject_1$x = __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: white;\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: white;\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), 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);
6048
+ var semanticColors = getSemanticColors(props);
6049
+ return css(templateObject_1$x || (templateObject_1$x = __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);
5749
6050
  };
5750
6051
  var tagSizeL = function (props) {
6052
+ var _a;
5751
6053
  var spaces = getSpaces(props);
5752
6054
  var iconSizes = getIconSizes(props);
5753
- return css(templateObject_2$i || (templateObject_2$i = __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: white;\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: white;\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), 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);
6055
+ var semanticColors = getSemanticColors(props);
6056
+ return css(templateObject_2$i || (templateObject_2$i = __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);
5754
6057
  };
5755
6058
  var rounded = function (props) {
5756
6059
  var corners = getCorners(props);
@@ -5768,8 +6071,8 @@ var square = function (props) {
5768
6071
  };
5769
6072
  var withHover = function (props) {
5770
6073
  var _a;
5771
- var semanticTextColors = getSemanticTextColors(props);
5772
- return css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.onFill);
6074
+ var semanticColors = getSemanticColors(props);
6075
+ return css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
5773
6076
  };
5774
6077
  var primary = function (props) {
5775
6078
  return createTypeCss(props, "primary");
@@ -5778,57 +6081,61 @@ var secondary = function (props) {
5778
6081
  return createTypeCss(props, "secondary");
5779
6082
  };
5780
6083
  function generatePrimaryTagColors(intent, colors, semanticColors) {
6084
+ var _a, _b, _c, _d;
5781
6085
  if (intent) {
5782
6086
  return {
5783
- background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fill,
6087
+ background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPrimary,
5784
6088
  backgroundClicked: colors.length >= 2
5785
6089
  ? darken(colors[1], 0.3)
5786
6090
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
5787
6091
  backgroundHover: colors.length >= 2
5788
6092
  ? darken(colors[1], 0.15)
5789
6093
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
5790
- iconColor: colors.length > 2 ? colors[2] : "white",
5791
- label: colors.length ? colors[0] : "white",
6094
+ iconColor: colors.length > 2
6095
+ ? colors[2]
6096
+ : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
6097
+ label: colors.length
6098
+ ? colors[0]
6099
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
5792
6100
  };
5793
6101
  }
5794
6102
  else {
5795
6103
  return {
5796
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fill,
6104
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
5797
6105
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5798
6106
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
5799
- iconColor: "white",
5800
- label: "white",
6107
+ iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
6108
+ label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
5801
6109
  };
5802
6110
  }
5803
6111
  }
5804
6112
  function generateSecondaryTagColors(intent, colors, semanticColors) {
5805
6113
  if (intent) {
5806
6114
  return {
5807
- background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].surface,
6115
+ background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillSecondary,
5808
6116
  backgroundClicked: colors.length >= 2
5809
6117
  ? darken(colors[1], 0.3)
5810
6118
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
5811
6119
  backgroundHover: colors.length >= 2
5812
6120
  ? darken(colors[1], 0.15)
5813
6121
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
5814
- iconColor: colors.length > 2 ? colors[2] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].icon,
5815
- label: colors.length ? colors[0] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
6122
+ iconColor: colors.length > 2 ? colors[2] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].ornament,
6123
+ label: colors.length ? colors[0] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].text,
5816
6124
  };
5817
6125
  }
5818
6126
  else {
5819
6127
  return {
5820
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surface,
6128
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
5821
6129
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5822
6130
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
5823
- iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.icon,
6131
+ iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
5824
6132
  label: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5825
6133
  };
5826
6134
  }
5827
6135
  }
5828
6136
  function createTypeCss(props, type) {
5829
6137
  var _a, _b;
5830
- var semanticColors = getSemanticComponentColors(props);
5831
- var semanticTextColors = getSemanticTextColors(props);
6138
+ var semanticColors = getSemanticColors(props);
5832
6139
  var intent = typeof props.tagColor === "string" ? props.tagColor : null;
5833
6140
  var colors = Array.isArray(props.tagColor) ? __spreadArray([], props.tagColor, true) : [];
5834
6141
  var typeToColors = {
@@ -5836,7 +6143,7 @@ function createTypeCss(props, type) {
5836
6143
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
5837
6144
  };
5838
6145
  var typeColors = typeToColors[type];
5839
- return css(templateObject_6$2 || (templateObject_6$2 = __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(), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.onFill, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6146
+ return css(templateObject_6$2 || (templateObject_6$2 = __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);
5840
6147
  }
5841
6148
  var typeToCss = {
5842
6149
  primary: primary,
@@ -5851,13 +6158,13 @@ var doNotForwardProps$d = [
5851
6158
  ];
5852
6159
  var StyledTag$1 = styled(Chip$1, {
5853
6160
  shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
5854
- })(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
6161
+ })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
5855
6162
  var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
5856
6163
  var isRounded = sdsStyle === "rounded";
5857
6164
  var type = sdsType || "primary";
5858
6165
  return css(templateObject_7$1 || (templateObject_7$1 = __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;");
5859
6166
  });
5860
- var templateObject_1$x, templateObject_2$i, templateObject_3$a, templateObject_4$9, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8$1;
6167
+ var templateObject_1$x, templateObject_2$i, templateObject_3$a, templateObject_4$9, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8;
5861
6168
 
5862
6169
  /**
5863
6170
  * @see https://mui.com/material-ui/react-chip/
@@ -5872,10 +6179,11 @@ var Tag = function (props) {
5872
6179
  };
5873
6180
 
5874
6181
  var StyledTag = styled(Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5875
- var _a, _b, _c, _d;
6182
+ var _a, _b, _c, _d, _e, _f, _g;
5876
6183
  var spaces = getSpaces(props);
5877
6184
  var iconSizes = getIconSizes(props);
5878
- return css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: ", "px ", "px;\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\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, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.width, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.width, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.height);
6185
+ var semanticColors = getSemanticColors(props);
6186
+ return css(templateObject_1$w || (templateObject_1$w = __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);
5879
6187
  });
5880
6188
  var templateObject_1$w, templateObject_2$h;
5881
6189
 
@@ -5934,7 +6242,7 @@ var ComplexFilter = function (_a) {
5934
6242
  // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
5935
6243
  // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
5936
6244
  // * such as sliders for ranges, inline multi selects, etc.
5937
- return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
6245
+ return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: multiple ? pendingValue : value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
5938
6246
  function handleClick(event) {
5939
6247
  if (open) {
5940
6248
  if (multiple) {
@@ -6001,10 +6309,12 @@ var doNotForwardProps$c = ["sdsSize"];
6001
6309
  var StyledPaper = styled(Paper, {
6002
6310
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
6003
6311
  })(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
6312
+ var _a;
6004
6313
  var spaces = getSpaces(props);
6005
6314
  var corners = getCorners(props);
6006
6315
  var shadows = getShadows(props);
6007
- return "\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 ");
6316
+ var semanticColors = getSemanticColors(props);
6317
+ 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 ");
6008
6318
  });
6009
6319
  function paperDimensions(props) {
6010
6320
  var sdsSize = props.sdsSize;
@@ -6112,19 +6422,19 @@ var StyledDialogTitle = styled(DialogTitle$1)(templateObject_1$q || (templateObj
6112
6422
  });
6113
6423
  var Title = styled(Typography)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6114
6424
  var _a;
6115
- var palette = getPalette(props);
6116
- return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, ";\n ");
6425
+ var semanticColors = getSemanticColors(props);
6426
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
6117
6427
  });
6118
6428
  var Subtitle = styled(Typography)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
6119
6429
  var _a;
6120
- var palette = getPalette(props);
6121
- return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.secondary, ";\n ");
6430
+ var semanticColors = getSemanticColors(props);
6431
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
6122
6432
  });
6123
6433
  var Overline = styled(Typography)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6124
6434
  var _a;
6125
- var palette = getPalette(props);
6435
+ var semanticColors = getSemanticColors(props);
6126
6436
  var spaces = getSpaces(props);
6127
- return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.secondary, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
6437
+ 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 ");
6128
6438
  });
6129
6439
  var templateObject_1$q, templateObject_2$f, templateObject_3$9, templateObject_4$8;
6130
6440
 
@@ -6182,7 +6492,7 @@ var Dropdown = function (props) {
6182
6492
  setValue(propValue);
6183
6493
  }
6184
6494
  }, [isControlled, propValue]);
6185
- return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
6495
+ return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
6186
6496
  function getInitialValue() {
6187
6497
  return multiple
6188
6498
  ? []
@@ -6327,14 +6637,14 @@ var StyledCheckbox = styled(Checkbox)(templateObject_1$o || (templateObject_1$o
6327
6637
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6328
6638
  var iconSizes = getIconSizes(props);
6329
6639
  var spaces = getSpaces(props);
6330
- var semanticComponentColors = getSemanticComponentColors(props);
6640
+ var semanticColors = getSemanticColors(props);
6331
6641
  var intentToColor = {
6332
6642
  default: "base",
6333
- error: "negative",
6334
- warning: "notice",
6643
+ negative: "negative",
6644
+ notice: "notice",
6335
6645
  };
6336
6646
  var checkboxColor = intentToColor[intent];
6337
- return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(checkboxClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(checkboxClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(checkboxClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\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 ");
6647
+ 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 ");
6338
6648
  });
6339
6649
  var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6340
6650
  var spaces = getSpaces(props);
@@ -6348,8 +6658,8 @@ var StyledCheckboxLabel = styled("span")(templateObject_4$7 || (templateObject_4
6348
6658
  var StyledCheckboxCaption = styled("span")(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6349
6659
  var _a, _b;
6350
6660
  var disabled = props.disabled;
6351
- var semanticTextColors = getSemanticTextColors(props);
6352
- return "\n color: ".concat(disabled ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary, ";\n ");
6661
+ var semanticColors = getSemanticColors(props);
6662
+ 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 ");
6353
6663
  });
6354
6664
  var templateObject_1$o, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
6355
6665
 
@@ -6407,14 +6717,14 @@ var StyledRadioButton = styled(Radio)(templateObject_1$n || (templateObject_1$n
6407
6717
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6408
6718
  var spaces = getSpaces(props);
6409
6719
  var iconSizes = getIconSizes(props);
6410
- var semanticComponentColors = getSemanticComponentColors(props);
6720
+ var semanticColors = getSemanticColors(props);
6411
6721
  var intentToColor = {
6412
6722
  default: "base",
6413
- error: "negative",
6414
- warning: "notice",
6723
+ negative: "negative",
6724
+ notice: "notice",
6415
6725
  };
6416
6726
  var radioColor = intentToColor[intent];
6417
- return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(radioClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(radioClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(radioClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\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 ");
6727
+ 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 ");
6418
6728
  });
6419
6729
  var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6420
6730
  var spaces = getSpaces(props);
@@ -6428,8 +6738,8 @@ var StyledRadioLabel = styled("span")(templateObject_4$6 || (templateObject_4$6
6428
6738
  var StyledRadioCaption = styled("span")(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6429
6739
  var _a, _b;
6430
6740
  var disabled = props.disabled;
6431
- var semanticTextColors = getSemanticTextColors(props);
6432
- return "\n color: ".concat(disabled ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary, ";\n ");
6741
+ var semanticColors = getSemanticColors(props);
6742
+ 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 ");
6433
6743
  });
6434
6744
  var templateObject_1$n, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3;
6435
6745
 
@@ -6461,13 +6771,11 @@ var InputRadio = function (props) {
6461
6771
  };
6462
6772
 
6463
6773
  var inputSlider = function (props) {
6464
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6774
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
6465
6775
  var corners = getCorners(props);
6466
- var colors = getColors(props);
6467
6776
  var shadows = getShadows(props);
6468
- var semanticComponentColors = getSemanticComponentColors(props);
6469
- var semanticTextColors = getSemanticTextColors(props);
6470
- 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(sliderClasses.track, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, ";\n }\n\n .").concat(sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fill, ";\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surface, " !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: black;\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.surface, ";\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((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(sliderClasses.mark, ".").concat(sliderClasses.markActive, " {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.surface, ";\n }\n\n .").concat(sliderClasses.markLabel, " {\n ").concat((_h = fontBodyXxxs$1(props)) === null || _h === void 0 ? void 0 : _h.styles, "\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n\n .").concat(sliderClasses.markLabelActive, " {\n color: ").concat((_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.primary, ";\n }\n ");
6777
+ var semanticColors = getSemanticColors(props);
6778
+ 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 ");
6471
6779
  };
6472
6780
  var horizontal = function (props) {
6473
6781
  var marks = props.marks;
@@ -6475,11 +6783,11 @@ var horizontal = function (props) {
6475
6783
  return "\n .".concat(sliderClasses.rail, ",\n .").concat(sliderClasses.track, " {\n border: none;\n height: 4px;\n }\n\n // Adjust the position of the first mark by moving it 2px to the right to fit it inside the track\n span[data-index=\"0\"].").concat(sliderClasses.mark, " {\n left: 2px !important;\n }\n\n // Adjust the position of the last mark by moving it 2px to the left to fit it inside the track\n span[data-index=\"").concat(lastMarkIndex, "\"].").concat(sliderClasses.mark, " {\n left: calc(100% - 2px) !important;\n }\n \n .").concat(sliderClasses.markLabel, " {\n top: 26px;\n }\n\n .").concat(sliderClasses.disabled, " .").concat(sliderClasses.track, " {\n border: none;\n }\n ");
6476
6784
  };
6477
6785
  var disabledSlider = function (props) {
6478
- var _a, _b, _c, _d, _e, _f;
6786
+ var _a, _b, _c, _d, _e, _f, _g;
6479
6787
  var colors = getColors(props);
6480
- var semanticComponentColors = getSemanticComponentColors(props);
6481
- var semanticTextColors = getSemanticTextColors(props);
6482
- return "\n .".concat(sliderClasses.track, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(sliderClasses.thumb, ".").concat(sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary, ";\n \n & * {\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.disabled, ";\n }\n }\n\n .").concat(sliderClasses.markLabel, " {\n color: ").concat((_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled, "\n }\n\n .").concat(sliderClasses.mark, " {\n background-color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled, ";\n }\n ");
6788
+ var semanticColors = getSemanticColors(props);
6789
+ var mode = getMode(props);
6790
+ 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 ");
6483
6791
  };
6484
6792
  var StyledSlider = styled(Slider)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6485
6793
  var disabled = props.disabled;
@@ -6495,41 +6803,30 @@ var InputSlider = forwardRef(function (props, ref) {
6495
6803
  return (jsx(StyledSlider, __assign({ ref: ref, min: min, max: max }, rest, { orientation: "horizontal", "aria-label": "Slider - min ".concat(min, " to max ").concat(max) })));
6496
6804
  });
6497
6805
 
6498
- var sdsPropNames$1 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
6499
- var error = function (props) {
6806
+ var sdsPropNames$1 = ["sdsStyle", "sdsType", "intent", "hideLabel"];
6807
+ var negative = function (props) {
6500
6808
  var _a, _b, _c, _d;
6501
6809
  var borders = getBorders(props);
6502
- var semanticComponentColors = getSemanticComponentColors(props);
6503
- return css(templateObject_1$l || (templateObject_1$l = __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.negative) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _b === void 0 ? void 0 : _b.default, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
6810
+ var semanticColors = getSemanticColors(props);
6811
+ return css(templateObject_1$l || (templateObject_1$l = __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.negative) === 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);
6504
6812
  };
6505
- var warning = function (props) {
6813
+ var notice = function (props) {
6506
6814
  var _a, _b, _c, _d;
6507
6815
  var borders = getBorders(props);
6508
- var semanticComponentColors = getSemanticComponentColors(props);
6509
- return css(templateObject_2$b || (templateObject_2$b = __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.notice) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _b === void 0 ? void 0 : _b.default, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
6816
+ var semanticColors = getSemanticColors(props);
6817
+ return css(templateObject_2$b || (templateObject_2$b = __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.notice) === 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);
6510
6818
  };
6511
6819
  var disabledStyled$1 = function (props) {
6512
- var _a, _b;
6820
+ var _a, _b, _c;
6513
6821
  var borders = getBorders(props);
6514
- var colors = getColors(props);
6515
- return css(templateObject_3$6 || (templateObject_3$6 = __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, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
6822
+ var semanticColors = getSemanticColors(props);
6823
+ return css(templateObject_3$6 || (templateObject_3$6 = __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);
6516
6824
  };
6517
6825
  var textArea = function (props) {
6518
6826
  var spaces = getSpaces(props);
6519
6827
  return css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, outlinedInputClasses.inputMultiline, 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);
6520
6828
  };
6521
- var userInput = function (props) {
6522
- var _a, _b, _c;
6523
- var intent = props.intent;
6524
- var borders = getBorders(props);
6525
- var border = intent === "error"
6526
- ? (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default
6527
- : intent === "warning"
6528
- ? (_b = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _b === void 0 ? void 0 : _b.default
6529
- : (_c = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _c === void 0 ? void 0 : _c.default;
6530
- return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border);
6531
- };
6532
- var StyledLabel = styled("label")(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6829
+ var StyledLabel = styled("label")(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6533
6830
  var spaces = getSpaces(props);
6534
6831
  return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
6535
6832
  });
@@ -6537,16 +6834,16 @@ var StyledInputBase = styled(TextField, {
6537
6834
  shouldForwardProp: function (prop) {
6538
6835
  return !sdsPropNames$1.includes(prop.toString());
6539
6836
  },
6540
- })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6837
+ })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6541
6838
  var _a, _b, _c, _d;
6542
- var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
6839
+ var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
6543
6840
  var spaces = getSpaces(props);
6544
6841
  var borders = getBorders(props);
6545
6842
  var corners = getCorners(props);
6546
- var semanticComponentColors = getSemanticComponentColors(props);
6547
- return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\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 }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\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 }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\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.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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(), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, 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 === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
6843
+ var semanticColors = getSemanticColors(props);
6844
+ return css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\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 }\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 margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\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 }\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 "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, 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" && negative(props), intent === "notice" && notice(props), disabled && disabledStyled$1(props));
6548
6845
  });
6549
- var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
6846
+ var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7;
6550
6847
 
6551
6848
  /**
6552
6849
  * @see https://mui.com/material-ui/react-text-field/
@@ -6566,15 +6863,6 @@ var InputText = forwardRef(function InputText(props, ref) {
6566
6863
  * user is tabbing, we can apply different styles for :focus and :focus-visible states.
6567
6864
  */
6568
6865
  useDetectUserTabbing((ref ? ref : inputRef));
6569
- var _b = useState(false), hasValue = _b[0], setHasValue = _b[1];
6570
- var handleChange = function (event) {
6571
- if (event.target.value) {
6572
- setHasValue(true);
6573
- }
6574
- else {
6575
- setHasValue(false);
6576
- }
6577
- };
6578
6866
  var inputProps = {
6579
6867
  "aria-label": "".concat(label),
6580
6868
  };
@@ -6584,7 +6872,7 @@ var InputText = forwardRef(function InputText(props, ref) {
6584
6872
  return jsx(Fragment, {});
6585
6873
  }
6586
6874
  var finalLabel = typeof label === "string" ? (jsx(StyledLabel, { htmlFor: id, children: label })) : (label);
6587
- return (jsxs(Fragment, { children: [!hideLabel && finalLabel, jsx(StyledInputBase, __assign({ ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
6875
+ return (jsxs(Fragment, { children: [!hideLabel && finalLabel, jsx(StyledInputBase, __assign({ ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsType: sdsType }, rest))] }));
6588
6876
  });
6589
6877
 
6590
6878
  var toggle = function (props) {
@@ -6593,31 +6881,28 @@ var toggle = function (props) {
6593
6881
  var corners = getCorners(props);
6594
6882
  var shadows = getShadows(props);
6595
6883
  var iconSizes = getIconSizes(props);
6596
- var semanticComponentColors = getSemanticComponentColors(props);
6597
- 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(), "\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n width: unset;\n }\n ");
6884
+ var semanticColors = getSemanticColors(props);
6885
+ 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 ");
6598
6886
  };
6599
6887
  var toggleOn = function (props) {
6600
- var _a, _b, _c, _d, _e, _f, _g;
6888
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6601
6889
  var disabled = props.disabled, value = props.value;
6602
6890
  var borders = getBorders(props);
6603
- var colors = getColors(props);
6604
6891
  var spaces = getSpaces(props);
6605
- var semanticComponentColors = getSemanticComponentColors(props);
6606
- var semanticTextColors = getSemanticTextColors(props);
6607
- return "\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.accent) === 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 .").concat(switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderDisabled : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6608
- "&: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(colors === null || colors === void 0 ? void 0 : colors.blue[500], ";\n }\n }"), "\n ");
6892
+ var semanticColors = getSemanticColors(props);
6893
+ 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 &&
6894
+ "&: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 ");
6609
6895
  };
6610
6896
  var toggleOff = function (props) {
6611
- var _a, _b, _c, _d, _e, _f, _g, _h;
6897
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
6612
6898
  var disabled = props.disabled, value = props.value;
6613
6899
  var borders = getBorders(props);
6614
6900
  var spaces = getSpaces(props);
6615
- var semanticComponentColors = getSemanticComponentColors(props);
6616
- var semanticTextColors = getSemanticTextColors(props);
6901
+ var semanticColors = getSemanticColors(props);
6617
6902
  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
6618
- ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled
6619
- : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
6620
- "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.black, ";\n\n .").concat(switchClasses.thumb, " {\n color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.iconHover, ";\n }\n }"), "\n ");
6903
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
6904
+ : (_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 &&
6905
+ "&: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 ");
6621
6906
  };
6622
6907
  var Toggle = styled(Switch)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
6623
6908
  var checked = props.checked;
@@ -6645,13 +6930,14 @@ var doNotForwardProps$9 = ["sdsStyle", "sdsSize", "fontWeight"];
6645
6930
  var defaultStyle = function (props) {
6646
6931
  var _a, _b, _c, _d, _e, _f, _g;
6647
6932
  var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
6648
- var semanticTextColors = getSemanticTextColors(props);
6649
- var semanticComponentColors = getSemanticComponentColors(props);
6650
- return css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "], ["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default, sdsSize === "s" ? -4 : -3, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _b === void 0 ? void 0 : _b.hover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _d === void 0 ? void 0 : _d.hover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _f === void 0 ? void 0 : _f.pressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
6933
+ var semanticColors = getSemanticColors(props);
6934
+ return css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "], ["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, sdsSize === "s" ? -4 : -3, (_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.borderHover, (_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.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.textActionPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
6651
6935
  };
6652
6936
  var dashedStyle = function (props) {
6653
- var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a;
6654
- return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n background-image: linear-gradient(to right, black 60%, transparent 60%);\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(to right, black 60%, black 60%);\n }\n }\n "], ["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n background-image: linear-gradient(to right, black 60%, transparent 60%);\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(to right, black 60%, black 60%);\n }\n }\n "])), sdsSize === "s" ? -4 : -3);
6937
+ var _a, _b, _c;
6938
+ var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
6939
+ var semanticColors = getSemanticColors(props);
6940
+ return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n margin-left: 1px;\n width: 100%;\n background-image: linear-gradient(\n to right,\n ", " 60%,\n transparent 60%\n );\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(\n to right,\n ", " 60%,\n ", " 60%\n );\n }\n }\n "], ["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n margin-left: 1px;\n width: 100%;\n background-image: linear-gradient(\n to right,\n ", " 60%,\n transparent 60%\n );\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(\n to right,\n ", " 60%,\n ", " 60%\n );\n }\n }\n "])), sdsSize === "s" ? -4 : -3, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover);
6655
6941
  };
6656
6942
  var smallStyle = function (props) {
6657
6943
  return fontBodyS$1(props);
@@ -6788,16 +7074,14 @@ var StyledText = styled("span")(templateObject_1$f || (templateObject_1$f = __ma
6788
7074
  var minimal = function (props) {
6789
7075
  var _a, _b;
6790
7076
  var iconSizes = getIconSizes(props);
6791
- var semanticComponentColors = getSemanticComponentColors(props);
6792
- var semanticTextColors = getSemanticTextColors(props);
6793
- return css(templateObject_2$8 || (templateObject_2$8 = __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 = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon);
7077
+ var semanticColors = getSemanticColors(props);
7078
+ return css(templateObject_2$8 || (templateObject_2$8 = __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);
6794
7079
  };
6795
7080
  var tag = function (props) {
6796
7081
  var _a, _b, _c;
6797
7082
  var corners = getCorners(props);
6798
- var semanticComponentColors = getSemanticComponentColors(props);
6799
- var semanticTextColors = getSemanticTextColors(props);
6800
- return css(templateObject_3$4 || (templateObject_3$4 = __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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.surface, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.accent, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.icon);
7083
+ var semanticColors = getSemanticColors(props);
7084
+ return css(templateObject_3$4 || (templateObject_3$4 = __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);
6801
7085
  };
6802
7086
  var doNotForwardProps$6 = ["sdsStyle"];
6803
7087
  var StyledLoadingIndicator = styled("div", {
@@ -6816,8 +7100,10 @@ var LoadingIndicator = function (_a) {
6816
7100
  };
6817
7101
 
6818
7102
  var StyledMenu = styled(Menu$1)(templateObject_1$e || (templateObject_1$e = __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) {
7103
+ var _a;
6819
7104
  var spaces = getSpaces(props);
6820
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7105
+ var semanticColors = getSemanticColors(props);
7106
+ 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 ");
6821
7107
  });
6822
7108
  var templateObject_1$e;
6823
7109
 
@@ -6844,7 +7130,7 @@ var StyledAutocomplete = styled(Autocomplete$1, {
6844
7130
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
6845
7131
  })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
6846
7132
  var search = _a.search;
6847
- return !search && "height: 0;";
7133
+ return !search && "height: 0; margin: 0 !important;";
6848
7134
  });
6849
7135
  var InputBaseWrapper = styled("div", {
6850
7136
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
@@ -6974,18 +7260,17 @@ var StyledTabs$1 = styled(Tabs$1, {
6974
7260
  shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
6975
7261
  })(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6976
7262
  var _a, _b;
6977
- var _c = props.sdsIndicatorColor, sdsIndicatorColor = _c === void 0 ? "info" : _c;
6978
7263
  var spaces = getSpaces(props);
6979
- var semanticComponentColors = getSemanticComponentColors(props);
6980
- return "\n &:before {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").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 position: sticky;\n overflow: visible;\n\n .").concat(tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[sdsIndicatorColor]) === null || _b === void 0 ? void 0 : _b.fill, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
7264
+ var semanticColors = getSemanticColors(props);
7265
+ return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").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 position: sticky;\n overflow: visible;\n\n .").concat(tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
6981
7266
  });
6982
7267
  var StyledTab$1 = styled(Tab$1, {
6983
7268
  shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
6984
7269
  })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
6985
- var _a, _b;
7270
+ var _a, _b, _c, _d;
6986
7271
  var spaces = getSpaces(props);
6987
- var semanticComponentColors = getSemanticComponentColors(props);
6988
- return "\n ".concat(focusVisibleA11yStyle(), "\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.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: black;\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: black;\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.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 ");
7272
+ var semanticColors = getSemanticColors(props);
7273
+ 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 ");
6989
7274
  });
6990
7275
  var templateObject_1$c, templateObject_2$6;
6991
7276
 
@@ -7043,7 +7328,7 @@ function useInView(items) {
7043
7328
  }
7044
7329
 
7045
7330
  var NavigationJumpTo = forwardRef(function (props, ref) {
7046
- var items = props.items, indicatorColor = props.indicatorColor, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "indicatorColor", "offsetTop", "onChange"]);
7331
+ var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
7047
7332
  var _b = useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
7048
7333
  var _c = useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
7049
7334
  var _d = useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
@@ -7123,7 +7408,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7123
7408
  useScrollStopListener(function () {
7124
7409
  setNavItemClicked(false);
7125
7410
  });
7126
- return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", sdsIndicatorColor: indicatorColor }, rest, { children: items.map(function (_a, index) {
7411
+ return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to" }, rest, { children: items.map(function (_a, index) {
7127
7412
  var _b;
7128
7413
  var title = _a.title, elementRef = _a.elementRef;
7129
7414
  return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
@@ -7142,19 +7427,18 @@ var StyledNotification = styled(Alert$2, {
7142
7427
  var shadows = getShadows(props);
7143
7428
  var corners = getCorners(props);
7144
7429
  var iconSizes = getIconSizes(props);
7145
- var semanticComponentColors = getSemanticComponentColors(props);
7146
- var semanticTextColors = getSemanticTextColors(props);
7430
+ var semanticColors = getSemanticColors(props);
7147
7431
  var typography = getTypography(props);
7148
- var borderColor = (_b = (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[intent]) === null || _a === void 0 ? void 0 : _a.border) !== null && _b !== void 0 ? _b : "black";
7149
- var iconColor = (_d = (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[intent]) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : "black";
7150
- var backgroundColor = (_f = (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[intent]) === null || _e === void 0 ? void 0 : _e.surface) !== null && _f !== void 0 ? _f : "white";
7432
+ var borderColor = (_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";
7433
+ var iconColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.ornament) !== null && _d !== void 0 ? _d : "black";
7434
+ var backgroundColor = (_f = (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _e === void 0 ? void 0 : _e.surfacePrimary) !== null && _f !== void 0 ? _f : "white";
7151
7435
  // (masoudmanson): The Notification Icon should be vertically centered with the Notification
7152
7436
  // Title. The padding-top of the Notification Title is calculated based on the difference
7153
7437
  // between the height of the Icon and the line-height of the Notification Title.
7154
7438
  var alertMessagePaddingTop = Math.abs((((_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _g !== void 0 ? _g : 0) -
7155
7439
  parseInt(String((_m = (_l = (_k = (_j = (_h = typography === null || typography === void 0 ? void 0 : typography.styles) === null || _h === void 0 ? void 0 : _h.body) === null || _j === void 0 ? void 0 : _j.regular) === null || _k === void 0 ? void 0 : _k.xs) === null || _l === void 0 ? void 0 : _l.lineHeight) !== null && _m !== void 0 ? _m : "0"))) /
7156
7440
  2);
7157
- 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((_o = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _o === void 0 ? void 0 : _o.primary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: flex-start;\n border-left: 5px solid;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n border-color: ").concat(borderColor, ";\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 ");
7441
+ 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((_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: flex-start;\n border-left: 5px solid;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n border-color: ").concat(borderColor, ";\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 ");
7158
7442
  });
7159
7443
  var StyledButtonWrapper = styled("div")(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7160
7444
  var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
@@ -7223,8 +7507,8 @@ var doNotForwardProps$2 = [
7223
7507
  ];
7224
7508
  var StyledPaginationButton = styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7225
7509
  var _a, _b, _c;
7226
- var semanticComponentColors = getSemanticComponentColors(props);
7227
- return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, "\n }\n\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, "\n }\n }\n ");
7510
+ var semanticColors = getSemanticColors(props);
7511
+ 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 ");
7228
7512
  });
7229
7513
  var StyledPaginationChevronList = styled("li", {
7230
7514
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7232,17 +7516,16 @@ var StyledPaginationChevronList = styled("li", {
7232
7516
  var _a, _b, _c, _d, _e;
7233
7517
  var disabled = props.disabled;
7234
7518
  var spaces = getSpaces(props);
7235
- var semanticComponentColors = getSemanticComponentColors(props);
7236
- 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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(), "\n ");
7519
+ var semanticColors = getSemanticColors(props);
7520
+ 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 ");
7237
7521
  });
7238
7522
  var StyledPagination = styled("ul", {
7239
7523
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
7240
7524
  })(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n ", "\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n & li {\n list-style: none;\n }\n"], ["\n ", "\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n & li {\n list-style: none;\n }\n"])), fontBodyS$1);
7241
7525
  var selectedPageStyle = function (props) {
7242
7526
  var _a, _b, _c, _d;
7243
- var semanticComponentColors = getSemanticComponentColors(props);
7244
- var semanticTextColors = getSemanticTextColors(props);
7245
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillSelected, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, ";\n\n &:hover {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillSelected, ";\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, ";\n }\n ");
7527
+ var semanticColors = getSemanticColors(props);
7528
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillSelected, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillSelected, ";\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse, ";\n }\n ");
7246
7529
  };
7247
7530
  var Page = styled("li", {
7248
7531
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7251,9 +7534,8 @@ var Page = styled("li", {
7251
7534
  var selected = props.selected, sdsStyle = props.sdsStyle;
7252
7535
  var spaces = getSpaces(props);
7253
7536
  var corners = getCorners(props);
7254
- var semanticComponentColors = getSemanticComponentColors(props);
7255
- var semanticTextColors = getSemanticTextColors(props);
7256
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\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 = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(), "\n ");
7537
+ var semanticColors = getSemanticColors(props);
7538
+ 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 ");
7257
7539
  });
7258
7540
  var templateObject_1$a, templateObject_2$4, templateObject_3$2, templateObject_4$1;
7259
7541
 
@@ -7382,10 +7664,10 @@ var doNotForwardProps$1 = ["buttonDefinition"];
7382
7664
  var StyledSegmentedControl = styled(ToggleButtonGroup, {
7383
7665
  shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
7384
7666
  })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7385
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7667
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
7386
7668
  var spaces = getSpaces(props);
7387
- var semanticComponentColors = getSemanticComponentColors(props);
7388
- return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, ";\n border-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n &:hover {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n .").concat(toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n border-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.border, ";\n line-height: 0px;\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconHover, ";\n padding: ").concat(((_g = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _g !== void 0 ? _g : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.border, ";\n background-color: ").concat((_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.fillHover, ";\n }\n }\n ");
7669
+ var semanticColors = getSemanticColors(props);
7670
+ return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconSelected, ";\n border-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n &:hover {\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 .").concat(toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillPrimary, ";\n border-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.border, ";\n line-height: 0px;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconSecondary, ";\n padding: ").concat(((_h = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _h !== void 0 ? _h : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.border, ";\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n }\n ");
7389
7671
  });
7390
7672
  var templateObject_1$8;
7391
7673
 
@@ -7433,24 +7715,24 @@ var doNotForwardProps = [
7433
7715
  "hover",
7434
7716
  ];
7435
7717
  var disabledStyled = function (props) {
7436
- var _a, _b, _c;
7437
- var semanticComponentColors = getSemanticComponentColors(props);
7438
- var semanticTextColors = getSemanticTextColors(props);
7439
- return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, ";\n user-select: none;\n\n & span, & div {\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, ";\n }\n\n .cell-component {\n color: black;\n pointer-events: none;\n user-select: none;\n & span, & div {\n color: black;\n }\n\n svg {\n fill: black;\n }\n\n filter: grayscale(100%);\n opacity: 0.2;\n }\n ");
7718
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
7719
+ var semanticColors = getSemanticColors(props);
7720
+ var mode = getMode(props);
7721
+ 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 ");
7440
7722
  };
7441
7723
  var hoverStyled = function (props) {
7442
7724
  var _a;
7443
- var semanticComponentColors = getSemanticComponentColors(props);
7444
- return "\n &:hover {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n }\n ");
7725
+ var semanticColors = getSemanticColors(props);
7726
+ return "\n &:hover {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n }\n ");
7445
7727
  };
7446
7728
  var StyledTableRow = styled("tr", {
7447
7729
  shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
7448
7730
  })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
7449
7731
  var _a, _b;
7450
7732
  var rowHeight = props.rowHeight, _c = props.useDivider, useDivider = _c === void 0 ? true : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hover, hover = _f === void 0 ? true : _f;
7451
- var semanticComponentColors = getSemanticComponentColors(props);
7733
+ var semanticColors = getSemanticColors(props);
7452
7734
  var borders = getBorders(props);
7453
- return "\n align-items: center;\n border-bottom: ".concat(useDivider ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.table : borders === null || borders === void 0 ? void 0 : borders.none, ";\n\n ").concat(rowHeight ? "max-height: ".concat(rowHeight, "px;") : "", "\n\n ").concat(selected ? "background-color: ".concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.surface, ";") : "", "\n\n ").concat(hover && hoverStyled(props), ";\n\n ").concat(disabled && disabledStyled(props), "\n ");
7735
+ return "\n align-items: center;\n border-bottom: ".concat(useDivider ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.table : borders === null || borders === void 0 ? void 0 : borders.none, ";\n\n ").concat(rowHeight ? "max-height: ".concat(rowHeight, "px;") : "", "\n\n ").concat(selected ? "background-color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";") : "", "\n\n ").concat(hover && hoverStyled(props), ";\n\n ").concat(disabled && disabledStyled(props), "\n ");
7454
7736
  });
7455
7737
  var templateObject_1$6;
7456
7738
 
@@ -7463,8 +7745,9 @@ var TableRow = forwardRef(function (props, ref) {
7463
7745
  });
7464
7746
 
7465
7747
  var StyledTableHeader = styled("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7466
- var colors = getColors(props);
7467
- return "\n border-bottom: solid 2px ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n ");
7748
+ var _a;
7749
+ var semanticColors = getSemanticColors(props);
7750
+ return "\n border-bottom: solid 2px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderTable, ";\n ");
7468
7751
  });
7469
7752
  var templateObject_1$5;
7470
7753
 
@@ -7477,8 +7760,8 @@ var TabsContext = createContext({ sdsSize: "large" });
7477
7760
 
7478
7761
  var Wrapper = styled("span")(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7479
7762
  var _a, _b;
7480
- var semanticTextColors = getSemanticTextColors(props);
7481
- return "\n &:active {\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n }\n\n &:disabled {\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, ";\n }\n ");
7763
+ var semanticColors = getSemanticColors(props);
7764
+ return "\n &:active {\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n }\n\n &:disabled {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, ";\n }\n ");
7482
7765
  });
7483
7766
  var LABEL_DO_NOT_FORWARD_PROPS = ["sdsSize"];
7484
7767
  var Label = styled("span", {
@@ -7506,9 +7789,9 @@ var Count = styled("span", {
7506
7789
  return isLarge ? fontBodyXs$2(props) : fontBodyXxs$1(props);
7507
7790
  }, function (props) {
7508
7791
  var _a;
7509
- var semanticTextColors = getSemanticTextColors(props);
7792
+ var semanticColors = getSemanticColors(props);
7510
7793
  var spaces = getSpaces(props);
7511
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n\n .MuiChip-root {\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0;\n }\n ");
7794
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n .MuiChip-root {\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0;\n }\n ");
7512
7795
  });
7513
7796
  var templateObject_1$4, templateObject_2$3, templateObject_3$1;
7514
7797
 
@@ -7525,11 +7808,12 @@ var StyledTabs = styled(TempTabs, {
7525
7808
  return !TABS_DO_NOT_FORWARD_PROPS.includes(String(prop));
7526
7809
  },
7527
7810
  })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n box-sizing: border-box;\n padding-bottom: 0px;\n min-height: unset;\n position: relative;\n z-index: 1;\n overflow: inherit;\n\n & .MuiTabs-scroller {\n overflow: inherit !important;\n }\n\n ", "\n"], ["\n box-sizing: border-box;\n padding-bottom: 0px;\n min-height: unset;\n position: relative;\n z-index: 1;\n overflow: inherit;\n\n & .MuiTabs-scroller {\n overflow: inherit !important;\n }\n\n ", "\n"])), function (props) {
7528
- var underlined = props.underlined, _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a;
7529
- var colors = getColors(props);
7811
+ var _a;
7812
+ var underlined = props.underlined, _b = props.sdsSize, sdsSize = _b === void 0 ? "large" : _b;
7530
7813
  var spaces = getSpaces(props);
7814
+ var semanticColors = getSemanticColors(props);
7531
7815
  var isLarge = sdsSize === "large";
7532
- return "\n margin-top: ".concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat(underlined ? "2px solid ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";") : "none", ";\n ");
7816
+ return "\n margin-top: ".concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(isLarge ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat(underlined ? "2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";") : "none", ";\n ");
7533
7817
  });
7534
7818
  var TAB_DO_NOT_FORWARD_PROPS = ["sdsSize"];
7535
7819
  var StyledTab = styled(Tab$1, {
@@ -7537,9 +7821,8 @@ var StyledTab = styled(Tab$1, {
7537
7821
  })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n min-height: unset;\n padding: 0;\n min-width: 32px;\n opacity: 1 !important;\n\n ", "\n ", "\n\n ", "\n"], ["\n min-height: unset;\n padding: 0;\n min-width: 32px;\n opacity: 1 !important;\n\n ", "\n ", "\n\n ", "\n"])), tabFontMixin, focusVisibleA11yStyle, function (props) {
7538
7822
  var _a, _b, _c, _d, _e, _f, _g;
7539
7823
  var spaces = getSpaces(props);
7540
- var semanticTextColors = getSemanticTextColors(props);
7541
- var semanticComponentColors = getSemanticComponentColors(props);
7542
- return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.border, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &.Mui-selected {\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, ";\n\n &:hover {\n color: ").concat((_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.primary, ";\n }\n }\n\n &:active {\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n }\n\n &:disabled {\n color: ").concat((_g = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _g === void 0 ? void 0 : _g.disabled, ";\n }\n ");
7824
+ var semanticColors = getSemanticColors(props);
7825
+ return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n &:hover, :focus {\n box-shadow: 0 2px 0 0 ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.border, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &.Mui-selected {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n }\n }\n\n &:active {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n\n &:disabled {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n }\n ");
7543
7826
  });
7544
7827
  function tabFontMixin(props) {
7545
7828
  var sdsSize = props.sdsSize;
@@ -7550,8 +7833,8 @@ var templateObject_1$3, templateObject_2$2;
7550
7833
 
7551
7834
  var TabIndicator = function (theme) {
7552
7835
  var _a;
7553
- var semanticComponentColors = getSemanticComponentColors({ theme: theme });
7554
- return css$1(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n &.MuiTabs-indicator {\n background-color: ", ";\n height: 2px;\n bottom: -2px;\n z-index: 2;\n }\n "], ["\n &.MuiTabs-indicator {\n background-color: ", ";\n height: 2px;\n bottom: -2px;\n z-index: 2;\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.border);
7836
+ var semanticColors = getSemanticColors({ theme: theme });
7837
+ return css$1(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n &.MuiTabs-indicator {\n background-color: ", ";\n height: 2px;\n bottom: -2px;\n z-index: 2;\n }\n "], ["\n &.MuiTabs-indicator {\n background-color: ", ";\n height: 2px;\n bottom: -2px;\n z-index: 2;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.border);
7555
7838
  };
7556
7839
  var Tabs = forwardRef(function Tabs(props, ref) {
7557
7840
  var _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a, rest = __rest(props, ["sdsSize"]);
@@ -7625,10 +7908,10 @@ var sdsPropNames = ["contentAlert", "itemAlign"];
7625
7908
  var disabledStyle = function (props) {
7626
7909
  var _a;
7627
7910
  var disabled = props.disabled;
7628
- var semanticTextColors = getSemanticTextColors(props);
7911
+ var semanticColors = getSemanticColors(props);
7629
7912
  if (!disabled)
7630
7913
  return "";
7631
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n ");
7914
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n ");
7632
7915
  };
7633
7916
  var Section = styled("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), disabledStyle, function (props) {
7634
7917
  var _a;
@@ -7639,10 +7922,10 @@ var Section = styled("div")(templateObject_1 || (templateObject_1 = __makeTempla
7639
7922
  var SectionLabel = styled("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontCapsXxxxs, disabledStyle, function (props) {
7640
7923
  var _a;
7641
7924
  var spaces = getSpaces(props);
7642
- var semanticTextColors = getSemanticTextColors(props);
7925
+ var semanticColors = getSemanticColors(props);
7643
7926
  if (!props.label)
7644
7927
  return "";
7645
- return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px; \n color: ").concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n ");
7928
+ return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px; \n color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
7646
7929
  });
7647
7930
  var RowLabel = styled(TableCell, {
7648
7931
  shouldForwardProp: function (prop) {
@@ -7668,4 +7951,4 @@ var TooltipTableContent = function (props) {
7668
7951
  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)))); })] })));
7669
7952
  };
7670
7953
 
7671
- export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, 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, Pagination, SDSAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, 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, getPalette, getSemanticComponentColors, getSemanticTextColors, getShadows, getSpaces, getSpacings, getTypography, makeThemeOptions };
7954
+ export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, 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, Pagination, 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, makeThemeOptions };