@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.cjs.js CHANGED
@@ -98,62 +98,145 @@ var FontWeight;
98
98
  FontWeight[FontWeight["regular"] = 400] = "regular";
99
99
  FontWeight[FontWeight["semibold"] = 600] = "semibold";
100
100
  })(FontWeight || (FontWeight = {}));
101
- var SDSThemeColors = {
101
+ var SDSLightThemeColors = {
102
102
  blue: {
103
- "100": "#F5F9FF",
104
- "200": "#E9F1FF",
105
- "300": "#A6C9FF",
106
- "400": "#0B68F8",
107
- "500": "#0142A4",
108
- "600": "#002660",
103
+ "100": "#e2eeff",
104
+ "200": "#cce1ff",
105
+ "300": "#9dc6ff",
106
+ "400": "#6ca6ff",
107
+ "500": "#1a6cef",
108
+ "600": "#0041b9",
109
+ "700": "#002d90",
110
+ "800": "#00114a",
109
111
  },
110
- common: {
111
- black: "#000000",
112
- white: "#FFFFFF",
112
+ gray: {
113
+ "100": "#f3f3f3",
114
+ "200": "#dfdfdf",
115
+ "300": "#c3c3c3",
116
+ "400": "#a5a5a5",
117
+ "50": "#ffffff",
118
+ "500": "#969696",
119
+ "600": "#6c6c6c",
120
+ "700": "#3b3b3b",
121
+ "75": "#fafafa",
122
+ "800": "#1b1b1b",
123
+ "900": "#000000",
124
+ },
125
+ green: {
126
+ "100": "#daf4de",
127
+ "200": "#b9ecc3",
128
+ "300": "#7fd693",
129
+ "400": "#50b96d",
130
+ "500": "#238444",
131
+ "600": "#105b2b",
132
+ "700": "#07431d",
133
+ "800": "#001f00",
134
+ },
135
+ purple: {
136
+ "100": "#efeafe",
137
+ "200": "#e4dbfc",
138
+ "300": "#cbbaf8",
139
+ "400": "#b296f2",
140
+ "500": "#8b54e2",
141
+ "600": "#6526b5",
142
+ "700": "#490092",
143
+ "800": "#1a004c",
144
+ },
145
+ red: {
146
+ "100": "#ffe8e6",
147
+ "200": "#ffd6d2",
148
+ "300": "#ffafa8",
149
+ "400": "#ff7e78",
150
+ "500": "#db2131",
151
+ "600": "#980013",
152
+ "700": "#6f0008",
153
+ "800": "#340000",
154
+ },
155
+ yellow: {
156
+ "100": "#ffefcf",
157
+ "200": "#ffdb97",
158
+ "300": "#ffca5c",
159
+ "400": "#fab700",
160
+ "500": "#da9900",
161
+ "600": "#b77800",
162
+ "700": "#7c3e00",
163
+ "800": "#541700",
164
+ },
165
+ };
166
+ var SDSDarkThemeColors = {
167
+ blue: {
168
+ "100": "#002573",
169
+ "200": "#0048c5",
170
+ "300": "#2573f4",
171
+ "400": "#5b9aff",
172
+ "500": "#a2c9ff",
173
+ "600": "#cde3ff",
174
+ "700": "#e2eeff",
175
+ "800": "#f7faff",
113
176
  },
114
177
  gray: {
115
- "100": "#F8F8F8",
116
- "200": "#EAEAEA",
117
- "300": "#CCCCCC",
118
- "400": "#999999",
119
- "500": "#767676",
120
- "600": "#545454",
178
+ "100": "#333333",
179
+ "200": "#494949",
180
+ "300": "#696969",
181
+ "400": "#9b9b9b",
182
+ "50": "#000000",
183
+ "500": "#aaaaaa",
184
+ "600": "#cdcdcd",
185
+ "700": "#ededed",
186
+ "75": "#101010",
187
+ "800": "#fafafa",
188
+ "900": "#ffffff",
121
189
  },
122
190
  green: {
123
- "100": "#ECF5F0",
124
- "200": "#E6F7ED",
125
- "300": "transparent",
126
- "400": "#3CB371",
127
- "500": "#349A61",
128
- "600": "#1C7F48",
191
+ "100": "#053918",
192
+ "200": "#12612e",
193
+ "300": "#288b49",
194
+ "400": "#43ae63",
195
+ "500": "#85d898",
196
+ "600": "#bcecc5",
197
+ "700": "#daf4de",
198
+ "800": "#f7fbf6",
129
199
  },
130
200
  purple: {
131
- "100": "#F4F0F9",
132
- "200": "#F0EBF6",
133
- "300": "transparent",
134
- "400": "#7A41CE",
135
- "500": "#703CBE",
136
- "600": "#693BAC",
201
+ "100": "#4b0190",
202
+ "200": "#6b2ebc",
203
+ "300": "#905de6",
204
+ "400": "#aa89ef",
205
+ "500": "#cebef8",
206
+ "600": "#e4dcfc",
207
+ "700": "#f0ebfe",
208
+ "800": "#fbf9ff",
137
209
  },
138
210
  red: {
139
- "100": "#FEF2F2",
140
- "200": "#F8E8E8",
141
- "300": "transparent",
142
- "400": "#DC132C",
143
- "500": "#C61128",
144
- "600": "#B70016",
211
+ "100": "#630008",
212
+ "200": "#A30000",
213
+ "300": "#E52722",
214
+ "400": "#FF695B",
215
+ "500": "#FF9385",
216
+ "600": "#FFBDB3",
217
+ "700": "#FFD8D1",
218
+ "800": "#FFF1EE",
145
219
  },
146
220
  yellow: {
147
- "100": "#FCF6EC",
148
- "200": "#FFF3E1",
149
- "300": "transparent",
150
- "400": "#F5A623",
151
- "500": "#D8921F",
152
- "600": "#946314",
221
+ "100": "#552300",
222
+ "200": "#834500",
223
+ "300": "#985a00",
224
+ "400": "#ac6c00",
225
+ "500": "#cf8e00",
226
+ "600": "#efad00",
227
+ "700": "#ffdc9a",
228
+ "800": "#fcf2e3",
153
229
  },
154
230
  };
155
- var SDSAppTheme = {
156
- colors: SDSThemeColors,
231
+ /**
232
+ * Base app theme for properties shared between light and dark mode. Generally, if a theme
233
+ * property doesn't deal with colors it belongs here, otherwise it'll have its specific
234
+ * theme variant defined in `lightAppTheme` or `darkAppTheme`.
235
+ *
236
+ * `colors` and `mode` are omitted because they must be defined by the `lightAppTheme` and
237
+ * `darkAppTheme` objects before use in the `makeThemeOptions` function.
238
+ */
239
+ var sharedAppTheme = {
157
240
  corners: {
158
241
  l: 20,
159
242
  m: 4,
@@ -465,66 +548,371 @@ var SDSAppTheme = {
465
548
  },
466
549
  },
467
550
  };
468
- /**
469
- * (masoudmanson): This is to make sure that the old defaultAppTheme
470
- * export is still available for backward compatibility.
471
- *
472
- * @deprecated
473
- * Please use `SDSAppTheme` instead. This export will be removed in the future.
474
- */
475
- var defaultAppTheme = SDSAppTheme;
551
+ var SDSLightAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSLightThemeColors });
476
552
  // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
477
553
  // applications to override those colors using their own custom theme.
478
554
  // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
479
555
  // we allow other apps to specify their colors once, and have them apply
480
556
  // throughout the application, such as in borders, etc without having to manually
481
557
  // override every theme property that makes use of colors.
482
- SDSAppTheme.borders = {
558
+ SDSLightAppTheme.borders = {
559
+ accent: {
560
+ default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
561
+ focused: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
562
+ hover: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
563
+ open: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
564
+ pressed: "1px solid ".concat(SDSLightAppTheme.colors.blue[700]),
565
+ selected: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
566
+ },
567
+ base: {
568
+ default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
569
+ disabled: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
570
+ divider: "1px solid ".concat(SDSLightAppTheme.colors.gray[200]),
571
+ hover: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
572
+ pressed: "1px solid ".concat(SDSLightAppTheme.colors.gray[900]),
573
+ table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
574
+ },
575
+ beta: {
576
+ default: "1px solid ".concat(SDSLightAppTheme.colors.purple[500]),
577
+ },
578
+ info: {
579
+ default: "1px solid ".concat(SDSLightAppTheme.colors.blue[500]),
580
+ },
581
+ link: {
582
+ dashed: "1px dashed",
583
+ solid: "1px solid",
584
+ },
585
+ negative: {
586
+ default: "1px solid ".concat(SDSLightAppTheme.colors.red[500]),
587
+ },
588
+ neutral: {
589
+ default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
590
+ },
591
+ none: "none",
592
+ notice: {
593
+ default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[500]),
594
+ },
595
+ positive: {
596
+ default: "1px solid ".concat(SDSLightAppTheme.colors.green[500]),
597
+ },
598
+ };
599
+ var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
600
+ SDSDarkAppTheme.borders = {
483
601
  accent: {
484
- dashed: "1px dashed ".concat(SDSAppTheme.colors.blue[400]),
485
- default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
486
- disabled: "1px solid ".concat(SDSAppTheme.colors.blue[300]),
487
- hover: "1px solid ".concat(SDSAppTheme.colors.blue[500]),
602
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
603
+ focused: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
604
+ hover: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
605
+ open: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
606
+ pressed: "1px solid ".concat(SDSDarkAppTheme.colors.blue[700]),
607
+ selected: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
488
608
  },
489
609
  base: {
490
- black: "1px solid ".concat(SDSAppTheme.colors.common.black),
491
- dashed: "1px dashed ".concat(SDSAppTheme.colors.gray[400]),
492
- default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
493
- disabled: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
494
- divider: "1px solid ".concat(SDSAppTheme.colors.gray[200]),
495
- hover: "1px solid ".concat(SDSAppTheme.colors.common.black),
496
- table: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
610
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
611
+ disabled: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
612
+ divider: "1px solid ".concat(SDSDarkAppTheme.colors.gray[200]),
613
+ hover: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
614
+ pressed: "1px solid ".concat(SDSDarkAppTheme.colors.gray[900]),
615
+ table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
497
616
  },
498
617
  beta: {
499
- default: "1px solid ".concat(SDSAppTheme.colors.purple[400]),
618
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[500]),
500
619
  },
501
620
  info: {
502
- default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
621
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[500]),
503
622
  },
504
623
  link: {
505
624
  dashed: "1px dashed",
506
625
  solid: "1px solid",
507
626
  },
508
627
  negative: {
509
- default: "1px solid ".concat(SDSAppTheme.colors.red[400]),
628
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.red[500]),
510
629
  },
511
630
  neutral: {
512
- default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
631
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
513
632
  },
514
633
  none: "none",
515
634
  notice: {
516
- default: "1px solid ".concat(SDSAppTheme.colors.yellow[400]),
635
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[500]),
517
636
  },
518
637
  positive: {
519
- default: "1px solid ".concat(SDSAppTheme.colors.green[400]),
638
+ default: "1px solid ".concat(SDSDarkAppTheme.colors.green[500]),
520
639
  },
521
640
  };
641
+ /**
642
+ * Helper function to select the appropriate theme settings.
643
+ *
644
+ * @param theme The theme to choose from. Currently supports a light and dark variant.
645
+ * @returns The appropriate app theme for the variant.
646
+ */
647
+ var SDSChooseTheme = function (theme) {
648
+ if (theme === "dark") {
649
+ return SDSDarkAppTheme;
650
+ }
651
+ return SDSLightAppTheme;
652
+ };
653
+ /**
654
+ * (masoudmanson): This is to make sure that the old defaultAppTheme
655
+ * export is still available for backward compatibility.
656
+ *
657
+ * @deprecated
658
+ * Please use `SDSAppTheme` instead. This export will be removed in the future.
659
+ */
660
+ var defaultAppTheme = SDSLightAppTheme;
522
661
 
