@czi-sds/components 21.7.0 → 22.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 +40 -29
  2. package/dist/index.cjs.js +639 -586
  3. package/dist/index.esm.d.ts +40 -29
  4. package/dist/index.esm.js +639 -588
  5. package/dist/tailwind.json +1229 -397
  6. package/dist/tsconfig.tsbuildinfo +1 -1
  7. package/dist/variables.css +199 -189
  8. package/dist/variables.scss +199 -189
  9. package/package.json +2 -2
package/dist/index.esm.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import * as React from 'react';
4
- import React__default, { forwardRef, useEffect, useRef, useState, useCallback, useMemo, createContext, useContext } from 'react';
4
+ import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, useContext } from 'react';
5
5
  import { css } from '@emotion/react';
6
6
  import { createTheme, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box, Drawer, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
7
7
  import styled from '@emotion/styled';
@@ -115,12 +115,12 @@ var SDSLightThemeColors = {
115
115
  purple: {
116
116
  "100": "#efeafe",
117
117
  "200": "#e4dbfc",
118
- "300": "#cbbaf8",
118
+ "300": "#cbbaF8",
119
119
  "400": "#b296f2",
120
120
  "500": "#8b54e2",
121
121
  "600": "#6526b5",
122
122
  "700": "#490092",
123
- "800": "#1a004c",
123
+ "800": "#26004c",
124
124
  },
125
125
  red: {
126
126
  "100": "#ffe8e6",
@@ -128,31 +128,31 @@ var SDSLightThemeColors = {
128
128
  "300": "#ffafa8",
129
129
  "400": "#ff7e78",
130
130
  "500": "#db2131",
131
- "600": "#980013",
131
+ "600": "#980017",
132
132
  "700": "#6f0008",
133
133
  "800": "#340000",
134
134
  },
135
135
  yellow: {
136
- "100": "#ffefcf",
136
+ "100": "#fff3db",
137
137
  "200": "#ffdb97",
138
138
  "300": "#ffca5c",
139
139
  "400": "#fab700",
140
140
  "500": "#da9900",
141
- "600": "#b77800",
141
+ "600": "#b07300",
142
142
  "700": "#7c3e00",
143
143
  "800": "#541700",
144
144
  },
145
145
  };
146
146
  var SDSDarkThemeColors = {
147
147
  blue: {
148
- "100": "#002573",
149
- "200": "#0048c5",
150
- "300": "#2573f4",
151
- "400": "#5b9aff",
152
- "500": "#a2c9ff",
153
- "600": "#cde3ff",
154
- "700": "#e2eeff",
155
- "800": "#f7faff",
148
+ "100": "#0f1d4a",
149
+ "200": "#0a216e",
150
+ "300": "#0647b8",
151
+ "400": "#2573f4",
152
+ "500": "#5b9aff",
153
+ "600": "#a2c9ff",
154
+ "700": "#cde3ff",
155
+ "800": "#e2eeff",
156
156
  },
157
157
  gray: {
158
158
  "100": "#333333",
@@ -168,44 +168,44 @@ var SDSDarkThemeColors = {
168
168
  "900": "#ffffff",
169
169
  },
170
170
  green: {
171
- "100": "#053918",
172
- "200": "#12612e",
173
- "300": "#288b49",
174
- "400": "#43ae63",
175
- "500": "#85d898",
176
- "600": "#bcecc5",
177
- "700": "#daf4de",
178
- "800": "#f7fbf6",
171
+ "100": "#082608",
172
+ "200": "#063617",
173
+ "300": "#10632e",
174
+ "400": "#278b48",
175
+ "500": "#4bae68",
176
+ "600": "#85d898",
177
+ "700": "#bcecc5",
178
+ "800": "#daf4de",
179
179
  },
180
180
  purple: {
181
- "100": "#4b0190",
182
- "200": "#6b2ebc",
183
- "300": "#905de6",
184
- "400": "#aa89ef",
185
- "500": "#cebef8",
186
- "600": "#e4dcfc",
187
- "700": "#f0ebfe",
188
- "800": "#fbf9ff",
181
+ "100": "#331252",
182
+ "200": "#410f70",
183
+ "300": "#6429b2",
184
+ "400": "#905de6",
185
+ "500": "#aa89ef",
186
+ "600": "#cebef8",
187
+ "700": "#e4dcfc",
188
+ "800": "#f0ebfe",
189
189
  },
190
190
  red: {
191
- "100": "#630008",
192
- "200": "#A30000",
193
- "300": "#E52722",
194
- "400": "#FF695B",
195
- "500": "#FF9385",
196
- "600": "#FFBDB3",
197
- "700": "#FFD8D1",
198
- "800": "#FFF1EE",
191
+ "100": "#330603",
192
+ "200": "#660a12",
193
+ "300": "#9e1c1c",
194
+ "400": "#c73028",
195
+ "500": "#e05043",
196
+ "600": "#ff988a",
197
+ "700": "#ffbdb3",
198
+ "800": "#ffd8d1",
199
199
  },
200
200
  yellow: {
201
- "100": "#552300",
202
- "200": "#834500",
203
- "300": "#985a00",
204
- "400": "#ac6c00",
205
- "500": "#cf8e00",
206
- "600": "#efad00",
207
- "700": "#ffdc9a",
208
- "800": "#fcf2e3",
201
+ "100": "#361b07",
202
+ "200": "#52270a",
203
+ "300": "#965a0b",
204
+ "400": "#bd8804",
205
+ "500": "#d9a943",
206
+ "600": "#e5bc63",
207
+ "700": "#f5d789",
208
+ "800": "#ffe6a8",
209
209
  },
210
210
  };
211
211
  /**
@@ -794,68 +794,128 @@ var sharedAppTheme = {
794
794
  /**
795
795
  * Create a SDS App Theme with custom colors that follows the SDS color model.
796
796
  */
797
- var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), {
798
- // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
799
- // applications to override those colors using their own custom theme.
800
- // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
801
- // we allow other apps to specify their colors once, and have them apply
802
- // throughout the application, such as in borders, etc without having to manually
803
- // override every theme property that makes use of colors.
804
- borders: {
805
- accent: {
806
- default: "1px solid ".concat(colors.blue[500]),
807
- focused: "1px solid ".concat(colors.blue[500]),
808
- hover: "1px solid ".concat(colors.blue[600]),
809
- open: "1px solid ".concat(colors.blue[500]),
810
- pressed: "1px solid ".concat(colors.blue[700]),
811
- selected: "1px solid ".concat(colors.blue[500]),
812
- },
813
- base: {
814
- default: "1px solid ".concat(colors.gray[500]),
815
- disabled: "1px solid ".concat(colors.gray[300]),
816
- divider: "1px solid ".concat(colors.gray[200]),
817
- hover: "1px solid ".concat(colors.gray[900]),
818
- pressed: "1px solid ".concat(colors.gray[900]),
819
- table: "1px solid ".concat(colors.gray[300]),
820
- },
821
- beta: {
822
- default: "1px solid ".concat(colors.purple[600]),
823
- extraThick: "4px solid ".concat(colors.purple[600]),
824
- thick: "2px solid ".concat(colors.purple[600]),
825
- },
826
- info: {
827
- default: "1px solid ".concat(colors.blue[600]),
828
- extraThick: "4px solid ".concat(colors.blue[600]),
829
- thick: "2px solid ".concat(colors.blue[600]),
830
- },
831
- link: {
832
- dashed: "1px dashed",
833
- solid: "1px solid",
834
- },
835
- negative: {
836
- default: "1px solid ".concat(colors.red[600]),
837
- extraThick: "4px solid ".concat(colors.red[600]),
838
- thick: "2px solid ".concat(colors.red[600]),
839
- },
840
- neutral: {
841
- default: "1px solid ".concat(colors.gray[500]),
842
- extraThick: "4px solid ".concat(colors.gray[500]),
843
- thick: "2px solid ".concat(colors.gray[500]),
844
- },
845
- none: "none",
846
- notice: {
847
- default: "1px solid ".concat(colors.yellow[600]),
848
- extraThick: "4px solid ".concat(colors.yellow[600]),
849
- thick: "2px solid ".concat(colors.yellow[600]),
850
- },
851
- positive: {
852
- default: "1px solid ".concat(colors.green[600]),
853
- extraThick: "4px solid ".concat(colors.green[600]),
854
- thick: "2px solid ".concat(colors.green[600]),
855
- },
856
- }, colors: colors })); };
797
+ var makeSdsSemanticAppTheme = function (colors) { return (__assign(__assign({}, sharedAppTheme), { colors: colors })); };
857
798
  var SDSLightAppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors);
858
799
  var SDSDarkAppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors);
800
+ // (mlila) whenever our theme uses colors, we need to make sure we allow consuming
801
+ // applications to override those colors using their own custom theme.
802
+ // By defining borders using SDSAppTheme.colors instead of defaultThemeColors,
803
+ // we allow other apps to specify their colors once, and have them apply
804
+ // throughout the application, such as in borders, etc without having to manually
805
+ // override every theme property that makes use of colors.
806
+ //
807
+ // (masoudmanson): We need to define borders separately for light and dark themes
808
+ // because the border colors are different for each theme.
809
+ SDSLightAppTheme.borders = {
810
+ accent: {
811
+ default: "1px solid ".concat(SDSLightThemeColors.blue[500]),
812
+ focused: "1px solid ".concat(SDSLightThemeColors.blue[500]),
813
+ hover: "1px solid ".concat(SDSLightThemeColors.blue[600]),
814
+ open: "1px solid ".concat(SDSLightThemeColors.blue[500]),
815
+ pressed: "1px solid ".concat(SDSLightThemeColors.blue[700]),
816
+ selected: "1px solid ".concat(SDSLightThemeColors.blue[500]),
817
+ },
818
+ base: {
819
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
820
+ disabled: "1px solid ".concat(SDSLightThemeColors.gray[300]),
821
+ divider: "1px solid ".concat(SDSLightThemeColors.gray[200]),
822
+ dividerInverse: "1px solid ".concat(SDSLightThemeColors.gray[600]),
823
+ hover: "1px solid ".concat(SDSLightThemeColors.gray[900]),
824
+ inverse: "1px solid ".concat(SDSLightThemeColors.gray[50]),
825
+ pressed: "1px solid ".concat(SDSLightThemeColors.gray[900]),
826
+ table: "1px solid ".concat(SDSLightThemeColors.gray[300]),
827
+ },
828
+ beta: {
829
+ default: "1px solid ".concat(SDSLightThemeColors.purple[600]),
830
+ extraThick: "4px solid ".concat(SDSLightThemeColors.purple[600]),
831
+ thick: "2px solid ".concat(SDSLightThemeColors.purple[600]),
832
+ },
833
+ info: {
834
+ default: "1px solid ".concat(SDSLightThemeColors.blue[600]),
835
+ extraThick: "4px solid ".concat(SDSLightThemeColors.blue[600]),
836
+ thick: "2px solid ".concat(SDSLightThemeColors.blue[600]),
837
+ },
838
+ link: {
839
+ dashed: "1px dashed",
840
+ solid: "1px solid",
841
+ },
842
+ negative: {
843
+ default: "1px solid ".concat(SDSLightThemeColors.red[600]),
844
+ extraThick: "4px solid ".concat(SDSLightThemeColors.red[600]),
845
+ thick: "2px solid ".concat(SDSLightThemeColors.red[600]),
846
+ },
847
+ neutral: {
848
+ default: "1px solid ".concat(SDSLightThemeColors.gray[500]),
849
+ extraThick: "4px solid ".concat(SDSLightThemeColors.gray[500]),
850
+ thick: "2px solid ".concat(SDSLightThemeColors.gray[500]),
851
+ },
852
+ none: "none",
853
+ notice: {
854
+ default: "1px solid ".concat(SDSLightThemeColors.yellow[600]),
855
+ extraThick: "4px solid ".concat(SDSLightThemeColors.yellow[600]),
856
+ thick: "2px solid ".concat(SDSLightThemeColors.yellow[600]),
857
+ },
858
+ positive: {
859
+ default: "1px solid ".concat(SDSLightThemeColors.green[600]),
860
+ extraThick: "4px solid ".concat(SDSLightThemeColors.green[600]),
861
+ thick: "2px solid ".concat(SDSLightThemeColors.green[600]),
862
+ },
863
+ };
864
+ SDSDarkAppTheme.borders = {
865
+ accent: {
866
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
867
+ focused: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
868
+ hover: "1px solid ".concat(SDSDarkThemeColors.blue[700]),
869
+ open: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
870
+ pressed: "1px solid ".concat(SDSDarkThemeColors.blue[800]),
871
+ selected: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
872
+ },
873
+ base: {
874
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
875
+ disabled: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
876
+ divider: "1px solid ".concat(SDSDarkThemeColors.gray[200]),
877
+ dividerInverse: "1px solid ".concat(SDSDarkThemeColors.gray[600]),
878
+ hover: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
879
+ inverse: "1px solid ".concat(SDSDarkThemeColors.gray[50]),
880
+ pressed: "1px solid ".concat(SDSDarkThemeColors.gray[900]),
881
+ table: "1px solid ".concat(SDSDarkThemeColors.gray[300]),
882
+ },
883
+ beta: {
884
+ default: "1px solid ".concat(SDSDarkThemeColors.purple[600]),
885
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.purple[600]),
886
+ thick: "2px solid ".concat(SDSDarkThemeColors.purple[600]),
887
+ },
888
+ info: {
889
+ default: "1px solid ".concat(SDSDarkThemeColors.blue[600]),
890
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.blue[600]),
891
+ thick: "2px solid ".concat(SDSDarkThemeColors.blue[600]),
892
+ },
893
+ link: {
894
+ dashed: "1px dashed",
895
+ solid: "1px solid",
896
+ },
897
+ negative: {
898
+ default: "1px solid ".concat(SDSDarkThemeColors.red[600]),
899
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.red[600]),
900
+ thick: "2px solid ".concat(SDSDarkThemeColors.red[600]),
901
+ },
902
+ neutral: {
903
+ default: "1px solid ".concat(SDSDarkThemeColors.gray[500]),
904
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.gray[500]),
905
+ thick: "2px solid ".concat(SDSDarkThemeColors.gray[500]),
906
+ },
907
+ none: "none",
908
+ notice: {
909
+ default: "1px solid ".concat(SDSDarkThemeColors.yellow[600]),
910
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.yellow[600]),
911
+ thick: "2px solid ".concat(SDSDarkThemeColors.yellow[600]),
912
+ },
913
+ positive: {
914
+ default: "1px solid ".concat(SDSDarkThemeColors.green[600]),
915
+ extraThick: "4px solid ".concat(SDSDarkThemeColors.green[600]),
916
+ thick: "2px solid ".concat(SDSDarkThemeColors.green[600]),
917
+ },
918
+ };
859
919
  /**
860
920
  * Helper function to select the appropriate theme settings.
861
921
  *
@@ -889,25 +949,32 @@ var SDSPaletteLight = function (appTheme) {
889
949
  fillHover: appTheme.colors.blue[600],
890
950
  fillPressed: appTheme.colors.blue[700],
891
951
  fillPrimary: appTheme.colors.blue[500],
892
- icon: appTheme.colors.blue[500],
893
- iconFocus: appTheme.colors.blue[500],
894
- iconHover: appTheme.colors.blue[600],
895
- iconOpen: appTheme.colors.blue[500],
896
- iconPressed: appTheme.colors.blue[700],
897
- iconSelected: appTheme.colors.blue[500],
898
- surfacePrimary: appTheme.colors.blue[100],
899
- surfaceSecondary: appTheme.colors.blue[500],
952
+ ornament: appTheme.colors.blue[500],
953
+ ornamentFocus: appTheme.colors.blue[500],
954
+ ornamentHover: appTheme.colors.blue[600],
955
+ ornamentOpen: appTheme.colors.blue[500],
956
+ ornamentPressed: appTheme.colors.blue[700],
957
+ ornamentSelected: appTheme.colors.blue[500],
958
+ surfacePrimary: appTheme.colors.blue[500],
959
+ surfaceSecondary: appTheme.colors.blue[100],
900
960
  textAction: appTheme.colors.blue[500],
901
961
  textActionHover: appTheme.colors.blue[600],
902
962
  textActionPressed: appTheme.colors.blue[700],
903
963
  },
904
964
  base: {
905
- border: appTheme.colors.gray[500],
965
+ backgroundPrimary: appTheme.colors.gray[50],
966
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
967
+ backgroundSecondary: appTheme.colors.gray[100],
968
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
969
+ backgroundTertiary: appTheme.colors.gray[200],
970
+ border: appTheme.colors.gray[600],
906
971
  borderDisabled: appTheme.colors.gray[300],
907
972
  borderHover: appTheme.colors.gray[900],
973
+ borderInverse: appTheme.colors.gray[50],
908
974
  borderPressed: appTheme.colors.gray[900],
909
975
  borderTable: appTheme.colors.gray[300],
910
976
  divider: appTheme.colors.gray[200],
977
+ dividerInverse: appTheme.colors.gray[600],
911
978
  fillDisabled: appTheme.colors.gray[200],
912
979
  /* the number 47 is the opacity of the color, which is equal to 28% */
913
980
  fillHover: appTheme.colors.gray[300] + "47",
@@ -915,56 +982,53 @@ var SDSPaletteLight = function (appTheme) {
915
982
  fillPressed: appTheme.colors.gray[300] + "47",
916
983
  fillPrimary: appTheme.colors.gray[50],
917
984
  fillSelected: appTheme.colors.gray[900],
918
- iconDisabled: appTheme.colors.gray[300],
919
- iconPrimary: appTheme.colors.gray[500],
920
- iconPrimaryHover: appTheme.colors.gray[900],
921
- iconPrimaryInverse: appTheme.colors.gray[50],
922
- iconPrimaryInverseHover: appTheme.colors.gray[400],
923
- iconPrimaryInversePressed: appTheme.colors.gray[400],
924
- iconPrimaryPressed: appTheme.colors.gray[900],
925
- iconSecondary: appTheme.colors.gray[900],
926
- surfaceBackground: appTheme.colors.gray[50],
927
- surfacePrimary: appTheme.colors.gray[50],
928
- surfacePrimaryInverse: appTheme.colors.gray[900],
929
- surfaceSecondary: appTheme.colors.gray[100],
930
- surfaceTertiary: appTheme.colors.gray[200],
985
+ ornamentDisabled: appTheme.colors.gray[300],
986
+ ornamentOnFill: appTheme.colors.gray[50],
987
+ ornamentPrimary: appTheme.colors.gray[900],
988
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
989
+ ornamentSecondary: appTheme.colors.gray[600],
990
+ ornamentSecondaryHover: appTheme.colors.gray[900],
991
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
992
+ surface: appTheme.colors.gray[50],
993
+ surfaceInverse: appTheme.colors.gray[900],
931
994
  textDisabled: appTheme.colors.gray[300],
995
+ textOnFill: appTheme.colors.gray[50],
932
996
  textPrimary: appTheme.colors.gray[900],
933
997
  textPrimaryInverse: appTheme.colors.gray[50],
934
998
  textSecondary: appTheme.colors.gray[600],
935
999
  textSecondaryInverse: appTheme.colors.gray[300],
936
1000
  },
937
1001
  beta: {
938
- border: appTheme.colors.purple[500],
1002
+ border: appTheme.colors.purple[600],
939
1003
  fillHover: appTheme.colors.purple[600],
940
1004
  fillPressed: appTheme.colors.purple[700],
941
1005
  fillPrimary: appTheme.colors.purple[500],
942
1006
  fillSecondary: appTheme.colors.purple[100],
943
1007
  ornament: appTheme.colors.purple[600],
944
- surfacePrimary: appTheme.colors.purple[100],
945
- surfaceSecondary: appTheme.colors.purple[500],
1008
+ surfacePrimary: appTheme.colors.purple[500],
1009
+ surfaceSecondary: appTheme.colors.purple[100],
946
1010
  text: appTheme.colors.purple[600],
947
1011
  },
948
1012
  info: {
949
- border: appTheme.colors.blue[500],
1013
+ border: appTheme.colors.blue[600],
950
1014
  fillHover: appTheme.colors.blue[600],
951
1015
  fillPressed: appTheme.colors.blue[700],
952
1016
  fillPrimary: appTheme.colors.blue[500],
953
1017
  fillSecondary: appTheme.colors.blue[100],
954
1018
  ornament: appTheme.colors.blue[600],
955
- surfacePrimary: appTheme.colors.blue[100],
956
- surfaceSecondary: appTheme.colors.blue[500],
1019
+ surfacePrimary: appTheme.colors.blue[500],
1020
+ surfaceSecondary: appTheme.colors.blue[100],
957
1021
  text: appTheme.colors.blue[600],
958
1022
  },
959
1023
  negative: {
960
- border: appTheme.colors.red[500],
1024
+ border: appTheme.colors.red[600],
961
1025
  fillHover: appTheme.colors.red[600],
962
1026
  fillPressed: appTheme.colors.red[700],
963
1027
  fillPrimary: appTheme.colors.red[500],
964
1028
  fillSecondary: appTheme.colors.red[100],
965
1029
  ornament: appTheme.colors.red[600],
966
- surfacePrimary: appTheme.colors.red[100],
967
- surfaceSecondary: appTheme.colors.red[500],
1030
+ surfacePrimary: appTheme.colors.red[500],
1031
+ surfaceSecondary: appTheme.colors.red[100],
968
1032
  text: appTheme.colors.red[600],
969
1033
  },
970
1034
  neutral: {
@@ -972,32 +1036,32 @@ var SDSPaletteLight = function (appTheme) {
972
1036
  fillHover: appTheme.colors.gray[600],
973
1037
  fillPressed: appTheme.colors.gray[700],
974
1038
  fillPrimary: appTheme.colors.gray[500],
975
- fillSecondary: appTheme.colors.gray[100],
1039
+ fillSecondary: appTheme.colors.gray[200],
976
1040
  ornament: appTheme.colors.gray[700],
977
- surfacePrimary: appTheme.colors.gray[200],
978
- surfaceSecondary: appTheme.colors.gray[500],
1041
+ surfacePrimary: appTheme.colors.gray[500],
1042
+ surfaceSecondary: appTheme.colors.gray[200],
979
1043
  text: appTheme.colors.gray[700],
980
1044
  },
981
1045
  notice: {
982
- border: appTheme.colors.yellow[500],
1046
+ border: appTheme.colors.yellow[600],
983
1047
  fillHover: appTheme.colors.yellow[600],
984
1048
  fillPressed: appTheme.colors.yellow[700],
985
1049
  fillPrimary: appTheme.colors.yellow[500],
986
1050
  fillSecondary: appTheme.colors.yellow[100],
987
1051
  ornament: appTheme.colors.yellow[600],
988
- surfacePrimary: appTheme.colors.yellow[100],
989
- surfaceSecondary: appTheme.colors.yellow[500],
1052
+ surfacePrimary: appTheme.colors.yellow[500],
1053
+ surfaceSecondary: appTheme.colors.yellow[100],
990
1054
  text: appTheme.colors.yellow[600],
991
1055
  },
992
1056
  positive: {
993
- border: appTheme.colors.green[500],
1057
+ border: appTheme.colors.green[600],
994
1058
  fillHover: appTheme.colors.green[600],
995
1059
  fillPressed: appTheme.colors.green[700],
996
1060
  fillPrimary: appTheme.colors.green[500],
997
1061
  fillSecondary: appTheme.colors.green[100],
998
1062
  ornament: appTheme.colors.green[600],
999
- surfacePrimary: appTheme.colors.green[100],
1000
- surfaceSecondary: appTheme.colors.green[500],
1063
+ surfacePrimary: appTheme.colors.green[500],
1064
+ surfaceSecondary: appTheme.colors.green[100],
1001
1065
  text: appTheme.colors.green[600],
1002
1066
  },
1003
1067
  };