523
- var common = material.colors.common;
662
+ var SDSPaletteLight = function (appTheme) {
663
+ return {
664
+ accent: {
665
+ border: appTheme.colors.blue[500],
666
+ borderFocus: appTheme.colors.blue[500],
667
+ borderHover: appTheme.colors.blue[600],
668
+ borderOpen: appTheme.colors.blue[500],
669
+ borderPressed: appTheme.colors.blue[700],
670
+ borderSelected: appTheme.colors.blue[500],
671
+ fillHover: appTheme.colors.blue[600],
672
+ fillPressed: appTheme.colors.blue[700],
673
+ fillPrimary: appTheme.colors.blue[500],
674
+ icon: appTheme.colors.blue[500],
675
+ iconFocus: appTheme.colors.blue[500],
676
+ iconHover: appTheme.colors.blue[600],
677
+ iconOpen: appTheme.colors.blue[500],
678
+ iconPressed: appTheme.colors.blue[700],
679
+ iconSelected: appTheme.colors.blue[500],
680
+ surfacePrimary: appTheme.colors.blue[100],
681
+ surfaceSecondary: appTheme.colors.blue[500],
682
+ textAction: appTheme.colors.blue[500],
683
+ textActionHover: appTheme.colors.blue[600],
684
+ textActionPressed: appTheme.colors.blue[700],
685
+ },
686
+ base: {
687
+ border: appTheme.colors.gray[500],
688
+ borderDisabled: appTheme.colors.gray[300],
689
+ borderHover: appTheme.colors.gray[900],
690
+ borderPressed: appTheme.colors.gray[900],
691
+ borderTable: appTheme.colors.gray[300],
692
+ divider: appTheme.colors.gray[200],
693
+ fillDisabled: appTheme.colors.gray[200],
694
+ /* the number 47 is the opacity of the color, which is equal to 28% */
695
+ fillHover: appTheme.colors.gray[300] + "47",
696
+ fillOpen: appTheme.colors.gray[300] + "47",
697
+ fillPressed: appTheme.colors.gray[300] + "47",
698
+ fillPrimary: appTheme.colors.gray[50],
699
+ fillSelected: appTheme.colors.gray[900],
700
+ iconDisabled: appTheme.colors.gray[300],
701
+ iconPrimary: appTheme.colors.gray[500],
702
+ iconPrimaryHover: appTheme.colors.gray[900],
703
+ iconPrimaryInverse: appTheme.colors.gray[50],
704
+ iconPrimaryInverseHover: appTheme.colors.gray[400],
705
+ iconPrimaryInversePressed: appTheme.colors.gray[400],
706
+ iconPrimaryPressed: appTheme.colors.gray[900],
707
+ iconSecondary: appTheme.colors.gray[900],
708
+ surfaceBackground: appTheme.colors.gray[50],
709
+ surfacePrimary: appTheme.colors.gray[50],
710
+ surfacePrimaryInverse: appTheme.colors.gray[900],
711
+ surfaceSecondary: appTheme.colors.gray[100],
712
+ surfaceTertiary: appTheme.colors.gray[200],
713
+ textDisabled: appTheme.colors.gray[300],
714
+ textPrimary: appTheme.colors.gray[900],
715
+ textPrimaryInverse: appTheme.colors.gray[50],
716
+ textSecondary: appTheme.colors.gray[600],
717
+ textSecondaryInverse: appTheme.colors.gray[300],
718
+ },
719
+ beta: {
720
+ border: appTheme.colors.purple[500],
721
+ fillHover: appTheme.colors.purple[600],
722
+ fillPressed: appTheme.colors.purple[700],
723
+ fillPrimary: appTheme.colors.purple[500],
724
+ fillSecondary: appTheme.colors.purple[100],
725
+ ornament: appTheme.colors.purple[600],
726
+ surfacePrimary: appTheme.colors.purple[100],
727
+ surfaceSecondary: appTheme.colors.purple[500],
728
+ text: appTheme.colors.purple[600],
729
+ },
730
+ info: {
731
+ border: appTheme.colors.blue[500],
732
+ fillHover: appTheme.colors.blue[600],
733
+ fillPressed: appTheme.colors.blue[700],
734
+ fillPrimary: appTheme.colors.blue[500],
735
+ fillSecondary: appTheme.colors.blue[100],
736
+ ornament: appTheme.colors.blue[600],
737
+ surfacePrimary: appTheme.colors.blue[100],
738
+ surfaceSecondary: appTheme.colors.blue[500],
739
+ text: appTheme.colors.blue[600],
740
+ },
741
+ negative: {
742
+ border: appTheme.colors.red[500],
743
+ fillHover: appTheme.colors.red[600],
744
+ fillPressed: appTheme.colors.red[700],
745
+ fillPrimary: appTheme.colors.red[500],
746
+ fillSecondary: appTheme.colors.red[100],
747
+ ornament: appTheme.colors.red[600],
748
+ surfacePrimary: appTheme.colors.red[100],
749
+ surfaceSecondary: appTheme.colors.red[500],
750
+ text: appTheme.colors.red[600],
751
+ },
752
+ neutral: {
753
+ border: appTheme.colors.gray[500],
754
+ fillHover: appTheme.colors.gray[600],
755
+ fillPressed: appTheme.colors.gray[700],
756
+ fillPrimary: appTheme.colors.gray[500],
757
+ fillSecondary: appTheme.colors.gray[100],
758
+ ornament: appTheme.colors.gray[700],
759
+ surfacePrimary: appTheme.colors.gray[200],
760
+ surfaceSecondary: appTheme.colors.gray[500],
761
+ text: appTheme.colors.gray[700],
762
+ },
763
+ notice: {
764
+ border: appTheme.colors.yellow[500],
765
+ fillHover: appTheme.colors.yellow[600],
766
+ fillPressed: appTheme.colors.yellow[700],
767
+ fillPrimary: appTheme.colors.yellow[500],
768
+ fillSecondary: appTheme.colors.yellow[100],
769
+ ornament: appTheme.colors.yellow[600],
770
+ surfacePrimary: appTheme.colors.yellow[100],
771
+ surfaceSecondary: appTheme.colors.yellow[500],
772
+ text: appTheme.colors.yellow[600],
773
+ },
774
+ positive: {
775
+ border: appTheme.colors.green[500],
776
+ fillHover: appTheme.colors.green[600],
777
+ fillPressed: appTheme.colors.green[700],
778
+ fillPrimary: appTheme.colors.green[500],
779
+ fillSecondary: appTheme.colors.green[100],
780
+ ornament: appTheme.colors.green[600],
781
+ surfacePrimary: appTheme.colors.green[100],
782
+ surfaceSecondary: appTheme.colors.green[500],
783
+ text: appTheme.colors.green[600],
784
+ },
785
+ };
786
+ };
787
+ var SDSPaletteDark = function (appTheme) {
788
+ return {
789
+ accent: {
790
+ border: appTheme.colors.blue[500],
791
+ borderFocus: appTheme.colors.blue[500],
792
+ borderHover: appTheme.colors.blue[600],
793
+ borderOpen: appTheme.colors.blue[500],
794
+ borderPressed: appTheme.colors.blue[700],
795
+ borderSelected: appTheme.colors.blue[500],
796
+ fillHover: appTheme.colors.blue[600],
797
+ fillPressed: appTheme.colors.blue[700],
798
+ fillPrimary: appTheme.colors.blue[500],
799
+ icon: appTheme.colors.blue[500],
800
+ iconFocus: appTheme.colors.blue[500],
801
+ iconHover: appTheme.colors.blue[600],
802
+ iconOpen: appTheme.colors.blue[500],
803
+ iconPressed: appTheme.colors.blue[700],
804
+ iconSelected: appTheme.colors.blue[500],
805
+ surfacePrimary: appTheme.colors.blue[100],
806
+ surfaceSecondary: appTheme.colors.blue[500],
807
+ textAction: appTheme.colors.blue[500],
808
+ textActionHover: appTheme.colors.blue[600],
809
+ textActionPressed: appTheme.colors.blue[700],
810
+ },
811
+ base: {
812
+ border: appTheme.colors.gray[500],
813
+ borderDisabled: appTheme.colors.gray[300],
814
+ borderHover: appTheme.colors.gray[900],
815
+ borderPressed: appTheme.colors.gray[900],
816
+ borderTable: appTheme.colors.gray[300],
817
+ divider: appTheme.colors.gray[200],
818
+ fillDisabled: appTheme.colors.gray[200],
819
+ /* the number 47 is the opacity of the color, which is equal to 28% */
820
+ fillHover: appTheme.colors.gray[300] + "47",
821
+ fillOpen: appTheme.colors.gray[300] + "47",
822
+ fillPressed: appTheme.colors.gray[300] + "47",
823
+ fillPrimary: appTheme.colors.gray[100],
824
+ fillSelected: appTheme.colors.gray[900],
825
+ iconDisabled: appTheme.colors.gray[300],
826
+ iconPrimary: appTheme.colors.gray[500],
827
+ iconPrimaryHover: appTheme.colors.gray[900],
828
+ iconPrimaryInverse: appTheme.colors.gray[50],
829
+ iconPrimaryInverseHover: appTheme.colors.gray[400],
830
+ iconPrimaryInversePressed: appTheme.colors.gray[400],
831
+ iconPrimaryPressed: appTheme.colors.gray[900],
832
+ iconSecondary: appTheme.colors.gray[900],
833
+ surfaceBackground: appTheme.colors.gray[75],
834
+ surfacePrimary: appTheme.colors.gray[100],
835
+ surfacePrimaryInverse: appTheme.colors.gray[900],
836
+ surfaceSecondary: appTheme.colors.gray[200],
837
+ surfaceTertiary: appTheme.colors.gray[300],
838
+ textDisabled: appTheme.colors.gray[300],
839
+ textPrimary: appTheme.colors.gray[900],
840
+ textPrimaryInverse: appTheme.colors.gray[50],
841
+ textSecondary: appTheme.colors.gray[600],
842
+ textSecondaryInverse: appTheme.colors.gray[300],
843
+ },
844
+ beta: {
845
+ border: appTheme.colors.purple[500],
846
+ fillHover: appTheme.colors.purple[600],
847
+ fillPressed: appTheme.colors.purple[700],
848
+ fillPrimary: appTheme.colors.purple[500],
849
+ fillSecondary: appTheme.colors.purple[100],
850
+ ornament: appTheme.colors.purple[600],
851
+ surfacePrimary: appTheme.colors.purple[100],
852
+ surfaceSecondary: appTheme.colors.purple[500],
853
+ text: appTheme.colors.purple[600],
854
+ },
855
+ info: {
856
+ border: appTheme.colors.blue[500],
857
+ fillHover: appTheme.colors.blue[600],
858
+ fillPressed: appTheme.colors.blue[700],
859
+ fillPrimary: appTheme.colors.blue[500],
860
+ fillSecondary: appTheme.colors.blue[100],
861
+ ornament: appTheme.colors.blue[600],
862
+ surfacePrimary: appTheme.colors.blue[100],
863
+ surfaceSecondary: appTheme.colors.blue[500],
864
+ text: appTheme.colors.blue[600],
865
+ },
866
+ negative: {
867
+ border: appTheme.colors.red[500],
868
+ fillHover: appTheme.colors.red[600],
869
+ fillPressed: appTheme.colors.red[700],
870
+ fillPrimary: appTheme.colors.red[500],
871
+ fillSecondary: appTheme.colors.red[100],
872
+ ornament: appTheme.colors.red[600],
873
+ surfacePrimary: appTheme.colors.red[100],
874
+ surfaceSecondary: appTheme.colors.red[500],
875
+ text: appTheme.colors.red[600],
876
+ },
877
+ neutral: {
878
+ border: appTheme.colors.gray[500],
879
+ fillHover: appTheme.colors.gray[600],
880
+ fillPressed: appTheme.colors.gray[700],
881
+ fillPrimary: appTheme.colors.gray[500],
882
+ fillSecondary: appTheme.colors.gray[100],
883
+ ornament: appTheme.colors.gray[700],
884
+ surfacePrimary: appTheme.colors.gray[200],
885
+ surfaceSecondary: appTheme.colors.gray[500],
886
+ text: appTheme.colors.gray[700],
887
+ },
888
+ notice: {
889
+ border: appTheme.colors.yellow[500],
890
+ fillHover: appTheme.colors.yellow[600],
891
+ fillPressed: appTheme.colors.yellow[700],
892
+ fillPrimary: appTheme.colors.yellow[500],
893
+ fillSecondary: appTheme.colors.yellow[100],
894
+ ornament: appTheme.colors.yellow[600],
895
+ surfacePrimary: appTheme.colors.yellow[100],
896
+ surfaceSecondary: appTheme.colors.yellow[500],
897
+ text: appTheme.colors.yellow[700],
898
+ },
899
+ positive: {
900
+ border: appTheme.colors.green[500],
901
+ fillHover: appTheme.colors.green[600],
902
+ fillPressed: appTheme.colors.green[700],
903
+ fillPrimary: appTheme.colors.green[500],
904
+ fillSecondary: appTheme.colors.green[100],
905
+ ornament: appTheme.colors.green[600],
906
+ surfacePrimary: appTheme.colors.green[100],
907
+ surfaceSecondary: appTheme.colors.green[500],
908
+ text: appTheme.colors.green[600],
909
+ },
910
+ };
911
+ };
524
912
  /**
525
913
  * This function creates the theme options for the MUI theme provider
526
914
  */
527
- function makeThemeOptions(appTheme) {
915
+ function makeThemeOptions(appTheme, mode) {
528
916
  return {
529
917
  app: appTheme,
530
918
  components: {
@@ -549,6 +937,9 @@ function makeThemeOptions(appTheme) {
549
937
  disabled: appTheme.colors.gray[400],
550
938
  disabledBackground: appTheme.colors.gray[300],
551
939
  },
940
+ background: {
941
+ default: mode === "dark" ? appTheme.colors.gray[75] : appTheme.colors.gray[50],
942
+ },
552
943
  divider: appTheme.colors.gray[200],
553
944
  error: {
554
945
  "100": appTheme.colors.red[100],
@@ -557,7 +948,7 @@ function makeThemeOptions(appTheme) {
557
948
  "400": appTheme.colors.red[400],
558
949
  "500": appTheme.colors.red[500],
559
950
  "600": appTheme.colors.red[600],
560
- contrastText: common.white,
951
+ contrastText: appTheme.colors.gray[50],
561
952
  dark: appTheme.colors.red[600],
562
953
  light: appTheme.colors.red[200],
563
954
  main: appTheme.colors.red[400],
@@ -577,12 +968,12 @@ function makeThemeOptions(appTheme) {
577
968
  "400": appTheme.colors.blue[400],
578
969
  "500": appTheme.colors.blue[500],
579
970
  "600": appTheme.colors.blue[600],
580
- contrastText: common.white,
971
+ contrastText: appTheme.colors.gray[50],
581
972
  dark: appTheme.colors.blue[600],
582
973
  light: appTheme.colors.blue[200],
583
974
  main: appTheme.colors.blue[400],
584
975
  },
585
- mode: "light",
976
+ mode: mode,
586
977
  primary: {
587
978
  "100": appTheme.colors.blue[100],
588
979
  "200": appTheme.colors.blue[200],
@@ -590,129 +981,12 @@ function makeThemeOptions(appTheme) {
590
981
  "400": appTheme.colors.blue[400],
591
982
  "500": appTheme.colors.blue[500],
592
983
  "600": appTheme.colors.blue[600],
593
- contrastText: common.white,
984
+ contrastText: appTheme.colors.gray[50],
594
985
  dark: appTheme.colors.blue[600],
595
986
  light: appTheme.colors.blue[200],
596
987
  main: appTheme.colors.blue[400],
597
988
  },
598
- sds: {
599
- component: {
600
- accent: {
601
- border: appTheme.colors.blue[400],
602
- borderDisabled: appTheme.colors.blue[300],
603
- borderFocus: appTheme.colors.blue[400],
604
- borderHover: appTheme.colors.blue[500],
605
- borderOpen: appTheme.colors.blue[400],
606
- borderPressed: appTheme.colors.blue[600],
607
- borderSelected: appTheme.colors.blue[400],
608
- fill: appTheme.colors.blue[400],
609
- fillDisabled: appTheme.colors.blue[300],
610
- fillHover: appTheme.colors.blue[500],
611
- fillOnFill: appTheme.colors.common.white,
612
- fillPressed: appTheme.colors.blue[600],
613
- icon: appTheme.colors.blue[400],
614
- surface: appTheme.colors.blue[200],
615
- },
616
- base: {
617
- border: appTheme.colors.gray[400],
618
- borderDisabled: appTheme.colors.gray[300],
619
- borderHover: appTheme.colors.common.black,
620
- borderPressed: appTheme.colors.common.black,
621
- borderTable: appTheme.colors.gray[300],
622
- divider: appTheme.colors.gray[200],
623
- fill: appTheme.colors.common.white,
624
- fillDisabled: appTheme.colors.gray[300],
625
- fillHover: appTheme.colors.gray[100],
626
- fillOpen: appTheme.colors.gray[100],
627
- fillPressed: appTheme.colors.gray[100],
628
- fillSelected: appTheme.colors.common.black,
629
- icon: appTheme.colors.gray[500],
630
- iconDisabled: appTheme.colors.gray[300],
631
- iconHover: appTheme.colors.common.black,
632
- iconPressed: appTheme.colors.common.black,
633
- onFillDisabled: appTheme.colors.gray[400],
634
- surface: appTheme.colors.common.white,
635
- surfacePrimary: appTheme.colors.common.white,
636
- surfaceSecondary: appTheme.colors.gray[100],
637
- surfaceTertiary: appTheme.colors.gray[200],
638
- },
639
- beta: {
640
- border: appTheme.colors.purple[400],
641
- fill: appTheme.colors.purple[400],
642
- fillHover: appTheme.colors.purple[500],
643
- fillOnFill: appTheme.colors.common.white,
644
- fillPressed: appTheme.colors.purple[600],
645
- icon: appTheme.colors.purple[400],
646
- surface: appTheme.colors.purple[200],
647
- },
648
- info: {
649
- border: appTheme.colors.blue[400],
650
- fill: appTheme.colors.blue[400],
651
- fillHover: appTheme.colors.blue[500],
652
- fillOnFill: appTheme.colors.common.white,
653
- fillPressed: appTheme.colors.blue[600],
654
- icon: appTheme.colors.blue[400],
655
- surface: appTheme.colors.blue[200],
656
- },
657
- negative: {
658
- border: appTheme.colors.red[400],
659
- fill: appTheme.colors.red[400],
660
- fillHover: appTheme.colors.red[500],
661
- fillOnFill: appTheme.colors.common.white,
662
- fillPressed: appTheme.colors.red[600],
663
- icon: appTheme.colors.red[400],
664
- surface: appTheme.colors.red[200],
665
- },
666
- neutral: {
667
- border: appTheme.colors.gray[400],
668
- fill: appTheme.colors.gray[400],
669
- fillHover: appTheme.colors.gray[500],
670
- fillOnFill: appTheme.colors.common.white,
671
- fillPressed: appTheme.colors.gray[600],
672
- icon: appTheme.colors.gray[400],
673
- surface: appTheme.colors.gray[200],
674
- },
675
- notice: {
676
- border: appTheme.colors.yellow[400],
677
- fill: appTheme.colors.yellow[400],
678
- fillHover: appTheme.colors.yellow[500],
679
- fillOnFill: appTheme.colors.common.white,
680
- fillPressed: appTheme.colors.yellow[600],
681
- icon: appTheme.colors.yellow[400],
682
- surface: appTheme.colors.yellow[200],
683
- },
684
- positive: {
685
- border: appTheme.colors.green[400],
686
- fill: appTheme.colors.green[400],
687
- fillHover: appTheme.colors.green[500],
688
- fillOnFill: appTheme.colors.common.white,
689
- fillPressed: appTheme.colors.green[600],
690
- icon: appTheme.colors.green[400],
691
- surface: appTheme.colors.green[200],
692
- },
693
- },
694
- text: {
695
- action: {
696
- default: appTheme.colors.blue[400],
697
- hover: appTheme.colors.blue[500],
698
- pressed: appTheme.colors.blue[600],
699
- },
700
- base: {
701
- accent: appTheme.colors.blue[600],
702
- disabled: appTheme.colors.gray[300],
703
- onFill: appTheme.colors.common.white,
704
- onFillDisabled: appTheme.colors.gray[400],
705
- primary: appTheme.colors.common.black,
706
- secondary: appTheme.colors.gray[500],
707
- },
708
- beta: appTheme.colors.purple[600],
709
- info: appTheme.colors.blue[600],
710
- negative: appTheme.colors.red[600],
711
- neutral: appTheme.colors.gray[600],
712
- notice: appTheme.colors.yellow[600],
713
- positive: appTheme.colors.green[600],
714
- },
715
- },
989
+ sds: mode === "dark" ? SDSPaletteDark(appTheme) : SDSPaletteLight(appTheme),
716
990
  secondary: {
717
991
  "100": appTheme.colors.green[100],
718
992
  "200": appTheme.colors.green[200],
@@ -720,7 +994,7 @@ function makeThemeOptions(appTheme) {
720
994
  "400": appTheme.colors.green[400],
721
995
  "500": appTheme.colors.green[500],
722
996
  "600": appTheme.colors.green[600],
723
- contrastText: common.white,
997
+ contrastText: appTheme.colors.gray[50],
724
998
  dark: appTheme.colors.green[600],
725
999
  light: appTheme.colors.green[200],
726
1000
  main: appTheme.colors.green[400],
@@ -732,15 +1006,15 @@ function makeThemeOptions(appTheme) {
732
1006
  "400": appTheme.colors.green[400],
733
1007
  "500": appTheme.colors.green[500],
734
1008
  "600": appTheme.colors.green[600],
735
- contrastText: common.white,
1009
+ contrastText: appTheme.colors.gray[50],
736
1010
  dark: appTheme.colors.green[600],
737
1011
  light: appTheme.colors.green[200],
738
1012
  main: appTheme.colors.green[400],
739
1013
  },
740
1014
  text: {
741
1015
  disabled: appTheme.colors.gray[300],
742
- primary: common.black,
743
- secondary: appTheme.colors.gray[500],
1016
+ primary: appTheme.colors.gray[900],
1017
+ secondary: appTheme.colors.gray[600],
744
1018
  },
745
1019
  warning: {
746
1020
  "100": appTheme.colors.yellow[100],
@@ -749,7 +1023,7 @@ function makeThemeOptions(appTheme) {
749
1023
  "400": appTheme.colors.yellow[400],
750
1024
  "500": appTheme.colors.yellow[500],
751
1025
  "600": appTheme.colors.yellow[600],
752
- contrastText: common.black,
1026
+ contrastText: appTheme.colors.gray[900],
753
1027
  dark: appTheme.colors.yellow[600],
754
1028
  light: appTheme.colors.yellow[200],
755
1029
  main: appTheme.colors.yellow[400],
@@ -832,12 +1106,21 @@ function makeThemeOptions(appTheme) {
832
1106
  };
833
1107
  }
834
1108
 
835
- var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
836
- var defaultTheme = styles.createTheme(defaultThemeOptions);
837
-
838
- function focusVisibleA11yStyle() {
839
- return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n ";
840
- }
1109
+ /**
1110
+ * Theme adaptor with light/dark mode support.
1111
+ *
1112
+ * @param t The theme to use. Currently supports a light and dark variant.
1113
+ * @returns The selected theme object to be used in the ThemeProvider
1114
+ */
1115
+ var Theme = function (t) {
1116
+ return styles.createTheme(makeThemeOptions(SDSChooseTheme(t), t));
1117
+ };
1118
+ /**
1119
+ * Default theme, uses light mode with no option to change it.
1120
+ *
1121
+ * Use the `theme` export to get a flexible light/dark mode theme function
1122
+ */
1123
+ var defaultTheme = Theme("light");
841
1124
 
842
1125
  var getSpaces = function (_a) {
843
1126
  var _b;
@@ -858,6 +1141,11 @@ var getTypography = function (_a) {
858
1141
  var theme = _a.theme;
859
1142
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.typography) || null;
860
1143
  };
1144
+ var getMode = function (_a) {
1145
+ var _b;
1146
+ var theme = _a.theme;
1147
+ return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.mode) || "light";
1148
+ };
861
1149
  var getPalette = function (_a) {
862
1150
  var theme = _a.theme;
863
1151
  return theme === null || theme === void 0 ? void 0 : theme.palette;
@@ -867,15 +1155,10 @@ var getColors = function (_a) {
867
1155
  var theme = _a.theme;
868
1156
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.colors) || null;
869
1157
  };
870
- var getSemanticComponentColors = function (_a) {
871
- var _b, _c;
872
- var theme = _a.theme;
873
- 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;
874
- };
875
- var getSemanticTextColors = function (_a) {
876
- var _b, _c;
1158
+ var getSemanticColors = function (_a) {
1159
+ var _b;
877
1160
  var theme = _a.theme;
878
- 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;
1161
+ return ((_b = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _b === void 0 ? void 0 : _b.sds) || null;
879
1162
  };
880
1163
  var getShadows = function (_a) {
881
1164
  var _b;
@@ -903,6 +1186,12 @@ var getBorders = function (_a) {
903
1186
  return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
904
1187
  };
905
1188
 
1189
+ function focusVisibleA11yStyle(props) {
1190
+ var _a;
1191
+ var semanticColors = getSemanticColors(props);
1192
+ 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 ");
1193
+ }
1194
+
906
1195
  var fontBody = function (fontSize, fontWeight) {
907
1196
  if (fontWeight === void 0) { fontWeight = "regular"; }
908
1197
  return function (props) {
@@ -1000,15 +1289,15 @@ var AccordionDetails = function (props) {
1000
1289
  };
1001
1290
 
1002
1291
  var StyledAccordionHeader = styles.styled(material.AccordionSummary)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1003
- var _a;
1292
+ var _a, _b;
1004
1293
  var spaces = getSpaces(props);
1005
- var semanticComponentColors = getSemanticComponentColors(props);
1006
- return react.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, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon);
1294
+ var semanticColors = getSemanticColors(props);
1295
+ return react.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, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
1007
1296
  });
1008
1297
  var StyledSubtitle = styles.styled("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1009
1298
  var _a;
1010
- var semanticTextColors = getSemanticTextColors(props);
1011
- return react.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);
1299
+ var semanticColors = getSemanticColors(props);
1300
+ return react.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);
1012
1301
  });
1013
1302
  var templateObject_1$S, templateObject_2$z, templateObject_3$r, templateObject_4$n;
1014
1303
 
@@ -3658,16 +3947,16 @@ function buttonStyle() {
3658
3947
  }
3659
3948
  function staticStyle(props) {
3660
3949
  var _a;
3661
- var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 400 : _c;
3950
+ var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
3662
3951
  var colors = getColors(props);
3663
3952
  return react.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]);
3664
3953
  }
3665
3954
  function interactive(props) {
3666
3955
  var _a, _b, _c, _d;
3667
- var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 400 : _f;
3956
+ var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
3668
3957
  var colors = getColors(props);
3669
- var semanticComponentColors = getSemanticComponentColors(props);
3670
- return react.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);
3958
+ var semanticColors = getSemanticColors(props);
3959
+ return react.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);
3671
3960
  }
3672
3961
  var doNotForwardProps$q = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
3673
3962
  var StyledSvgIcon = styles.styled(material.SvgIcon, {
@@ -3709,13 +3998,14 @@ var StyledAccordion = styles.styled(material.Accordion, {
3709
3998
  return !sdsPropNames$3.includes(prop.toString());
3710
3999
  },
3711
4000
  })(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
3712
- var _a, _b;
4001
+ var _a, _b, _c;
3713
4002
  var useDivider = props.useDivider, togglePosition = props.togglePosition;
3714
4003
  var shadows = getShadows(props);
3715
4004
  var typography = getTypography(props);
3716
4005
  var borders = getBorders(props);
3717
4006
  var spaces = getSpaces(props);
3718
- return react.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 "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4007
+ var semanticColors = getSemanticColors(props);
4008
+ return react.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 "])), material.accordionClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceBackground, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_b = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _b === void 0 ? void 0 : _b.body, useDivider ? (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
3719
4009
  });
3720
4010
  var leftPosition = function (props) {
3721
4011
  var _a, _b, _c;
@@ -3742,15 +4032,17 @@ var Accordion = React.forwardRef(function (props, ref) {
3742
4032
  });
3743
4033
 
3744
4034
  var StyledAlert = styles.styled(material.Alert)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4035
+ var _a;
3745
4036
  var colors = getColors(props);
3746
4037
  var spaces = getSpaces(props);
3747
4038
  var shadows = getShadows(props);
3748
- var _a = props.severity, severity = _a === void 0 ? "success" : _a;
4039
+ var semanticColors = getSemanticColors(props);
4040
+ var _b = props.severity, severity = _b === void 0 ? "success" : _b;
3749
4041
  var borderColor = (colors && severityToColor(severity, colors)[400]) || "black";
3750
4042
  var alertColor = (colors && severityToColor(severity, colors)[100]) || "white";
3751
4043
  var iconColor = (colors && severityToColor(severity, colors)[400]) || "black";
3752
4044
  var backgroundColor = colors && severityToColor(severity, colors)[100];
3753
- 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 ");
4045
+ 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 ");
3754
4046
  });
3755
4047
  function severityToColor(alertSeverity, colors) {
3756
4048
  switch (alertSeverity) {
@@ -3866,13 +4158,11 @@ var doNotForwardProps$p = [
3866
4158
  ];
3867
4159
  // Rounded + Square Button Styles
3868
4160
  var ButtonStyles = function (props) {
3869
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
3870
- var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
4161
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
4162
+ var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon, isAllCaps = props.isAllCaps;
3871
4163
  var spaces = getSpaces(props);
3872
- var shadows = getShadows(props);
3873
4164
  var iconSizes = getIconSizes(props);
3874
- var semanticTextColors = getSemanticTextColors(props);
3875
- var semanticComponentColors = getSemanticComponentColors(props);
4165
+ var semanticColors = getSemanticColors(props);
3876
4166
  var hasIcon = !!startIcon || !!endIcon;
3877
4167
  // (masoudmanson): The padding depends on the presence of an icon.
3878
4168
  // If the component has either a startIcon or endIcon, the padding will be spaces?.m pixels.
@@ -3881,58 +4171,70 @@ var ButtonStyles = function (props) {
3881
4171
  ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
3882
4172
  : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
3883
4173
  var contentColor = variant === "outlined"
3884
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default
3885
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
3886
- return react.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, material.buttonClasses.startIcon, material.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, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4174
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
4175
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4176
+ var ornamentColor = variant === "outlined"
4177
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
4178
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4179
+ var backgroundColor = variant === "outlined"
4180
+ ? "transparent"
4181
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4182
+ var disabledBackgroundColor = variant === "outlined" ? "transparent" : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillDisabled;
4183
+ var disabledBorder = variant === "outlined"
4184
+ ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
4185
+ : "none";
4186
+ return react.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, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
3887
4187
  };
3888
4188
  var Rounded = function (props) {
3889
4189
  var corners = getCorners(props);
3890
4190
  return react.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);
3891
4191
  };
3892
4192
  var DestructiveButton = function (props) {
3893
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
4193
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
3894
4194
  var variant = props.variant;
3895
4195
  var shadows = getShadows(props);
3896
- var semanticTextColors = getSemanticTextColors(props);
3897
- var semanticComponentColors = getSemanticComponentColors(props);
4196
+ var semanticColors = getSemanticColors(props);
3898
4197
  var contentColor = variant === "outlined"
3899
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.icon
3900
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
4198
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
4199
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4200
+ var ornamentColor = variant === "outlined"
4201
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
4202
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
3901
4203
  var backgroundColor = variant === "outlined"
3902
4204
  ? "transparent"
3903
- : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.fill;
3904
- return react.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);
4205
+ : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4206
+ return react.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);
3905
4207
  };
3906
4208
  var StyledButton$3 = styles.styled(material.Button, {
3907
4209
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
3908
- })(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
3909
- var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
3910
- return react.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));
4210
+ })(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4211
+ var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
4212
+ return react.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));
3911
4213
  });
3912
4214
  // Minimal Button Styles