@@ -1005,34 +1069,41 @@ var SDSPaletteLight = function (appTheme) {
1005
1069
  var SDSPaletteDark = function (appTheme) {
1006
1070
  return {
1007
1071
  accent: {
1008
- border: appTheme.colors.blue[500],
1009
- borderFocus: appTheme.colors.blue[500],
1010
- borderHover: appTheme.colors.blue[600],
1011
- borderOpen: appTheme.colors.blue[500],
1012
- borderPressed: appTheme.colors.blue[700],
1013
- borderSelected: appTheme.colors.blue[500],
1014
- fillHover: appTheme.colors.blue[600],
1015
- fillPressed: appTheme.colors.blue[700],
1016
- fillPrimary: appTheme.colors.blue[500],
1017
- icon: appTheme.colors.blue[500],
1018
- iconFocus: appTheme.colors.blue[500],
1019
- iconHover: appTheme.colors.blue[600],
1020
- iconOpen: appTheme.colors.blue[500],
1021
- iconPressed: appTheme.colors.blue[700],
1022
- iconSelected: appTheme.colors.blue[500],
1023
- surfacePrimary: appTheme.colors.blue[100],
1024
- surfaceSecondary: appTheme.colors.blue[500],
1025
- textAction: appTheme.colors.blue[500],
1026
- textActionHover: appTheme.colors.blue[600],
1027
- textActionPressed: appTheme.colors.blue[700],
1072
+ border: appTheme.colors.blue[600],
1073
+ borderFocus: appTheme.colors.blue[600],
1074
+ borderHover: appTheme.colors.blue[700],
1075
+ borderOpen: appTheme.colors.blue[600],
1076
+ borderPressed: appTheme.colors.blue[800],
1077
+ borderSelected: appTheme.colors.blue[600],
1078
+ fillHover: appTheme.colors.blue[700],
1079
+ fillPressed: appTheme.colors.blue[800],
1080
+ fillPrimary: appTheme.colors.blue[400],
1081
+ ornament: appTheme.colors.blue[600],
1082
+ ornamentFocus: appTheme.colors.blue[600],
1083
+ ornamentHover: appTheme.colors.blue[700],
1084
+ ornamentOpen: appTheme.colors.blue[600],
1085
+ ornamentPressed: appTheme.colors.blue[800],
1086
+ ornamentSelected: appTheme.colors.blue[600],
1087
+ surfacePrimary: appTheme.colors.blue[400],
1088
+ surfaceSecondary: appTheme.colors.blue[100],
1089
+ textAction: appTheme.colors.blue[600],
1090
+ textActionHover: appTheme.colors.blue[700],
1091
+ textActionPressed: appTheme.colors.blue[800],
1028
1092
  },
1029
1093
  base: {
1030
- border: appTheme.colors.gray[500],
1094
+ backgroundPrimary: appTheme.colors.gray[75],
1095
+ backgroundPrimaryInverse: appTheme.colors.gray[900],
1096
+ backgroundSecondary: appTheme.colors.gray[100],
1097
+ backgroundSecondaryInverse: appTheme.colors.gray[700],
1098
+ backgroundTertiary: appTheme.colors.gray[200],
1099
+ border: appTheme.colors.gray[600],
1031
1100
  borderDisabled: appTheme.colors.gray[300],
1032
1101
  borderHover: appTheme.colors.gray[900],
1102
+ borderInverse: appTheme.colors.gray[50],
1033
1103
  borderPressed: appTheme.colors.gray[900],
1034
1104
  borderTable: appTheme.colors.gray[300],
1035
1105
  divider: appTheme.colors.gray[200],
1106
+ dividerInverse: appTheme.colors.gray[600],
1036
1107
  fillDisabled: appTheme.colors.gray[200],
1037
1108
  /* the number 47 is the opacity of the color, which is equal to 28% */
1038
1109
  fillHover: appTheme.colors.gray[300] + "47",
@@ -1040,56 +1111,53 @@ var SDSPaletteDark = function (appTheme) {
1040
1111
  fillPressed: appTheme.colors.gray[300] + "47",
1041
1112
  fillPrimary: appTheme.colors.gray[100],
1042
1113
  fillSelected: appTheme.colors.gray[900],
1043
- iconDisabled: appTheme.colors.gray[300],
1044
- iconPrimary: appTheme.colors.gray[500],
1045
- iconPrimaryHover: appTheme.colors.gray[900],
1046
- iconPrimaryInverse: appTheme.colors.gray[50],
1047
- iconPrimaryInverseHover: appTheme.colors.gray[400],
1048
- iconPrimaryInversePressed: appTheme.colors.gray[400],
1049
- iconPrimaryPressed: appTheme.colors.gray[900],
1050
- iconSecondary: appTheme.colors.gray[900],
1051
- surfaceBackground: appTheme.colors.gray[75],
1052
- surfacePrimary: appTheme.colors.gray[100],
1053
- surfacePrimaryInverse: appTheme.colors.gray[900],
1054
- surfaceSecondary: appTheme.colors.gray[200],
1055
- surfaceTertiary: appTheme.colors.gray[300],
1114
+ ornamentDisabled: appTheme.colors.gray[300],
1115
+ ornamentOnFill: appTheme.colors.gray[900],
1116
+ ornamentPrimary: appTheme.colors.gray[900],
1117
+ ornamentPrimaryInverse: appTheme.colors.gray[50],
1118
+ ornamentSecondary: appTheme.colors.gray[600],
1119
+ ornamentSecondaryHover: appTheme.colors.gray[900],
1120
+ ornamentSecondaryPressed: appTheme.colors.gray[900],
1121
+ surface: appTheme.colors.gray[100],
1122
+ surfaceInverse: appTheme.colors.gray[900],
1056
1123
  textDisabled: appTheme.colors.gray[300],
1124
+ textOnFill: appTheme.colors.gray[900],
1057
1125
  textPrimary: appTheme.colors.gray[900],
1058
1126
  textPrimaryInverse: appTheme.colors.gray[50],
1059
1127
  textSecondary: appTheme.colors.gray[600],
1060
1128
  textSecondaryInverse: appTheme.colors.gray[300],
1061
1129
  },
1062
1130
  beta: {
1063
- border: appTheme.colors.purple[500],
1064
- fillHover: appTheme.colors.purple[600],
1065
- fillPressed: appTheme.colors.purple[700],
1066
- fillPrimary: appTheme.colors.purple[500],
1131
+ border: appTheme.colors.purple[600],
1132
+ fillHover: appTheme.colors.purple[700],
1133
+ fillPressed: appTheme.colors.purple[800],
1134
+ fillPrimary: appTheme.colors.purple[400],
1067
1135
  fillSecondary: appTheme.colors.purple[100],
1068
1136
  ornament: appTheme.colors.purple[600],
1069
- surfacePrimary: appTheme.colors.purple[100],
1070
- surfaceSecondary: appTheme.colors.purple[500],
1137
+ surfacePrimary: appTheme.colors.purple[400],
1138
+ surfaceSecondary: appTheme.colors.purple[100],
1071
1139
  text: appTheme.colors.purple[600],
1072
1140
  },
1073
1141
  info: {
1074
- border: appTheme.colors.blue[500],
1075
- fillHover: appTheme.colors.blue[600],
1076
- fillPressed: appTheme.colors.blue[700],
1077
- fillPrimary: appTheme.colors.blue[500],
1142
+ border: appTheme.colors.blue[600],
1143
+ fillHover: appTheme.colors.blue[700],
1144
+ fillPressed: appTheme.colors.blue[800],
1145
+ fillPrimary: appTheme.colors.blue[400],
1078
1146
  fillSecondary: appTheme.colors.blue[100],
1079
1147
  ornament: appTheme.colors.blue[600],
1080
- surfacePrimary: appTheme.colors.blue[100],
1081
- surfaceSecondary: appTheme.colors.blue[500],
1148
+ surfacePrimary: appTheme.colors.blue[400],
1149
+ surfaceSecondary: appTheme.colors.blue[100],
1082
1150
  text: appTheme.colors.blue[600],
1083
1151
  },
1084
1152
  negative: {
1085
- border: appTheme.colors.red[500],
1086
- fillHover: appTheme.colors.red[600],
1087
- fillPressed: appTheme.colors.red[700],
1088
- fillPrimary: appTheme.colors.red[500],
1153
+ border: appTheme.colors.red[600],
1154
+ fillHover: appTheme.colors.red[700],
1155
+ fillPressed: appTheme.colors.red[800],
1156
+ fillPrimary: appTheme.colors.red[400],
1089
1157
  fillSecondary: appTheme.colors.red[100],
1090
1158
  ornament: appTheme.colors.red[600],
1091
- surfacePrimary: appTheme.colors.red[100],
1092
- surfaceSecondary: appTheme.colors.red[500],
1159
+ surfacePrimary: appTheme.colors.red[400],
1160
+ surfaceSecondary: appTheme.colors.red[100],
1093
1161
  text: appTheme.colors.red[600],
1094
1162
  },
1095
1163
  neutral: {
@@ -1097,32 +1165,32 @@ var SDSPaletteDark = function (appTheme) {
1097
1165
  fillHover: appTheme.colors.gray[600],
1098
1166
  fillPressed: appTheme.colors.gray[700],
1099
1167
  fillPrimary: appTheme.colors.gray[500],
1100
- fillSecondary: appTheme.colors.gray[100],
1168
+ fillSecondary: appTheme.colors.gray[200],
1101
1169
  ornament: appTheme.colors.gray[700],
1102
- surfacePrimary: appTheme.colors.gray[200],
1103
- surfaceSecondary: appTheme.colors.gray[500],
1170
+ surfacePrimary: appTheme.colors.gray[500],
1171
+ surfaceSecondary: appTheme.colors.gray[200],
1104
1172
  text: appTheme.colors.gray[700],
1105
1173
  },
1106
1174
  notice: {
1107
- border: appTheme.colors.yellow[500],
1108
- fillHover: appTheme.colors.yellow[600],
1109
- fillPressed: appTheme.colors.yellow[700],
1110
- fillPrimary: appTheme.colors.yellow[500],
1175
+ border: appTheme.colors.yellow[600],
1176
+ fillHover: appTheme.colors.yellow[700],
1177
+ fillPressed: appTheme.colors.yellow[800],
1178
+ fillPrimary: appTheme.colors.yellow[400],
1111
1179
  fillSecondary: appTheme.colors.yellow[100],
1112
1180
  ornament: appTheme.colors.yellow[600],
1113
- surfacePrimary: appTheme.colors.yellow[100],
1114
- surfaceSecondary: appTheme.colors.yellow[500],
1115
- text: appTheme.colors.yellow[700],
1181
+ surfacePrimary: appTheme.colors.yellow[400],
1182
+ surfaceSecondary: appTheme.colors.yellow[100],
1183
+ text: appTheme.colors.yellow[600],
1116
1184
  },
1117
1185
  positive: {
1118
- border: appTheme.colors.green[500],
1119
- fillHover: appTheme.colors.green[600],
1120
- fillPressed: appTheme.colors.green[700],
1121
- fillPrimary: appTheme.colors.green[500],
1186
+ border: appTheme.colors.green[600],
1187
+ fillHover: appTheme.colors.green[700],
1188
+ fillPressed: appTheme.colors.green[800],
1189
+ fillPrimary: appTheme.colors.green[400],
1122
1190
  fillSecondary: appTheme.colors.green[100],
1123
1191
  ornament: appTheme.colors.green[600],
1124
- surfacePrimary: appTheme.colors.green[100],
1125
- surfaceSecondary: appTheme.colors.green[500],
1192
+ surfacePrimary: appTheme.colors.green[400],
1193
+ surfaceSecondary: appTheme.colors.green[100],
1126
1194
  text: appTheme.colors.green[600],
1127
1195
  },
1128
1196
  };
@@ -1462,7 +1530,7 @@ var fontCaps = function (fontSize, isNarrow) {
1462
1530
  return null;
1463
1531
  var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
1464
1532
  return css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n text-transform: uppercase;\n\n ", "\n "], ["\n text-transform: uppercase;\n\n ", "\n "])), isNarrow
1465
- ? css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
1533
+ ? css(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCaps.semibold[fontSize], capsFontFamily)) : themeToCss(caps.semibold[fontSize], capsFontFamily));
1466
1534
  };
1467
1535
  };
1468
1536
  var fontCapsXxs = fontCaps("xxs");
@@ -1477,7 +1545,7 @@ var fontHeader = function (fontSize, isNarrow) {
1477
1545
  return null;
1478
1546
  var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
1479
1547
  if (isNarrow) {
1480
- return css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
1548
+ return css(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowHeader.semibold[fontSize], headerFontFamily));
1481
1549
  }
1482
1550
  return themeToCss(header.semibold[fontSize], headerFontFamily);
1483
1551
  };
@@ -1500,7 +1568,7 @@ var fontCode = function (fontSize, fontWeight, isNarrow) {
1500
1568
  return null;
1501
1569
  var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
1502
1570
  if (isNarrow) {
1503
- return css(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
1571
+ return css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowCode[fontWeight][fontSize], codeFontFamily));
1504
1572
  }
1505
1573
  return themeToCss(code[fontWeight][fontSize], codeFontFamily);
1506
1574
  };
@@ -1518,8 +1586,8 @@ var fontTabular = function (fontSize, fontWeight, isNarrow) {
1518
1586
  if (!typography)
1519
1587
  return null;
1520
1588
  var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
1521
- return css(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
1522
- ? css(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
1589
+ return css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n font-variant-numeric: tabular-nums;\n\n ", "\n "], ["\n font-variant-numeric: tabular-nums;\n\n ", "\n "])), isNarrow
1590
+ ? css(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", " {\n ", "\n }\n "], ["\n ", " {\n ", "\n }\n "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowTabular[fontWeight][fontSize], tabularFontFamily)) : themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
1523
1591
  };
1524
1592
  };
1525
1593
  var fontTabularXs = fontTabular("xs", "regular");
@@ -1530,33 +1598,33 @@ function themeToCss(fontTheme, fontFamily) {
1530
1598
  if (fontFamily === void 0) { fontFamily = "inherit"; }
1531
1599
  return css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
1532
1600
  }
1533
- var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p, templateObject_5$j, templateObject_6$e, templateObject_7$a, templateObject_8$7;
1601
+ var templateObject_1$Y, templateObject_2$D, templateObject_3$t, templateObject_4$o, templateObject_5$i, templateObject_6$d, templateObject_7$9, templateObject_8$7;
1534
1602
 
1535
- var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1603
+ var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
1536
1604
  var spaces = getSpaces(props);
1537
1605
  return css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
1538
1606
  });
1539
- var templateObject_1$X, templateObject_2$B;
1607
+ var templateObject_1$X, templateObject_2$C;
1540
1608
 
1541
1609
  var AccordionDetails = function (props) {
1542
1610
  var children = props.children;
1543
1611
  return jsx(StyledAccordionDetails, { children: children });
1544
1612
  };
1545
1613
 
1546
- var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1614
+ var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
1547
1615
  var _a, _b;
1548
1616
  var spaces = getSpaces(props);
1549
1617
  var semanticColors = getSemanticColors(props);
1550
- return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, accordionSummaryClasses.content, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
1618
+ return css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, accordionSummaryClasses.content, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
1551
1619
  });
1552
- var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1620
+ var StyledSubtitle = styled("p")(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
1553
1621
  var _a;
1554
1622
  var semanticColors = getSemanticColors(props);
1555
1623
  return css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
1556
1624
  });
1557
- var templateObject_1$W, templateObject_2$A, templateObject_3$s, templateObject_4$o;
1625
+ var templateObject_1$W, templateObject_2$B, templateObject_3$s, templateObject_4$n;
1558
1626
 
1559
- var _path$2b, _path2$E, _path3$6;
1627
+ var _path$2b, _path2$C, _path3$6;
1560
1628
  function _extends$2g() { return _extends$2g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2g.apply(null, arguments); }
1561
1629
  var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1562
1630
  return /*#__PURE__*/React.createElement("svg", _extends$2g({
@@ -1566,7 +1634,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1566
1634
  }, props), _path$2b || (_path$2b = /*#__PURE__*/React.createElement("path", {
1567
1635
  fillRule: "evenodd",
1568
1636
  d: "M12.205 14.698a1.956 1.956 0 1 1-3.911 0 1.956 1.956 0 0 1 3.911 0m-1.955.756a.756.756 0 1 0 0-1.512.756.756 0 0 0 0 1.512"
1569
- })), _path2$E || (_path2$E = /*#__PURE__*/React.createElement("path", {
1637
+ })), _path2$C || (_path2$C = /*#__PURE__*/React.createElement("path", {
1570
1638
  d: "M14.248 7.998a1.023 1.023 0 1 0 0-2.047 1.023 1.023 0 0 0 0 2.047m-1.463 4.142a.756.756 0 0 1 .242-1.041l1.033-.643a.756.756 0 0 1 .799 1.282l-1.033.644a.756.756 0 0 1-1.04-.242Zm-2.627-2.83a.756.756 0 1 0 1.491-.249L11.4 7.57a.756.756 0 0 0-1.49.249z"
1571
1639
  })), _path3$6 || (_path3$6 = /*#__PURE__*/React.createElement("path", {
1572
1640
  fillRule: "evenodd",
@@ -1574,7 +1642,7 @@ var SvgIconBacteriaLarge = function SvgIconBacteriaLarge(props) {
1574
1642
  })));
1575
1643
  };
1576
1644
 
1577
- var _path$2a, _path2$D;
1645
+ var _path$2a, _path2$B;
1578
1646
  function _extends$2f() { return _extends$2f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2f.apply(null, arguments); }
1579
1647
  var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1580
1648
  return /*#__PURE__*/React.createElement("svg", _extends$2f({
@@ -1583,7 +1651,7 @@ var SvgIconBacteriaSmall = function SvgIconBacteriaSmall(props) {
1583
1651
  height: 16
1584
1652
  }, props), _path$2a || (_path$2a = /*#__PURE__*/React.createElement("path", {
1585
1653
  d: "M7.766 7.265a1.484 1.484 0 1 0-.001-2.968 1.484 1.484 0 0 0 .001 2.968m-1.725 4.287a1.478 1.478 0 1 0-.001-2.955 1.478 1.478 0 0 0 .001 2.955"
1586
- })), _path2$D || (_path2$D = /*#__PURE__*/React.createElement("path", {
1654
+ })), _path2$B || (_path2$B = /*#__PURE__*/React.createElement("path", {
1587
1655
  fillRule: "evenodd",
1588
1656
  d: "M2.446 4.326.382 2.37A1.22 1.22 0 0 1 .334.645 1.22 1.22 0 0 1 2.058.597L3.667 2.12a5.385 5.385 0 0 1 8.771 1.103l1.881-.767a1.22 1.22 0 1 1 .92 2.261l-2.182.89a5.4 5.4 0 0 1-.333 1.99l-1.575 4.267 1.905 1.76c.495.458.525 1.23.068 1.725a1.22 1.22 0 0 1-1.723.069l-1.582-1.462a5.38 5.38 0 0 1-5.62 1.188A5.39 5.39 0 0 1 1.009 8.22zm8.477 2.605-1.61 4.361a3.465 3.465 0 0 1-4.452 2.05A3.47 3.47 0 0 1 2.81 8.887l1.61-4.361a3.465 3.465 0 0 1 4.452-2.05 3.47 3.47 0 0 1 2.051 4.455"
1589
1657
  })));
@@ -1628,7 +1696,7 @@ var SvgIconBarChartVertical4Small = function SvgIconBarChartVertical4Small(props
1628
1696
  })));
1629
1697
  };
1630
1698
 
1631
- var _path$26, _path2$C;
1699
+ var _path$26, _path2$A;
1632
1700
  function _extends$2b() { return _extends$2b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2b.apply(null, arguments); }
1633
1701
  var SvgIconBookLarge = function SvgIconBookLarge(props) {
1634
1702
  return /*#__PURE__*/React.createElement("svg", _extends$2b({
@@ -1639,7 +1707,7 @@ var SvgIconBookLarge = function SvgIconBookLarge(props) {
1639
1707
  fillRule: "evenodd",
1640
1708
  d: "M18.895 1.545H5.865a3.04 3.04 0 0 0-3.041 3.041v14.95a1 1 0 0 0 .024.12 3.04 3.04 0 0 0 3.017 2.799h13.03a2.28 2.28 0 0 0 2.078-1.342c.08-.178-.02-.374-.18-.486a2 2 0 0 1-.123-.096 1.4 1.4 0 0 1-.497-1.053c0-.398.18-.778.497-1.052.268-.232.506-.532.506-.886V3.826a2.28 2.28 0 0 0-2.28-2.28m.76 14.95V3.826a.76.76 0 0 0-.76-.76H8.237v13.429zM6.717 3.065h-.851a1.52 1.52 0 0 0-1.52 1.521v12.331c.46-.273.985-.42 1.52-.422h.851zM4.79 20.532c.289.276.677.421 1.076.403h13.543a1.61 1.61 0 0 1-.866-1.426 1.61 1.61 0 0 1 1.012-1.493H5.865a1.46 1.46 0 0 0-1.076 2.516",
1641
1709
  clipRule: "evenodd"
1642
- })), _path2$C || (_path2$C = /*#__PURE__*/React.createElement("path", {
1710
+ })), _path2$A || (_path2$A = /*#__PURE__*/React.createElement("path", {
1643
1711
  d: "M10.894 6.222c0-.42.34-.76.76-.76h4.583a.76.76 0 1 1 0 1.52h-4.582a.76.76 0 0 1-.76-.76"
1644
1712
  })));
1645
1713
  };
@@ -1658,7 +1726,7 @@ var SvgIconBookSmall = function SvgIconBookSmall(props) {
1658
1726
  })));
1659
1727
  };
1660
1728
 
1661
- var _path$24, _path2$B;
1729
+ var _path$24, _path2$z;
1662
1730
  function _extends$29() { return _extends$29 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$29.apply(null, arguments); }
1663
1731
  var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1664
1732
  return /*#__PURE__*/React.createElement("svg", _extends$29({
@@ -1667,7 +1735,7 @@ var SvgIconCheckCircleLarge = function SvgIconCheckCircleLarge(props) {
1667
1735
  height: 24
1668
1736
  }, props), _path$24 || (_path$24 = /*#__PURE__*/React.createElement("path", {
1669
1737
  d: "M17.367 8.708a.9.9 0 1 0-1.461-1.052l-5.239 7.276-3.18-3.534a.9.9 0 1 0-1.338 1.204l3.995 4.44a.818.818 0 0 0 1.273-.07z"
1670
- })), _path2$B || (_path2$B = /*#__PURE__*/React.createElement("path", {
1738
+ })), _path2$z || (_path2$z = /*#__PURE__*/React.createElement("path", {
1671
1739
  fillRule: "evenodd",
1672
1740
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
1673
1741
  })));
@@ -1725,7 +1793,7 @@ var SvgIconChevronDownSmall = function SvgIconChevronDownSmall(props) {
1725
1793
  })));
1726
1794
  };
1727
1795
 
1728
- var _path$1$, _path2$A;
1796
+ var _path$1$, _path2$y;
1729
1797
  function _extends$24() { return _extends$24 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$24.apply(null, arguments); }
1730
1798
  var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1731
1799
  return /*#__PURE__*/React.createElement("svg", _extends$24({
@@ -1734,12 +1802,12 @@ var SvgIconChevronDown2Small = function SvgIconChevronDown2Small(props) {
1734
1802
  height: 16
1735
1803
  }, props), _path$1$ || (_path$1$ = /*#__PURE__*/React.createElement("path", {
1736
1804
  d: "M8.377 15.53a.57.57 0 0 1-.813 0L1.267 9.14a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006l4.757 4.826a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809l-6.34 6.39Z"
1737
- })), _path2$A || (_path2$A = /*#__PURE__*/React.createElement("path", {
1805
+ })), _path2$y || (_path2$y = /*#__PURE__*/React.createElement("path", {
1738
1806
  d: "M8.377 8.405a.57.57 0 0 1-.813 0l-6.297-6.39a.57.57 0 0 1 .006-.809l.732-.722a.57.57 0 0 1 .808.006L7.57 5.316a.57.57 0 0 0 .812.001l4.793-4.83a.57.57 0 0 1 .808-.004l.73.724a.57.57 0 0 1 .004.809z"
1739
1807
  })));
1740
1808
  };
1741
1809
 
1742
- var _path$1_, _path2$z;
1810
+ var _path$1_, _path2$x;
1743
1811
  function _extends$23() { return _extends$23 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$23.apply(null, arguments); }
1744
1812
  var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1745
1813
  return /*#__PURE__*/React.createElement("svg", _extends$23({
@@ -1748,7 +1816,7 @@ var SvgIconChevronLeft2Small = function SvgIconChevronLeft2Small(props) {
1748
1816
  height: 16
1749
1817
  }, props), _path$1_ || (_path$1_ = /*#__PURE__*/React.createElement("path", {
1750
1818
  d: "M.47 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808L3.56 7.585a.57.57 0 0 0-.001.813l4.83 4.793a.57.57 0 0 1 .004.808l-.725.73a.57.57 0 0 1-.808.004z"
1751
- })), _path2$z || (_path2$z = /*#__PURE__*/React.createElement("path", {
1819
+ })), _path2$x || (_path2$x = /*#__PURE__*/React.createElement("path", {
1752
1820
  d: "M7.595 8.393a.57.57 0 0 1 .002-.813l6.39-6.297a.57.57 0 0 1 .808.006l.722.732a.57.57 0 0 1-.006.808l-4.826 4.756a.57.57 0 0 0-.002.813l4.832 4.793a.57.57 0 0 1 .003.808l-.725.73a.57.57 0 0 1-.808.004z"
1753
1821
  })));
1754
1822
  };
@@ -1779,7 +1847,7 @@ var SvgIconChevronLeftSmall = function SvgIconChevronLeftSmall(props) {
1779
1847
  })));
1780
1848
  };
1781
1849
 
1782
- var _path$1X, _path2$y;
1850
+ var _path$1X, _path2$w;
1783
1851
  function _extends$20() { return _extends$20 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$20.apply(null, arguments); }
1784
1852
  var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1785
1853
  return /*#__PURE__*/React.createElement("svg", _extends$20({
@@ -1788,7 +1856,7 @@ var SvgIconChevronRight2Small = function SvgIconChevronRight2Small(props) {
1788
1856
  height: 16
1789
1857
  }, props), _path$1X || (_path$1X = /*#__PURE__*/React.createElement("path", {
1790
1858
  d: "M8.406 8.384a.57.57 0 0 0-.002-.813l-6.39-6.297a.57.57 0 0 0-.807.006l-.722.732a.57.57 0 0 0 .005.808l4.826 4.757a.57.57 0 0 1 .002.812L.486 13.182a.57.57 0 0 0-.003.808l.725.73a.57.57 0 0 0 .808.004z"
1791
- })), _path2$y || (_path2$y = /*#__PURE__*/React.createElement("path", {
1859
+ })), _path2$w || (_path2$w = /*#__PURE__*/React.createElement("path", {
1792
1860
  d: "M15.53 7.571a.57.57 0 0 1 0 .813l-6.39 6.34a.57.57 0 0 1-.807-.004l-.725-.73a.57.57 0 0 1 .003-.808l4.832-4.793a.57.57 0 0 0-.002-.812L7.615 2.82a.57.57 0 0 1-.005-.808l.722-.732a.57.57 0 0 1 .808-.006z"
1793
1861
  })));
1794
1862
  };
@@ -1845,7 +1913,7 @@ var SvgIconChevronUpSmall = function SvgIconChevronUpSmall(props) {
1845
1913
  })));
1846
1914
  };
1847
1915
 
1848
- var _path$1S, _path2$x;
1916
+ var _path$1S, _path2$v;
1849
1917
  function _extends$1X() { return _extends$1X = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1X.apply(null, arguments); }
1850
1918
  var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1851
1919
  return /*#__PURE__*/React.createElement("svg", _extends$1X({
@@ -1854,7 +1922,7 @@ var SvgIconChevronUp2Small = function SvgIconChevronUp2Small(props) {
1854
1922
  height: 16
1855
1923
  }, props), _path$1S || (_path$1S = /*#__PURE__*/React.createElement("path", {
1856
1924
  d: "M8.393 7.602a.57.57 0 0 0-.812.002l-6.298 6.39a.57.57 0 0 0 .006.808l.733.722a.57.57 0 0 0 .808-.006l4.756-4.826a.57.57 0 0 1 .812-.002l4.793 4.832a.57.57 0 0 0 .808.003l.73-.725a.57.57 0 0 0 .004-.808z"
1857
- })), _path2$x || (_path2$x = /*#__PURE__*/React.createElement("path", {
1925
+ })), _path2$v || (_path2$v = /*#__PURE__*/React.createElement("path", {
1858
1926
  d: "M7.58.479a.57.57 0 0 1 .813-.002l6.34 6.39a.57.57 0 0 1-.003.808L14 8.4a.57.57 0 0 1-.809-.003L8.398 3.565a.57.57 0 0 0-.812.002L2.83 8.393a.57.57 0 0 1-.808.006l-.733-.722a.57.57 0 0 1-.006-.809L7.581.478Z"
1859
1927
  })));
1860
1928
  };
@@ -1872,7 +1940,7 @@ var SvgIconCirclesOverlap2Large = function SvgIconCirclesOverlap2Large(props) {
1872
1940
  })));
1873
1941
  };
1874
1942
 
1875
- var _path$1Q, _path2$w;
1943
+ var _path$1Q, _path2$u;
1876
1944
  function _extends$1V() { return _extends$1V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1V.apply(null, arguments); }
1877
1945
  var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1878
1946
  return /*#__PURE__*/React.createElement("svg", _extends$1V({
@@ -1882,12 +1950,12 @@ var SvgIconCirclesOverlap2Small = function SvgIconCirclesOverlap2Small(props) {
1882
1950
  }, props), _path$1Q || (_path$1Q = /*#__PURE__*/React.createElement("path", {
1883
1951
  fillRule: "evenodd",
1884
1952
  d: "M8 12.473a5.25 5.25 0 1 1 0-8.946 5.25 5.25 0 1 1 0 8.946m-1.256-1.08a3.707 3.707 0 1 1 0-6.787A5.23 5.23 0 0 0 5.5 8a5.23 5.23 0 0 0 1.244 3.394Zm2.512-6.787a3.707 3.707 0 1 1 0 6.787A5.23 5.23 0 0 0 10.5 8a5.23 5.23 0 0 0-1.244-3.394M8 5.514c.595.658.957 1.53.957 2.486S8.595 9.828 8 10.486A3.7 3.7 0 0 1 7.043 8c0-.957.362-1.828.957-2.486"
1885
- })), _path2$w || (_path2$w = /*#__PURE__*/React.createElement("path", {
1953
+ })), _path2$u || (_path2$u = /*#__PURE__*/React.createElement("path", {
1886
1954
  d: "M8.957 8c0-.957-.362-1.828-.957-2.486A3.7 3.7 0 0 0 7.043 8c0 .957.362 1.828.957 2.486.595-.658.957-1.53.957-2.486"
1887
1955
  })));
1888
1956
  };
1889
1957
 
1890
- var _path$1P, _path2$v;
1958
+ var _path$1P, _path2$t;
1891
1959
  function _extends$1U() { return _extends$1U = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1U.apply(null, arguments); }
1892
1960
  var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1893
1961
  return /*#__PURE__*/React.createElement("svg", _extends$1U({
@@ -1896,7 +1964,7 @@ var SvgIconCodeLarge = function SvgIconCodeLarge(props) {
1896
1964
  height: 24
1897
1965
  }, props), _path$1P || (_path$1P = /*#__PURE__*/React.createElement("path", {
1898
1966
  d: "M13.283 3.635a.487.487 0 0 1 .597-.345l.856.23c.26.07.414.337.345.597l-4.354 16.25a.487.487 0 0 1-.597.345l-.857-.23a.487.487 0 0 1-.345-.596z"
1899
- })), _path2$v || (_path2$v = /*#__PURE__*/React.createElement("path", {
1967
+ })), _path2$t || (_path2$t = /*#__PURE__*/React.createElement("path", {
1900
1968
  fillRule: "evenodd",
1901
1969
  d: "M.145 12.358a.487.487 0 0 1 0-.693L5.592 6.26c.191-.19.5-.188.69.003l.617.622c.19.191.189.5-.002.69l-4.12 4.087a.487.487 0 0 0 0 .693l4.116 4.056a.487.487 0 0 1 .005.689l-.615.625a.487.487 0 0 1-.69.005L.144 12.36Zm23.71-.73a.486.486 0 0 1 0 .693l-5.448 5.407a.487.487 0 0 1-.69-.003l-.617-.623a.487.487 0 0 1 .002-.689l4.12-4.087a.487.487 0 0 0 0-.693l-4.116-4.056a.487.487 0 0 1-.005-.69l.615-.624a.487.487 0 0 1 .69-.005z"
1902
1970
  })));
@@ -1915,7 +1983,7 @@ var SvgIconCodeSmall = function SvgIconCodeSmall(props) {
1915
1983
  })));
1916
1984
  };
1917
1985
 
1918
- var _path$1N, _path2$u;
1986
+ var _path$1N, _path2$s;
1919
1987
  function _extends$1S() { return _extends$1S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1S.apply(null, arguments); }
1920
1988
  var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1921
1989
  return /*#__PURE__*/React.createElement("svg", _extends$1S({
@@ -1925,13 +1993,13 @@ var SvgIconCompassLarge = function SvgIconCompassLarge(props) {
1925
1993
  }, props), _path$1N || (_path$1N = /*#__PURE__*/React.createElement("path", {
1926
1994
  fillRule: "evenodd",
1927
1995
  d: "M15.926 8.494a.49.49 0 0 1 .71.609l-.034.066-2.773 5.505a.46.46 0 0 1-.148.176l-.067.04-5.544 2.772a.5.5 0 0 1-.216.054.5.5 0 0 1-.348-.147.49.49 0 0 1-.121-.491l.028-.072 2.772-5.525a.46.46 0 0 1 .149-.176l.067-.04zm-1.254 1.929-2.826 1.415 1.411 1.412z"
1928
- })), _path2$u || (_path2$u = /*#__PURE__*/React.createElement("path", {
1996
+ })), _path2$s || (_path2$s = /*#__PURE__*/React.createElement("path", {
1929
1997
  fillRule: "evenodd",
1930
1998
  d: "M8.954 2.956s-.009.222-.008.358c-4.163 1.3-7.184 5.186-7.184 9.778 0 5.656 4.586 10.242 10.243 10.242s10.243-4.586 10.243-10.242c0-4.596-3.027-8.484-7.195-9.782v-.472a2.29 2.29 0 0 0-2.285-2.17h-1.526l-.118.003a2.29 2.29 0 0 0-2.17 2.285m4.577 0c0-.395-.3-.72-.685-.759l-.078-.004h-1.526c-.395 0-.72.3-.759.685v.083a10.3 10.3 0 0 1 3.048 0zM3.439 12.232a8.61 8.61 0 0 1 7.706-7.706 1 1 0 0 0-.013.158v.907c0 .5.39.907.873.907.482 0 .873-.406.873-.907v-.907a1 1 0 0 0-.013-.158 8.61 8.61 0 0 1 7.706 7.706 1 1 0 0 0-.16-.014h-.909c-.502 0-.909.391-.909.874 0 .482.407.873.91.873h.908a1 1 0 0 0 .16-.014 8.61 8.61 0 0 1-7.706 7.707 1 1 0 0 0 .013-.159v-.907c0-.5-.39-.907-.873-.907-.482 0-.873.406-.873.907v.907a1 1 0 0 0 .013.159A8.61 8.61 0 0 1 3.44 13.95a1 1 0 0 0 .16.014h.909c.502 0 .909-.391.909-.873 0-.483-.407-.874-.91-.874H3.6a1 1 0 0 0-.16.014Z"
1931
1999
  })));
1932
2000
  };
1933
2001
 
1934
- var _path$1M, _path2$t;
2002
+ var _path$1M, _path2$r;
1935
2003
  function _extends$1R() { return _extends$1R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1R.apply(null, arguments); }
1936
2004
  var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1937
2005
  return /*#__PURE__*/React.createElement("svg", _extends$1R({
@@ -1940,7 +2008,7 @@ var SvgIconCopyLarge = function SvgIconCopyLarge(props) {
1940
2008
  height: 24
1941
2009
  }, props), _path$1M || (_path$1M = /*#__PURE__*/React.createElement("path", {
1942
2010
  d: "M6.028 18.418h7.164c.485 0 .866-.296.866-.674 0-.377-.381-.673-.866-.673H6.028c-.485 0-.866.296-.866.673s.381.674.866.674m7.164-2.833H6.028c-.477 0-.866-.305-.866-.682 0-.372.381-.664.866-.664h7.164c.477 0 .866.307.866.683 0 .372-.381.663-.866.663"
1943
- })), _path2$t || (_path2$t = /*#__PURE__*/React.createElement("path", {
2011
+ })), _path2$r || (_path2$r = /*#__PURE__*/React.createElement("path", {
1944
2012
  fillRule: "evenodd",
1945
2013
  d: "M22.087 5.672c0-.22-.09-.436-.249-.593L17.512.717a.85.85 0 0 0-.593-.248H8.434c-.959 0-1.769.812-1.769 1.773v3.015h-3.01c-.975 0-1.768.795-1.768 1.773v14.723c0 .978.793 1.773 1.769 1.773h11.908c.977 0 1.77-.795 1.77-1.773v-3.015h3.008c.96 0 1.77-.813 1.77-1.773zM3.594 7.006c0-.032.028-.061.062-.061h7.643v3.492c0 .465.377.843.842.843h3.484v10.45a.063.063 0 0 1-.061.061H3.656a.063.063 0 0 1-.062-.061zm13.49 2.837-4.326-4.362a.85.85 0 0 0-.593-.247H8.372V2.242c0-.034.028-.062.062-.062h7.643v3.492c0 .465.377.844.842.844h3.484v10.45a.063.063 0 0 1-.061.06h-3.007v-6.59a.85.85 0 0 0-.25-.593Zm-4.076-.274V8.132l1.434 1.437zm4.753-4.765V3.368l1.434 1.436z"
1946
2014
  })));
@@ -1959,7 +2027,7 @@ var SvgIconCopySmall = function SvgIconCopySmall(props) {
1959
2027
  })));
1960
2028
  };
1961
2029
 
1962
- var _path$1K, _path2$s, _path3$5;
2030
+ var _path$1K, _path2$q, _path3$5;
1963
2031
  function _extends$1P() { return _extends$1P = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1P.apply(null, arguments); }
1964
2032
  var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1965
2033
  return /*#__PURE__*/React.createElement("svg", _extends$1P({
@@ -1969,7 +2037,7 @@ var SvgIconCubeLarge = function SvgIconCubeLarge(props) {
1969
2037
  }, props), _path$1K || (_path$1K = /*#__PURE__*/React.createElement("path", {
1970
2038
  fillRule: "evenodd",
1971
2039
  d: "M11.603.376a.82.82 0 0 1 .794 0l9.818 5.454a.818.818 0 0 1 0 1.43l-9.818 5.455a.82.82 0 0 1-.794 0L1.784 7.261a.818.818 0 0 1 0-1.43L11.603.375Zm-7.736 6.17L12 11.063l8.134-4.519L12 2.027 3.867 6.545Z"
1972
- })), _path2$s || (_path2$s = /*#__PURE__*/React.createElement("path", {
2040
+ })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
1973
2041
  fillRule: "evenodd",
1974
2042
  d: "M22.233 5.84c.25.147.403.416.403.705v10.91a.82.82 0 0 1-.42.715l-9.819 5.454a.818.818 0 0 1-1.215-.715V12c0-.297.16-.57.42-.715l9.819-5.455a.82.82 0 0 1 .812.01m-9.415 6.641v9.038L21 16.973V7.936z"
1975
2043
  })), _path3$5 || (_path3$5 = /*#__PURE__*/React.createElement("path", {
@@ -2093,7 +2161,7 @@ var SvgIconEditSmall = function SvgIconEditSmall(props) {
2093
2161
  })));
2094
2162
  };
2095
2163
 
2096
- var _path$1A, _path2$r;
2164
+ var _path$1A, _path2$p;
2097
2165
  function _extends$1F() { return _extends$1F = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1F.apply(null, arguments); }
2098
2166
  var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
2099
2167
  return /*#__PURE__*/React.createElement("svg", _extends$1F({
@@ -2102,12 +2170,12 @@ var SvgIconEnvelopeSmall = function SvgIconEnvelopeSmall(props) {
2102
2170
  height: 16
2103
2171
  }, props), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("path", {
2104
2172
  d: "M0 3.482V13.2a.8.8 0 0 0 .8.8h14.4a.8.8 0 0 0 .8-.8V3.482l-6.258 6.605a2.4 2.4 0 0 1-3.484 0z"
2105
- })), _path2$r || (_path2$r = /*#__PURE__*/React.createElement("path", {
2173
+ })), _path2$p || (_path2$p = /*#__PURE__*/React.createElement("path", {
2106
2174
  d: "M8.58 8.987 15.2 2H.8l6.62 6.987a.8.8 0 0 0 1.16 0"
2107
2175
  })));
2108
2176
  };
2109
2177
 
2110
- var _path$1z, _path2$q;
2178
+ var _path$1z, _path2$o;
2111
2179
  function _extends$1E() { return _extends$1E = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1E.apply(null, arguments); }
2112
2180
  var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLarge(props) {
2113
2181
  return /*#__PURE__*/React.createElement("svg", _extends$1E({
@@ -2117,7 +2185,7 @@ var SvgIconExclamationMarkCircleLarge = function SvgIconExclamationMarkCircleLar
2117
2185
  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
2118
2186
  fillRule: "evenodd",
2119
2187
  d: "M12 14.53c-.662 0-1.354-.425-1.404-1.375l-.28-6.545v-.025c0-.93.755-1.687 1.685-1.687s1.686.757 1.686 1.687v.024l-.28 6.54A1.41 1.41 0 0 1 12 14.531Zm.453-7.603a.45.45 0 0 0-.9 0l.249 5.791c.01.19.07.223.2.223.058 0 .192-.022.202-.225l.248-5.789Zm-1.816 8.892c.36-.36.857-.566 1.364-.566a1.935 1.935 0 0 1 1.927 1.927c0 .51-.208 1.008-.569 1.365a1.92 1.92 0 0 1-1.358.56 1.94 1.94 0 0 1-1.364-.563 1.94 1.94 0 0 1-.563-1.363c0-.506.206-1.002.563-1.36m.852 1.88c.267.27.757.27 1.019.003A.727.727 0 0 0 12 16.457a.727.727 0 0 0-.512 1.243Z"
2120
- })), _path2$q || (_path2$q = /*#__PURE__*/React.createElement("path", {
2188
+ })), _path2$o || (_path2$o = /*#__PURE__*/React.createElement("path", {
2121
2189
  fillRule: "evenodd",
2122
2190
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
2123
2191
  })));
@@ -2136,7 +2204,7 @@ var SvgIconExclamationMarkCircleSmall = function SvgIconExclamationMarkCircleSma
2136
2204
  })));
2137
2205
  };
2138
2206
 
2139
- var _path$1x, _path2$p, _path3$4;
2207
+ var _path$1x, _path2$n, _path3$4;
2140
2208
  function _extends$1C() { return _extends$1C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1C.apply(null, arguments); }
2141
2209
  var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpeechBubbleLarge(props) {
2142
2210
  return /*#__PURE__*/React.createElement("svg", _extends$1C({
@@ -2145,7 +2213,7 @@ var SvgIconExclamationMarkSpeechBubbleLarge = function SvgIconExclamationMarkSpe
2145
2213
  height: 24
2146
2214
  }, props), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
2147
2215
  d: "M10.931 9.436a1.036 1.036 0 0 0 2.073 0V2.782a1.036 1.036 0 0 0-2.073 0z"
2148
- })), _path2$p || (_path2$p = /*#__PURE__*/React.createElement("path", {
2216
+ })), _path2$n || (_path2$n = /*#__PURE__*/React.createElement("path", {
2149
2217
  d: "m10.68 18.4-3.477 3.166V18.4H4.027V5.545h3.5a.807.807 0 0 0 .808-.809.807.807 0 0 0-.808-.809h-3.96c-.632 0-1.145.513-1.145 1.146v13.772c0 .633.513 1.146 1.145 1.146h2.03v2.623c0 .997 1.187 1.518 1.921.843l3.774-3.466 9.136.002c.633 0 1.146-.513 1.146-1.146l-.002-13.774c0-.633-.513-1.146-1.146-1.146h-3.723a.809.809 0 0 0 0 1.618h3.263v12.854H10.68Z"
2150
2218
  })), _path3$4 || (_path3$4 = /*#__PURE__*/React.createElement("path", {
2151
2219
  d: "m12.922 15.012-.005.005c-.226.231-.574.365-.95.365-.377 0-.73-.136-.966-.373a1.4 1.4 0 0 1-.397-.978c0-.356.151-.724.397-.971.257-.258.61-.405.966-.405.348 0 .7.145.964.41l.002.002a1.374 1.374 0 0 1-.011 1.945"
@@ -2165,7 +2233,7 @@ var SvgIconEyeClosedSmall = function SvgIconEyeClosedSmall(props) {
2165
2233
  })));
2166
2234
  };
2167
2235
 
2168
- var _path$1v, _path2$o;
2236
+ var _path$1v, _path2$m;
2169
2237
  function _extends$1A() { return _extends$1A = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1A.apply(null, arguments); }
2170
2238
  var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
2171
2239
  return /*#__PURE__*/React.createElement("svg", _extends$1A({
@@ -2174,7 +2242,7 @@ var SvgIconEyeOpenSmall = function SvgIconEyeOpenSmall(props) {
2174
2242
  height: 16
2175
2243
  }, props), _path$1v || (_path$1v = /*#__PURE__*/React.createElement("path", {
2176
2244
  d: "M9.89 8a1.89 1.89 0 1 0-3.78 0 1.89 1.89 0 0 0 3.78 0"
2177
- })), _path2$o || (_path2$o = /*#__PURE__*/React.createElement("path", {
2245
+ })), _path2$m || (_path2$m = /*#__PURE__*/React.createElement("path", {
2178
2246
  fillRule: "evenodd",
2179
2247
  d: "M15.868 7.546C15.725 7.334 12.319 2.33 8 2.33S.275 7.334.132 7.546a.84.84 0 0 0 0 .908C.275 8.666 3.68 13.67 8 13.67s7.725-5.004 7.868-5.216a.84.84 0 0 0 0-.908M4.402 8a3.598 3.598 0 1 1 7.196 0 3.598 3.598 0 0 1-7.196 0"
2180
2248
  })));
@@ -2257,7 +2325,7 @@ var SvgIconFlaskLarge = function SvgIconFlaskLarge(props) {
2257
2325
  })));
2258
2326
  };
2259
2327
 
2260
- var _path$1o, _path2$n;
2328
+ var _path$1o, _path2$l;
2261
2329
  function _extends$1t() { return _extends$1t = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1t.apply(null, arguments); }
2262
2330
  var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
2263
2331
  return /*#__PURE__*/React.createElement("svg", _extends$1t({
@@ -2269,14 +2337,14 @@ var SvgIconFlaskPrivateLarge = function SvgIconFlaskPrivateLarge(props) {
2269
2337
  fillRule: "evenodd",
2270
2338
  d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43M9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235h-.4a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857z",
2271
2339
  clipRule: "evenodd"
2272
- })), _path2$n || (_path2$n = /*#__PURE__*/React.createElement("path", {
2340
+ })), _path2$l || (_path2$l = /*#__PURE__*/React.createElement("path", {
2273
2341
  fillRule: "evenodd",
2274
2342
  d: "M18.375 12.75a5.625 5.625 0 1 1 0 11.25 5.625 5.625 0 0 1 0-11.25m.011 2.124c-1.042 0-1.904.81-1.968 1.851v.66a.66.66 0 0 0-.66.652v2.626c0 .364.295.66.66.66h3.93a.653.653 0 0 0 .652-.66l.008-2.625a.65.65 0 0 0-.653-.653v-.66a1.97 1.97 0 0 0-1.969-1.85m-.011 3.583c.27 0 .488.219.488.488a.48.48 0 0 1-.248.413v.674a.24.24 0 0 1-.473 0v-.674a.47.47 0 0 1-.247-.413c0-.266.214-.483.48-.488m0-3.045a1.313 1.313 0 0 1 1.313 1.313v.66h-2.625v-.66a1.32 1.32 0 0 1 1.312-1.313",
2275
2343
  clipRule: "evenodd"
2276
2344
  })));
2277
2345
  };
2278
2346
 
2279
- var _path$1n, _path2$m;
2347
+ var _path$1n, _path2$k;
2280
2348
  function _extends$1s() { return _extends$1s = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1s.apply(null, arguments); }
2281
2349
  var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
2282
2350
  return /*#__PURE__*/React.createElement("svg", _extends$1s({
@@ -2287,7 +2355,7 @@ var SvgIconFlaskPublicLarge = function SvgIconFlaskPublicLarge(props) {
2287
2355
  fill: "#CCC",
2288
2356
  fillRule: "evenodd",
2289
2357
  d: "M12.946 18.82v-.235H5.152a.489.489 0 0 1-.407-.768l1.109-1.81h7.84a5.62 5.62 0 0 1 2.806-2.47L13.837 9.12V4.673c.879-.2 1.493-1 1.463-1.908v-.1A1.91 1.91 0 0 0 13.4.75H8.502c-1.05 0-1.901.858-1.901 1.916v.099A1.89 1.89 0 0 0 8.065 4.65v4.447l-3.275 5.42a.7.7 0 0 0-.249.396L3.32 16.935a2.2 2.2 0 0 0 .686 2.988c.348.208.743.32 1.147.327h7.983a5.7 5.7 0 0 1-.189-1.43ZM9.611 9.805a.8.8 0 0 0 .129-.433V3.867a.84.84 0 0 0-.838-.836h-.4a.225.225 0 0 1-.226-.236v-.13c0-.126.1-.23.226-.235H13.4c.13 0 .234.106.234.236v.099c0 .13-.105.235-.234.235H13a.84.84 0 0 0-.83.837V9.34c-.002.15.04.299.12.425l2.755 4.524H6.857l2.754-4.486Z"
2290
- })), _path2$m || (_path2$m = /*#__PURE__*/React.createElement("path", {
2358
+ })), _path2$k || (_path2$k = /*#__PURE__*/React.createElement("path", {
2291
2359
  fillRule: "evenodd",
2292
2360
  d: "M18.83 12.768a5.625 5.625 0 1 0-.91 11.214 5.625 5.625 0 0 0 .91-11.213Zm.644.818q.328.077.645.187.176.121.383.173a4.8 4.8 0 0 1 1.582 1.192q.045.053.053.12a.65.65 0 0 1 0 .315.6.6 0 0 0-.045.188.28.28 0 0 0 .217.24q.142.018.285 0a.18.18 0 0 1 .165.12q.064.19.173.36a4.8 4.8 0 0 1 .36 1.657.3.3 0 0 1-.075.21q-.15.166-.263.36a5.5 5.5 0 0 1-.577 1.073 1.2 1.2 0 0 0-.315.45 2.3 2.3 0 0 0-.045.382c0 .053-.098.053-.15 0a2.9 2.9 0 0 1-.405-.937c-.045-.24-.098-.48-.165-.75a.98.98 0 0 0-.435-.578 2.2 2.2 0 0 0-.75-.112.89.89 0 0 1-.75-.27.57.57 0 0 1-.12-.33 1.5 1.5 0 0 1 .75-1.583c.067-.052.142-.075.21-.12a.51.51 0 0 0 .172-.502.068.068 0 0 0-.097-.053q-.212.066-.405.173c-.075 0-.15 0-.12-.075a2.8 2.8 0 0 1 .09-.75 1.04 1.04 0 0 0 0-.75.23.23 0 0 0-.15-.098h-.668q.175-.106.308-.262a.2.2 0 0 1 .142-.03m-2.422.067a.083.083 0 0 1 .12.053c.075.12.12.24.195.382.148.29.165.629.045.93-.165.338-.548.48-.863.653a4.4 4.4 0 0 0-1.605 1.432s-.045.075-.067.075a.083.083 0 0 1-.12-.052.6.6 0 0 1-.195-.165s-.09 0-.09.075a.75.75 0 0 0 .352.862.5.5 0 0 1 .15.09c.09.12 0 .293 0 .435s.263.308.48.285a2.4 2.4 0 0 0 .57-.187 1.44 1.44 0 0 1 1.298.165c.187.12.36.315.547.435a.93.93 0 0 0 .578.187.2.2 0 0 1 .12.045.69.69 0 0 1-.12.6 5 5 0 0 1-.525.503c-.413.457-.503 1.155-.84 1.657a1.4 1.4 0 0 0-.195.308 1.3 1.3 0 0 0-.045.502s0 .075-.045.053a1 1 0 0 1-.24-.098.16.16 0 0 1-.098-.12 6.5 6.5 0 0 0-.697-1.987 1.7 1.7 0 0 0-.525-.645c-.075-.053-.143-.098-.165-.173s0-.12 0-.165a1.85 1.85 0 0 0-.75-1.702.6.6 0 0 1-.24-.218c-.053-.09-.053-.24-.098-.33a1.4 1.4 0 0 0-.337-.292c-.045 0-.045-.068-.045-.12a4.88 4.88 0 0 1 3.45-3.473"
2293
2361
  })));