3913
4215
  var Minimal = function (props) {
3914
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
4216
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4217
+ var isAllCaps = props.isAllCaps;
3915
4218
  var spaces = getSpaces(props);
3916
4219
  var iconSizes = getIconSizes(props);
3917
- var semanticTextColors = getSemanticTextColors(props);
3918
- var semanticComponentColors = getSemanticComponentColors(props);
3919
- return react.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, material.buttonClasses.startIcon, material.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, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4220
+ var semanticColors = getSemanticColors(props);
4221
+ return react.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, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
3920
4222
  };
3921
4223
  var PrimaryMinimalButton = function (props) {
3922
4224
  var _a;
3923
- var semanticTextColors = getSemanticTextColors(props);
3924
- return react.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);
4225
+ var semanticColors = getSemanticColors(props);
4226
+ return react.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);
3925
4227
  };
3926
4228
  var SecondaryMinimalButton = function (props) {
3927
4229
  var _a;
3928
- var semanticTextColors = getSemanticTextColors(props);
3929
- return react.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);
4230
+ var semanticColors = getSemanticColors(props);
4231
+ return react.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);
3930
4232
  };
3931
4233
  var StyledMinimalButton = styles.styled(material.Button, {
3932
4234
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
3933
4235
  })(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
3934
4236
  var sdsType = props.sdsType;
3935
- return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
4237
+ return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
3936
4238
  });
3937
4239
  var StyledButtonLegacy = styles.styled(material.Button, {
3938
4240
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
@@ -3943,27 +4245,27 @@ var StyledButtonLegacy = styles.styled(material.Button, {
3943
4245
  var spaces = getSpaces(props);
3944
4246
  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 ");
3945
4247
  });
3946
- 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;
4248
+ 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;
3947
4249
 
3948
4250
  var isDisabled$1 = function (props) {
3949
4251
  var _a, _b;
3950
- var semanticComponentColors = getSemanticComponentColors(props);
3951
- return react.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);
4252
+ var semanticColors = getSemanticColors(props);
4253
+ return react.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);
3952
4254
  };
3953
4255
  var primary$2 = function (props) {
3954
4256
  var _a, _b, _c, _d, _e, _f, _g, _h;
3955
- var semanticComponentColors = getSemanticComponentColors(props);
3956
- return react.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);
4257
+ var semanticColors = getSemanticColors(props);
4258
+ return react.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);
3957
4259
  };
3958
4260
  var secondary$2 = function (props) {
3959
4261
  var _a, _b, _c, _d, _e, _f, _g, _h;
3960
- var semanticComponentColors = getSemanticComponentColors(props);
3961
- return react.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);
4262
+ var semanticColors = getSemanticColors(props);
4263
+ return react.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);
3962
4264
  };
3963
4265
  var tertiary = function (props) {
3964
4266
  var _a, _b, _c, _d, _e, _f;
3965
- var semanticComponentColors = getSemanticComponentColors(props);
3966
- return react.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);
4267
+ var semanticColors = getSemanticColors(props);
4268
+ return react.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);
3967
4269
  };
3968
4270
  var small$1 = function (props) {
3969
4271
  var sdsType = props.sdsType;
@@ -3992,11 +4294,11 @@ var doNotForwardProps$o = [
3992
4294
  ];
3993
4295
  var StyledButtonIcon = styles.styled(material.IconButton, {
3994
4296
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
3995
- })(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
4297
+ })(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
3996
4298
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
3997
- return react.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));
4299
+ return react.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));
3998
4300
  });
3999
- 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;
4301
+ 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;
4000
4302
 
4001
4303
  var ButtonIconSizeToSdsIconSize = {
4002
4304
  large: "xl",
@@ -4056,8 +4358,12 @@ var Button = React.forwardRef(function (props, ref) {
4056
4358
  if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
4057
4359
  showWarningIfFirstOccurence(SDSWarningTypes.ButtonMinimalIsAllCaps);
4058
4360
  }
4059
- // isAllCaps is only used for the Minimal Button. It defaults to true.
4060
- var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
4361
+ // isAllCaps is only used for the Minimal Button.
4362
+ // It defaults to true for the Minimal Button.
4363
+ // It defaults to false for all other buttons.
4364
+ var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean"
4365
+ ? props === null || props === void 0 ? void 0 : props.isAllCaps
4366
+ : sdsStyle === "minimal";
4061
4367
  var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
4062
4368
  switch (true) {
4063
4369
  case sdsStyle === "icon":
@@ -4088,44 +4394,29 @@ var Button = React.forwardRef(function (props, ref) {
4088
4394
  }
4089
4395
  });
4090
4396
 
4091
- var sdsPropNames$2 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
4397
+ var sdsPropNames$2 = ["sdsStyle", "intent", "handleSubmit"];
4092
4398
  var rounded$3 = function (props) {
4093
4399
  var _a;
4094
4400
  var corners = getCorners(props);
4095
- var semanticComponentColors = getSemanticComponentColors(props);
4096
- return react.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 "])), material.outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, material.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);
4401
+ var semanticColors = getSemanticColors(props);
4402
+ return react.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 "])), material.outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, material.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);
4097
4403
  };
4098
- var error$3 = function (props) {
4404
+ var error$1 = function (props) {
4099
4405
  var _a, _b, _c, _d;
4100
- var semanticComponentColors = getSemanticComponentColors(props);
4101
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
4406
+ var semanticColors = getSemanticColors(props);
4407
+ return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
4102
4408
  };
4103
- var warning$3 = function (props) {
4409
+ var warning$1 = function (props) {
4104
4410
  var _a, _b, _c, _d;
4105
- var semanticComponentColors = getSemanticComponentColors(props);
4106
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
4107
- };
4108
- var userInput$2 = function (props) {
4109
- var _a, _b, _c, _d, _e;
4110
- var intent = props.intent;
4111
- var semanticComponentColors = getSemanticComponentColors(props);
4112
- var border = intent === "error"
4113
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border
4114
- : intent === "warning"
4115
- ? (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border
4116
- : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.border;
4117
- var color = intent === "default"
4118
- ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.icon
4119
- : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon;
4120
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.inputAdornmentClasses.root, color);
4411
+ var semanticColors = getSemanticColors(props);
4412
+ return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
4121
4413
  };
4122
4414
  var disabledStyled$2 = function (props) {
4123
- var _a, _b, _c;
4124
- var colors = getColors(props);
4125
- var semanticComponentColors = getSemanticComponentColors(props);
4126
- return react.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 "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.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]);
4415
+ var _a, _b, _c, _d;
4416
+ var semanticColors = getSemanticColors(props);
4417
+ return react.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 "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
4127
4418
  };
4128
- var StyledLabel$2 = styles.styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4419
+ var StyledLabel$2 = styles.styled("label")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4129
4420
  var spaces = getSpaces(props);
4130
4421
  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 ");
4131
4422
  });
@@ -4133,26 +4424,24 @@ var StyledSearchBase = styles.styled(material.TextField, {
4133
4424
  shouldForwardProp: function (prop) {
4134
4425
  return !sdsPropNames$2.includes(prop.toString());
4135
4426
  },
4136
- })(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4137
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4138
- var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage;
4427
+ })(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4428
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4429
+ var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4139
4430
  var spaces = getSpaces(props);
4140
4431
  var iconSizes = getIconSizes(props);
4141
- var semanticComponentColors = getSemanticComponentColors(props);
4142
- return react.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, material.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, material.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, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, material.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));
4432
+ var semanticColors = getSemanticColors(props);
4433
+ return react.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, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && error$1(props), intent === "notice" && warning$1(props), disabled && disabledStyled$2(props));
4143
4434
  });
4144
- var StyledInputAdornment = styles.styled(material.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"])));
4145
- 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;
4435
+ var StyledInputAdornment = styles.styled(material.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"])));
4436
+ 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;
4146
4437
 
4147
4438
  var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4148
- var _a, _b, _c, _d, _e, _f, _g;
4439
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
4149
4440
  var selected = props.selected;
4150
- var colors = getColors(props);
4151
4441
  var fontWeights = getFontWeights(props);
4152
4442
  var spaces = getSpaces(props);
4153
- var semanticComponentColors = getSemanticComponentColors(props);
4154
- var primary = colors === null || colors === void 0 ? void 0 : colors.blue[400];
4155
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = 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(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = 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 ");
4443
+ var semanticColors = getSemanticColors(props);
4444
+ return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4156
4445
  });
4157
4446
  var ContentWrapper = styles.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"])));
4158
4447
  var disabledStyles = function (props) {
@@ -4160,27 +4449,27 @@ var disabledStyles = function (props) {
4160
4449
  var disabled = props.disabled;
4161
4450
  if (!disabled)
4162
4451
  return "";
4163
- var semanticComponentColors = getSemanticComponentColors(props);
4164
- 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 ");
4452
+ var semanticColors = getSemanticColors(props);
4453
+ 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 ");
4165
4454
  };
4166
4455
  var TextWrapper = styles.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) {
4167
4456
  var _a;
4168
- var semanticTextColors = getSemanticTextColors(props);
4169
- 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 ");
4457
+ var semanticColors = getSemanticColors(props);
4458
+ 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 ");
4170
4459
  }, disabledStyles);
4171
4460
  var StyledMenuItemIcon = styles.styled("span")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4172
4461
  var _a;
4173
4462
  var disabled = props.disabled;
4174
4463
  var spaces = getSpaces(props);
4175
4464
  var iconSizes = getIconSizes(props);
4176
- var semanticComponentColors = getSemanticComponentColors(props);
4177
- 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 ");
4465
+ var semanticColors = getSemanticColors(props);
4466
+ 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 ");
4178
4467
  });
4179
4468
  var ColumnWrapper = styles.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) {
4180
4469
  var _a;
4181
- var semanticTextColors = getSemanticTextColors(props);
4470
+ var semanticColors = getSemanticColors(props);
4182
4471
  var spaces = getSpaces(props);
4183
- 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 ");
4472
+ 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 ");
4184
4473
  }, disabledStyles);
4185
4474
  var StyledIconWrapper = styles.styled("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4186
4475
  var spaces = getSpaces(props);
@@ -4193,25 +4482,25 @@ var StyledCheck = styles.styled(iconsMaterial.Check, {
4193
4482
  var _a, _b;
4194
4483
  var selected = props.selected, disabled = props.disabled;
4195
4484
  var iconSizes = getIconSizes(props);
4196
- var semanticComponentColors = getSemanticComponentColors(props);
4485
+ var semanticColors = getSemanticColors(props);
4197
4486
  var selectedColor = disabled
4198
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4199
- : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4487
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4488
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4200
4489
  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 ");
4201
4490
  });
4202
4491
  var StyledMinus = styles.styled(iconsMaterial.Remove, {
4203
4492
  shouldForwardProp: function (prop) { return prop !== "selected"; },
4204
- })(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4493
+ })(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4205
4494
  var _a, _b;
4206
4495
  var selected = props.selected, disabled = props.disabled;
4207
- var semanticComponentColors = getSemanticComponentColors(props);
4496
+ var semanticColors = getSemanticColors(props);
4208
4497
  var iconSizes = getIconSizes(props);
4209
4498
  var selectedColor = disabled
4210
- ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4211
- : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4499
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4500
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4212
4501
  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 ");
4213
4502
  });
4214
- 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;
4503
+ 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;
4215
4504
 
4216
4505
  /**
4217
4506
  * @see https://mui.com/material-ui/react-menu/
@@ -4324,22 +4613,14 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
4324
4613
  * user is tabbing, we can apply different styles for :focus and :focus-visible states.
4325
4614
  */
4326
4615
  useDetectUserTabbing((ref ? ref : inputRef));
4327
- var _c = React.useState(false), hasValue = _c[0], setHasValue = _c[1];
4328
- var _d = React.useState(""), value = _d[0], setValue = _d[1];
4616
+ var _c = React.useState(""), value = _c[0], setValue = _c[1];
4329
4617
  var handleChange = function (event) {
4330
- if (event.target.value) {
4331
- setHasValue(true);
4332
- }
4333
- else {
4334
- setHasValue(false);
4335
- }
4336
4618
  setValue(event.target.value);
4337
4619
  if (onChange)
4338
4620
  onChange(event);
4339
4621
  };