@@ -2345,7 +2413,7 @@ var SvgIconGridLarge = function SvgIconGridLarge(props) {
2345
2413
  })));
2346
2414
  };
2347
2415
 
2348
- var _path$1i, _path2$l;
2416
+ var _path$1i, _path2$j;
2349
2417
  function _extends$1n() { return _extends$1n = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1n.apply(null, arguments); }
2350
2418
  var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2351
2419
  return /*#__PURE__*/React.createElement("svg", _extends$1n({
@@ -2356,13 +2424,13 @@ var SvgIconGridPrivateLarge = function SvgIconGridPrivateLarge(props) {
2356
2424
  fill: "#CCC",
2357
2425
  fillRule: "evenodd",
2358
2426
  d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
2359
- })), _path2$l || (_path2$l = /*#__PURE__*/React.createElement("path", {
2427
+ })), _path2$j || (_path2$j = /*#__PURE__*/React.createElement("path", {
2360
2428
  fillRule: "evenodd",
2361
2429
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
2362
2430
  })));
2363
2431
  };
2364
2432
 
2365
- var _path$1h, _path2$k;
2433
+ var _path$1h, _path2$i;
2366
2434
  function _extends$1m() { return _extends$1m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1m.apply(null, arguments); }
2367
2435
  var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2368
2436
  return /*#__PURE__*/React.createElement("svg", _extends$1m({
@@ -2373,7 +2441,7 @@ var SvgIconGridPublicLarge = function SvgIconGridPublicLarge(props) {
2373
2441
  fill: "#CCC",
2374
2442
  fillRule: "evenodd",
2375
2443
  d: "M12.852 18.98H10.76v-3.212h2.764a5 5 0 0 1 1.42-1.644v-2.54h3.211v1.27h.3c.373 0 .746.075 1.045.075V2.172a.67.67 0 0 0-.672-.672H1.348c-.374 0-.598.299-.598.672v17.406a.67.67 0 0 0 .672.672h11.654a3.5 3.5 0 0 1-.224-1.27m2.091-16.135h3.212v3.212h-3.212zm0 4.631h3.212v2.764h-3.212zM10.76 2.845h2.764v3.212H10.76zm0 4.631h2.764v2.764H10.76zm0 4.109h2.764v2.764H10.76zM5.232 18.98H2.02v-3.212h3.212zm0-4.631H2.02v-2.764h3.212zm0-4.109H2.02V7.476h3.212zm0-4.183H2.02V2.845h3.212zM9.415 18.98H6.651v-3.212h2.764zm0-4.631H6.651v-2.764h2.764zm0-4.109H6.651V7.476h2.764zm0-4.183H6.651V2.845h2.764z"
2376
- })), _path2$k || (_path2$k = /*#__PURE__*/React.createElement("path", {
2444
+ })), _path2$i || (_path2$i = /*#__PURE__*/React.createElement("path", {
2377
2445
  fillRule: "evenodd",
2378
2446
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
2379
2447
  })));
@@ -2404,7 +2472,7 @@ var SvgIconHouseSmall = function SvgIconHouseSmall(props) {
2404
2472
  })));
2405
2473
  };
2406
2474
 
2407
- var _path$1e, _path2$j;
2475
+ var _path$1e, _path2$h;
2408
2476
  function _extends$1j() { return _extends$1j = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1j.apply(null, arguments); }
2409
2477
  var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2410
2478
  return /*#__PURE__*/React.createElement("svg", _extends$1j({
@@ -2414,7 +2482,7 @@ var SvgIconInfoCircleLarge = function SvgIconInfoCircleLarge(props) {
2414
2482
  }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
2415
2483
  fillRule: "evenodd",
2416
2484
  d: "M13.365 8.185c-.36.36-.857.566-1.364.566a1.935 1.935 0 0 1-1.926-1.926A1.923 1.923 0 0 1 12 4.899c.51 0 1.006.205 1.364.563.357.357.563.854.563 1.363 0 .507-.206 1.003-.563 1.36Zm-.852-1.88c-.267-.27-.757-.27-1.019-.003a.726.726 0 0 0 .507 1.245.728.728 0 0 0 .512-1.243Zm-.512 3.169c.663 0 1.635.425 1.685 1.375v6.571a1.687 1.687 0 0 1-3.371-.001v-6.564c.043-.898 1.036-1.381 1.686-1.381m-.452 7.603a.45.45 0 0 0 .9 0v-5.565c-.01-.19-.201-.45-.45-.45-.248 0-.44.248-.45.452z"
2417
- })), _path2$j || (_path2$j = /*#__PURE__*/React.createElement("path", {
2485
+ })), _path2$h || (_path2$h = /*#__PURE__*/React.createElement("path", {
2418
2486
  fillRule: "evenodd",
2419
2487
  d: "M22.364 12c0 5.724-4.64 10.364-10.364 10.364S1.636 17.724 1.636 12 6.276 1.636 12 1.636 22.364 6.276 22.364 12m-1.582 0a8.782 8.782 0 1 1-17.564 0 8.782 8.782 0 0 1 17.564 0"
2420
2488
  })));
@@ -2459,7 +2527,7 @@ var SvgIconLifeRingSmall = function SvgIconLifeRingSmall(props) {
2459
2527
  })));
2460
2528
  };
2461
2529
 
2462
- var _path$1a, _path2$i;
2530
+ var _path$1a, _path2$g;
2463
2531
  function _extends$1f() { return _extends$1f = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1f.apply(null, arguments); }
2464
2532
  var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2465
2533
  return /*#__PURE__*/React.createElement("svg", _extends$1f({
@@ -2469,7 +2537,7 @@ var SvgIconLightBulbLarge = function SvgIconLightBulbLarge(props) {
2469
2537
  }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
2470
2538
  fillRule: "evenodd",
2471
2539
  d: "M12.296 2.194c3.341.144 6.067 2.783 6.242 6.037a6.1 6.1 0 0 1-1.402 4.172c-.748.9-1.257 1.77-1.58 2.678l-.008.024v3.132c0 .39-.24.703-.57.835-.08.655-.676 2.695-1.294 2.695-.073.046-3.28.046-3.375 0-.672 0-1.213-2.028-1.293-2.673a.92.92 0 0 1-.571-.834v-3.155l-.008-.023c-.323-.908-.831-1.78-1.581-2.704a6.1 6.1 0 0 1-1.401-3.902c0-1.737.728-3.351 2.025-4.552 1.3-1.203 3.025-1.802 4.816-1.73m3.365 9.053a4.5 4.5 0 0 0 1.037-2.992c-.114-2.266-2.05-4.161-4.45-4.27a4.74 4.74 0 0 0-3.462 1.24c-.928.87-1.443 2.02-1.443 3.25 0 1.02.337 1.97.99 2.774.689.839 1.207 1.68 1.593 2.523h4.14c.387-.863.907-1.686 1.595-2.524Zm-1.977 6.094v-1.754H10.31v1.754h3.375Zm-2.489 2.748c.047.081 1.524.067 1.609 0 .11-.188.229-.717.275-.956h-2.164c.047.233.17.767.28.957Z"
2472
- })), _path2$i || (_path2$i = /*#__PURE__*/React.createElement("path", {
2540
+ })), _path2$g || (_path2$g = /*#__PURE__*/React.createElement("path", {
2473
2541
  d: "M12.99 6.472c0-.547-.443-.794-.99-.794a2.793 2.793 0 0 0-2.79 2.79c0 .547.315.99.862.99a.99.99 0 0 0 .981-.855l.01-.135c0-.405.428-.939.817-.997l.12-.009a.99.99 0 0 0 .99-.99"
2474
2542
  })));
2475
2543
  };
@@ -2895,7 +2963,7 @@ var SvgIconLoadingSmall = function SvgIconLoadingSmall(props) {
2895
2963
  }))));
2896
2964
  };
2897
2965
 
2898
- var _path$13, _path2$h;
2966
+ var _path$13, _path2$f;
2899
2967
  function _extends$16() { return _extends$16 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$16.apply(null, arguments); }
2900
2968
  var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2901
2969
  return /*#__PURE__*/React.createElement("svg", _extends$16({
@@ -2904,7 +2972,7 @@ var SvgIconLockCircleSmall = function SvgIconLockCircleSmall(props) {
2904
2972
  height: 16
2905
2973
  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
2906
2974
  d: "M8 3.733c-1.067 0-1.92.854-1.92 1.92v.96h3.733v-.96C9.92 4.587 9.067 3.733 8 3.733m0 4.374c-.427 0-.64.32-.64.64q0 .32.32.64v.96q0 .32.32.32t.32-.32v-.96q.32-.16.32-.64c.107-.32-.213-.64-.64-.64"
2907
- })), _path2$h || (_path2$h = /*#__PURE__*/React.createElement("path", {
2975
+ })), _path2$f || (_path2$f = /*#__PURE__*/React.createElement("path", {
2908
2976
  fillRule: "evenodd",
2909
2977
  d: "M8 0C3.627 0 0 3.627 0 8s3.627 8 8 8 8-3.627 8-8-3.52-8-8-8m3.733 11.2c0 .533-.426.96-.96.96H5.227a.956.956 0 0 1-.96-.96V7.467c0-.534.426-.96.96-.96v-.96c0-1.494 1.28-2.774 2.773-2.774s2.773 1.28 2.773 2.774v.96c.534 0 .96.426.96.96z"
2910
2978
  })));
@@ -2961,7 +3029,7 @@ var SvgIconOpenSmall = function SvgIconOpenSmall(props) {
2961
3029
  })));
2962
3030
  };
2963
3031
 
2964
- var _path$_, _path2$g;
3032
+ var _path$_, _path2$e;
2965
3033
  function _extends$11() { return _extends$11 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$11.apply(null, arguments); }
2966
3034
  var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2967
3035
  return /*#__PURE__*/React.createElement("svg", _extends$11({
@@ -2972,7 +3040,7 @@ var SvgIconPauseLarge = function SvgIconPauseLarge(props) {
2972
3040
  fillRule: "evenodd",
2973
3041
  d: "M9.853 7.185c.664 0 1.636.425 1.686 1.376v6.57a1.687 1.687 0 0 1-3.371 0V8.567c.042-.899 1.036-1.382 1.685-1.382m-.451 7.603a.45.45 0 0 0 .9 0V9.223c-.01-.19-.202-.449-.45-.449-.249 0-.44.248-.45.451zm6.43-6.228c-.05-.95-1.022-1.375-1.686-1.375-.65 0-1.643.483-1.685 1.381v6.565c0 .93.756 1.686 1.685 1.686.93 0 1.686-.756 1.686-1.686zm-1.688 6.668a.45.45 0 0 1-.45-.44V9.225c.01-.203.202-.45.45-.45.25 0 .44.258.45.448v5.565a.45.45 0 0 1-.45.44",
2974
3042
  clipRule: "evenodd"
2975
- })), _path2$g || (_path2$g = /*#__PURE__*/React.createElement("path", {
3043
+ })), _path2$e || (_path2$e = /*#__PURE__*/React.createElement("path", {
2976
3044
  fillRule: "evenodd",
2977
3045
  d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10m0-1.667a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666",
2978
3046
  clipRule: "evenodd"
@@ -3066,7 +3134,7 @@ var SvgIconPinSmall = function SvgIconPinSmall(props) {
3066
3134
  })));
3067
3135
  };
3068
3136
 
3069
- var _path$S, _path2$f;
3137
+ var _path$S, _path2$d;
3070
3138
  function _extends$V() { return _extends$V = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$V.apply(null, arguments); }
3071
3139
  var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
3072
3140
  return /*#__PURE__*/React.createElement("svg", _extends$V({
@@ -3076,7 +3144,7 @@ var SvgIconPlayLarge = function SvgIconPlayLarge(props) {
3076
3144
  }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
3077
3145
  fillRule: "evenodd",
3078
3146
  d: "M12 20.333a8.333 8.333 0 1 0 0-16.666 8.333 8.333 0 0 0 0 16.666M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10"
3079
- })), _path2$f || (_path2$f = /*#__PURE__*/React.createElement("path", {
3147
+ })), _path2$d || (_path2$d = /*#__PURE__*/React.createElement("path", {
3080
3148
  fillRule: "evenodd",
3081
3149
  d: "m15.333 12.333-5.5-3.175v6.35zm1.334 1.155a1.333 1.333 0 0 0 0-2.31l-6.5-3.752c-.89-.513-2 .128-2 1.155v7.505a1.333 1.333 0 0 0 2 1.155z"
3082
3150
  })));
@@ -3108,7 +3176,7 @@ var SvgIconPlusSmall = function SvgIconPlusSmall(props) {
3108
3176
  })));
3109
3177
  };
3110
3178
 
3111
- var _path$P, _path2$e;
3179
+ var _path$P, _path2$c;
3112
3180
  function _extends$S() { return _extends$S = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$S.apply(null, arguments); }
3113
3181
  var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
3114
3182
  return /*#__PURE__*/React.createElement("svg", _extends$S({
@@ -3119,13 +3187,13 @@ var SvgIconProjectPrivateLarge = function SvgIconProjectPrivateLarge(props) {
3119
3187
  fill: "#CCC",
3120
3188
  fillRule: "evenodd",
3121
3189
  d: "M21.828 5.775c-.15-.225-.374-.375-.598-.525l.075-.525c.15-1.35-.822-2.55-2.167-2.625H9.576c-.224 0-.448-.075-.597-.3L8.232.9C7.709.375 7.036 0 6.289 0H3.675C3.002 0 2.33.3 1.882.825c-.523.525-.747 1.2-.673 1.95l.3 2.4c-.3.15-.598.3-.897.6A2.48 2.48 0 0 0 .014 7.65l.822 9.375A2.76 2.76 0 0 0 3.6 19.5h9.637c-.075-.3-.075-.6-.075-.9 0-.225 0-.525.075-.75H3.6c-.598 0-1.046-.45-1.046-.975L1.658 7.5a.85.85 0 0 1 .224-.6c.15-.15.373-.3.597-.3h17.556c.224 0 .448.075.597.3a.85.85 0 0 1 .224.6l-.522 5.7c.597.15 1.12.45 1.568.75l.598-6.3c0-.675-.224-1.35-.672-1.875m-2.241-.825H3.152l-.3-2.4c0-.225.076-.45.225-.6s.374-.3.598-.3h2.614c.224 0 .449.075.598.3l.747.9c.448.6 1.12.9 1.868.9h9.263c.224 0 .448.075.597.225.15.15.225.375.225.6z"
3122
- })), _path2$e || (_path2$e = /*#__PURE__*/React.createElement("path", {
3190
+ })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
3123
3191
  fillRule: "evenodd",
3124
3192
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
3125
3193
  })));
3126
3194
  };
3127
3195
 
3128
- var _path$O, _path2$d;
3196
+ var _path$O, _path2$b;
3129
3197
  function _extends$R() { return _extends$R = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$R.apply(null, arguments); }
3130
3198
  var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
3131
3199
  return /*#__PURE__*/React.createElement("svg", _extends$R({
@@ -3136,7 +3204,7 @@ var SvgIconProjectPublicLarge = function SvgIconProjectPublicLarge(props) {
3136
3204
  fill: "#CCC",
3137
3205
  fillRule: "evenodd",
3138
3206
  d: "M13.123 19.05v-.45c0-.225 0-.525.075-.75H3.61c-.6 0-1.049-.45-1.049-.975L1.662 7.5c0-.225.075-.45.225-.6s.374-.3.6-.3h17.602c.225 0 .45.075.6.3.149.15.224.375.224.6l-.524 5.7c.3.075.524.15.748.3 0 0 .075 0 .075.075.225.15.45.225.675.375l.599-6.3a2.47 2.47 0 0 0-.6-1.875c-.15-.225-.374-.375-.599-.525l.075-.525c.15-1.35-.824-2.55-2.172-2.625H9.602c-.225 0-.45-.075-.6-.3L8.255.9C7.729.375 7.055 0 6.306 0H3.685C3.01 0 2.336.3 1.887.825c-.525.525-.75 1.2-.674 1.95l.3 2.4c-.3.15-.6.3-.9.6A2.48 2.48 0 0 0 .014 7.65l.824 9.375A2.767 2.767 0 0 0 3.61 19.5h9.662c-.075-.15-.075-.3-.15-.45ZM3.085 1.95c.15-.15.375-.3.6-.3h2.621c.225 0 .45.075.6.3l.749.9c.449.6 1.123.9 1.872.9h9.288a.85.85 0 0 1 .6.225.85.85 0 0 1 .224.6l-.075.375H3.085l-.224-2.4c0-.225.075-.45.224-.6"
3139
- })), _path2$d || (_path2$d = /*#__PURE__*/React.createElement("path", {
3207
+ })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
3140
3208
  fillRule: "evenodd",
3141
3209
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052a5.606 5.606 0 0 0-5.156-5.156m.673.822.672.224c.15.075.224.15.374.15.598.298 1.12.672 1.569 1.195 0 0 .075.075.075.15v.298c0 .075-.075.15-.075.225 0 .149.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .074 0 .149-.074.224a1.6 1.6 0 0 0-.3.373c-.149.3-.298.747-.522.972-.15.15-.3.298-.3.448-.074.15 0 .299-.074.373 0 .075-.075.075-.15 0-.223-.298-.298-.597-.373-.896-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.075-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.3-.149-.597.225-1.27.748-1.568.075-.075.15-.075.224-.15.15-.15.224-.299.15-.523 0-.074-.075-.074-.075-.074-.15.074-.3.074-.374.149-.075 0-.15 0-.15-.075 0-.224 0-.448.075-.747s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.299c.074.075.074.075.149.075m-2.391.075c.075 0 .075 0 .15.075.074.149.149.224.223.373.15.299.224.673.075.897-.15.299-.523.448-.822.672-.672.299-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.299.447.299s.374-.15.598-.224a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.447s.374.225.598.225c.075 0 .075 0 .15.074a.58.58 0 0 1-.15.598c-.15.224-.373.299-.523.523-.373.448-.523 1.12-.822 1.644-.075.075-.15.224-.224.299-.15.15-.15.299-.15.523 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.672-2.017c-.15-.224-.3-.523-.523-.672-.075-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.747-1.718c-.075-.075-.224-.15-.224-.224-.075-.075-.075-.224-.075-.299l-.299-.299c-.075 0-.075-.075-.075-.15.3-1.643 1.644-2.988 3.363-3.436"
3142
3210
  })));
@@ -3220,7 +3288,7 @@ var SvgIconRefreshSmall = function SvgIconRefreshSmall(props) {
3220
3288
  })));
3221
3289
  };
3222
3290
 
3223
- var _path$H, _path2$c, _path3$3;
3291
+ var _path$H, _path2$a, _path3$3;
3224
3292
  function _extends$K() { return _extends$K = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$K.apply(null, arguments); }
3225
3293
  var SvgIconReportLarge = function SvgIconReportLarge(props) {
3226
3294
  return /*#__PURE__*/React.createElement("svg", _extends$K({
@@ -3229,7 +3297,7 @@ var SvgIconReportLarge = function SvgIconReportLarge(props) {
3229
3297
  height: 24
3230
3298
  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
3231
3299
  d: "M3.142 21.243h11.554a.77.77 0 1 0 0-1.54H3.912V2.756h9.244v3.851c0 .425.344.77.77.77h3.851V9.69a.77.77 0 1 0 1.54 0V6.61a.78.78 0 0 0-.226-.546l-4.62-4.62a.78.78 0 0 0-.545-.226H3.142a.77.77 0 0 0-.77.77v18.486c0 .425.345.77.77.77ZM14.696 3.846l1.992 1.992h-1.992z"
3232
- })), _path2$c || (_path2$c = /*#__PURE__*/React.createElement("path", {
3300
+ })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
3233
3301
  d: "M11.615 9.305c0-2.18-2.018-4.627-2.104-4.73-.294-.35-.89-.35-1.184 0-.086.103-2.104 2.55-2.104 4.73A2.7 2.7 0 0 0 8.92 12a2.7 2.7 0 0 0 2.696-2.695Zm-3.851 0c0-.942.618-2.113 1.156-2.932.537.817 1.154 1.987 1.154 2.932a1.157 1.157 0 0 1-2.31 0m0 5.005a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m-6.932 3.082a.77.77 0 0 1-.77.77h-.77a.77.77 0 1 1 0-1.54h.77a.77.77 0 0 1 .77.77m6.932 0a.77.77 0 0 1-.77.77h-3.852a.77.77 0 1 1 0-1.54h3.852a.77.77 0 0 1 .77.77m.77-5.392v2.31a.77.77 0 0 0 .77.771v5.392a2.313 2.313 0 0 0 2.311 2.31 2.313 2.313 0 0 0 2.31-2.31V15.08a.77.77 0 0 0 .771-.77V12a.77.77 0 0 0-.77-.77h-4.622a.77.77 0 0 0-.77.77m3.851 8.473a.771.771 0 0 1-1.54 0V15.08h1.54zm-2.31-7.703h3.08v.77h-3.08z"
3234
3302
  })), _path3$3 || (_path3$3 = /*#__PURE__*/React.createElement("path", {
3235
3303
  fillRule: "evenodd",
@@ -3276,7 +3344,7 @@ var SvgIconRotateRightSmall = function SvgIconRotateRightSmall(props) {
3276
3344
  })));
3277
3345
  };
3278
3346
 
3279
- var _path$D, _path2$b;
3347
+ var _path$D, _path2$9;
3280
3348
  function _extends$G() { return _extends$G = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$G.apply(null, arguments); }
3281
3349
  var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
3282
3350
  return /*#__PURE__*/React.createElement("svg", _extends$G({
@@ -3286,7 +3354,7 @@ var SvgIconSaveLarge = function SvgIconSaveLarge(props) {
3286
3354
  }, props), _path$D || (_path$D = /*#__PURE__*/React.createElement("path", {
3287
3355
  fillRule: "evenodd",
3288
3356
  d: "M15.98 14.544a3.98 3.98 0 1 1-7.96 0 3.98 3.98 0 0 1 7.96 0m-1.713 0a2.267 2.267 0 1 1-4.534 0 2.267 2.267 0 0 1 4.534 0"
3289
- })), _path2$b || (_path2$b = /*#__PURE__*/React.createElement("path", {
3357
+ })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
3290
3358
  fillRule: "evenodd",
3291
3359
  d: "M3.182 2.182a1 1 0 0 0-1 1v17.636a1 1 0 0 0 1 1h17.636a1 1 0 0 0 1-1V7.024a1 1 0 0 0-.293-.707l-3.842-3.842a1 1 0 0 0-.707-.293zm13.92 2.134 3.003 3.003v12.787H3.895V3.895h3v3.854a1 1 0 0 0 1 1h8.207a1 1 0 0 0 1-1zm-8.495 2.72V3.895h6.782v3.14z"
3292
3360
  })));
@@ -3324,7 +3392,7 @@ var SvgIconSearchLarge = function SvgIconSearchLarge(props) {
3324
3392
  })));
3325
3393
  };
3326
3394
 
3327
- var _path$B, _path2$a;
3395
+ var _path$B, _path2$8;
3328
3396
  function _extends$D() { return _extends$D = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$D.apply(null, arguments); }
3329
3397
  var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3Large(props) {
3330
3398
  return /*#__PURE__*/React.createElement("svg", _extends$D({
@@ -3333,13 +3401,13 @@ var SvgIconSearchLinesHorizontal3Large = function SvgIconSearchLinesHorizontal3L
3333
3401
  height: 24
3334
3402
  }, props), _path$B || (_path$B = /*#__PURE__*/React.createElement("path", {
3335
3403
  d: "M6.51 5.694a.818.818 0 1 0 0 1.636h4.362a.818.818 0 0 0 0-1.636zM5.692 9.24c0-.453.366-.819.818-.819h6.543a.818.818 0 0 1 0 1.636H6.51a.82.82 0 0 1-.818-.818Zm.818 1.908a.818.818 0 1 0 0 1.637h2.726a.818.818 0 1 0 0-1.637z"
3336
- })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
3404
+ })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
3337
3405
  fillRule: "evenodd",
3338
3406
  d: "M14.81 3.679a7.87 7.87 0 0 1 .681 10.352q.04.033.08.071l6.75 6.751a1.036 1.036 0 0 1-1.465 1.466l-6.751-6.75a1 1 0 0 1-.072-.08 7.876 7.876 0 0 1-10.355-.683 7.865 7.865 0 0 1 0-11.127 7.874 7.874 0 0 1 11.132 0m-1.503 9.628a5.8 5.8 0 1 0-8.203-8.203 5.8 5.8 0 0 0 8.203 8.203"
3339
3407
  })));
3340
3408
  };
3341
3409
 
3342
- var _path$A, _path2$9;
3410
+ var _path$A, _path2$7;
3343
3411
  function _extends$C() { return _extends$C = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$C.apply(null, arguments); }
3344
3412
  var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3Small(props) {
3345
3413
  return /*#__PURE__*/React.createElement("svg", _extends$C({
@@ -3348,7 +3416,7 @@ var SvgIconSearchLinesHorizontal3Small = function SvgIconSearchLinesHorizontal3S
3348
3416
  height: 16
3349
3417
  }, props), _path$A || (_path$A = /*#__PURE__*/React.createElement("path", {
3350
3418
  d: "M4.378 3.799a.516.516 0 1 0 0 1.033h3.099a.516.516 0 1 0 0-1.033zm-.516 2.324c0-.285.23-.517.516-.517H8.51a.516.516 0 1 1 0 1.033H4.378a.516.516 0 0 1-.516-.516m.516 1.291a.516.516 0 1 0 0 1.033h2.066a.516.516 0 0 0 0-1.033z"
3351
- })), _path2$9 || (_path2$9 = /*#__PURE__*/React.createElement("path", {
3419
+ })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
3352
3420
  fillRule: "evenodd",
3353
3421
  d: "M9.843 2.508a5.19 5.19 0 0 1 .501 6.753 1 1 0 0 1 .079.07l4.36 4.36a.773.773 0 1 1-1.093 1.094l-4.36-4.361a1 1 0 0 1-.07-.08 5.187 5.187 0 1 1 .583-7.836m-1.144 6.19a3.602 3.602 0 1 0-5.095-5.095A3.602 3.602 0 0 0 8.7 8.698Z"
3354
3422
  })));
@@ -3445,7 +3513,7 @@ var SvgIconStarburstSmall = function SvgIconStarburstSmall(props) {
3445
3513
  })));
3446
3514
  };
3447
3515
 
3448
- var _path$s, _path2$8;
3516
+ var _path$s, _path2$6;
3449
3517
  function _extends$u() { return _extends$u = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$u.apply(null, arguments); }
3450
3518
  var SvgIconStarLarge = function SvgIconStarLarge(props) {
3451
3519
  return /*#__PURE__*/React.createElement("svg", _extends$u({
@@ -3455,7 +3523,7 @@ var SvgIconStarLarge = function SvgIconStarLarge(props) {
3455
3523
  }, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
3456
3524
  fillRule: "evenodd",
3457
3525
  d: "m11.992 8.712-.64 1.538a1.86 1.86 0 0 1-1.563 1.136l-1.66.133 1.264 1.084c.528.452.759 1.162.598 1.838l-.387 1.62 1.422-.868a1.86 1.86 0 0 1 1.933 0l1.421.868-.386-1.62a1.85 1.85 0 0 1 .597-1.838l1.265-1.084-1.66-.133a1.86 1.86 0 0 1-1.564-1.136zM13 7.015c-.372-.896-1.641-.896-2.014 0L9.892 9.642a.27.27 0 0 1-.23.167l-2.837.228c-.967.077-1.36 1.284-.622 1.916l2.161 1.851a.27.27 0 0 1 .088.27l-.66 2.769c-.225.944.801 1.69 1.63 1.184l2.428-1.484a.27.27 0 0 1 .284 0l2.43 1.484c.827.505 1.854-.24 1.629-1.184l-.66-2.769a.27.27 0 0 1 .087-.27l2.162-1.851c.737-.632.344-1.839-.623-1.916l-2.837-.228a.27.27 0 0 1-.23-.167z"
3458
- })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
3526
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
3459
3527
  d: "M11.201 2.111a.79.79 0 1 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zm11.055 9.091a.79.79 0 0 1 0 1.582h-1.691a.79.79 0 0 1 0-1.582zm-3.466-7.13a.791.791 0 0 1 1.119 1.119l-1.196 1.195a.79.79 0 1 1-1.119-1.118zm1.945 14.727a.79.79 0 1 1-1.119 1.118l-1.195-1.195a.79.79 0 1 1 1.118-1.119zm-9.534 1.386a.79.79 0 0 1 1.582 0v1.69a.791.791 0 0 1-1.582 0zM3.42 11.202a.79.79 0 1 1 0 1.582H1.73a.79.79 0 1 1 0-1.582zm1.028 6.401a.79.79 0 1 1 1.119 1.119L4.37 19.917A.791.791 0 0 1 3.253 18.8zM6.39 5.268a.79.79 0 1 1-1.12 1.118L4.076 5.191a.79.79 0 1 1 1.119-1.119z"
3460
3528
  })));
3461
3529
  };
@@ -3511,7 +3579,7 @@ var SvgIconThumbsUpSmall = function SvgIconThumbsUpSmall(props) {
3511
3579
  }))));
3512
3580
  };
3513
3581
 
3514
- var _path$q, _path2$7, _path3$2;
3582
+ var _path$q, _path2$5, _path3$2;
3515
3583
  function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
3516
3584
  var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3517
3585
  return /*#__PURE__*/React.createElement("svg", _extends$q({
@@ -3521,7 +3589,7 @@ var SvgIconTrashCanLarge = function SvgIconTrashCanLarge(props) {
3521
3589
  }, props), _path$q || (_path$q = /*#__PURE__*/React.createElement("path", {
3522
3590
  fillRule: "evenodd",
3523
3591
  d: "M9.188 2.202a2.18 2.18 0 0 0-2.181 2.181v.648H4.102a.49.49 0 0 0-.49.491v.557c0 .27.219.49.49.49h15.796a.49.49 0 0 0 .491-.49v-.557a.49.49 0 0 0-.49-.49h-2.903v-.649a2.18 2.18 0 0 0-2.182-2.181zm-.64 2.201c0-.361.293-.654.655-.654h5.594c.362 0 .655.293.655.654v.62H8.548z"
3524
- })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
3592
+ })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
3525
3593
  d: "M17.714 7.828a.22.22 0 0 1 .218-.209h1.103c.124 0 .223.103.218.227l-.492 12.336c-.023.411-.213 1.007-.528 1.29s-.732.44-1.166.44H6.929c-.434 0-.852-.157-1.167-.44s-.501-.88-.524-1.29L4.733 7.845a.22.22 0 0 1 .218-.227h1.117c.117 0 .213.093.218.21l.506 12.296s.047.293.363.292l9.698.008c.308 0 .353-.316.353-.316z"
3526
3594
  })), _path3$2 || (_path3$2 = /*#__PURE__*/React.createElement("path", {
3527
3595
  d: "M8.496 9.62a.44.44 0 0 1 .418-.454l.436-.02a.436.436 0 0 1 .454.418l.369 9.175a.44.44 0 0 1-.418.454l-.436.02a.435.435 0 0 1-.454-.418zm3.286-.469a.436.436 0 0 0-.436.437v9.15c0 .241.195.437.436.437h.437c.24 0 .436-.196.436-.437v-9.15a.436.436 0 0 0-.436-.437zm2.424.413a.435.435 0 0 1 .454-.417l.436.019c.24.01.428.214.418.455l-.378 9.174a.435.435 0 0 1-.454.417l-.436-.02a.44.44 0 0 1-.418-.454z"
@@ -3566,7 +3634,7 @@ var SvgIconTreeHorizontalLarge = function SvgIconTreeHorizontalLarge(props) {
3566
3634
  })));
3567
3635
  };
3568
3636
 
3569
- var _path$m, _path2$6;
3637
+ var _path$m, _path2$4;
3570
3638
  function _extends$m() { return _extends$m = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$m.apply(null, arguments); }
3571
3639
  var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLarge(props) {
3572
3640
  return /*#__PURE__*/React.createElement("svg", _extends$m({
@@ -3577,13 +3645,13 @@ var SvgIconTreeHorizontalPrivateLarge = function SvgIconTreeHorizontalPrivateLar
3577
3645
  fill: "#CCC",
3578
3646
  fillRule: "evenodd",
3579
3647
  d: "M13.71 15.9H9.652v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.059c.076-.525.306-.9.613-1.35Zm1.533-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
3580
- })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
3648
+ })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
3581
3649
  fillRule: "evenodd",
3582
3650
  d: "M18.375 12.75c3.15 0 5.625 2.55 5.625 5.625S21.45 24 18.375 24s-5.625-2.55-5.625-5.625 2.55-5.625 5.625-5.625m0 1.95c-1.05 0-1.95.9-1.95 1.95v.675c-.375 0-.675.3-.675.675v2.625c0 .375.3.675.675.675h3.9c.375 0 .675-.3.675-.675V18c0-.375-.3-.675-.675-.675v-.675c0-1.05-.9-1.95-1.95-1.95m0 3.75c.3 0 .525.225.45.45q0 .337-.225.45v.675q0 .225-.225.225t-.225-.225v-.675q-.225-.225-.225-.45c0-.225.15-.45.45-.45m0-3.075c.75 0 1.35.6 1.275 1.35v.675h-2.625v-.675c0-.75.6-1.35 1.35-1.35"
3583
3651
  })));
3584
3652
  };
3585
3653
 
3586
- var _path$l, _path2$5;
3654
+ var _path$l, _path2$3;
3587
3655
  function _extends$l() { return _extends$l = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$l.apply(null, arguments); }
3588
3656
  var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge(props) {
3589
3657
  return /*#__PURE__*/React.createElement("svg", _extends$l({
@@ -3594,7 +3662,7 @@ var SvgIconTreeHorizontalPublicLarge = function SvgIconTreeHorizontalPublicLarge
3594
3662
  fill: "#CCC",
3595
3663
  fillRule: "evenodd",
3596
3664
  d: "M13.94 15.9H9.651v-4.8h2.987a2.68 2.68 0 0 0 2.605 2.025c1.531 0 2.757-1.2 2.757-2.7s-1.226-2.7-2.757-2.7a2.68 2.68 0 0 0-2.605 2.025H9.651v-4.8h2.987c.307 1.2 1.379 1.95 2.605 1.95C16.774 6.9 18 5.7 18 4.2s-1.226-2.7-2.757-2.7c-1.226 0-2.375.9-2.605 2.1h-3.6q-.23 0-.46.225-.229.225-.23.45V9.75H5.363a2.68 2.68 0 0 0-2.605-2.025c-1.531 0-2.757 1.2-2.757 2.7v.075c.077 1.425 1.302 2.625 2.757 2.625A2.68 2.68 0 0 0 5.362 11.1h2.987v5.475a.68.68 0 0 0 .69.675h4.289a2.75 2.75 0 0 1 .612-1.35m1.303-6.825c.766 0 1.378.6 1.378 1.35s-.612 1.425-1.378 1.425-1.38-.6-1.38-1.425c-.076-.75.537-1.35 1.38-1.35m0-6.225c.766 0 1.378.6 1.378 1.425 0 .75-.612 1.35-1.378 1.35s-1.38-.6-1.38-1.35c-.076-.75.614-1.425 1.38-1.425m-12.562 9c-.766 0-1.379-.6-1.379-1.425 0-.75.613-1.35 1.379-1.35s1.455.6 1.455 1.35-.69 1.425-1.455 1.425"
3597
- })), _path2$5 || (_path2$5 = /*#__PURE__*/React.createElement("path", {
3665
+ })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
3598
3666
  fillRule: "evenodd",
3599
3667
  d: "M18.823 12.771c-3.437-.299-6.35 2.615-6.052 6.052.224 2.69 2.391 4.932 5.156 5.156 3.437.299 6.35-2.615 6.052-6.052-.224-2.765-2.391-5.006-5.156-5.156m.673.747.672.224c.15.075.224.15.374.15.598.299 1.12.672 1.569 1.195 0 0 .075.075.075.15v.299c0 .074-.075.15-.075.224 0 .15.15.224.224.224h.299a.16.16 0 0 1 .15.15c.074.149.149.298.149.373.224.523.299 1.046.373 1.644 0 .075 0 .15-.074.224a1.6 1.6 0 0 0-.3.374c-.149.299-.298.747-.522.97-.15.15-.3.3-.3.45-.074.149 0 .298-.074.373 0 .074-.075.074-.15 0-.223-.299-.298-.598-.373-.897-.075-.224-.075-.448-.15-.747a1.16 1.16 0 0 0-.448-.598c-.224-.15-.523-.074-.747-.15-.299 0-.523-.074-.747-.298-.075-.075-.15-.224-.15-.299-.149-.598.225-1.27.748-1.569.075-.075.15-.075.224-.15.15-.149.224-.298.15-.522 0-.075-.075-.075-.075-.075-.15.075-.3.075-.374.15-.075 0-.15 0-.15-.075 0-.225 0-.449.075-.748s.15-.523 0-.747c0-.075-.074-.075-.15-.075h-.672a.58.58 0 0 0 .3-.298c.074.149.149.074.149.074m-2.391.075c.075 0 .075 0 .15.075.074.15.149.224.223.373.15.3.224.673.075.897-.15.299-.523.448-.822.672-.672.3-1.195.822-1.569 1.42l-.075.075c-.074 0-.074 0-.149-.075s-.15-.075-.224-.15c0 0-.075 0-.075.075a.75.75 0 0 0 .374.822c.074 0 .074.075.15.075.074.15 0 .299 0 .448 0 .224.298.3.447.3.225 0 .374-.15.598-.225a1.5 1.5 0 0 1 1.27.15c.224.149.374.298.523.448s.374.224.598.224c.075 0 .075 0 .15.075a.58.58 0 0 1-.15.597c-.15.224-.373.3-.523.523-.373.449-.523 1.121-.822 1.644-.075.075-.15.224-.224.3-.075.149-.075.298-.075.522 0 0 0 .075-.074.075-.075 0-.15-.075-.224-.075s-.075-.075-.075-.15a10.7 10.7 0 0 0-.673-2.017c-.15-.224-.299-.523-.523-.672-.074-.075-.15-.075-.15-.15v-.15a1.88 1.88 0 0 0-.746-1.718c-.075-.074-.225-.149-.225-.224s-.074-.224-.074-.299l-.3-.299c-.074 0-.074-.074-.074-.149.3-1.569 1.57-2.989 3.288-3.437"
3600
3668
  })));
@@ -3713,7 +3781,7 @@ var SvgIconUploadLarge = function SvgIconUploadLarge(props) {
3713
3781
  })));
3714
3782
  };
3715
3783
 
3716
- var _path$b, _path2$4;
3784
+ var _path$b, _path2$2;
3717
3785
  function _extends$b() { return _extends$b = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$b.apply(null, arguments); }
3718
3786
  var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3719
3787
  return /*#__PURE__*/React.createElement("svg", _extends$b({
@@ -3722,12 +3790,12 @@ var SvgIconUploadSmall = function SvgIconUploadSmall(props) {
3722
3790
  height: 16
3723
3791
  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
3724
3792
  d: "M8.006 11.976a.98.98 0 0 1-.713-.299 1.02 1.02 0 0 1-.288-.735v-6.1L5.892 6.139a.98.98 0 0 1-.942.334 1 1 0 0 1-.75-.674 1.03 1.03 0 0 1 .208-1.001l2.847-3.314a.98.98 0 0 1 .74-.34c.284 0 .554.124.742.341l2.844 3.31c.254.282.332.68.205 1.036a.98.98 0 0 1-1.685.31L8.986 4.844v6.094c.006.276-.096.538-.28.733a1 1 0 0 1-.57.296z"
3725
- })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
3793
+ })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
3726
3794
  d: "M12.526 11.253c0-.554.417-1.012.956-1.074l.126-.008c.597 0 1.082.485 1.082 1.082l-.002 2.484-.01.178c-.062.538-.52.956-1.074.956H2.396a1.083 1.083 0 0 1-1.081-1.09v-2.527a1.082 1.082 0 1 1 2.163 0l-.001 1.452h9.048z"
3727
3795
  })));
3728
3796
  };
3729
3797
 
3730
- var _path$a, _path2$3, _path3$1, _path4;
3798
+ var _path$a, _path2$1, _path3$1, _path4;
3731
3799
  function _extends$a() { return _extends$a = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$a.apply(null, arguments); }
3732
3800
  var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3733
3801
  return /*#__PURE__*/React.createElement("svg", _extends$a({
@@ -3736,7 +3804,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3736
3804
  height: 24
3737
3805
  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
3738
3806
  d: "M20.62 10.487c0-.382.308-.803.807-.803.498 0 .785.421.785.803v2.764c0 .28-.15.536-.36.672a6.7 6.7 0 0 0-1.231-.852v-.405h-1.047a5.6 5.6 0 0 0-1.454-.19c-.06 0-.23-.002-.289 0 .014-.167.02-.441.02-.61a6.095 6.095 0 0 0-6.106-6.112c-3.336 0-6.115 2.777-6.115 6.115a6.104 6.104 0 0 0 6.115 6.115c.253 0 .604-.025.852-.055l.001.203c0 .413.068 1.011.153 1.399-.064.008-.15.023-.213.029v1.185h.66c.178.34.445.755.686 1.049-.136.345-.447.57-.749.545h-2.763c-.382 0-.809-.307-.809-.801s.417-.793.799-.793h.586V19.56a7.17 7.17 0 0 1-4.025-1.708l-.89.854.414.415c.268.27.35.765 0 1.117s-.861.268-1.13 0l-1.942-1.942a.8.8 0 0 1-.072-1.202c.382-.382.94-.242 1.189.085l.41.41.862-.896a7.18 7.18 0 0 1-1.677-4.027H2.864v.585c0 .381-.288.797-.793.797a.79.79 0 0 1-.796-.797v-2.764c0-.382.306-.802.796-.802s.793.42.793.802v.585h1.223A7.2 7.2 0 0 1 5.768 7.04l-.852-.889-.416.416a.793.793 0 0 1-1.12 0c-.35-.35-.27-.867-.003-1.137L5.32 3.49c.249-.338.832-.43 1.2-.062s.25.936-.077 1.185l-.415.415.894.86a7.2 7.2 0 0 1 4.027-1.676v-1.22h-.586a.8.8 0 0 1-.795-.796c0-.486.413-.797.795-.797h2.763c.382 0 .797.31.797.797s-.415.796-.797.796h-.588v1.22a7.2 7.2 0 0 1 4.032 1.682l.89-.852-.415-.415c-.305-.261-.393-.82-.038-1.175s.906-.249 1.162.05l1.956 1.942c.267.27.348.777.001 1.127-.347.349-.856.265-1.126-.002l-.412-.413-.828.893a7.2 7.2 0 0 1 1.678 4.027h1.184v-.589Z"
3739
- })), _path2$3 || (_path2$3 = /*#__PURE__*/React.createElement("path", {
3807
+ })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
3740
3808
  fillRule: "evenodd",
3741
3809
  d: "M22.726 17.988c0 2.486-2.014 4.62-4.598 4.62a4.6 4.6 0 0 1-4.61-4.624 4.584 4.584 0 0 1 4.602-4.59c2.55 0 4.606 2.109 4.606 4.594m-3.396 2.284c.293-.264.426-.6.426-1.014 0-.413-.072-.528-.24-.808q-.277-.363-1.029-.722a8 8 0 0 1-.721-.373.8.8 0 0 1-.22-.216.9.9 0 0 1-.112-.361.64.64 0 0 1 .265-.49c.114-.1.31-.145.525-.145q.27 0 .55.07c.187.046.355.105.64.222l.283-.695a4.3 4.3 0 0 0-.705-.243 3.2 3.2 0 0 0-.8-.092c-.573.027-.965.179-1.288.45-.285.326-.358.603-.358 1.016 0 .251.025.364.122.552q.147.282.392.495c.164.141.405.285.736.443.35.166.565.278.678.353.114.076.295.216.318.31.058.081.06.193.06.298 0 .226-.127.452-.303.523q-.197.142-.571.142-.312 0-.688-.099a5 5 0 0 1-.815-.293v.814c.44.215.844.292 1.415.292.62 0 1.147-.164 1.44-.429"
3742
3810
  })), _path3$1 || (_path3$1 = /*#__PURE__*/React.createElement("path", {
@@ -3747,7 +3815,7 @@ var SvgIconVirusCircleSLarge = function SvgIconVirusCircleSLarge(props) {
3747
3815
  })));
3748
3816
  };
3749
3817
 
3750
- var _path$9, _path2$2, _path3;
3818
+ var _path$9, _path2, _path3;
3751
3819
  function _extends$9() { return _extends$9 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$9.apply(null, arguments); }
3752
3820
  var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3753
3821
  return /*#__PURE__*/React.createElement("svg", _extends$9({
@@ -3757,7 +3825,7 @@ var SvgIconVirusLarge = function SvgIconVirusLarge(props) {
3757
3825
  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
3758
3826
  fillRule: "evenodd",
3759
3827
  d: "M20.874 10.618c0-.381.297-.8.796-.8s.793.419.793.8v2.764c0 .381-.29.796-.793.796a.79.79 0 0 1-.796-.796v-.585h-1.185c-.155 1.528-.7 2.874-1.692 4.046l.83.87.413-.412c.274-.234.71-.347 1.09.033s.265.813.03 1.087l-.988 1.016-.974.974a.787.787 0 0 1-1.134-.012c-.373-.373-.254-.838.014-1.108l.401-.429-.85-.85a7.2 7.2 0 0 1-4.034 1.68v1.185h.584c.382 0 .802.286.802.796s-.42.793-.802.793h-2.763a.785.785 0 0 1-.791-.793c0-.503.409-.796.79-.796h.586v-1.185a7.23 7.23 0 0 1-4.04-1.717l-.882.852.417.416a.79.79 0 0 1-.002 1.122c-.355.355-.857.26-1.126-.008l-.981-.967-.96-.974a.785.785 0 0 1-.052-1.2c.4-.395.916-.242 1.165.086l.424.41.846-.888a7.15 7.15 0 0 1-1.67-4.019H3.12v.577c0 .381-.25.796-.796.796s-.798-.448-.798-.83v-2.763c0-.381.304-.763.798-.763.493 0 .796.415.796.796v.585h1.22a7.2 7.2 0 0 1 1.679-4.03l-.856-.887-.417.418a.79.79 0 0 1-1.114-.007.8.8 0 0 1 0-1.121l.967-.981.974-.96c.25-.338.826-.453 1.2-.079s.242.943-.086 1.193l-.406.406.905.85c1.177-.98 2.49-1.518 4.015-1.663V3.124h-.585c-.382 0-.803-.303-.803-.793s.421-.801.803-.801h2.763c.382 0 .8.31.8.801 0 .49-.418.793-.8.793h-.585v1.218c1.525.145 2.875.672 4.052 1.653l.861-.825-.419-.419a.8.8 0 0 1-.019-1.165.78.78 0 0 1 1.147.038l.98.967.975.974c.268.27.384.751.016 1.12a.803.803 0 0 1-1.143.008l-.416-.402-.813.873a7.2 7.2 0 0 1 1.674 4.04h1.185zM5.887 12c0 3.312 2.811 6.103 6.107 6.103 3.295 0 6.118-2.645 6.118-6.079s-2.68-6.139-6.115-6.139S5.887 8.689 5.887 12"
3760
- })), _path2$2 || (_path2$2 = /*#__PURE__*/React.createElement("path", {
3828
+ })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
3761
3829
  d: "M8.674 10.683c.822 0 1.312.649 1.312 1.317s-.52 1.321-1.312 1.321S7.361 12.669 7.361 12s.491-1.317 1.313-1.317m3.583 2.607c1.046 0 1.792.864 1.792 1.796 0 .933-.74 1.801-1.792 1.801-1.05 0-1.791-.868-1.791-1.8 0-.933.745-1.798 1.791-1.798Z"
3762
3830
  })), _path3 || (_path3 = /*#__PURE__*/React.createElement("path", {
3763
3831
  fillRule: "evenodd",
@@ -4264,54 +4332,36 @@ var iconMap = {
4264
4332
  },
4265
4333
  };
4266
4334
 
4335
+ var doNotForwardProps$s = ["sdsIcon", "sdsSize", "iconColor"];
4267
4336
  /**
4268
4337
  * @see https://mui.com/material-ui/icons/#svgicon
4269
4338
  */
4270
- function iconSize(props) {
4271
- var _a, _b;
4272
- var sdsSize = props.sdsSize;
4273
- var iconSizes = getIconSizes(props);
4274
- return css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n "], ["\n height: ", "px;\n width: ", "px;\n "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
4275
- }
4276
- function buttonStyle() {
4277
- return css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
4278
- }
4279
- function staticStyle(props) {
4280
- var _a;
4281
- var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
4282
- var colors = getColors(props);
4283
- return css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade]);
4284
- }
4285
- function interactive(props) {
4286
- var _a, _b, _c, _d;
4287
- var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
4288
- var colors = getColors(props);
4289
- var semanticColors = getSemanticColors(props);
4290
- return css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
4291
- }
4292
- var doNotForwardProps$s = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
4293
4339
  var StyledSvgIcon = styled(SvgIcon, {
4294
4340
  shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
4295
- })(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4296
- var sdsType = props.sdsType;
4297
- return css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
4341
+ })(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4342
+ var _a, _b, _c;
4343
+ var mode = getMode(props);
4344
+ var _d = props.iconColor, iconColor = _d === void 0 ? "blue" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
4345
+ var iconSizes = getIconSizes(props);
4346
+ var colors = getColors(props);
4347
+ return css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
4298
4348
  });