4340
4622
  var clearInput = function () {
4341
4623
  setValue("");
4342
- setHasValue(false);
4343
4624
  if (handleSubmit)
4344
4625
  handleSubmit("");
4345
4626
  /**
@@ -4371,13 +4652,13 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
4371
4652
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4372
4653
  // passed to mui Input
4373
4654
  InputProps: {
4374
- endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4655
+ endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4375
4656
  sdsType: "iconButton",
4376
- }, icon: "XMarkCircle" }) })),
4657
+ }, icon: "XMarkCircle" }) })) : null,
4377
4658
  startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4378
4659
  sdsType: "interactive",
4379
4660
  }, icon: "Search" }) })),
4380
- }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4661
+ }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
4381
4662
  /**
4382
4663
  * (masoudmanson): This prevents the browser's default auto completion
4383
4664
  * menu from being displayed for the InputSearch.
@@ -4396,13 +4677,12 @@ var doNotForwardProps$n = [
4396
4677
  var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
4397
4678
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
4398
4679
  })(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper, material.autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
4399
- var _a, _b, _c, _d, _e;
4680
+ var _a, _b, _c, _d, _e, _f, _g;
4400
4681
  var search = props.search;
4401
4682
  var spaces = getSpaces(props);
4402
4683
  var borders = getBorders(props);
4403
- var semanticTextColors = getSemanticTextColors(props);
4404
- var semanticComponentColors = getSemanticComponentColors(props);
4405
- 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(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_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(material.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(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_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(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_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(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4684
+ var semanticColors = getSemanticColors(props);
4685
+ return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4406
4686
  });
4407
4687
  var InputBaseWrapper$1 = styles.styled("div", {
4408
4688
  shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
@@ -4427,13 +4707,13 @@ var StyledPaper$3 = styles.styled(material.Paper)(templateObject_4$h || (templat
4427
4707
  var corners = getCorners(props);
4428
4708
  var shadows = getShadows(props);
4429
4709
  var borders = getBorders(props);
4430
- var semanticComponentColors = getSemanticComponentColors(props);
4431
- 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 ");
4710
+ var semanticColors = getSemanticColors(props);
4711
+ 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 ");
4432
4712
  });
4433
4713
  var StyledMenuItemDetails = styles.styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
4434
4714
  var _a;
4435
- var semanticTextColors = getSemanticTextColors(props);
4436
- 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 ");
4715
+ var semanticColors = getSemanticColors(props);
4716
+ 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 ");
4437
4717
  });
4438
4718
  var StyledMenuItemText = styles.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"])));
4439
4719
  var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
@@ -4611,15 +4891,15 @@ var StyledColumn = styles.styled("div")(templateObject_1$J || (templateObject_1$
4611
4891
  var StyledColumnTitle = styles.styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
4612
4892
  var _a;
4613
4893
  var spaces = getSpaces(props);
4614
- var semanticTextColors = getSemanticTextColors(props);
4615
- 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 ");
4894
+ var semanticColors = getSemanticColors(props);
4895
+ 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 ");
4616
4896
  });
4617
4897
  var StyledColumnIcon = styles.styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4618
4898
  var _a, _b;
4619
4899
  var spaces = getSpaces(props);
4620
4900
  var iconSizes = getIconSizes(props);
4621
- var semanticComponentColors = getSemanticComponentColors(props);
4622
- 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 ");
4901
+ var semanticColors = getSemanticColors(props);
4902
+ 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 ");
4623
4903
  });
4624
4904
  var templateObject_1$J, templateObject_2$r, templateObject_3$j;
4625
4905
 
@@ -4682,21 +4962,23 @@ var StyledPopper$2 = styles.styled(material.Popper, {
4682
4962
  var shadows = getShadows(props);
4683
4963
  var spaces = getSpaces(props);
4684
4964
  var borders = getBorders(props);
4685
- var semanticComponentColors = getSemanticComponentColors(props);
4686
- 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(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4965
+ var semanticColors = getSemanticColors(props);
4966
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
4687
4967
  });
4688
4968
  var StyledPaper$2 = styles.styled(material.Paper, {
4689
4969
  shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
4690
4970
  })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4971
+ var _a;
4691
4972
  var shadows = getShadows(props);
4692
- 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 ");
4973
+ var semanticColors = getSemanticColors(props);
4974
+ 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 ");
4693
4975
  });
4694
4976
  var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
4695
4977
  var StyledAutocompleteInput = styles.styled(InputSearch, {
4696
4978
  shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
4697
4979
  })(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) {
4698
4980
  var search = _a.search;
4699
- return !search && "height: 0; display: none;";
4981
+ return !search && "height: 0; display: none; margin: 0 !important;";
4700
4982
  }, function (_a) {
4701
4983
  var search = _a.search;
4702
4984
  return (search ? "auto" : "transparent");
@@ -4888,10 +5170,18 @@ var Autocomplete = function (props) {
4888
5170
  };
4889
5171
 
4890
5172
  var Centered = styles.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"])));
4891
- var IconWrapper$1 = styles.styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5173
+ var doNotForwardPropsIconWrapper = ["bannerType"];
5174
+ var IconWrapper$1 = styles.styled("div", {
5175
+ shouldForwardProp: function (prop) {
5176
+ return !doNotForwardPropsIconWrapper.includes(prop);
5177
+ },
5178
+ })(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5179
+ var _a, _b;
5180
+ var bannerType = props.bannerType;
4892
5181
  var iconSizes = getIconSizes(props);
4893
5182
  var spaces = getSpaces(props);
4894
- 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 ");
5183
+ var semanticColors = getSemanticColors(props);
5184
+ 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 ");
4895
5185
  });
4896
5186
  var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
4897
5187
  var StyledButton$2 = styles.styled(Button, {
@@ -4899,24 +5189,23 @@ var StyledButton$2 = styles.styled(Button, {
4899
5189
  return !doNotForwardPropsButtonIcon.includes(prop);
4900
5190
  },
4901
5191
  })(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) {
5192
+ var _a, _b;
4902
5193
  var bannerType = props.bannerType;
4903
- var colors = getColors(props);
5194
+ var semanticColors = getSemanticColors(props);
4904
5195
  if (bannerType !== "primary")
4905
5196
  return "";
4906
- return "\n svg:hover {\n fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n }\n ");
5197
+ 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 ");
4907
5198
  });
4908
5199
  styles.styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
4909
5200
  var primary$1 = function (props) {
4910
- var _a, _b, _c;
4911
- var semanticComponentColors = getSemanticComponentColors(props);
4912
- var semanticTextColors = getSemanticTextColors(props);
4913
- 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 ");
5201
+ var _a, _b;
5202
+ var semanticColors = getSemanticColors(props);
5203
+ 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 ");
4914
5204
  };
4915
5205
  var secondary$1 = function (props) {
4916
5206
  var _a, _b;
4917
- var semanticComponentColors = getSemanticComponentColors(props);
4918
- var semanticTextColors = getSemanticTextColors(props);
4919
- 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 ");
5207
+ var semanticColors = getSemanticColors(props);
5208
+ 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 ");
4920
5209
  };
4921
5210
  var doNotForwardProps$l = ["sdsType", "textChild"];
4922
5211
  var StyledBanner = styles.styled("div", {
@@ -4954,7 +5243,7 @@ var Banner = React.forwardRef(function Banner(props, ref) {
4954
5243
  return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
4955
5244
  }
4956
5245
  };
4957
- return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
5246
+ return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { bannerType: sdsType, children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
4958
5247
  });
4959
5248
 
4960
5249
  var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
@@ -5005,9 +5294,9 @@ var StyledCallout = styles.styled(material.Alert, {
5005
5294
  var iconSizes = getIconSizes(props);
5006
5295
  var palette = getPalette(props);
5007
5296
  var typography = getTypography(props);
5008
- var semanticComponentColors = getSemanticComponentColors(props);
5009
- 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";
5010
- 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";
5297
+ var semanticColors = getSemanticColors(props);
5298
+ 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";
5299
+ 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";
5011
5300
  // when a title is present Mui's default styling has vertical margin,
5012
5301
  // but for an expandable callout that is collapsed, we do not want
5013
5302
  // any bottom margin
@@ -5101,12 +5390,16 @@ var CalloutTitle = function (_a) {
5101
5390
  CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
5102
5391
 
5103
5392
  var dark = function (props) {
5393
+ var _a, _b;
5104
5394
  var spaces = getSpaces(props);
5105
- return css.css(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);
5395
+ var semanticColors = getSemanticColors(props);
5396
+ return css.css(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);
5106
5397
  };
5107
5398
  var light = function (props) {
5399
+ var _a, _b;
5108
5400
  var spaces = getSpaces(props);
5109
- return css.css(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);
5401
+ var semanticColors = getSemanticColors(props);
5402
+ return css.css(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);
5110
5403
  };
5111
5404
  var wide = function () {
5112
5405
  return css.css(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
@@ -5117,8 +5410,8 @@ var tableStyles = function (props) {
5117
5410
  };
5118
5411
  var Subtitle$1 = styles.styled("div")(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5119
5412
  var _a;
5120
- var semanticTextColors = getSemanticTextColors(props);
5121
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n ");
5413
+ var semanticColors = getSemanticColors(props);
5414
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
5122
5415
  });
5123
5416
  var tooltipCss = function (props) {
5124
5417
  var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
@@ -5126,15 +5419,19 @@ var tooltipCss = function (props) {
5126
5419
  return css.css(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);
5127
5420
  };
5128
5421
  var arrowCss = function (props) {
5422
+ var _a, _b;
5129
5423
  var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5130
- return css.css(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");
5424
+ var semanticColors = getSemanticColors(props);
5425
+ return css.css(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"
5426
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
5427
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
5131
5428
  };
5132
5429
  /*
5133
5430
  * (masoudmanson): !important is needed to override arrow's
5134
5431
  * default placement which is calculated by javascript
5135
5432
  */
5136
- var StyledPopper$1 = styles.styled(material.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"])));
5137
- 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;
5433
+ var StyledPopper$1 = styles.styled(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
5434
+ 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;
5138
5435
 
5139
5436
  /**
5140
5437
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5267,19 +5564,19 @@ var SecondaryText = styles.styled("span", {
5267
5564
  var _a;
5268
5565
  var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
5269
5566
  var spaces = getSpaces(props);
5270
- var semanticTextColors = getSemanticTextColors(props);
5271
- 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
5567
+ var semanticColors = getSemanticColors(props);
5568
+ 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
5272
5569
  ? ShouldWrap(secondaryTextWrapLineCount)
5273
5570
  : ShouldTruncate(), "\n ");
5274
5571
  });
5275
5572
  var TertiaryText = styles.styled("span", {
5276
5573
  shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
5277
- })(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5574
+ })(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5278
5575
  var _a;
5279
5576
  var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
5280
5577
  var spaces = getSpaces(props);
5281
- var semanticTextColors = getSemanticTextColors(props);
5282
- 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
5578
+ var semanticColors = getSemanticColors(props);
5579
+ 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
5283
5580
  ? ShouldWrap(tertiaryTextWrapLineCount)
5284
5581
  : ShouldTruncate(), "\n ");
5285
5582
  });
@@ -5291,7 +5588,7 @@ var PrimaryTextComponentSlotRightWrapper = styles.styled("div")(templateObject_1
5291
5588
  var spaces = getSpaces(props);
5292
5589
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5293
5590
  });
5294
- 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;
5591
+ 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;
5295
5592
 
5296
5593
  var CellBasicContent = function (props) {
5297
5594
  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;
@@ -5337,10 +5634,10 @@ var StyledSortingIcon = styles.styled(Icon, {
5337
5634
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
5338
5635
  })(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5339
5636
  var _a, _b;
5340
- var _c = props.active, active = _c === void 0 ? false : _c;
5637
+ var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
5341
5638
  var spaces = getSpaces(props);
5342
- var semanticComponentColors = getSemanticComponentColors(props);
5343
- 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 ");
5639
+ var semanticColors = getSemanticColors(props);
5640
+ 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 ");
5344
5641
  });
5345
5642
  var StyledTableHeader$1 = styles.styled("th", {
5346
5643
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
@@ -5348,9 +5645,8 @@ var StyledTableHeader$1 = styles.styled("th", {
5348
5645
  var _a, _b, _c, _d, _e, _f, _g, _h;
5349
5646
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
5350
5647
  var spaces = getSpaces(props);
5351
- var semanticComponentColors = getSemanticComponentColors(props);
5352
- var semanticTextColors = getSemanticTextColors(props);
5353
- 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 ");
5648
+ var semanticColors = getSemanticColors(props);
5649
+ 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 ");
5354
5650
  });
5355
5651
  var StyledCellHeaderContainer = styles.styled("div", {
5356
5652
  shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
@@ -5365,8 +5661,8 @@ var CellHeaderContent = function (props) {
5365
5661
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
5366
5662
  var sortIcon = (jsxRuntime.jsx(StyledSortingIcon, { "aria-label": direction === "asc"
5367
5663
  ? "Change sort direction from ascending to descending"
5368
- : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active }));
5369
- return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), !hideSortIcon && sortIcon] }));
5664
+ : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
5665
+ return (jsxRuntime.jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsxRuntime.jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
5370
5666
  };
5371
5667
  var CellHeader = React.forwardRef(function (props, ref) {
5372
5668
  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"]);
@@ -5396,7 +5692,7 @@ var square$2 = function (props) {
5396
5692
  var success = function (props) {
5397
5693
  return createStatusCss(props, "success");
5398
5694
  };
5399
- var error$2 = function (props) {
5695
+ var error = function (props) {
5400
5696
  return createStatusCss(props, "error");
5401
5697
  };
5402
5698
  var beta = function (props) {
@@ -5405,40 +5701,42 @@ var beta = function (props) {
5405
5701
  var pending = function (props) {
5406
5702
  return createStatusCss(props, "pending");
5407
5703
  };
5408
- var warning$2 = function (props) {
5704
+ var warning = function (props) {
5409
5705
  return createStatusCss(props, "warning");
5410
5706
  };
5411
5707
  var info = function (props) {
5412
5708
  return createStatusCss(props, "info");
5413
5709
  };
5414
5710
  function createStatusCss(props, status) {
5711
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5415
5712
  var colors = getColors(props);
5713
+ var semanticColors = getSemanticColors(props);
5416
5714
  if (!colors)
5417
5715
  return;
5418
5716
  var statusToColors = {
5419
5717
  beta: {
5420
- dark: colors.purple[600],
5421
- light: colors.purple[200],
5718
+ dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
5719
+ light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
5422
5720
  },
5423
5721
  error: {
5424
- dark: colors.red[600],
5425
- light: colors.red[200],
5722
+ dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
5723
+ light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
5426
5724
  },
5427
5725
  info: {
5428
- dark: colors.blue[600],
5429
- light: colors.blue[200],
5726
+ dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
5727
+ light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
5430
5728
  },
5431
5729
  pending: {
5432
- dark: colors.gray[600],
5433
- light: colors.gray[200],
5730
+ dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
5731
+ light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
5434
5732
  },
5435
5733
  success: {
5436
- dark: colors.green[600],
5437
- light: colors.green[200],
5734
+ dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
5735
+ light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
5438
5736
  },
5439
5737
  warning: {
5440
- dark: colors.yellow[600],
5441
- light: colors.yellow[200],
5738
+ dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
5739
+ light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
5442
5740
  },
5443
5741
  };
5444
5742
  var statusColors = statusToColors[status];
@@ -5446,11 +5744,11 @@ function createStatusCss(props, status) {
5446
5744
  }
5447
5745
  var statusToCss = {
5448
5746
  beta: beta,
5449
- error: error$2,
5747
+ error: error,
5450
5748
  info: info,
5451
5749
  pending: pending,
5452
5750
  success: success,
5453
- warning: warning$2,
5751
+ warning: warning,
5454
5752
  };
5455
5753
  var doNotForwardProps$g = ["isRounded"];
5456
5754
  var StyledChip = styles.styled(material.Chip, {
@@ -5493,9 +5791,11 @@ var doNotForwardProps$f = [
5493
5791
  var StyledHeaderTitle = styles.styled("div", {
5494
5792
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
5495
5793
  })(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
5794
+ var _a;
5496
5795
  var search = props.search;
5497
5796
  var spaces = getSpaces(props);
5498
- 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 ");
5797
+ var semanticColors = getSemanticColors(props);
5798
+ 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 ");
5499
5799
  });
5500
5800
  var StyledDropdownMenuAutocompleteWrapper = styles.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"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
5501
5801
  var StyledPopper = styles.styled(material.Popper, {
@@ -5507,16 +5807,18 @@ var StyledPopper = styles.styled(material.Popper, {
5507
5807
  var borders = getBorders(props);
5508
5808
  var corners = getCorners(props);
5509
5809
  var shadows = getShadows(props);
5510
- var semanticComponentColors = getSemanticComponentColors(props);
5511
- 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 ");
5810
+ var semanticColors = getSemanticColors(props);
5811
+ 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 ");
5512
5812
  });
5513
5813
  var StyledPaper$1 = styles.styled(material.Paper, {
5514
5814
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
5515
5815
  })(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5816
+ var _a;
5516
5817
  var spaces = getSpaces(props);
5517
5818
  var borders = getBorders(props);
5518
5819
  var shadows = getShadows(props);
5519
- 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 ");
5820
+ var semanticColors = getSemanticColors(props);
5821
+ 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 ");
5520
5822
  });
5521
5823
  var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b;
5522
5824
 
@@ -5559,7 +5861,6 @@ var DropdownMenu = function (props) {
5559
5861
  var doNotForwardProps$e = [
5560
5862
  "intent",
5561
5863
  "state",
5562
- "sdsStage",
5563
5864
  "sdsType",
5564
5865
  "isMinimal",
5565
5866
  "shouldTruncateMinimalDetails",
@@ -5570,24 +5871,22 @@ var doNotForwardProps$e = [
5570
5871
  var labelFontBodyS = fontBody("s", "regular");
5571
5872
  var labelFontBodyXs = fontBody("xs", "regular");
5572
5873
  var inputDropdownStyles = function (props) {
5573
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
5874
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
5574
5875
  var spaces = getSpaces(props);
5575
5876
  var borders = getBorders(props);
5576
- var semanticTextColors = getSemanticTextColors(props);
5577
- var semanticComponentColors = getSemanticComponentColors(props);
5877
+ var semanticColors = getSemanticColors(props);
5578
5878
  /**
5579
5879
  * (masoudmanson)
5580
5880
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
5581
5881
  */
5582
5882
  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");
5583
- return react.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);
5883
+ return react.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);
5584
5884
  };
5585
5885
  var minimal$1 = function (props) {
5586
5886
  var _a, _b, _c, _d, _e, _f, _g;
5587
5887
  var spaces = getSpaces(props);
5588
- var semanticTextColors = getSemanticTextColors(props);
5589
- var semanticComponentColors = getSemanticComponentColors(props);
5590
- return react.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);
5888
+ var semanticColors = getSemanticColors(props);
5889
+ return react.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);
5591
5890
  };
5592
5891
  var square$1 = function (props) {
5593
5892
  var corners = getCorners(props);
@@ -5597,39 +5896,39 @@ var rounded$1 = function (props) {
5597
5896
  var corners = getCorners(props);
5598
5897
  return react.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);
5599
5898
  };
5600
- var userInput$1 = function (props) {
5899
+ var userInput = function (props) {
5601
5900
  var _a, _b, _c, _d, _e, _f;
5602
5901
  var sdsStyle = props.sdsStyle;
5603
- var semanticTextColors = getSemanticTextColors(props);
5604
- var semanticComponentColors = getSemanticComponentColors(props);
5605
- return react.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"
5606
- ? "\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 ")
5902
+ var semanticColors = getSemanticColors(props);
5903
+ return react.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"
5904
+ ? "\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 ")
5607
5905
  : "");
5608
5906
  };
5609
5907
  var isOpen = function (props) {
5610
- var _a, _b;
5611
- var colors = getColors(props);
5612
- var semanticTextColors = getSemanticTextColors(props);
5613
- var semanticComponentColors = getSemanticComponentColors(props);
5614
- return react.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"
5615
- ? "& > span, &:hover > span { color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, "; }")
5616
- : "", (_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]);
5617
- };
5618
- var warning$1 = function (props) {
5619
- var colors = getColors(props);
5620
- var yellow = colors === null || colors === void 0 ? void 0 : colors.yellow[400];
5621
- return react.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);
5908
+ var _a, _b, _c, _d, _e, _f, _g, _h;
5909
+ var sdsStyle = props.sdsStyle;
5910
+ var borders = getBorders(props);
5911
+ var semanticColors = getSemanticColors(props);
5912
+ return react.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"
5913
+ ? "\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 ")
5914
+ : "", (_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"
5915
+ ? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
5916
+ : "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);
5917
+ };
5918
+ var notice$1 = function (props) {
5919
+ var _a, _b, _c;
5920
+ var borders = getBorders(props);
5921
+ return react.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);
5622
5922
  };
5623
- var error$1 = function (props) {
5624
- var colors = getColors(props);
5625
- var red = colors === null || colors === void 0 ? void 0 : colors.red[400];
5626
- return react.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);
5923
+ var negative$1 = function (props) {
5924
+ var _a, _b, _c;
5925
+ var borders = getBorders(props);
5926
+ return react.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);
5627
5927
  };
5628
5928
  var isDisabled = function (props) {
5629
5929
  var _a, _b, _c, _d;
5630
- var semanticTextColors = getSemanticTextColors(props);
5631
- var semanticComponentColors = getSemanticComponentColors(props);
5632
- return react.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);
5930
+ var semanticColors = getSemanticColors(props);
5931
+ return react.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);
5633
5932
  };
5634
5933
  /**
5635
5934
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -5642,16 +5941,16 @@ var isDisabled = function (props) {
5642
5941
  var StyledInputDropdown = styles.styled(Button, {
5643
5942
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5644
5943
  })(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) {
5645
- var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
5646
- return react.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));
5944
+ var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
5945
+ return react.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));
5647
5946
  });
5648
5947
  var StyledDetail = styles.styled("span", {
5649
5948
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5650
5949
  })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5651
5950
  var _a;
5652
5951
  var spaces = getSpaces(props);
5653
- var semanticTextColors = getSemanticTextColors(props);
5654
- 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 ");
5952
+ var semanticColors = getSemanticColors(props);
5953
+ 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 ");
5655
5954
  });
5656
5955
  var StyledLabel$1 = styles.styled("span", {
5657
5956
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5659,10 +5958,10 @@ var StyledLabel$1 = styles.styled("span", {
5659
5958
  var _a, _b;
5660
5959
  var details = props.details, counter = props.counter, sdsType = props.sdsType;
5661
5960
  var fontWeights = getFontWeights(props);
5662
- var semanticTextColors = getSemanticTextColors(props);
5961
+ var semanticColors = getSemanticColors(props);
5663
5962
  var labelColor = details || counter !== undefined
5664
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary
5665
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary;
5963
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
5964
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
5666
5965
  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 ");
5667
5966
  });
5668
5967
  var StyledCounter = styles.styled("span", {
@@ -5671,17 +5970,17 @@ var StyledCounter = styles.styled("span", {
5671
5970
  var _a, _b;
5672
5971
  var corners = getCorners(props);
5673
5972
  var spaces = getSpaces(props);
5674
- var semanticComponentColors = getSemanticComponentColors(props);
5675
- var semanticTextColors = getSemanticTextColors(props);
5676
- 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 ");
5973
+ var semanticColors = getSemanticColors(props);
5974
+ 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 ");
5677
5975
  });
5678
5976
  var MinimalDetails = styles.styled("div", {
5679
5977
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
5680
- })(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) {
5681
- var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
5682
- if (shouldTruncateMinimalDetails) {
5683
- return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
5684
- }
5978
+ })(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) {
5979
+ var _a;
5980
+ var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
5981
+ var semanticColors = getSemanticColors(props);
5982
+ 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 &&
5983
+ "overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
5685
5984
  });
5686
5985
  var LabelWrapper = styles.styled("span", {
5687
5986
  shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
@@ -5694,13 +5993,13 @@ var IconWrapper = styles.styled("span", {
5694
5993
  })(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"])));
5695
5994
  function labelStyle(props) {
5696
5995
  var _a, _b;
5697
- var semanticTextColors = getSemanticTextColors(props);
5996
+ var semanticColors = getSemanticColors(props);
5698
5997
  var labelColor = props.sdsType === "value"
5699
- ? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary
5700
- : (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.secondary;
5998
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
5999
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
5701
6000
  return react.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);
5702
6001
  }
5703
- 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;
6002
+ 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;
5704
6003
 
5705
6004
  /**
5706
6005
  * @see https://mui.com/material-ui/react-button/
@@ -5763,14 +6062,18 @@ function renderDetailsText(_a) {
5763
6062
  }
5764
6063
 
5765
6064
  var tagSizeS = function (props) {
6065
+ var _a;
5766
6066
  var spaces = getSpaces(props);
5767
6067
  var iconSizes = getIconSizes(props);
5768
- return react.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);
6068
+ var semanticColors = getSemanticColors(props);
6069
+ return react.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);
5769
6070
  };
5770
6071
  var tagSizeL = function (props) {
6072
+ var _a;
5771
6073
  var spaces = getSpaces(props);
5772
6074
  var iconSizes = getIconSizes(props);
5773
- return react.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);
6075
+ var semanticColors = getSemanticColors(props);
6076
+ return react.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);
5774
6077
  };
5775
6078
  var rounded = function (props) {
5776
6079
  var corners = getCorners(props);
@@ -5788,8 +6091,8 @@ var square = function (props) {
5788
6091
  };
5789
6092
  var withHover = function (props) {
5790
6093
  var _a;
5791
- var semanticTextColors = getSemanticTextColors(props);
5792
- return react.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);
6094
+ var semanticColors = getSemanticColors(props);
6095
+ return react.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);
5793
6096
  };
5794
6097
  var primary = function (props) {
5795
6098
  return createTypeCss(props, "primary");
@@ -5798,57 +6101,61 @@ var secondary = function (props) {
5798
6101
  return createTypeCss(props, "secondary");
5799
6102
  };
5800
6103
  function generatePrimaryTagColors(intent, colors, semanticColors) {
6104
+ var _a, _b, _c, _d;
5801
6105
  if (intent) {
5802
6106
  return {
5803
- background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fill,
6107
+ background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPrimary,
5804
6108
  backgroundClicked: colors.length >= 2
5805
6109
  ? material.darken(colors[1], 0.3)
5806
6110
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
5807
6111
  backgroundHover: colors.length >= 2
5808
6112
  ? material.darken(colors[1], 0.15)
5809
6113
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
5810
- iconColor: colors.length > 2 ? colors[2] : "white",
5811
- label: colors.length ? colors[0] : "white",
6114
+ iconColor: colors.length > 2
6115
+ ? colors[2]
6116
+ : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
6117
+ label: colors.length
6118
+ ? colors[0]
6119
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
5812
6120
  };
5813
6121
  }
5814
6122
  else {
5815
6123
  return {
5816
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fill,
6124
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
5817
6125
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5818
6126
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
5819
- iconColor: "white",
5820
- label: "white",
6127
+ iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
6128
+ label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
5821
6129
  };
5822
6130
  }
5823
6131
  }
5824
6132
  function generateSecondaryTagColors(intent, colors, semanticColors) {
5825
6133
  if (intent) {
5826
6134
  return {
5827
- background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].surface,
6135
+ background: colors.length >= 2 ? colors[1] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillSecondary,
5828
6136
  backgroundClicked: colors.length >= 2
5829
6137
  ? material.darken(colors[1], 0.3)
5830
6138
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
5831
6139
  backgroundHover: colors.length >= 2
5832
6140
  ? material.darken(colors[1], 0.15)
5833
6141
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
5834
- iconColor: colors.length > 2 ? colors[2] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].icon,
5835
- label: colors.length ? colors[0] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillPressed,
6142
+ iconColor: colors.length > 2 ? colors[2] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].ornament,
6143
+ label: colors.length ? colors[0] : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].text,
5836
6144
  };
5837
6145
  }
5838
6146
  else {
5839
6147
  return {
5840
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surface,
6148
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
5841
6149
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5842
6150
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
5843
- iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.icon,
6151
+ iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
5844
6152
  label: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
5845
6153
  };
5846
6154
  }
5847
6155
  }
5848
6156
  function createTypeCss(props, type) {
5849
6157
  var _a, _b;
5850
- var semanticColors = getSemanticComponentColors(props);
5851
- var semanticTextColors = getSemanticTextColors(props);
6158
+ var semanticColors = getSemanticColors(props);
5852
6159
  var intent = typeof props.tagColor === "string" ? props.tagColor : null;
5853
6160
  var colors = Array.isArray(props.tagColor) ? __spreadArray([], props.tagColor, true) : [];
5854
6161
  var typeToColors = {
@@ -5856,7 +6163,7 @@ function createTypeCss(props, type) {
5856
6163
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
5857
6164
  };
5858
6165
  var typeColors = typeToColors[type];
5859
- return react.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);
6166
+ return react.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);
5860
6167
  }
5861
6168
  var typeToCss = {
5862
6169
  primary: primary,
@@ -5871,13 +6178,13 @@ var doNotForwardProps$d = [
5871
6178
  ];
5872
6179
  var StyledTag$1 = styles.styled(material.Chip, {
5873
6180
  shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
5874
- })(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
6181
+ })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
5875
6182
  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;
5876
6183
  var isRounded = sdsStyle === "rounded";
5877
6184
  var type = sdsType || "primary";
5878
6185
  return react.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;");
5879
6186
  });
5880
- 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;
6187
+ var templateObject_1$x, templateObject_2$i, templateObject_3$a, templateObject_4$9, templateObject_5$5, templateObject_6$2, templateObject_7$1, templateObject_8;
5881
6188
 
5882
6189
  /**
5883
6190
  * @see https://mui.com/material-ui/react-chip/
@@ -5892,10 +6199,11 @@ var Tag = function (props) {
5892
6199
  };
5893
6200
 
5894
6201
  var StyledTag = styles.styled(Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5895
- var _a, _b, _c, _d;
6202
+ var _a, _b, _c, _d, _e, _f, _g;
5896
6203
  var spaces = getSpaces(props);
5897
6204
  var iconSizes = getIconSizes(props);
5898
- return react.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);
6205
+ var semanticColors = getSemanticColors(props);
6206
+ return react.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);
5899
6207
  });
5900
6208
  var templateObject_1$w, templateObject_2$h;
5901
6209
 
@@ -5954,7 +6262,7 @@ var ComplexFilter = function (_a) {
5954
6262
  // * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
5955
6263
  // * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
5956
6264
  // * such as sliders for ranges, inline multi selects, etc.
5957
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.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))] }));
6265
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Wrapper$1, __assign({}, rest, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick }, InputDropdownProps)), jsxRuntime.jsx(StyledChipsWrapper, { children: jsxRuntime.jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsxRuntime.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))] }));
5958
6266
  function handleClick(event) {
5959
6267
  if (open) {
5960
6268
  if (multiple) {
@@ -6021,10 +6329,12 @@ var doNotForwardProps$c = ["sdsSize"];
6021
6329
  var StyledPaper = styles.styled(material.Paper, {
6022
6330
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
6023
6331
  })(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
6332
+ var _a;
6024
6333
  var spaces = getSpaces(props);
6025
6334
  var corners = getCorners(props);
6026
6335
  var shadows = getShadows(props);
6027
- 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 ");
6336
+ var semanticColors = getSemanticColors(props);
6337
+ 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 ");
6028
6338
  });
6029
6339
  function paperDimensions(props) {
6030
6340
  var sdsSize = props.sdsSize;
@@ -6132,19 +6442,19 @@ var StyledDialogTitle = styles.styled(material.DialogTitle)(templateObject_1$q |
6132
6442
  });
6133
6443
  var Title = styles.styled(material.Typography)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6134
6444
  var _a;
6135
- var palette = getPalette(props);
6136
- return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, ";\n ");
6445
+ var semanticColors = getSemanticColors(props);
6446
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
6137
6447
  });
6138
6448
  var Subtitle = styles.styled(material.Typography)(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
6139
6449
  var _a;
6140
- var palette = getPalette(props);
6141
- return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.secondary, ";\n ");
6450
+ var semanticColors = getSemanticColors(props);
6451
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
6142
6452
  });
6143
6453
  var Overline = styles.styled(material.Typography)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
6144
6454
  var _a;
6145
- var palette = getPalette(props);
6455
+ var semanticColors = getSemanticColors(props);
6146
6456
  var spaces = getSpaces(props);
6147
- 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 ");
6457
+ 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 ");
6148
6458
  });
6149
6459
  var templateObject_1$q, templateObject_2$f, templateObject_3$9, templateObject_4$8;
6150
6460
 
@@ -6202,7 +6512,7 @@ var Dropdown = function (props) {
6202
6512
  setValue(propValue);
6203
6513
  }
6204
6514
  }, [isControlled, propValue]);
6205
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, rest)), jsxRuntime.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 ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
6515
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, InputDropdownProps, rest)), jsxRuntime.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 ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
6206
6516
  function getInitialValue() {
6207
6517
  return multiple
6208
6518
  ? []
@@ -6347,14 +6657,14 @@ var StyledCheckbox = styles.styled(material.Checkbox)(templateObject_1$o || (tem
6347
6657
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6348
6658
  var iconSizes = getIconSizes(props);
6349
6659
  var spaces = getSpaces(props);
6350
- var semanticComponentColors = getSemanticComponentColors(props);
6660
+ var semanticColors = getSemanticColors(props);
6351
6661
  var intentToColor = {
6352
6662
  default: "base",
6353
- error: "negative",
6354
- warning: "notice",
6663
+ negative: "negative",
6664
+ notice: "notice",
6355
6665
  };
6356
6666
  var checkboxColor = intentToColor[intent];
6357
- 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(material.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(material.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(material.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(material.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 ");
6667
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
6358
6668
  });
6359
6669
  var StyledFormControlLabel$1 = styles.styled(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6360
6670
  var spaces = getSpaces(props);
@@ -6368,8 +6678,8 @@ var StyledCheckboxLabel = styles.styled("span")(templateObject_4$7 || (templateO
6368
6678
  var StyledCheckboxCaption = styles.styled("span")(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6369
6679
  var _a, _b;
6370
6680
  var disabled = props.disabled;
6371
- var semanticTextColors = getSemanticTextColors(props);
6372
- 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 ");
6681
+ var semanticColors = getSemanticColors(props);
6682
+ 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 ");
6373
6683
  });
6374
6684
  var templateObject_1$o, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
6375
6685
 
@@ -6427,14 +6737,14 @@ var StyledRadioButton = styles.styled(material.Radio)(templateObject_1$n || (tem
6427
6737
  var _g = props.intent, intent = _g === void 0 ? "default" : _g;
6428
6738
  var spaces = getSpaces(props);
6429
6739
  var iconSizes = getIconSizes(props);
6430
- var semanticComponentColors = getSemanticComponentColors(props);
6740
+ var semanticColors = getSemanticColors(props);
6431
6741
  var intentToColor = {
6432
6742
  default: "base",
6433
- error: "negative",
6434
- warning: "notice",
6743
+ negative: "negative",
6744
+ notice: "notice",
6435
6745
  };
6436
6746
  var radioColor = intentToColor[intent];
6437
- 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(material.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(material.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(material.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(material.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 ");
6747
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
6438
6748
  });
6439
6749
  var StyledFormControlLabel = styles.styled(material.FormControlLabel)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6440
6750
  var spaces = getSpaces(props);
@@ -6448,8 +6758,8 @@ var StyledRadioLabel = styles.styled("span")(templateObject_4$6 || (templateObje
6448
6758
  var StyledRadioCaption = styles.styled("span")(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6449
6759
  var _a, _b;
6450
6760
  var disabled = props.disabled;
6451
- var semanticTextColors = getSemanticTextColors(props);
6452
- 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 ");
6761
+ var semanticColors = getSemanticColors(props);
6762
+ 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 ");
6453
6763
  });
6454
6764
  var templateObject_1$n, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3;
6455
6765
 
@@ -6481,13 +6791,11 @@ var InputRadio = function (props) {
6481
6791
  };
6482
6792
 
6483
6793
  var inputSlider = function (props) {
6484
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6794
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
6485
6795
  var corners = getCorners(props);
6486
- var colors = getColors(props);
6487
6796
  var shadows = getShadows(props);
6488
- var semanticComponentColors = getSemanticComponentColors(props);
6489
- var semanticTextColors = getSemanticTextColors(props);
6490
- return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(material.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(material.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(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = 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(material.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(material.sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.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(material.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(material.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 ");
6797
+ var semanticColors = getSemanticColors(props);
6798
+ return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n opacity:1;\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(props), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n // (masoudmanson): Although the mark is not a icon, but since we don't have \n // a specific color for the mark, we use the iconDisabled color for it.\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconDisabled, ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n }\n ");
6491
6799
  };
6492
6800
  var horizontal = function (props) {
6493
6801
  var marks = props.marks;
@@ -6495,11 +6803,11 @@ var horizontal = function (props) {
6495
6803
  return "\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.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(material.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(material.sliderClasses.mark, " {\n left: calc(100% - 2px) !important;\n }\n \n .").concat(material.sliderClasses.markLabel, " {\n top: 26px;\n }\n\n .").concat(material.sliderClasses.disabled, " .").concat(material.sliderClasses.track, " {\n border: none;\n }\n ");
6496
6804
  };
6497
6805
  var disabledSlider = function (props) {
6498
- var _a, _b, _c, _d, _e, _f;
6806
+ var _a, _b, _c, _d, _e, _f, _g;
6499
6807
  var colors = getColors(props);
6500
- var semanticComponentColors = getSemanticComponentColors(props);
6501
- var semanticTextColors = getSemanticTextColors(props);
6502
- return "\n .".concat(material.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(material.sliderClasses.thumb, ".").concat(material.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(material.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(material.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(material.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 ");
6808
+ var semanticColors = getSemanticColors(props);
6809
+ var mode = getMode(props);
6810
+ return "\n .".concat(material.sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
6503
6811
  };
6504
6812
  var StyledSlider = styles.styled(material.Slider)(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
6505
6813
  var disabled = props.disabled;
@@ -6515,41 +6823,30 @@ var InputSlider = React.forwardRef(function (props, ref) {
6515
6823
  return (jsxRuntime.jsx(StyledSlider, __assign({ ref: ref, min: min, max: max }, rest, { orientation: "horizontal", "aria-label": "Slider - min ".concat(min, " to max ").concat(max) })));
6516
6824
  });
6517
6825
 
6518
- var sdsPropNames$1 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
6519
- var error = function (props) {
6826
+ var sdsPropNames$1 = ["sdsStyle", "sdsType", "intent", "hideLabel"];
6827
+ var negative = function (props) {
6520
6828
  var _a, _b, _c, _d;
6521
6829
  var borders = getBorders(props);
6522
- var semanticComponentColors = getSemanticComponentColors(props);
6523
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
6830
+ var semanticColors = getSemanticColors(props);
6831
+ return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
6524
6832
  };
6525
- var warning = function (props) {
6833
+ var notice = function (props) {
6526
6834
  var _a, _b, _c, _d;
6527
6835
  var borders = getBorders(props);
6528
- var semanticComponentColors = getSemanticComponentColors(props);
6529
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
6836
+ var semanticColors = getSemanticColors(props);
6837
+ return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
6530
6838
  };
6531
6839
  var disabledStyled$1 = function (props) {
6532
- var _a, _b;
6840
+ var _a, _b, _c;
6533
6841
  var borders = getBorders(props);
6534
- var colors = getColors(props);
6535
- return react.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 "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
6842
+ var semanticColors = getSemanticColors(props);
6843
+ return react.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 "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
6536
6844
  };
6537
6845
  var textArea = function (props) {
6538
6846
  var spaces = getSpaces(props);
6539
6847
  return react.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 "])), material.outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.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);
6540
6848
  };
6541
- var userInput = function (props) {
6542
- var _a, _b, _c;
6543
- var intent = props.intent;
6544
- var borders = getBorders(props);
6545
- var border = intent === "error"
6546
- ? (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default
6547
- : intent === "warning"
6548
- ? (_b = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _b === void 0 ? void 0 : _b.default
6549
- : (_c = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _c === void 0 ? void 0 : _c.default;
6550
- return react.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 "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border);
6551
- };
6552
- var StyledLabel = styles.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) {
6849
+ var StyledLabel = styles.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) {
6553
6850
  var spaces = getSpaces(props);
6554
6851
  return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
6555
6852
  });
@@ -6557,16 +6854,16 @@ var StyledInputBase = styles.styled(material.TextField, {
6557
6854
  shouldForwardProp: function (prop) {
6558
6855
  return !sdsPropNames$1.includes(prop.toString());
6559
6856
  },
6560
- })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6857
+ })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6561
6858
  var _a, _b, _c, _d;
6562
- var intent = props.intent, sdsType = props.sdsType, sdsStage = props.sdsStage, disabled = props.disabled;
6859
+ var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
6563
6860
  var spaces = getSpaces(props);
6564
6861
  var borders = getBorders(props);
6565
6862
  var corners = getCorners(props);
6566
- var semanticComponentColors = getSemanticComponentColors(props);
6567
- return react.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, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
6863
+ var semanticColors = getSemanticColors(props);
6864
+ return react.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, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && negative(props), intent === "notice" && notice(props), disabled && disabledStyled$1(props));
6568
6865
  });
6569
- var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
6866
+ var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7;
6570
6867
 
6571
6868
  /**
6572
6869
  * @see https://mui.com/material-ui/react-text-field/
@@ -6586,15 +6883,6 @@ var InputText = React.forwardRef(function InputText(props, ref) {
6586
6883
  * user is tabbing, we can apply different styles for :focus and :focus-visible states.
6587
6884
  */
6588
6885
  useDetectUserTabbing((ref ? ref : inputRef));
6589
- var _b = React.useState(false), hasValue = _b[0], setHasValue = _b[1];
6590
- var handleChange = function (event) {
6591
- if (event.target.value) {
6592
- setHasValue(true);
6593
- }
6594
- else {
6595
- setHasValue(false);
6596
- }
6597
- };
6598
6886
  var inputProps = {
6599
6887
  "aria-label": "".concat(label),
6600
6888
  };
@@ -6604,7 +6892,7 @@ var InputText = React.forwardRef(function InputText(props, ref) {
6604
6892
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
6605
6893
  }
6606
6894
  var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel, { htmlFor: id, children: label })) : (label);
6607
- return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.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))] }));
6895
+ return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.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))] }));
6608
6896
  });
6609
6897
 
6610
6898
  var toggle = function (props) {
@@ -6613,31 +6901,28 @@ var toggle = function (props) {
6613
6901
  var corners = getCorners(props);
6614
6902
  var shadows = getShadows(props);
6615
6903
  var iconSizes = getIconSizes(props);
6616
- var semanticComponentColors = getSemanticComponentColors(props);
6617
- return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n width: unset;\n }\n ");
6904
+ var semanticColors = getSemanticColors(props);
6905
+ return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(props), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n opacity: 1;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n }\n ");
6618
6906
  };
6619
6907
  var toggleOn = function (props) {
6620
- var _a, _b, _c, _d, _e, _f, _g;
6908
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6621
6909
  var disabled = props.disabled, value = props.value;
6622
6910
  var borders = getBorders(props);
6623
- var colors = getColors(props);
6624
6911
  var spaces = getSpaces(props);
6625
- var semanticComponentColors = getSemanticComponentColors(props);
6626
- var semanticTextColors = getSemanticTextColors(props);
6627
- 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(material.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(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = 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 &&
6628
- "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.blue[500], ";\n }\n }"), "\n ");
6912
+ var semanticColors = getSemanticColors(props);
6913
+ return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.icon, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n content: \"").concat(value, "\";\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
6914
+ "&:hover {\n outline: ".concat((_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.iconHover, ";\n }\n }"), "\n ");
6629
6915
  };
6630
6916
  var toggleOff = function (props) {
6631
- var _a, _b, _c, _d, _e, _f, _g, _h;
6917
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
6632
6918
  var disabled = props.disabled, value = props.value;
6633
6919
  var borders = getBorders(props);
6634
6920
  var spaces = getSpaces(props);
6635
- var semanticComponentColors = getSemanticComponentColors(props);
6636
- var semanticTextColors = getSemanticTextColors(props);
6921
+ var semanticColors = getSemanticColors(props);
6637
6922
  return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled
6638
- ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled
6639
- : (_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(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = 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 &&
6640
- "&: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(material.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 ");
6923
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
6924
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
6925
+ "&:hover {\n outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n }\n }"), "\n ");
6641
6926
  };
6642
6927
  var Toggle = styles.styled(material.Switch)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
6643
6928
  var checked = props.checked;
@@ -6665,13 +6950,14 @@ var doNotForwardProps$9 = ["sdsStyle", "sdsSize", "fontWeight"];
6665
6950
  var defaultStyle = function (props) {
6666
6951
  var _a, _b, _c, _d, _e, _f, _g;
6667
6952
  var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
6668
- var semanticTextColors = getSemanticTextColors(props);
6669
- var semanticComponentColors = getSemanticComponentColors(props);
6670
- return react.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);
6953
+ var semanticColors = getSemanticColors(props);
6954
+ return react.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);
6671
6955
  };
6672
6956
  var dashedStyle = function (props) {
6673
- var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a;
6674
- return react.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);
6957
+ var _a, _b, _c;
6958
+ var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
6959
+ var semanticColors = getSemanticColors(props);
6960
+ return react.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);
6675
6961
  };
6676
6962
  var smallStyle = function (props) {
6677
6963
  return fontBodyS$1(props);
@@ -6808,16 +7094,14 @@ var StyledText = styles.styled("span")(templateObject_1$f || (templateObject_1$f
6808
7094
  var minimal = function (props) {
6809
7095
  var _a, _b;
6810
7096
  var iconSizes = getIconSizes(props);
6811
- var semanticComponentColors = getSemanticComponentColors(props);
6812
- var semanticTextColors = getSemanticTextColors(props);
6813
- return react.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);
7097
+ var semanticColors = getSemanticColors(props);
7098
+ return react.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);
6814
7099
  };
6815
7100
  var tag = function (props) {
6816
7101
  var _a, _b, _c;
6817
7102
  var corners = getCorners(props);
6818
- var semanticComponentColors = getSemanticComponentColors(props);
6819
- var semanticTextColors = getSemanticTextColors(props);
6820
- return react.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);
7103
+ var semanticColors = getSemanticColors(props);
7104
+ return react.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);
6821
7105
  };
6822
7106
  var doNotForwardProps$6 = ["sdsStyle"];
6823
7107
  var StyledLoadingIndicator = styles.styled("div", {
@@ -6836,8 +7120,10 @@ var LoadingIndicator = function (_a) {
6836
7120
  };
6837
7121
 
6838
7122
  var StyledMenu = styles.styled(material.Menu)(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"])), material.menuClasses.paper, function (props) {
7123
+ var _a;
6839
7124
  var spaces = getSpaces(props);
6840
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7125
+ var semanticColors = getSemanticColors(props);
7126
+ 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 ");
6841
7127
  });
6842
7128
  var templateObject_1$e;
6843
7129
 
@@ -6864,7 +7150,7 @@ var StyledAutocomplete = styles.styled(material.Autocomplete, {
6864
7150
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
6865
7151
  })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
6866
7152
  var search = _a.search;
6867
- return !search && "height: 0;";
7153
+ return !search && "height: 0; margin: 0 !important;";
6868
7154
  });
6869
7155
  var InputBaseWrapper = styles.styled("div", {
6870
7156
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
@@ -6994,18 +7280,17 @@ var StyledTabs$1 = styles.styled(material.Tabs, {
6994
7280
  shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
6995
7281
  })(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6996
7282
  var _a, _b;
6997
- var _c = props.sdsIndicatorColor, sdsIndicatorColor = _c === void 0 ? "info" : _c;
6998
7283
  var spaces = getSpaces(props);
6999
- var semanticComponentColors = getSemanticComponentColors(props);
7000
- 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(material.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(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
7284
+ var semanticColors = getSemanticColors(props);
7285
+ 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(material.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(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
7001
7286
  });
7002
7287
  var StyledTab$1 = styles.styled(material.Tab, {
7003
7288
  shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
7004
7289
  })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7005
- var _a, _b;
7290
+ var _a, _b, _c, _d;
7006
7291
  var spaces = getSpaces(props);
7007
- var semanticComponentColors = getSemanticComponentColors(props);
7008
- 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 ");
7292
+ var semanticColors = getSemanticColors(props);
7293
+ 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 ");
7009
7294
  });
7010
7295
  var templateObject_1$c, templateObject_2$6;
7011
7296
 
@@ -7063,7 +7348,7 @@ function useInView(items) {
7063
7348
  }
7064
7349
 
7065
7350
  var NavigationJumpTo = React.forwardRef(function (props, ref) {
7066
- 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"]);
7351
+ var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
7067
7352
  var _b = React.useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
7068
7353
  var _c = React.useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
7069
7354
  var _d = React.useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
@@ -7143,7 +7428,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
7143
7428
  useScrollStopListener(function () {
7144
7429
  setNavItemClicked(false);
7145
7430
  });
7146
- return (jsxRuntime.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) {
7431
+ return (jsxRuntime.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) {
7147
7432
  var _b;
7148
7433
  var title = _a.title, elementRef = _a.elementRef;
7149
7434
  return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
@@ -7162,19 +7447,18 @@ var StyledNotification = styles.styled(material.Alert, {
7162
7447
  var shadows = getShadows(props);
7163
7448
  var corners = getCorners(props);
7164
7449
  var iconSizes = getIconSizes(props);
7165
- var semanticComponentColors = getSemanticComponentColors(props);
7166
- var semanticTextColors = getSemanticTextColors(props);
7450
+ var semanticColors = getSemanticColors(props);
7167
7451
  var typography = getTypography(props);
7168
- 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";
7169
- 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";
7170
- 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";
7452
+ 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";
7453
+ 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";
7454
+ 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";
7171
7455
  // (masoudmanson): The Notification Icon should be vertically centered with the Notification
7172
7456
  // Title. The padding-top of the Notification Title is calculated based on the difference
7173
7457
  // between the height of the Icon and the line-height of the Notification Title.
7174
7458
  var alertMessagePaddingTop = Math.abs((((_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _g !== void 0 ? _g : 0) -
7175
7459
  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"))) /
7176
7460
  2);
7177
- 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 ");
7461
+ 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 ");
7178
7462
  });
7179
7463
  var StyledButtonWrapper = styles.styled("div")(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7180
7464
  var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
@@ -7243,8 +7527,8 @@ var doNotForwardProps$2 = [
7243
7527
  ];
7244
7528
  var StyledPaginationButton = styles.styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7245
7529
  var _a, _b, _c;
7246
- var semanticComponentColors = getSemanticComponentColors(props);
7247
- 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 ");
7530
+ var semanticColors = getSemanticColors(props);
7531
+ 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 ");
7248
7532
  });
7249
7533
  var StyledPaginationChevronList = styles.styled("li", {
7250
7534
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7252,17 +7536,16 @@ var StyledPaginationChevronList = styles.styled("li", {
7252
7536
  var _a, _b, _c, _d, _e;
7253
7537
  var disabled = props.disabled;
7254
7538
  var spaces = getSpaces(props);
7255
- var semanticComponentColors = getSemanticComponentColors(props);
7256
- 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 ");
7539
+ var semanticColors = getSemanticColors(props);
7540
+ 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 ");
7257
7541
  });
7258
7542
  var StyledPagination = styles.styled("ul", {
7259
7543
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
7260
7544
  })(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);
7261
7545
  var selectedPageStyle = function (props) {
7262
7546
  var _a, _b, _c, _d;
7263
- var semanticComponentColors = getSemanticComponentColors(props);
7264
- var semanticTextColors = getSemanticTextColors(props);
7265
- 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 ");
7547
+ var semanticColors = getSemanticColors(props);
7548
+ 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 ");
7266
7549
  };
7267
7550
  var Page = styles.styled("li", {
7268
7551
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -7271,9 +7554,8 @@ var Page = styles.styled("li", {
7271
7554
  var selected = props.selected, sdsStyle = props.sdsStyle;
7272
7555
  var spaces = getSpaces(props);
7273
7556
  var corners = getCorners(props);
7274
- var semanticComponentColors = getSemanticComponentColors(props);
7275
- var semanticTextColors = getSemanticTextColors(props);
7276
- 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 ");
7557
+ var semanticColors = getSemanticColors(props);
7558
+ 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 ");
7277
7559
  });
7278
7560
  var templateObject_1$a, templateObject_2$4, templateObject_3$2, templateObject_4$1;
7279
7561
 
@@ -7402,10 +7684,10 @@ var doNotForwardProps$1 = ["buttonDefinition"];
7402
7684
  var StyledSegmentedControl = styles.styled(material.ToggleButtonGroup, {
7403
7685
  shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
7404
7686
  })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7405
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7687
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
7406
7688
  var spaces = getSpaces(props);
7407
- var semanticComponentColors = getSemanticComponentColors(props);
7408
- return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.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(material.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 ");
7689
+ var semanticColors = getSemanticColors(props);
7690
+ return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.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(material.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 ");
7409
7691
  });
7410
7692
  var templateObject_1$8;
7411
7693
 
@@ -7453,24 +7735,24 @@ var doNotForwardProps = [
7453
7735
  "hover",
7454
7736
  ];
7455
7737
  var disabledStyled = function (props) {
7456
- var _a, _b, _c;
7457
- var semanticComponentColors = getSemanticComponentColors(props);
7458
- var semanticTextColors = getSemanticTextColors(props);
7459
- 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 ");
7738
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
7739
+ var semanticColors = getSemanticColors(props);
7740
+ var mode = getMode(props);
7741
+ 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 ");
7460
7742
  };
7461
7743
  var hoverStyled = function (props) {
7462
7744
  var _a;
7463
- var semanticComponentColors = getSemanticComponentColors(props);
7464
- 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 ");
7745
+ var semanticColors = getSemanticColors(props);
7746
+ 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 ");
7465
7747
  };
7466
7748
  var StyledTableRow = styles.styled("tr", {
7467
7749
  shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
7468
7750
  })(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
7469
7751
  var _a, _b;
7470
7752
  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;
7471
- var semanticComponentColors = getSemanticComponentColors(props);
7753
+ var semanticColors = getSemanticColors(props);
7472
7754
  var borders = getBorders(props);
7473
- 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 ");
7755
+ 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 ");
7474
7756
  });
7475
7757
  var templateObject_1$6;
7476
7758
 
@@ -7483,8 +7765,9 @@ var TableRow = React.forwardRef(function (props, ref) {
7483
7765
  });
7484
7766
 
7485
7767
  var StyledTableHeader = styles.styled("thead")(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7486
- var colors = getColors(props);
7487
- return "\n border-bottom: solid 2px ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n ");
7768
+ var _a;
7769
+ var semanticColors = getSemanticColors(props);
7770
+ 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 ");
7488
7771
  });
7489
7772
  var templateObject_1$5;
7490
7773
 
@@ -7497,8 +7780,8 @@ var TabsContext = React.createContext({ sdsSize: "large" });
7497
7780
 
7498
7781
  var Wrapper = styles.styled("span")(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7499
7782
  var _a, _b;
7500
- var semanticTextColors = getSemanticTextColors(props);
7501
- 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 ");
7783
+ var semanticColors = getSemanticColors(props);
7784
+ 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 ");
7502
7785
  });
7503
7786
  var LABEL_DO_NOT_FORWARD_PROPS = ["sdsSize"];
7504
7787
  var Label = styles.styled("span", {
@@ -7526,9 +7809,9 @@ var Count = styles.styled("span", {
7526
7809
  return isLarge ? fontBodyXs$2(props) : fontBodyXxs$1(props);
7527
7810
  }, function (props) {
7528
7811
  var _a;
7529
- var semanticTextColors = getSemanticTextColors(props);
7812
+ var semanticColors = getSemanticColors(props);
7530
7813
  var spaces = getSpaces(props);
7531
- 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 ");
7814
+ 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 ");
7532
7815
  });
7533
7816
  var templateObject_1$4, templateObject_2$3, templateObject_3$1;
7534
7817
 
@@ -7545,11 +7828,12 @@ var StyledTabs = styles.styled(TempTabs, {
7545
7828
  return !TABS_DO_NOT_FORWARD_PROPS.includes(String(prop));
7546
7829
  },
7547
7830
  })(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) {
7548
- var underlined = props.underlined, _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a;
7549
- var colors = getColors(props);
7831
+ var _a;
7832
+ var underlined = props.underlined, _b = props.sdsSize, sdsSize = _b === void 0 ? "large" : _b;
7550
7833
  var spaces = getSpaces(props);
7834
+ var semanticColors = getSemanticColors(props);
7551
7835
  var isLarge = sdsSize === "large";
7552
- 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 ");
7836
+ 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 ");
7553
7837
  });
7554
7838
  var TAB_DO_NOT_FORWARD_PROPS = ["sdsSize"];
7555
7839
  var StyledTab = styles.styled(material.Tab, {
@@ -7557,9 +7841,8 @@ var StyledTab = styles.styled(material.Tab, {
7557
7841
  })(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) {
7558
7842
  var _a, _b, _c, _d, _e, _f, _g;
7559
7843
  var spaces = getSpaces(props);
7560
- var semanticTextColors = getSemanticTextColors(props);
7561
- var semanticComponentColors = getSemanticComponentColors(props);
7562
- 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 ");
7844
+ var semanticColors = getSemanticColors(props);
7845
+ 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 ");
7563
7846
  });
7564
7847
  function tabFontMixin(props) {
7565
7848
  var sdsSize = props.sdsSize;
@@ -7570,8 +7853,8 @@ var templateObject_1$3, templateObject_2$2;
7570
7853
 
7571
7854
  var TabIndicator = function (theme) {
7572
7855
  var _a;
7573
- var semanticComponentColors = getSemanticComponentColors({ theme: theme });
7574
- return css.css(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);
7856
+ var semanticColors = getSemanticColors({ theme: theme });
7857
+ return css.css(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);
7575
7858
  };
7576
7859
  var Tabs = React.forwardRef(function Tabs(props, ref) {
7577
7860
  var _a = props.sdsSize, sdsSize = _a === void 0 ? "large" : _a, rest = __rest(props, ["sdsSize"]);
@@ -7645,10 +7928,10 @@ var sdsPropNames = ["contentAlert", "itemAlign"];
7645
7928
  var disabledStyle = function (props) {
7646
7929
  var _a;
7647
7930
  var disabled = props.disabled;
7648
- var semanticTextColors = getSemanticTextColors(props);
7931
+ var semanticColors = getSemanticColors(props);
7649
7932
  if (!disabled)
7650
7933
  return "";
7651
- return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.disabled, ";\n ");
7934
+ return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n ");
7652
7935
  };
7653
7936
  var Section = styles.styled("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), disabledStyle, function (props) {
7654
7937
  var _a;
@@ -7659,10 +7942,10 @@ var Section = styles.styled("div")(templateObject_1 || (templateObject_1 = __mak
7659
7942
  var SectionLabel = styles.styled("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontCapsXxxxs, disabledStyle, function (props) {
7660
7943
  var _a;
7661
7944
  var spaces = getSpaces(props);
7662
- var semanticTextColors = getSemanticTextColors(props);
7945
+ var semanticColors = getSemanticColors(props);
7663
7946
  if (!props.label)
7664
7947
  return "";
7665
- 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 ");
7948
+ 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 ");
7666
7949
  });
7667
7950
  var RowLabel = styles.styled(material.TableCell, {
7668
7951
  shouldForwardProp: function (prop) {
@@ -7743,7 +8026,9 @@ exports.MenuSelect = MenuSelect;
7743
8026
  exports.NavigationJumpTo = NavigationJumpTo;
7744
8027
  exports.Notification = Notification;
7745
8028
  exports.Pagination = Pagination;
7746
- exports.SDSAppTheme = SDSAppTheme;
8029
+ exports.SDSChooseTheme = SDSChooseTheme;
8030
+ exports.SDSDarkAppTheme = SDSDarkAppTheme;
8031
+ exports.SDSLightAppTheme = SDSLightAppTheme;
7747
8032
  exports.SegmentedControl = SegmentedControl;
7748
8033
  exports.Tab = Tab;
7749
8034
  exports.Table = Table;
@@ -7752,6 +8037,7 @@ exports.TableRow = TableRow;
7752
8037
  exports.Tabs = Tabs;
7753
8038
  exports.Tag = Tag;
7754
8039
  exports.TagFilter = TagFilter;
8040
+ exports.Theme = Theme;
7755
8041
  exports.Tooltip = Tooltip;
7756
8042
  exports.TooltipCondensed = TooltipCondensed;
7757
8043
  exports.TooltipTable = TooltipTableContent;
@@ -7799,9 +8085,9 @@ exports.getColors = getColors;
7799
8085
  exports.getCorners = getCorners;
7800
8086
  exports.getFontWeights = getFontWeights;
7801
8087
  exports.getIconSizes = getIconSizes;
8088
+ exports.getMode = getMode;
7802
8089
  exports.getPalette = getPalette;
7803
- exports.getSemanticComponentColors = getSemanticComponentColors;
7804
- exports.getSemanticTextColors = getSemanticTextColors;
8090
+ exports.getSemanticColors = getSemanticColors;
7805
8091
  exports.getShadows = getShadows;
7806
8092
  exports.getSpaces = getSpaces;
7807
8093
  exports.getSpacings = getSpacings;