4299
- var StyledIcon = styled("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
4300
- var templateObject_1$V, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
4349
+ var StyledIcon = styled("div")(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
4350
+ var templateObject_1$V, templateObject_2$A, templateObject_3$r;
4301
4351
 
4302
4352
  /**
4303
4353
  * @see https://mui.com/material-ui/icons/#icons
4304
4354
  */
4305
4355
  var Icon = forwardRef(function Icon(_a, ref) {
4306
4356
  var _b;
4307
- var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize, sdsType = _a.sdsType;
4357
+ var className = _a.className, color = _a.color, shade = _a.shade, sdsIcon = _a.sdsIcon, sdsSize = _a.sdsSize;
4308
4358
  var icon = (_b = iconMap[sdsIcon]) !== null && _b !== void 0 ? _b : {};
4309
4359
  var largeIcon = icon.largeIcon, smallIcon = icon.smallIcon;
4310
4360
  if ((sdsSize === "xs" || sdsSize === "s") && smallIcon) {
4311
- return (jsx(StyledIcon, { ref: ref, children: jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
4361
+ return (jsx(StyledIcon, { ref: ref, children: jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 16 16", width: 16, height: 16, component: smallIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
4312
4362
  }
4313
4363
  if ((sdsSize === "l" || sdsSize === "xl") && largeIcon) {
4314
- return (jsx(StyledIcon, { ref: ref, children: jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsType: sdsType, sdsIcon: sdsIcon }) }));
4364
+ return (jsx(StyledIcon, { ref: ref, children: jsx(StyledSvgIcon, { iconColor: color, shade: shade, className: className, fillcontrast: "white", viewBox: "0 0 24 24", width: 24, height: 24, component: largeIcon, sdsSize: sdsSize, sdsIcon: sdsIcon }) }));
4315
4365
  }
4316
4366
  // eslint-disable-next-line no-console
4317
4367
  console.error("Error: Icon ".concat(sdsIcon, " not found for size ").concat(sdsSize, ". This is a @czi-sds/components problem."));
@@ -4320,7 +4370,7 @@ var Icon = forwardRef(function Icon(_a, ref) {
4320
4370
 
4321
4371
  var AccordionHeader = function (props) {
4322
4372
  var children = props.children, id = props.id, subtitle = props.subtitle;
4323
- return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
4373
+ return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
4324
4374
  };
4325
4375
 
4326
4376
  var sdsPropNames$3 = ["useDivider", "togglePosition"];
@@ -4328,15 +4378,14 @@ var StyledAccordion = styled(Accordion$1, {
4328
4378
  shouldForwardProp: function (prop) {
4329
4379
  return !sdsPropNames$3.includes(prop.toString());
4330
4380
  },
4331
- })(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4332
- var _a, _b, _c;
4381
+ })(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4382
+ var _a, _b;
4333
4383
  var useDivider = props.useDivider, togglePosition = props.togglePosition;
4334
4384
  var shadows = getShadows(props);
4335
4385
  var typography = getTypography(props);
4336
4386
  var borders = getBorders(props);
4337
4387
  var spaces = getSpaces(props);
4338
- var semanticColors = getSemanticColors(props);
4339
- return css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), accordionClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceBackground, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_b = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _b === void 0 ? void 0 : _b.body, useDivider ? (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.divider : "none", accordionSummaryClasses.root, focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4388
+ return css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", accordionSummaryClasses.root, focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
4340
4389
  });
4341
4390
  var leftPosition = function (props) {
4342
4391
  var _a, _b, _c;
@@ -4346,7 +4395,7 @@ var leftPosition = function (props) {
4346
4395
  ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
4347
4396
  ((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
4348
4397
  };
4349
- var templateObject_1$U, templateObject_2$y, templateObject_3$q;
4398
+ var templateObject_1$U, templateObject_2$z, templateObject_3$q;
4350
4399
 
4351
4400
  /**
4352
4401
  * @see https://mui.com/material-ui/react-accordion/
@@ -4429,7 +4478,7 @@ var SDSWarningTypes;
4429
4478
  SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
4430
4479
  SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
4431
4480
  SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
4432
- SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
4481
+ SDSWarningTypes["TooltipInvertStyle"] = "tooltipInvertStyle";
4433
4482
  })(SDSWarningTypes || (SDSWarningTypes = {}));
4434
4483
  var SDS_WARNINGS = (_a = {},
4435
4484
  _a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
@@ -4464,9 +4513,9 @@ var SDS_WARNINGS = (_a = {},
4464
4513
  hasWarned: false,
4465
4514
  message: "Warning: The 'wide' width is only available for light tooltips!",
4466
4515
  },
4467
- _a[SDSWarningTypes.TooltipInverted] = {
4516
+ _a[SDSWarningTypes.TooltipInvertStyle] = {
4468
4517
  hasWarned: false,
4469
- message: "Warning: Tooltips using the inverted prop will be deprecated. Please use sdsStyle: 'dark' | 'light' instead!",
4518
+ message: "Warning: Tooltips using the inverted or sdsStyle prop will be deprecated. Please use hasInvertedStyle instead!",
4470
4519
  },
4471
4520
  _a);
4472
4521
  var showWarningIfFirstOccurence = function (warningType) {
@@ -4508,10 +4557,10 @@ var ButtonStyles = function (props) {
4508
4557
  : "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
4509
4558
  var contentColor = variant === "outlined"
4510
4559
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction
4511
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4560
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4512
4561
  var ornamentColor = variant === "outlined"
4513
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.icon
4514
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4562
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornament
4563
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4515
4564
  var backgroundColor = variant === "outlined"
4516
4565
  ? "transparent"
4517
4566
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.fillPrimary;
@@ -4519,11 +4568,14 @@ var ButtonStyles = function (props) {
4519
4568
  var disabledBorder = variant === "outlined"
4520
4569
  ? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
4521
4570
  : "none";
4522
- return css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.iconPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.iconDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4571
+ var boxshadow = variant === "outlined"
4572
+ ? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
4573
+ : "none";
4574
+ return css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.ornamentPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.ornamentDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
4523
4575
  };
4524
4576
  var Rounded = function (props) {
4525
4577
  var corners = getCorners(props);
4526
- return css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
4578
+ return css(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
4527
4579
  };
4528
4580
  var DestructiveButton = function (props) {
4529
4581
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
@@ -4532,14 +4584,17 @@ var DestructiveButton = function (props) {
4532
4584
  var semanticColors = getSemanticColors(props);
4533
4585
  var contentColor = variant === "outlined"
4534
4586
  ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _a === void 0 ? void 0 : _a.text
4535
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse;
4587
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill;
4536
4588
  var ornamentColor = variant === "outlined"
4537
4589
  ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.ornament
4538
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryInverse;
4590
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentOnFill;
4539
4591
  var backgroundColor = variant === "outlined"
4540
4592
  ? "transparent"
4541
4593
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
4542
- return css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.iconPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.iconPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.iconDisabled);
4594
+ var boxshadow = variant === "outlined"
4595
+ ? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
4596
+ : "none";
4597
+ return css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
4543
4598
  };
4544
4599
  var StyledButton$3 = styled(Button$1, {
4545
4600
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4549,22 +4604,22 @@ var StyledButton$3 = styled(Button$1, {
4549
4604
  });
4550
4605
  // Minimal Button Styles
4551
4606
  var Minimal = function (props) {
4552
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
4607
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4553
4608
  var isAllCaps = props.isAllCaps;
4554
4609
  var spaces = getSpaces(props);
4555
4610
  var iconSizes = getIconSizes(props);
4556
4611
  var semanticColors = getSemanticColors(props);
4557
- return css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4612
+ return css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, buttonClasses.startIcon, buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
4558
4613
  };
4559
4614
  var PrimaryMinimalButton = function (props) {
4560
- var _a;
4615
+ var _a, _b;
4561
4616
  var semanticColors = getSemanticColors(props);
4562
- return css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction);
4617
+ return css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
4563
4618
  };
4564
4619
  var SecondaryMinimalButton = function (props) {
4565
- var _a;
4620
+ var _a, _b;
4566
4621
  var semanticColors = getSemanticColors(props);
4567
- return css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary);
4622
+ return css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
4568
4623
  };
4569
4624
  var StyledMinimalButton = styled(Button$1, {
4570
4625
  shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
@@ -4581,27 +4636,27 @@ var StyledButtonLegacy = styled(Button$1, {
4581
4636
  var spaces = getSpaces(props);
4582
4637
  return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
4583
4638
  });
4584
- var templateObject_1$S, templateObject_2$x, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
4639
+ var templateObject_1$S, templateObject_2$y, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
4585
4640
 
4586
4641
  var isDisabled$1 = function (props) {
4587
4642
  var _a, _b;
4588
4643
  var semanticColors = getSemanticColors(props);
4589
- return css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled);
4644
+ return css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
4590
4645
  };
4591
4646
  var primary$2 = function (props) {
4592
4647
  var _a, _b, _c, _d, _e, _f, _g, _h;
4593
4648
  var semanticColors = getSemanticColors(props);
4594
- return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.textActionPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
4649
+ return css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
4595
4650
  };
4596
4651
  var secondary$2 = function (props) {
4597
4652
  var _a, _b, _c, _d, _e, _f, _g, _h;
4598
4653
  var semanticColors = getSemanticColors(props);
4599
- return css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
4654
+ return css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
4600
4655
  };
4601
4656
  var tertiary = function (props) {
4602
4657
  var _a, _b, _c, _d, _e, _f;
4603
4658
  var semanticColors = getSemanticColors(props);
4604
- return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryPressed);
4659
+ return css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
4605
4660
  };
4606
4661
  var small$1 = function (props) {
4607
4662
  var sdsType = props.sdsType;
@@ -4641,7 +4696,7 @@ var StyledButtonIcon = styled(IconButton, {
4641
4696
  var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
4642
4697
  return css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
4643
4698
  });
4644
- var templateObject_1$R, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
4699
+ var templateObject_1$R, templateObject_2$x, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
4645
4700
 
4646
4701
  var ButtonIconSizeToSdsIconSize = {
4647
4702
  large: "xl",
@@ -4674,7 +4729,7 @@ var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
4674
4729
  return icon;
4675
4730
  }
4676
4731
  else {
4677
- return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4732
+ return (jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
4678
4733
  }
4679
4734
  }
4680
4735
  };
@@ -4748,12 +4803,12 @@ var applyIntentColor$2 = function (props, intent) {
4748
4803
  var _a, _b, _c, _d;
4749
4804
  var semanticColors = getSemanticColors(props);
4750
4805
  var borders = getBorders(props);
4751
- return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
4806
+ return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
4752
4807
  };
4753
4808
  var disabledStyled$2 = function (props) {
4754
- var _a, _b, _c, _d;
4809
+ var _a, _b, _c, _d, _e;
4755
4810
  var semanticColors = getSemanticColors(props);
4756
- return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
4811
+ return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
4757
4812
  };
4758
4813
  var StyledLabel$2 = styled("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
4759
4814
  var spaces = getSpaces(props);
@@ -4764,15 +4819,15 @@ var StyledSearchBase = styled(TextField, {
4764
4819
  return !sdsPropNames$2.includes(prop.toString());
4765
4820
  },
4766
4821
  })(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4767
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
4822
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
4768
4823
  var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
4769
4824
  var spaces = getSpaces(props);
4770
4825
  var iconSizes = getIconSizes(props);
4771
4826
  var semanticColors = getSemanticColors(props);
4772
- return css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, outlinedInputClasses.root, buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
4827
+ return css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.border, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillPressed, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, outlinedInputClasses.root, buttonBaseClasses.root, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, outlinedInputClasses.notchedOutline, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.ornamentFocus, outlinedInputClasses.root, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
4773
4828
  });
4774
4829
  var StyledInputAdornment = styled(InputAdornment)(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
4775
- var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4830
+ var templateObject_1$Q, templateObject_2$w, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
4776
4831
 
4777
4832
  var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4778
4833
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -4780,9 +4835,9 @@ var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$P || (templateObject_
4780
4835
  var fontWeights = getFontWeights(props);
4781
4836
  var spaces = getSpaces(props);
4782
4837
  var semanticColors = getSemanticColors(props);
4783
- return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4838
+ return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.ornamentPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.ornamentPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
4784
4839
  });
4785
- var ContentWrapper = styled("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
4840
+ var ContentWrapper = styled("span")(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
4786
4841
  var disabledStyles = function (props) {
4787
4842
  var _a;
4788
4843
  var disabled = props.disabled;
@@ -4802,7 +4857,7 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$
4802
4857
  var spaces = getSpaces(props);
4803
4858
  var iconSizes = getIconSizes(props);
4804
4859
  var semanticColors = getSemanticColors(props);
4805
- return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
4860
+ return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n }\n ");
4806
4861
  });
4807
4862
  var ColumnWrapper = styled("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
4808
4863
  var _a;
@@ -4823,8 +4878,8 @@ var StyledCheck = styled(Check, {
4823
4878
  var iconSizes = getIconSizes(props);
4824
4879
  var semanticColors = getSemanticColors(props);
4825
4880
  var selectedColor = disabled
4826
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4827
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4881
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4882
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4828
4883
  return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
4829
4884
  });
4830
4885
  var StyledMinus = styled(Remove, {
@@ -4835,11 +4890,11 @@ var StyledMinus = styled(Remove, {
4835
4890
  var semanticColors = getSemanticColors(props);
4836
4891
  var iconSizes = getIconSizes(props);
4837
4892
  var selectedColor = disabled
4838
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled
4839
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
4893
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled
4894
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentSelected;
4840
4895
  return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
4841
4896
  });
4842
- var templateObject_1$P, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
4897
+ var templateObject_1$P, templateObject_2$v, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
4843
4898
 
4844
4899
  /**
4845
4900
  * @see https://mui.com/material-ui/react-menu/
@@ -4873,7 +4928,7 @@ var MenuItem = forwardRef(function MenuItem(props, ref) {
4873
4928
  return (jsx(StyledMenuItemIcon, { disabled: disabled, children: icon }));
4874
4929
  }
4875
4930
  else {
4876
- return (jsx(StyledMenuItemIcon, { disabled: disabled, children: jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsType: "static", sdsIcon: icon, sdsSize: "s" })) }));
4931
+ return (jsx(StyledMenuItemIcon, { disabled: disabled, children: jsx(Icon, __assign({ color: "blue" }, sdsIconProps, { sdsIcon: icon, sdsSize: "s" })) }));
4877
4932
  }
4878
4933
  }
4879
4934
  };
@@ -4991,12 +5046,8 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
4991
5046
  return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
4992
5047
  // passed to mui Input
4993
5048
  InputProps: {
4994
- endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4995
- sdsType: "iconButton",
4996
- }, icon: "XMarkCircle" }) })) : null,
4997
- startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
4998
- sdsType: "interactive",
4999
- }, icon: "Search" }) })),
5049
+ endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
5050
+ startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
5000
5051
  }, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
5001
5052
  /**
5002
5053
  * (masoudmanson): This prevents the browser's default auto completion
@@ -5021,11 +5072,11 @@ var StyledAutocompleteBase = styled(Autocomplete$1, {
5021
5072
  var spaces = getSpaces(props);
5022
5073
  var borders = getBorders(props);
5023
5074
  var semanticColors = getSemanticColors(props);
5024
- return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5075
+ return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surface, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n & > li:last-child .").concat(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surface, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5025
5076
  });
5026
5077
  var InputBaseWrapper$1 = styled("div", {
5027
5078
  shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
5028
- })(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5079
+ })(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5029
5080
  var search = props.search;
5030
5081
  if (!search) {
5031
5082
  // (thuang): We cannot use `display: none;` here, since
@@ -5047,7 +5098,7 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$i || (templateObject_4$i = __
5047
5098
  var shadows = getShadows(props);
5048
5099
  var borders = getBorders(props);
5049
5100
  var semanticColors = getSemanticColors(props);
5050
- return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
5101
+ return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
5051
5102
  });
5052
5103
  var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
5053
5104
  var _a;
@@ -5055,7 +5106,7 @@ var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_
5055
5106
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n white-space: pre-wrap;\n ");
5056
5107
  });
5057
5108
  var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
5058
- var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
5109
+ var templateObject_1$O, templateObject_2$u, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
5059
5110
 
5060
5111
  var AutocompleteBase = function (props) {
5061
5112
  var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled, _r = props.intent, intent = _r === void 0 ? "default" : _r;
@@ -5126,9 +5177,7 @@ var AutocompleteBase = function (props) {
5126
5177
  , {
5127
5178
  // (masoudmanson): This is to ensure that the clear button won't be focusable
5128
5179
  // when the search prop is set to false.
5129
- tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5130
- sdsType: "iconButton",
5131
- }, icon: "XMarkCircle" })) })),
5180
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle" })) })),
5132
5181
  /**
5133
5182
  * (thuang): Works with css caret-color: "transparent" to hide
5134
5183
  * mobile keyboard
@@ -5136,9 +5185,7 @@ var AutocompleteBase = function (props) {
5136
5185
  inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "Search Button",
5137
5186
  // (masoudmanson): This is to ensure that the search button won't be focusable
5138
5187
  // when the search prop is set to false.
5139
- tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5140
- sdsType: "interactive",
5141
- }, icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
5188
+ tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
5142
5189
  }
5143
5190
  function defaultOnBlur(event) {
5144
5191
  var _a;
@@ -5216,7 +5263,7 @@ var AutocompleteBase = function (props) {
5216
5263
  else {
5217
5264
  MenuItemContent = (jsxs(StyledMenuItemText, { children: [menuItemLabel, details && (jsx(StyledMenuItemDetails, { className: "menuItem-details", children: details }))] }));
5218
5265
  }
5219
- return (jsx(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { children: MenuItemContent })));
5266
+ return (createElement(MenuItem, __assign({ column: count, disabled: optionProps["aria-disabled"] === true, icon: icon, sdsIconProps: sdsIconProps, isMultiSelect: multiple, selected: selected }, optionProps, { key: option.name }), MenuItemContent));
5220
5267
  }
5221
5268
  };
5222
5269
 
@@ -5227,7 +5274,7 @@ var StyledColumn = styled("div")(templateObject_1$N || (templateObject_1$N = __m
5227
5274
  var borders = getBorders(props);
5228
5275
  return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
5229
5276
  });
5230
- var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
5277
+ var StyledColumnTitle = styled("p")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
5231
5278
  var _a;
5232
5279
  var spaces = getSpaces(props);
5233
5280
  var semanticColors = getSemanticColors(props);
@@ -5238,9 +5285,9 @@ var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k
5238
5285
  var spaces = getSpaces(props);
5239
5286
  var iconSizes = getIconSizes(props);
5240
5287
  var semanticColors = getSemanticColors(props);
5241
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
5288
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
5242
5289
  });
5243
- var templateObject_1$N, templateObject_2$s, templateObject_3$k;
5290
+ var templateObject_1$N, templateObject_2$t, templateObject_3$k;
5244
5291
 
5245
5292
  var AutocompleteGroup = function (props) {
5246
5293
  var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
@@ -5302,15 +5349,15 @@ var StyledPopper$2 = styled(Popper, {
5302
5349
  var spaces = getSpaces(props);
5303
5350
  var borders = getBorders(props);
5304
5351
  var semanticColors = getSemanticColors(props);
5305
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5352
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
5306
5353
  });
5307
5354
  var StyledPaper$2 = styled(Paper, {
5308
5355
  shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
5309
- })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5356
+ })(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5310
5357
  var _a;
5311
5358
  var shadows = getShadows(props);
5312
5359
  var semanticColors = getSemanticColors(props);
5313
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
5360
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
5314
5361
  });
5315
5362
  var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5316
5363
  var StyledAutocompleteInput = styled(InputSearch, {
@@ -5322,7 +5369,7 @@ var StyledAutocompleteInput = styled(InputSearch, {
5322
5369
  var search = _a.search;
5323
5370
  return (search ? "auto" : "transparent");
5324
5371
  });
5325
- var templateObject_1$M, templateObject_2$r, templateObject_3$j, templateObject_4$h;
5372
+ var templateObject_1$M, templateObject_2$s, templateObject_3$j, templateObject_4$h;
5326
5373
 
5327
5374
  var AutocompleteMultiColumn = function (props) {
5328
5375
  var _a;
@@ -5360,16 +5407,12 @@ var AutocompleteMultiColumn = function (props) {
5360
5407
  });
5361
5408
  onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
5362
5409
  };
5363
- return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5364
- sdsType: "iconButton",
5365
- }, icon: "XMarkCircle", onClick: clearInput })) })),
5410
+ return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "XMarkCircle", onClick: clearInput })) })),
5366
5411
  /**
5367
5412
  * (thuang): Works with css caret-color: "transparent" to hide
5368
5413
  * mobile keyboard
5369
5414
  */
5370
- inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
5371
- sdsType: "interactive",
5372
- }, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
5415
+ inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
5373
5416
  {
5374
5417
  name: "offset",
5375
5418
  options: {
@@ -5514,13 +5557,13 @@ var IconWrapper$1 = styled("div", {
5514
5557
  shouldForwardProp: function (prop) {
5515
5558
  return !doNotForwardPropsIconWrapper.includes(prop);
5516
5559
  },
5517
- })(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5560
+ })(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5518
5561
  var _a, _b;
5519
5562
  var bannerType = props.bannerType;
5520
5563
  var iconSizes = getIconSizes(props);
5521
5564
  var spaces = getSpaces(props);
5522
5565
  var semanticColors = getSemanticColors(props);
5523
- return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n svg {\n fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n }\n ");
5566
+ return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n svg {\n fill: ").concat(bannerType === "primary" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.ornament, ";\n }\n ");
5524
5567
  });
5525
5568
  var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
5526
5569
  var StyledButton$2 = styled(Button, {
@@ -5531,20 +5574,20 @@ var StyledButton$2 = styled(Button, {
5531
5574
  var _a, _b;
5532
5575
  var bannerType = props.bannerType;
5533
5576
  var semanticColors = getSemanticColors(props);
5534
- if (bannerType !== "primary")
5535
- return "";
5536
- return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, ";\n }\n\n svg:hover {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverseHover, ";\n }\n ");
5577
+ if (bannerType === "primary")
5578
+ return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill, ";\n opacity: .65;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
5579
+ return "\n svg {\n fill: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary, ";\n opacity: .55;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
5537
5580
  });
5538
5581
  styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
5539
5582
  var primary$1 = function (props) {
5540
5583
  var _a, _b;
5541
5584
  var semanticColors = getSemanticColors(props);
5542
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n ");
5585
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill, ";\n ");
5543
5586
  };
5544
5587
  var secondary$1 = function (props) {
5545
5588
  var _a, _b;
5546
5589
  var semanticColors = getSemanticColors(props);
5547
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
5590
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
5548
5591
  };
5549
5592
  var doNotForwardProps$n = ["sdsType", "textChild"];
5550
5593
  var StyledBanner = styled("div", {
@@ -5554,7 +5597,7 @@ var StyledBanner = styled("div", {
5554
5597
  var spaces = getSpaces(props);
5555
5598
  return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
5556
5599
  });
5557
- var templateObject_1$L, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5600
+ var templateObject_1$L, templateObject_2$r, templateObject_3$i, templateObject_4$g, templateObject_5$c;
5558
5601
 
5559
5602
  var Banner = forwardRef(function Banner(props, ref) {
5560
5603
  var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
@@ -5575,11 +5618,11 @@ var Banner = forwardRef(function Banner(props, ref) {
5575
5618
  return icon;
5576
5619
  }
5577
5620
  else {
5578
- return (jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5621
+ return jsx(Icon, __assign({ sdsIcon: icon, sdsSize: "l" }, sdsIconProps));
5579
5622
  }
5580
5623
  }
5581
5624
  else {
5582
- return (jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
5625
+ return jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l" }, sdsIconProps));
5583
5626
  }
5584
5627
  };
5585
5628
  return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { bannerType: sdsType, children: iconItem() }), children] }), dismissible && (jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
@@ -5602,7 +5645,7 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
5602
5645
  return icon;
5603
5646
  }
5604
5647
  else {
5605
- return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5648
+ return (jsx(Icon, __assign({}, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
5606
5649
  }
5607
5650
  }
5608
5651
  };
@@ -5616,7 +5659,7 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
5616
5659
  }
5617
5660
  }
5618
5661
  else {
5619
- return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5662
+ return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
5620
5663
  }
5621
5664
  });
5622
5665
 
@@ -5634,7 +5677,7 @@ var StyledButtonToggle = styled(ButtonIcon, {
5634
5677
  var _a;
5635
5678
  var sdsStage = props.sdsStage;
5636
5679
  var semanticColors = getSemanticColors(props);
5637
- return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover : "transparent", ";\n ");
5680
+ return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen : "transparent", ";\n ");
5638
5681
  });
5639
5682
  var templateObject_1$K;
5640
5683
 
@@ -5667,7 +5710,7 @@ var StyledCallout = styled(Alert$2, {
5667
5710
  var typography = getTypography(props);
5668
5711
  var semanticColors = getSemanticColors(props);
5669
5712
  var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
5670
- var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
5713
+ var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
5671
5714
  // when a title is present Mui's default styling has vertical margin,
5672
5715
  // but for an expandable callout that is collapsed, we do not want
5673
5716
  // any bottom margin
@@ -5712,17 +5755,17 @@ var Callout = function (_a) {
5712
5755
  return icon;
5713
5756
  }
5714
5757
  else {
5715
- return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
5758
+ return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
5716
5759
  }
5717
5760
  }
5718
5761
  else {
5719
5762
  switch (intent) {
5720
5763
  case "positive":
5721
- return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
5764
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
5722
5765
  case "info":
5723
- return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
5766
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
5724
5767
  default:
5725
- return (jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
5768
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
5726
5769
  }
5727
5770
  }
5728
5771
  };
@@ -5747,7 +5790,7 @@ var Callout = function (_a) {
5747
5790
  return (jsx(Fragment, { children: jsx(Grow, { in: !hide, children: jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
5748
5791
  };
5749
5792
 
5750
- var StyledCalloutTitle = styled(AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
5793
+ var StyledCalloutTitle = styled(AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodySemiboldXs, function (props) {
5751
5794
  var spaces = getSpaces(props);
5752
5795
  return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5753
5796
  });
@@ -5764,13 +5807,13 @@ var dark = function (props) {
5764
5807
  var _a, _b;
5765
5808
  var spaces = getSpaces(props);
5766
5809
  var semanticColors = getSemanticColors(props);
5767
- return css$1(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5810
+ return css$1(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5768
5811
  };
5769
5812
  var light = function (props) {
5770
5813
  var _a, _b;
5771
5814
  var spaces = getSpaces(props);
5772
5815
  var semanticColors = getSemanticColors(props);
5773
- return css$1(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5816
+ return css$1(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
5774
5817
  };
5775
5818
  var wide = function () {
5776
5819
  return css$1(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
@@ -5780,29 +5823,32 @@ var tableStyles = function (props) {
5780
5823
  return css$1(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
5781
5824
  };
5782
5825
  var Subtitle$1 = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
5783
- var _a;
5826
+ var _a, _b;
5827
+ var hasInvertedStyle = props.hasInvertedStyle;
5784
5828
  var semanticColors = getSemanticColors(props);
5785
- return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
5829
+ return "\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
5786
5830
  });
5787
5831
  var tooltipCss = function (props) {
5788
- var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5832
+ var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
5789
5833
  var shadows = getShadows(props);
5790
- return css$1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
5834
+ return css$1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted || hasInvertedStyle
5835
+ ? dark(props)
5836
+ : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
5791
5837
  };
5792
5838
  var arrowCss = function (props) {
5793
5839
  var _a, _b;
5794
- var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5840
+ var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
5795
5841
  var semanticColors = getSemanticColors(props);
5796
- return css$1(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, inverted || sdsStyle === "dark"
5797
- ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
5798
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
5842
+ return css$1(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
5843
+ ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
5844
+ : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
5799
5845
  };
5800
5846
  /*
5801
5847
  * (masoudmanson): !important is needed to override arrow's
5802
5848
  * default placement which is calculated by javascript
5803
5849
  */
5804
5850
  var StyledPopper$1 = styled(Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
5805
- var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
5851
+ var templateObject_1$H, templateObject_2$q, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
5806
5852
 
5807
5853
  /**
5808
5854
  * @see https://mui.com/material-ui/react-tooltip/
@@ -5812,24 +5858,20 @@ var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4
5812
5858
  * https://mui.com/components/tooltips/#disabled-elements
5813
5859
  */
5814
5860
  var Tooltip = forwardRef(function Tooltip(props, ref) {
5815
- var arrowOffset = props.arrowOffset, classes = props.classes, inverted = props.inverted, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "light" : _a, subtitle = props.subtitle, title = props.title, _b = props.width, width = _b === void 0 ? "default" : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper$1 : _c, rest = __rest(props, ["arrowOffset", "classes", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
5861
+ var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
5816
5862
  var children = rest.children;
5817
- if (inverted) {
5818
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipInverted);
5863
+ if (inverted || sdsStyle) {
5864
+ showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
5819
5865
  }
5820
- if (width === "wide" && sdsStyle === "dark") {
5866
+ if (width === "wide" && (sdsStyle === "dark" || hasInvertedStyle)) {
5821
5867
  showWarningIfFirstOccurence(SDSWarningTypes.TooltipWidth);
5822
5868
  }
5823
- if (subtitle && sdsStyle === "light") {
5824
- showWarningIfFirstOccurence(SDSWarningTypes.TooltipSubtitle);
5825
- }
5826
5869
  var theme = useTheme();
5827
5870
  var extraProps = {
5828
5871
  /* stylelint-disable property-no-unknown -- false positive */
5829
5872
  arrowOffset: arrowOffset,
5830
5873
  classes: classes,
5831
- inverted: inverted,
5832
- sdsStyle: sdsStyle,
5874
+ hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
5833
5875
  theme: theme,
5834
5876
  width: width,
5835
5877
  /* stylelint-enable property-no-unknown -- false positive */
@@ -5848,8 +5890,8 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
5848
5890
  // a tooltip. this matches with the native MUI behavior.
5849
5891
  if (!title && !subtitle)
5850
5892
  return jsx(Fragment, { children: children });
5851
- var content = (jsxs(Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsx(Subtitle$1, { children: subtitle })] }));
5852
- var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
5893
+ var content = (jsxs(Fragment, { children: [title, subtitle && (jsx(Subtitle$1, { hasInvertedStyle: hasInvertedStyle, children: subtitle }))] }));
5894
+ var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
5853
5895
  return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
5854
5896
  // (masoudmanson): Setting tabIndex to 0 makes the tooltip component
5855
5897
  // focusable and allows keyboard navigation.
@@ -5859,6 +5901,21 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
5859
5901
  // the arrow is always rendered.
5860
5902
  arrow: true }, rest)));
5861
5903
  });
5904
+ /**
5905
+ * (masoudmanson): Temporary function to handle the inversion of the tooltip
5906
+ * based on the sdsStyle, invert and hasInvertedStyle props.
5907
+ * Once the sdsStyle and invert props are completely removed,
5908
+ * this function will be removed as well.
5909
+ */
5910
+ function invertStyleValue(inverted, sdsStyle, hasInvertedStyle) {
5911
+ return hasInvertedStyle !== undefined
5912
+ ? hasInvertedStyle
5913
+ : sdsStyle === "dark"
5914
+ ? true
5915
+ : sdsStyle === "light"
5916
+ ? false
5917
+ : inverted;
5918
+ }
5862
5919
  function mergeClass$1(_a) {
5863
5920
  var props = _a.props, className = _a.className, key = _a.key;
5864
5921
  var classes = props.classes;
@@ -5908,7 +5965,7 @@ var ShouldWrap = function (lineCount) {
5908
5965
  var ShouldTruncate = function () {
5909
5966
  return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
5910
5967
  };
5911
- var StyledCellContent = styled("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5968
+ var StyledCellContent = styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5912
5969
  var StyledCellContentWrapper = styled("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
5913
5970
  var StyledCellIconWrapper = styled("div", {
5914
5971
  shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
@@ -5959,7 +6016,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
5959
6016
  var spaces = getSpaces(props);
5960
6017
  return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
5961
6018
  });
5962
- var templateObject_1$G, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
6019
+ var templateObject_1$G, templateObject_2$p, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
5963
6020
 
5964
6021
  var CellBasicContent = function (props) {
5965
6022
  var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
@@ -6004,20 +6061,20 @@ var doNotForwardProps$i = [
6004
6061
  var StyledSortingIcon = styled(Icon, {
6005
6062
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
6006
6063
  })(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6007
- var _a, _b;
6008
- var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
6064
+ var _a;
6065
+ var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
6009
6066
  var spaces = getSpaces(props);
6010
6067
  var semanticColors = getSemanticColors(props);
6011
- return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n opacity: ").concat(hideSortIcon ? (active ? 1 : 0) : 1, ";\n outline: none !important;\n ");
6068
+ return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament : "transparent", ";\n display: ").concat(hideSortIcon ? (active ? "block" : "none") : "block", ";\n outline: none !important;\n ");
6012
6069
  });
6013
6070
  var StyledTableHeader$1 = styled("th", {
6014
6071
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
6015
- })(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6072
+ })(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
6016
6073
  var _a, _b, _c, _d, _e, _f, _g, _h;
6017
6074
  var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
6018
6075
  var spaces = getSpaces(props);
6019
6076
  var semanticColors = getSemanticColors(props);
6020
- return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, ";\n }\n }\n ");
6077
+ return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, ";\n }\n }\n ");
6021
6078
  });
6022
6079
  var StyledCellHeaderContainer = styled("div", {
6023
6080
  shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
@@ -6025,14 +6082,14 @@ var StyledCellHeaderContainer = styled("div", {
6025
6082
  var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
6026
6083
  return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
6027
6084
  });
6028
- var templateObject_1$E, templateObject_2$n, templateObject_3$f;
6085
+ var templateObject_1$E, templateObject_2$o, templateObject_3$f;
6029
6086
 
6030
6087
  var CellHeaderContent = function (props) {
6031
6088
  var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
6032
6089
  var sdsIconName = direction === "asc" ? "ChevronUp" : "ChevronDown";
6033
6090
  var sortIcon = (jsx(StyledSortingIcon, { "aria-label": direction === "asc"
6034
6091
  ? "Change sort direction from ascending to descending"
6035
- : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsType: "static", sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6092
+ : "Change sort direction from descending to ascending", sdsIcon: sdsIconName, sdsSize: "xs", active: active, hideSortIcon: hideSortIcon }));
6036
6093
  return (jsxs(StyledCellHeaderContainer, { horizontalAlign: horizontalAlign, children: [jsx("span", { children: children }), (!hideSortIcon || active) && sortIcon] }));
6037
6094
  };
6038
6095
  var CellHeader = forwardRef(function (props, ref) {
@@ -6050,7 +6107,7 @@ var small = function (props) {
6050
6107
  var medium = function (props) {
6051
6108
  var spaces = getSpaces(props);
6052
6109
  var colors = getColors(props);
6053
- return css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
6110
+ return css(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
6054
6111
  };
6055
6112
  var rounded$2 = function (props) {
6056
6113
  var corners = getCorners(props);
@@ -6087,27 +6144,27 @@ function createStatusCss(props, status) {
6087
6144
  var statusToColors = {
6088
6145
  beta: {
6089
6146
  dark: (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _a === void 0 ? void 0 : _a.text,
6090
- light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfacePrimary,
6147
+ light: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.beta) === null || _b === void 0 ? void 0 : _b.surfaceSecondary,
6091
6148
  },
6092
6149
  error: {
6093
6150
  dark: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _c === void 0 ? void 0 : _c.text,
6094
- light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfacePrimary,
6151
+ light: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _d === void 0 ? void 0 : _d.surfaceSecondary,
6095
6152
  },
6096
6153
  info: {
6097
6154
  dark: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _e === void 0 ? void 0 : _e.text,
6098
- light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfacePrimary,
6155
+ light: (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _f === void 0 ? void 0 : _f.surfaceSecondary,
6099
6156
  },
6100
6157
  pending: {
6101
6158
  dark: (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _g === void 0 ? void 0 : _g.text,
6102
- light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfacePrimary,
6159
+ light: (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral) === null || _h === void 0 ? void 0 : _h.surfaceSecondary,
6103
6160
  },
6104
6161
  success: {
6105
6162
  dark: (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _j === void 0 ? void 0 : _j.text,
6106
- light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfacePrimary,
6163
+ light: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.positive) === null || _k === void 0 ? void 0 : _k.surfaceSecondary,
6107
6164
  },
6108
6165
  warning: {
6109
6166
  dark: colors === null || colors === void 0 ? void 0 : colors.yellow[700],
6110
- light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfacePrimary,
6167
+ light: (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _l === void 0 ? void 0 : _l.surfaceSecondary,
6111
6168
  },
6112
6169
  };
6113
6170
  var statusColors = statusToColors[status];
@@ -6128,7 +6185,7 @@ var StyledChip = styled(Chip$1, {
6128
6185
  var size = props.size, status = props.status, isRounded = props.isRounded;
6129
6186
  return css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
6130
6187
  });
6131
- var templateObject_1$D, templateObject_2$m, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
6188
+ var templateObject_1$D, templateObject_2$n, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
6132
6189
 
6133
6190
  /**
6134
6191
  * @see https://mui.com/material-ui/react-chip/
@@ -6167,7 +6224,7 @@ var StyledHeaderTitle = styled("div", {
6167
6224
  var semanticColors = getSemanticColors(props);
6168
6225
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
6169
6226
  });
6170
- var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), autocompleteClasses.popper, autocompleteClasses.paper);
6227
+ var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), autocompleteClasses.popper, autocompleteClasses.paper);
6171
6228
  var StyledPopper = styled(Popper, {
6172
6229
  shouldForwardProp: function (prop) {
6173
6230
  return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
@@ -6178,7 +6235,7 @@ var StyledPopper = styled(Popper, {
6178
6235
  var corners = getCorners(props);
6179
6236
  var shadows = getShadows(props);
6180
6237
  var semanticColors = getSemanticColors(props);
6181
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
6238
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
6182
6239
  });
6183
6240
  var StyledPaper$1 = styled(Paper, {
6184
6241
  shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
@@ -6188,14 +6245,14 @@ var StyledPaper$1 = styled(Paper, {
6188
6245
  var borders = getBorders(props);
6189
6246
  var shadows = getShadows(props);
6190
6247
  var semanticColors = getSemanticColors(props);
6191
- return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
6248
+ return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
6192
6249
  });
6193
6250
  var StyledDropdownMenuHeader = styled("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6194
6251
  var search = props.search;
6195
6252
  var spaces = getSpaces(props);
6196
6253
  return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
6197
6254
  });
6198
- var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
6255
+ var templateObject_1$C, templateObject_2$m, templateObject_3$d, templateObject_4$c, templateObject_5$8;
6199
6256
 
6200
6257
  // (masoudmanson): Represents the minimum width defined by design specifications
6201
6258
  // for the dropdownMenu's popper component
@@ -6252,7 +6309,7 @@ var intentToColor$2 = {
6252
6309
  var labelFontBodyS = fontBody("s", "regular");
6253
6310
  var labelFontBodyXs = fontBody("xs", "regular");
6254
6311
  var inputDropdownStyles = function (props) {
6255
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
6312
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
6256
6313
  var spaces = getSpaces(props);
6257
6314
  var borders = getBorders(props);
6258
6315
  var semanticColors = getSemanticColors(props);
@@ -6261,13 +6318,13 @@ var inputDropdownStyles = function (props) {
6261
6318
  * The top/bottom padding is set to 1px less than the actual value to account for the border.
6262
6319
  */
6263
6320
  var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
6264
- return css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, padding, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = borders === null || borders === void 0 ? void 0 : borders.base) === null || _l === void 0 ? void 0 : _l.pressed, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.iconPrimaryPressed);
6321
+ return css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n\n border: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: transparent;\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, padding, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.pressed, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
6265
6322
  };
6266
6323
  var minimal$1 = function (props) {
6267
6324
  var _a, _b, _c, _d, _e, _f, _g;
6268
6325
  var spaces = getSpaces(props);
6269
6326
  var semanticColors = getSemanticColors(props);
6270
- return css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
6327
+ return css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
6271
6328
  };
6272
6329
  var square$1 = function (props) {
6273
6330
  var corners = getCorners(props);
@@ -6278,11 +6335,11 @@ var rounded$1 = function (props) {
6278
6335
  return css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
6279
6336
  };
6280
6337
  var userInput = function (props) {
6281
- var _a, _b, _c, _d, _e, _f;
6338
+ var _a, _b, _c, _d;
6282
6339
  var sdsStyle = props.sdsStyle;
6283
6340
  var semanticColors = getSemanticColors(props);
6284
6341
  return css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
6285
- ? "\n \n background-color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, "47;\n border: none;\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n path {\n fill: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n ")
6342
+ ? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
6286
6343
  : "");
6287
6344
  };
6288
6345
  var isOpen = function (props) {
@@ -6291,15 +6348,15 @@ var isOpen = function (props) {
6291
6348
  var borders = getBorders(props);
6292
6349
  var semanticColors = getSemanticColors(props);
6293
6350
  var inputColor = intentToColor$2[intent];
6294
- return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
6351
+ return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n border: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
6295
6352
  ? "\n & > span, \n &:hover > span { \n color: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, "; \n }\n\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, "; \n ")
6296
6353
  : "", inputColor === "accent"
6297
- ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen
6354
+ ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentOpen
6298
6355
  : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
6299
6356
  ? borders === null || borders === void 0 ? void 0 : borders.none
6300
6357
  : (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
6301
- ? ((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover) + "47"
6302
- : "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.hover);
6358
+ ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillOpen
6359
+ : "transparent", (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondaryHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.borderHover);
6303
6360
  };
6304
6361
  var applyIntentColor$1 = function (props, intent) {
6305
6362
  var _a, _b, _c;
@@ -6309,7 +6366,7 @@ var applyIntentColor$1 = function (props, intent) {
6309
6366
  var isDisabled = function (props) {
6310
6367
  var _a, _b, _c, _d;
6311
6368
  var semanticColors = getSemanticColors(props);
6312
- return css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
6369
+ return css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled);
6313
6370
  };
6314
6371
  /**
6315
6372
  * (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
@@ -6358,7 +6415,7 @@ var StyledCounter = styled("span", {
6358
6415
  var corners = getCorners(props);
6359
6416
  var spaces = getSpaces(props);
6360
6417
  var semanticColors = getSemanticColors(props);
6361
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
6418
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
6362
6419
  });
6363
6420
  var MinimalDetails = styled("div", {
6364
6421
  shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
@@ -6386,7 +6443,7 @@ function labelStyle(props) {
6386
6443
  : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
6387
6444
  return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
6388
6445
  }
6389
- var templateObject_1$B, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
6446
+ var templateObject_1$B, templateObject_2$l, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
6390
6447
 
6391
6448
  /**
6392
6449
  * @see https://mui.com/material-ui/react-button/
@@ -6407,7 +6464,7 @@ var InputDropdown = function (props) {
6407
6464
  sdsType: sdsType,
6408
6465
  shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
6409
6466
  value: value,
6410
- }) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "interactive" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6467
+ }) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
6411
6468
  };
6412
6469
  function renderLabelText(props) {
6413
6470
  var sdsType = props.sdsType;
@@ -6453,14 +6510,14 @@ var tagSizeS = function (props) {
6453
6510
  var spaces = getSpaces(props);
6454
6511
  var iconSizes = getIconSizes(props);
6455
6512
  var semanticColors = getSemanticColors(props);
6456
- return css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6513
+ return css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6457
6514
  };
6458
6515
  var tagSizeL = function (props) {
6459
6516
  var _a;
6460
6517
  var spaces = getSpaces(props);
6461
6518
  var iconSizes = getIconSizes(props);
6462
6519
  var semanticColors = getSemanticColors(props);
6463
- return css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6520
+ return css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
6464
6521
  };
6465
6522
  var rounded = function (props) {
6466
6523
  var corners = getCorners(props);
@@ -6499,12 +6556,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6499
6556
  backgroundHover: colors.length >= 2
6500
6557
  ? darken(colors[1], 0.15)
6501
6558
  : semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent].fillHover,
6502
- iconColor: colors.length > 2
6503
- ? colors[2]
6504
- : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse,
6505
- label: colors.length
6506
- ? colors[0]
6507
- : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse,
6559
+ iconColor: colors.length > 2 ? colors[2] : (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill,
6560
+ label: colors.length ? colors[0] : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textOnFill,
6508
6561
  };
6509
6562
  }
6510
6563
  else {
@@ -6512,8 +6565,8 @@ function generatePrimaryTagColors(intent, colors, semanticColors) {
6512
6565
  background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPrimary,
6513
6566
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6514
6567
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6515
- iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryInverse,
6516
- label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse,
6568
+ iconColor: (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentOnFill,
6569
+ label: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textOnFill,
6517
6570
  };
6518
6571
  }
6519
6572
  }
@@ -6534,7 +6587,7 @@ function generateSecondaryTagColors(intent, colors, semanticColors) {
6534
6587
  }
6535
6588
  else {
6536
6589
  return {
6537
- background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.surfacePrimary,
6590
+ background: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillSecondary,
6538
6591
  backgroundClicked: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillPressed,
6539
6592
  backgroundHover: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.fillHover,
6540
6593
  iconColor: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.neutral.ornament,
@@ -6552,7 +6605,7 @@ function createTypeCss(props, type) {
6552
6605
  secondary: generateSecondaryTagColors(intent, colors, semanticColors),
6553
6606
  };
6554
6607
  var typeColors = typeToColors[type];
6555
- return css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6608
+ return css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
6556
6609
  }
6557
6610
  var typeToCss = {
6558
6611
  primary: primary,
@@ -6573,7 +6626,7 @@ var StyledTag$1 = styled(Chip$1, {
6573
6626
  var type = sdsType || "primary";
6574
6627
  return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
6575
6628
  });
6576
- var templateObject_1$A, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6629
+ var templateObject_1$A, templateObject_2$k, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
6577
6630
 
6578
6631
  /**
6579
6632
  * @see https://mui.com/material-ui/react-chip/
@@ -6587,14 +6640,14 @@ var Tag = function (props) {
6587
6640
  return jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
6588
6641
  };
6589
6642
 
6590
- var StyledTag = styled(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6591
- var _a, _b, _c, _d, _e, _f, _g;
6643
+ var StyledTag = styled(Tag)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6644
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6592
6645
  var spaces = getSpaces(props);
6593
6646
  var iconSizes = getIconSizes(props);
6594
6647
  var semanticColors = getSemanticColors(props);
6595
- return css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _f === void 0 ? void 0 : _f.width, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _g === void 0 ? void 0 : _g.height);
6648
+ return css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
6596
6649
  });
6597
- var templateObject_1$z, templateObject_2$i;
6650
+ var templateObject_1$z, templateObject_2$j;
6598
6651
 
6599
6652
  /**
6600
6653
  * @see https://mui.com/material-ui/react-chip/
@@ -6618,11 +6671,11 @@ var Chips = function (_a) {
6618
6671
  };
6619
6672
 
6620
6673
  var Wrapper$1 = styled("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
6621
- var StyledChipsWrapper = styled("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6674
+ var StyledChipsWrapper = styled("div")(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6622
6675
  var spaces = getSpaces(props);
6623
6676
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
6624
6677
  });
6625
- var templateObject_1$y, templateObject_2$h;
6678
+ var templateObject_1$y, templateObject_2$i;
6626
6679
 
6627
6680
  // eslint-disable-next-line sonarjs/cognitive-complexity
6628
6681
  var ComplexFilter = function (_a) {
@@ -6723,7 +6776,7 @@ var StyledPaper = styled(Paper, {
6723
6776
  var corners = getCorners(props);
6724
6777
  var shadows = getShadows(props);
6725
6778
  var semanticColors = getSemanticColors(props);
6726
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n ");
6779
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n border-radius: ").concat((corners === null || corners === void 0 ? void 0 : corners.m) || 0, "px;\n padding: ").concat((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0, "px;\n ");
6727
6780
  });
6728
6781
  function paperDimensions(props) {
6729
6782
  var sdsSize = props.sdsSize;
@@ -6829,7 +6882,7 @@ var StyledDialogTitle = styled(DialogTitle$1)(templateObject_1$t || (templateObj
6829
6882
  var spaces = getSpaces(props);
6830
6883
  return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
6831
6884
  });
6832
- var Title = styled(Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6885
+ var Title = styled(Typography)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
6833
6886
  var _a;
6834
6887
  var semanticColors = getSemanticColors(props);
6835
6888
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
@@ -6845,7 +6898,7 @@ var Overline = styled(Typography)(templateObject_4$9 || (templateObject_4$9 = __
6845
6898
  var spaces = getSpaces(props);
6846
6899
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
6847
6900
  });
6848
- var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
6901
+ var templateObject_1$t, templateObject_2$h, templateObject_3$a, templateObject_4$9;
6849
6902
 
6850
6903
  /**
6851
6904
  * @see https://mui.com/material-ui/react-dialog/
@@ -6864,11 +6917,11 @@ var StyledButtonsWrapper = styled("div", {
6864
6917
  });
6865
6918
  var StyledButton = styled(Button, {
6866
6919
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
6867
- })(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6920
+ })(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
6868
6921
  var spaces = getSpaces(props);
6869
6922
  return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
6870
6923
  });
6871
- var templateObject_1$s, templateObject_2$f;
6924
+ var templateObject_1$s, templateObject_2$g;
6872
6925
 
6873
6926
  // eslint-disable-next-line sonarjs/cognitive-complexity
6874
6927
  var Dropdown = function (props) {
@@ -6998,7 +7051,7 @@ var Dropdown = function (props) {
6998
7051
  }
6999
7052
  };
7000
7053
 
7001
- var _path$4, _path2$1;
7054
+ var _path$4;
7002
7055
  function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
7003
7056
  var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
7004
7057
  return /*#__PURE__*/React.createElement("svg", _extends$4({
@@ -7006,15 +7059,11 @@ var SvgIconCheckboxChecked = function SvgIconCheckboxChecked(props) {
7006
7059
  width: 16,
7007
7060
  height: 16
7008
7061
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
7009
- d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
7010
- })), _path2$1 || (_path2$1 = /*#__PURE__*/React.createElement("path", {
7011
- fill: "#fff",
7012
- fillRule: "evenodd",
7013
- d: "M11.744 3.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
7062
+ d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.744 1.962a.56.56 0 0 0-.346.239L6.91 10.284 4.59 7.663c-.147-.205-.392-.285-.614-.185-.21.095-.355.33-.382.606-.027.272.062.543.238.703l2.733 3.09c.235.264.594.241.808-.047l4.874-6.612c.167-.22.21-.553.11-.833-.106-.294-.352-.472-.614-.423Z"
7014
7063
  })));
7015
7064
  };
7016
7065
 
7017
- var _path$3, _path2;
7066
+ var _path$3;
7018
7067
  function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
7019
7068
  var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props) {
7020
7069
  return /*#__PURE__*/React.createElement("svg", _extends$3({
@@ -7022,10 +7071,7 @@ var SvgIconCheckboxIndeterminate = function SvgIconCheckboxIndeterminate(props)
7022
7071
  width: 16,
7023
7072
  height: 16
7024
7073
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
7025
- d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2z"
7026
- })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
7027
- fill: "#fff",
7028
- d: "M12.286 8.004a.625.625 0 0 0-.625-.625H4.339a.625.625 0 0 0 0 1.25h7.322c.345 0 .625-.28.625-.625"
7074
+ d: "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2Zm11.661 5.379H4.339a.625.625 0 0 0 0 1.25h7.322a.625.625 0 0 0 0-1.25"
7029
7075
  })));
7030
7076
  };
7031
7077
 
@@ -7056,7 +7102,7 @@ var StyledCheckbox = styled(Checkbox)(templateObject_1$r || (templateObject_1$r
7056
7102
  var checkboxColor = intentToColor$1[intent];
7057
7103
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(checkboxClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(checkboxClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(checkboxClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
7058
7104
  });
7059
- var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7105
+ var StyledFormControlLabel$1 = styled(FormControlLabel)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7060
7106
  var _a, _b, _c, _d;
7061
7107
  var disabled = props.disabled;
7062
7108
  var spaces = getSpaces(props);
@@ -7074,7 +7120,7 @@ var StyledCheckboxCaption = styled("span")(templateObject_5$5 || (templateObject
7074
7120
  var semanticColors = getSemanticColors(props);
7075
7121
  return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
7076
7122
  });
7077
- var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
7123
+ var templateObject_1$r, templateObject_2$f, templateObject_3$9, templateObject_4$8, templateObject_5$5;
7078
7124
 
7079
7125
  /**
7080
7126
  * @see https://mui.com/material-ui/react-checkbox/
@@ -7140,7 +7186,7 @@ var StyledRadioButton = styled(Radio)(templateObject_1$q || (templateObject_1$q
7140
7186
  var radioColor = intentToColor[intent];
7141
7187
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(radioClasses.disabled, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(radioClasses.checked, " {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(radioClasses.disabled, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n }\n ");
7142
7188
  });
7143
- var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7189
+ var StyledFormControlLabel = styled(FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7144
7190
  var _a, _b, _c, _d;
7145
7191
  var disabled = props.disabled;
7146
7192
  var spaces = getSpaces(props);
@@ -7158,7 +7204,7 @@ var StyledRadioCaption = styled("span")(templateObject_5$4 || (templateObject_5$
7158
7204
  var semanticColors = getSemanticColors(props);
7159
7205
  return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
7160
7206
  });
7161
- var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
7207
+ var templateObject_1$q, templateObject_2$e, templateObject_3$8, templateObject_4$7, templateObject_5$4;
7162
7208
 
7163
7209
  /**
7164
7210
  * @see https://mui.com/material-ui/react-radio-button/
@@ -7192,7 +7238,7 @@ var inputSlider = function (props) {
7192
7238
  var corners = getCorners(props);
7193
7239
  var shadows = getShadows(props);
7194
7240
  var semanticColors = getSemanticColors(props);
7195
- return "\n position: relative;\n\n .".concat(sliderClasses.rail, ",\n .").concat(sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(sliderClasses.rail, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n opacity:1;\n }\n \n .").concat(sliderClasses.track, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n }\n\n .").concat(sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(props), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n &.").concat(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(sliderClasses.mark, " {\n // (masoudmanson): Although the mark is not a icon, but since we don't have \n // a specific color for the mark, we use the iconDisabled color for it.\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconDisabled, ";\n opacity: 1;\n }\n\n .").concat(sliderClasses.mark, ".").concat(sliderClasses.markActive, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n }\n\n .").concat(sliderClasses.markLabel, " {\n ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n }\n\n .").concat(sliderClasses.markLabelActive, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n }\n ");
7241
+ return "\n position: relative;\n\n .".concat(sliderClasses.rail, ",\n .").concat(sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(sliderClasses.rail, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n opacity:1;\n }\n \n .").concat(sliderClasses.track, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillPrimary, ";\n }\n\n .").concat(sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(props), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n\n &.").concat(sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textPrimary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.surfaceSecondary, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(sliderClasses.mark, " {\n // (masoudmanson): Although the mark is not a icon, but since we don't have \n // a specific color for the mark, we use the ornamentDisabled color for it.\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, ";\n opacity: 1;\n }\n\n .").concat(sliderClasses.mark, ".").concat(sliderClasses.markActive, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.backgroundPrimary, ";\n }\n\n .").concat(sliderClasses.markLabel, " {\n ").concat((_k = fontBodyXxxs$1(props)) === null || _k === void 0 ? void 0 : _k.styles, "\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textSecondary, ";\n }\n\n .").concat(sliderClasses.markLabelActive, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, ";\n }\n ");
7196
7242
  };
7197
7243
  var horizontal = function (props) {
7198
7244
  var marks = props.marks;
@@ -7201,10 +7247,8 @@ var horizontal = function (props) {
7201
7247
  };
7202
7248
  var disabledSlider = function (props) {
7203
7249
  var _a, _b, _c, _d, _e, _f, _g;
7204
- var colors = getColors(props);
7205
7250
  var semanticColors = getSemanticColors(props);
7206
- var mode = getMode(props);
7207
- return "\n .".concat(sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(sliderClasses.thumb, ".").concat(sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(sliderClasses.valueLabel, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
7251
+ return "\n .".concat(sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(sliderClasses.thumb, ".").concat(sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(sliderClasses.valueLabel, " {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundSecondary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
7208
7252
  };
7209
7253
  var StyledSlider = styled(Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
7210
7254
  var disabled = props.disabled;
@@ -7231,7 +7275,7 @@ var disabledStyled$1 = function (props) {
7231
7275
  var _a, _b, _c;
7232
7276
  var borders = getBorders(props);
7233
7277
  var semanticColors = getSemanticColors(props);
7234
- return css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
7278
+ return css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n opacity: 1;\n }\n\n &:hover .", " {\n border: ", ";\n opacity: 1;\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
7235
7279
  };
7236
7280
  var textArea = function (props) {
7237
7281
  var spaces = getSpaces(props);
@@ -7246,15 +7290,14 @@ var StyledInputBase = styled(TextField, {
7246
7290
  return !sdsPropNames$1.includes(prop.toString());
7247
7291
  },
7248
7292
  })(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7249
- var _a, _b, _c, _d;
7293
+ var _a, _b, _c;
7250
7294
  var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
7251
7295
  var spaces = getSpaces(props);
7252
7296
  var borders = getBorders(props);
7253
7297
  var corners = getCorners(props);
7254
- var semanticColors = getSemanticColors(props);
7255
- return css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.root, outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, outlinedInputClasses.input, outlinedInputClasses.input, focusVisibleA11yStyle(props), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
7298
+ return css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.root, outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.input, outlinedInputClasses.input, focusVisibleA11yStyle(props), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _c === void 0 ? void 0 : _c.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
7256
7299
  });
7257
- var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
7300
+ var templateObject_1$o, templateObject_2$d, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
7258
7301
 
7259
7302
  /**
7260
7303
  * @see https://mui.com/material-ui/react-text-field/
@@ -7293,27 +7336,27 @@ var toggle = function (props) {
7293
7336
  var shadows = getShadows(props);
7294
7337
  var iconSizes = getIconSizes(props);
7295
7338
  var semanticColors = getSemanticColors(props);
7296
- return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(props), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(switchClasses.track, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n opacity: 1;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n }\n ");
7339
+ return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(props), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(switchClasses.track, " {\n // background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundPrimary, ";\n opacity: 1;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n }\n ");
7297
7340
  };
7298
7341
  var toggleOn = function (props) {
7299
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7342
+ var _a, _b, _c, _d, _e, _f, _g, _h;
7300
7343
  var disabled = props.disabled, value = props.value;
7301
7344
  var borders = getBorders(props);
7302
7345
  var spaces = getSpaces(props);
7303
7346
  var semanticColors = getSemanticColors(props);
7304
- return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.icon, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n content: \"").concat(value, "\";\n }\n }\n\n .").concat(switchClasses.track, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7305
- "&:hover {\n outline: ".concat((_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover, ";\n\n .").concat(switchClasses.thumb, " {\n color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.iconHover, ";\n }\n }"), "\n ");
7347
+ return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornament, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n content: \"").concat(value, "\";\n }\n }\n\n .").concat(switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7348
+ "&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n .").concat(switchClasses.thumb, " {\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentHover, ";\n }\n }"), "\n ");
7306
7349
  };
7307
7350
  var toggleOff = function (props) {
7308
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
7351
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
7309
7352
  var disabled = props.disabled, value = props.value;
7310
7353
  var borders = getBorders(props);
7311
7354
  var spaces = getSpaces(props);
7312
7355
  var semanticColors = getSemanticColors(props);
7313
7356
  return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(switchClasses.thumb, " {\n color: ").concat(disabled
7314
- ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconDisabled
7315
- : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(switchClasses.track, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7316
- "&:hover {\n outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n .").concat(switchClasses.thumb, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n }\n }"), "\n ");
7357
+ ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentDisabled
7358
+ : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(switchClasses.track, " {\n background-color: transparent !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
7359
+ "&:hover {\n outline: ".concat((_j = borders === null || borders === void 0 ? void 0 : borders.base) === null || _j === void 0 ? void 0 : _j.hover, ";\n\n .").concat(switchClasses.thumb, " {\n color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentSecondaryHover, ";\n }\n }"), "\n ");
7317
7360
  };
7318
7361
  var Toggle = styled(Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
7319
7362
  var checked = props.checked;
@@ -7344,7 +7387,7 @@ var defaultStyle = function (props) {
7344
7387
  return css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "], ["\n color: ", ";\n position: relative;\n text-decoration: none;\n text-underline-offset: 2.5px;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:focus {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed);
7345
7388
  };
7346
7389
  var dashedStyle = function () {
7347
- return css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "], ["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "])));
7390
+ return css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "], ["\n color: inherit;\n position: relative;\n text-decoration: underline dashed;\n text-underline-offset: 2.5px;\n\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n text-decoration-style: solid;\n }\n "])));
7348
7391
  };
7349
7392
  var smallStyle = function (props) {
7350
7393
  return fontBodyS$1(props);
@@ -7360,7 +7403,7 @@ var StyledLink = styled(Link$1, {
7360
7403
  var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
7361
7404
  return css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
7362
7405
  });
7363
- var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
7406
+ var templateObject_1$m, templateObject_2$c, templateObject_3$6, templateObject_4$5;
7364
7407
 
7365
7408
  /**
7366
7409
  * @see https://mui.com/material-ui/react-link/
@@ -7447,11 +7490,11 @@ function propsToMarginBottom(props) {
7447
7490
  var marginBottom = props.marginBottom;
7448
7491
  return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
7449
7492
  }
7450
- var ListItemLabel = styled("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7493
+ var ListItemLabel = styled("span")(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
7451
7494
  var fontWeights = getFontWeights(props);
7452
7495
  return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
7453
7496
  });
7454
- var templateObject_1$k, templateObject_2$a;
7497
+ var templateObject_1$k, templateObject_2$b;
7455
7498
 
7456
7499
  /**
7457
7500
  * @see https://mui.com/material-ui/react-list/
@@ -7482,13 +7525,13 @@ var minimal = function (props) {
7482
7525
  var _a, _b;
7483
7526
  var iconSizes = getIconSizes(props);
7484
7527
  var semanticColors = getSemanticColors(props);
7485
- return css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary);
7528
+ return css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary);
7486
7529
  };
7487
7530
  var tag = function (props) {
7488
7531
  var _a, _b, _c;
7489
7532
  var corners = getCorners(props);
7490
7533
  var semanticColors = getSemanticColors(props);
7491
- return css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
7534
+ return css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
7492
7535
  };
7493
7536
  var doNotForwardProps$7 = ["sdsStyle"];
7494
7537
  var StyledLoadingIndicator = styled("div", {
@@ -7499,18 +7542,18 @@ var StyledLoadingIndicator = styled("div", {
7499
7542
  var style = css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
7500
7543
  return css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
7501
7544
  });
7502
- var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7545
+ var templateObject_1$i, templateObject_2$a, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
7503
7546
 
7504
7547
  var LoadingIndicator = function (_a) {
7505
7548
  var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
7506
- return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7549
+ return (jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsx(Icon, { sdsIcon: "Loading", sdsSize: "l" }), jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
7507
7550
  };
7508
7551
 
7509
7552
  var StyledMenu = styled(Menu$1)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), menuClasses.paper, function (props) {
7510
7553
  var _a;
7511
7554
  var spaces = getSpaces(props);
7512
7555
  var semanticColors = getSemanticColors(props);
7513
- return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7556
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
7514
7557
  });
7515
7558
  var templateObject_1$h;
7516
7559
 
@@ -7535,7 +7578,7 @@ var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
7535
7578
  // per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
7536
7579
  var StyledAutocomplete = styled(Autocomplete$1, {
7537
7580
  shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
7538
- })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7581
+ })(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
7539
7582
  var search = _a.search;
7540
7583
  return !search && "height: 0; margin: 0 !important;";
7541
7584
  });
@@ -7558,7 +7601,7 @@ var StyledMenuInputSearch = styled(InputSearch, {
7558
7601
  var search = _a.search;
7559
7602
  return (search ? "auto" : "transparent");
7560
7603
  });
7561
- var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
7604
+ var templateObject_1$g, templateObject_2$9, templateObject_3$4, templateObject_4$3;
7562
7605
 
7563
7606
  /**
7564
7607
  * @see https://mui.com/material-ui/react-autocomplete/
@@ -7584,9 +7627,7 @@ var MenuSelect = function (props) {
7584
7627
  * (thuang): Works with css caret-color: "transparent" to hide
7585
7628
  * mobile keyboard
7586
7629
  */
7587
- inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
7588
- sdsType: "interactive",
7589
- }, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7630
+ inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
7590
7631
  if (event && event.type === "blur") {
7591
7632
  setInputValue("");
7592
7633
  }
@@ -7673,13 +7714,13 @@ var StyledTabs$1 = styled(Tabs$1, {
7673
7714
  });
7674
7715
  var StyledTab$1 = styled(Tab$1, {
7675
7716
  shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
7676
- })(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7677
- var _a, _b, _c, _d;
7717
+ })(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
7718
+ var _a, _b, _c;
7678
7719
  var spaces = getSpaces(props);
7679
7720
  var semanticColors = getSemanticColors(props);
7680
- return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
7721
+ return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
7681
7722
  });
7682
- var templateObject_1$f, templateObject_2$7;
7723
+ var templateObject_1$f, templateObject_2$8;
7683
7724
 
7684
7725
  /**
7685
7726
  * Custom hook that observes elements to determine if they are in the viewport.
@@ -7766,9 +7807,9 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7766
7807
  };
7767
7808
  };
7768
7809
  // Emit changes only once
7769
- var handleOnChange = useCallback(function (value) {
7810
+ var handleOnChange = useCallback(function (value, event, type) {
7770
7811
  if (value !== emittedValue) {
7771
- onChange === null || onChange === void 0 ? void 0 : onChange(value);
7812
+ onChange === null || onChange === void 0 ? void 0 : onChange(value, event, type);
7772
7813
  setEmittedValue(value);
7773
7814
  }
7774
7815
  }, [emittedValue, onChange]);
@@ -7794,7 +7835,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7794
7835
  // Update the tab value to newValue to adjust the position of the tabsIndicator
7795
7836
  setFirstTabIndexInview(newValue);
7796
7837
  // Invoke the custom onChange prop
7797
- handleOnChange(newValue);
7838
+ handleOnChange(newValue, event, "click");
7798
7839
  };
7799
7840
  // Observe changes in the sectionIsInView object to update the tabs value
7800
7841
  // based on the index of the visible sections in the viewport.
@@ -7807,9 +7848,12 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
7807
7848
  if (sectionInView > -1 && !navItemClicked) {
7808
7849
  setFirstTabIndexInview(sectionInView);
7809
7850
  // Invoke the custom onChange prop
7810
- handleOnChange(sectionInView);
7851
+ handleOnChange(sectionInView, {
7852
+ target: items[sectionInView],
7853
+ type: "scroll",
7854
+ }, "scroll");
7811
7855
  }
7812
- }, [handleOnChange, navItemClicked, sectionIsInView]);
7856
+ }, [handleOnChange, items, navItemClicked, sectionIsInView]);
7813
7857
  // Set navItemClicked to false to re-enable the option
7814
7858
  // to update the tab value based on scroll.
7815
7859
  useScrollStopListener(function () {
@@ -7838,7 +7882,7 @@ var StyledNotification = styled(Alert$2, {
7838
7882
  var typography = getTypography(props);
7839
7883
  var borders = getBorders(props);
7840
7884
  var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
7841
- var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
7885
+ var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
7842
7886
  // (masoudmanson): The Notification Icon should be vertically centered with the Notification
7843
7887
  // Title. The padding-top of the Notification Title is calculated based on the difference
7844
7888
  // between the height of the Icon and the line-height of the Notification Title.
@@ -7847,11 +7891,11 @@ var StyledNotification = styled(Alert$2, {
7847
7891
  2);
7848
7892
  return "\n background-color: ".concat(backgroundColor, ";\n max-width: 480px;\n min-width: 280px;\n box-sizing: border-box;\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: flex-start;\n border-left: ").concat((_m = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _m === void 0 ? void 0 : _m.extraThick, ";\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n\n .MuiAlert-icon {\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n padding: 0;\n path {\n fill: ").concat(iconColor, ";\n }\n }\n\n .MuiAlert-message {\n padding: ").concat(alertMessagePaddingTop, "px 0px 0px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n width: 100%;\n\n > * {\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0px;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n button {\n display: block;\n }\n }\n\n .MuiAlert-action {\n margin-right: 0;\n padding: 0;\n align-items: flex-start;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n > button {\n padding: 0;\n }\n }\n }\n ");
7849
7893
  });
7850
- var StyledButtonWrapper = styled("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7894
+ var StyledButtonWrapper = styled("div")(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7851
7895
  var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
7852
7896
  return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n ");
7853
7897
  });
7854
- var templateObject_1$e, templateObject_2$6;
7898
+ var templateObject_1$e, templateObject_2$7;
7855
7899
 
7856
7900
  /**
7857
7901
  * @see https://mui.com/material-ui/react-alert/
@@ -7882,17 +7926,17 @@ var Notification = function (_a) {
7882
7926
  return icon;
7883
7927
  }
7884
7928
  else {
7885
- return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon, sdsType: "static" }, sdsIconProps)));
7929
+ return (jsx(Icon, __assign({ sdsSize: "l", sdsIcon: icon }, sdsIconProps)));
7886
7930
  }
7887
7931
  }
7888
7932
  else {
7889
7933
  switch (intent) {
7890
7934
  case "positive":
7891
- return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle", sdsType: "static" });
7935
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "CheckCircle" });
7892
7936
  case "info":
7893
- return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle", sdsType: "static" });
7937
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "InfoCircle" });
7894
7938
  default:
7895
- return (jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle", sdsType: "static" }));
7939
+ return jsx(Icon, { sdsSize: "l", sdsIcon: "ExclamationMarkCircle" });
7896
7940
  }
7897
7941
  }
7898
7942
  };
@@ -7915,16 +7959,16 @@ var doNotForwardProps$3 = [
7915
7959
  var StyledPaginationButton = styled(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7916
7960
  var _a, _b, _c;
7917
7961
  var semanticColors = getSemanticColors(props);
7918
- return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, "\n }\n\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, "\n }\n }\n ");
7962
+ return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, ";\n }\n\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, "\n }\n }\n ");
7919
7963
  });
7920
7964
  var StyledPaginationChevronList = styled("li", {
7921
7965
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
7922
- })(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7966
+ })(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
7923
7967
  var _a, _b, _c, _d, _e;
7924
7968
  var disabled = props.disabled;
7925
7969
  var spaces = getSpaces(props);
7926
7970
  var semanticColors = getSemanticColors(props);
7927
- return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(props), "\n ");
7971
+ return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(props), "\n ");
7928
7972
  });
7929
7973
  var StyledPagination = styled("ul", {
7930
7974
  shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
@@ -7944,7 +7988,7 @@ var Page = styled("li", {
7944
7988
  var semanticColors = getSemanticColors(props);
7945
7989
  return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(props), "\n ");
7946
7990
  });
7947
- var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
7991
+ var templateObject_1$d, templateObject_2$6, templateObject_3$3, templateObject_4$2;
7948
7992
 
7949
7993
  var StyledPaginationDropdownMenu = styled(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"], ["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"])));
7950
7994
  var templateObject_1$c;
@@ -8052,7 +8096,7 @@ var Pagination = forwardRef(function (props, ref) {
8052
8096
  return null;
8053
8097
  }
8054
8098
  var lastPage = paginationRange[paginationRange.length - 1];
8055
- return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
8099
+ return (jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs" }) }, "onNextPage")] })));
8056
8100
  function handleGoBackButtonKeyDown(event) {
8057
8101
  if ((event.key === "Enter" || event.code === "Space") &&
8058
8102
  currentPage > 1) {
@@ -8081,14 +8125,14 @@ var basicPanelStyles = function (props) {
8081
8125
  var _a;
8082
8126
  var semanticColors = getSemanticColors(props);
8083
8127
  var spaces = getSpaces(props);
8084
- return css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "])), drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
8128
+ return css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "])), drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
8085
8129
  };
8086
8130
  var overlayPanelStyles = function (props) {
8087
8131
  var _a;
8088
8132
  var semanticColors = getSemanticColors(props);
8089
8133
  var spaces = getSpaces(props);
8090
8134
  var shadows = getShadows(props);
8091
- return css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "], ["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "])), drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
8135
+ return css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "], ["\n /**\n * (masoudmanson): This prevents the Panel from taking up the full width of the screen,\n * allowing the ToggleButton to be clicked to close the Panel. Due to an issue with\n * MUI v5, the following styles cause the Panel to generate accessibility (a11y) errors.\n * In the meantime, we are ignoring the a11y errors within Storybook.\n */\n width: fit-content;\n height: fit-content;\n div[data-testid=\"sentinelStart\"],\n div[data-testid=\"sentinelEnd\"] {\n width: fit-content;\n }\n\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "])), drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
8092
8136
  };
8093
8137
  var StyledDrawer = styled(Drawer, {
8094
8138
  shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
@@ -8103,7 +8147,7 @@ var StyledHeaderComponent = styled("div")(templateObject_6 || (templateObject_6
8103
8147
  var spaces = getSpaces(props);
8104
8148
  return css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
8105
8149
  });
8106
- var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
8150
+ var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
8107
8151
 
8108
8152
  var StyledPanelHeader = styled("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8109
8153
  var spaces = getSpaces(props);
@@ -8177,9 +8221,17 @@ var StyledSegmentedControl = styled(ToggleButtonGroup, {
8177
8221
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
8178
8222
  var spaces = getSpaces(props);
8179
8223
  var semanticColors = getSemanticColors(props);
8180
- return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n }\n\n .").concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n }\n }\n\n .").concat(toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
8224
+ return "\n .".concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n }\n\n .").concat(toggleButtonClasses.root, ".").concat(toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.ornamentSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, ";\n }\n }\n\n .").concat(toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: transparent;\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
8225
+ });
8226
+ var StyledToggleButton = styled(ToggleButton, {
8227
+ shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
8228
+ })(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
8229
+ var _a;
8230
+ var disabled = props.disabled;
8231
+ var semanticColors = getSemanticColors(props);
8232
+ return "\n svg {\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled : "currentColor", ";\n }\n ");
8181
8233
  });
8182
- var templateObject_1$8;
8234
+ var templateObject_1$8, templateObject_2$4;
8183
8235
 
8184
8236
  /**
8185
8237
  * @see https://mui.com/material-ui/react-toggle-button/
@@ -8202,8 +8254,8 @@ var SegmentedControl = function (props) {
8202
8254
  };
8203
8255
  return (jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
8204
8256
  var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
8205
- var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
8206
- var toggleButton = (jsx(ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
8257
+ var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsx(Icon, { sdsIcon: icon, sdsSize: "s" }))) : null;
8258
+ var toggleButton = (jsx(StyledToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
8207
8259
  // (masoudmanson): If the button is disabled, we don't want to show the tooltip.
8208
8260
  return disabled ? (toggleButton) : (jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
8209
8261
  }), ";"] })));
@@ -8227,10 +8279,9 @@ var doNotForwardProps = [
8227
8279
  "hover",
8228
8280
  ];
8229
8281
  var disabledStyled = function (props) {
8230
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
8282
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
8231
8283
  var semanticColors = getSemanticColors(props);
8232
- var mode = getMode(props);
8233
- return "\n // eslint-disable-next-line sonarjs/no-all-duplicated-branches\n background-color: ".concat(mode === "light" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, ";\n user-select: none;\n\n &:hover {\n background-color: ").concat(mode === "light" ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.surfacePrimary, ";\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n }\n\n & span, & div {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n }\n\n .cell-component {\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textDisabled, ";\n pointer-events: none;\n user-select: none;\n & span, & div {\n color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textDisabled, ";\n background-color: ").concat(mode === "light" ? (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.surfaceSecondary : (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.surfacePrimary, ";\n }\n\n svg {\n fill: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconDisabled, ";\n }\n\n filter: grayscale(100%);\n }\n ");
8284
+ return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.backgroundSecondary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, ";\n user-select: none;\n\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.backgroundSecondary, ";\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled, ";\n }\n\n & span, & div {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n\n .cell-component {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, ";\n pointer-events: none;\n user-select: none;\n & div {\n color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, ";\n background-color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.backgroundSecondary, ";\n }\n\n & .MuiChip-root {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillDisabled, ";\n\n & span {\n color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textDisabled, " !important;\n }\n }\n\n svg {\n fill: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentDisabled, ";\n }\n\n filter: grayscale(100%);\n }\n ");
8234
8285
  };
8235
8286
  var hoverStyled = function (props) {
8236
8287
  var _a;
@@ -8405,7 +8456,7 @@ var TooltipCondensed = forwardRef(function TooltipCondensed(props, ref) {
8405
8456
  key: "tooltip",
8406
8457
  props: props,
8407
8458
  });
8408
- return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
8459
+ return (jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, hasInvertedStyle: false, children: children }));
8409
8460
  });
8410
8461
  function mergeClass(_a) {
8411
8462
  var props = _a.props, className = _a.className, key = _a.key;
@@ -8463,4 +8514,4 @@ var TooltipTableContent = function (props) {
8463
8514
  return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
8464
8515
  };
8465
8516
 
8466
- export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
8517
+ export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSLightAppTheme, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };