@czi-sds/components 15.4.1 → 15.4.2

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.
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { AccordionDetailsProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PopperProps, PaperProps, SliderProps, SwitchProps, TabsProps } from "@mui/material";
2
+ import { AccordionDetailsProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PopperProps, PaperProps, SliderProps, SwitchProps, TabsProps, ToggleButtonGroupProps } from "@mui/material";
3
3
  import { AccordionProps as RawAccordionProps } from "@mui/material";
4
4
  import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
5
5
  import { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
@@ -34,9 +34,6 @@ import { AlertProps as RawAlertProps } from "@mui/lab";
34
34
  import { AlertProps as AlertProps$0 } from "@mui/lab";
35
35
  import { AlertTitleProps } from "@mui/material/AlertTitle";
36
36
  import { AutocompleteValue } from "@mui/material/useAutocomplete";
37
- import { AutocompleteProps as AutocompleteProps$1 } from "@mui/material/Autocomplete";
38
- import { AutocompleteRenderInputParams as AutocompleteRenderInputParams$0 } from "@mui/material/Autocomplete";
39
- import { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
40
37
  declare const AccordionDetails: (props: AccordionDetailsProps) => JSX.Element;
41
38
  interface SdsAccordionHeaderProps {
42
39
  subtitle?: string;
@@ -661,7 +658,7 @@ interface InputDropdownProps extends CommonThemeProps {
661
658
  intent?: "default" | "error" | "warning";
662
659
  label: ReactNode;
663
660
  onClick: (event: React.MouseEvent<HTMLElement>) => void;
664
- open?: boolean;
661
+ state?: "default" | "open";
665
662
  sdsStage: "default" | "userInput";
666
663
  sdsStyle?: "minimal" | "square" | "rounded";
667
664
  sdsType?: "label" | "value";
@@ -921,10 +918,10 @@ interface DefaultMenuSelectOption {
921
918
  }
922
919
  interface MenuSelectExtraProps extends StyleProps$2 {
923
920
  keepSearchOnSelect?: boolean;
924
- renderInput?: (params: AutocompleteRenderInputParams$0) => React.ReactNode;
921
+ renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
925
922
  InputBaseProps?: Partial<InputSearchProps>;
926
923
  }
927
- type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "content">;
924
+ type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "content">;
928
925
  type MenuSelectProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & MenuSelectExtraProps;
929
926
  /**
930
927
  * @see https://mui.com/material-ui/react-autocomplete/
package/dist/index.cjs.js CHANGED
@@ -6,10 +6,7 @@ var react = require('@emotion/react');
6
6
  var material = require('@mui/material');
7
7
  var styles = require('@mui/material/styles');
8
8
  var iconsMaterial = require('@mui/icons-material');
9
- var Autocomplete$1 = require('@mui/material/Autocomplete');
10
9
  var css = require('@emotion/css');
11
- var ToggleButton = require('@mui/material/ToggleButton');
12
- var ToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
13
10
 
14
11
  function _interopNamespaceDefault(e) {
15
12
  var n = Object.create(null);
@@ -3463,7 +3460,7 @@ var doNotForwardProps$j = [
3463
3460
  "InputBaseProps",
3464
3461
  "hasSections",
3465
3462
  ];
3466
- var StyledAutocomplete$2 = styles.styled(Autocomplete$1, {
3463
+ var StyledAutocomplete$2 = styles.styled(material.Autocomplete, {
3467
3464
  shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
3468
3465
  })(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n + .MuiAutocomplete-popper\n > .MuiAutocomplete-paper\n .MuiAutocomplete-groupLabel {\n ", "\n }\n\n ", "\n"], ["\n + .MuiAutocomplete-popper\n > .MuiAutocomplete-paper\n .MuiAutocomplete-groupLabel {\n ", "\n }\n\n ", "\n"])), fontCapsXxxxs, function (props) {
3469
3466
  var search = props.search, hasSections = props.hasSections;
@@ -3472,7 +3469,7 @@ var StyledAutocomplete$2 = styles.styled(Autocomplete$1, {
3472
3469
  var borders = getBorders(props);
3473
3470
  return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n\n ").concat(search || hasSections
3474
3471
  ? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;")
3475
- : "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0; \n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n } \n ");
3472
+ : "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n }\n ");
3476
3473
  });
3477
3474
  var InputBaseWrapper$2 = styles.styled("div", {
3478
3475
  shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
@@ -4186,7 +4183,7 @@ var doNotForwardProps$c = [
4186
4183
  "onClickAway",
4187
4184
  "ClickAwayListenerProps",
4188
4185
  ];
4189
- var StyledAutocomplete$1 = styles.styled(Autocomplete$1, {
4186
+ var StyledAutocomplete$1 = styles.styled(material.Autocomplete, {
4190
4187
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
4191
4188
  })(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n + .MuiAutocomplete-popper\n > .MuiAutocomplete-paper\n .MuiAutocomplete-groupLabel {\n ", "\n }\n\n ", "\n"], ["\n + .MuiAutocomplete-popper\n > .MuiAutocomplete-paper\n .MuiAutocomplete-groupLabel {\n ", "\n }\n\n ", "\n"])), fontCapsXxxxs, function (props) {
4192
4189
  var search = props.search, title = props.title, hasSections = props.hasSections;
@@ -4195,9 +4192,9 @@ var StyledAutocomplete$1 = styles.styled(Autocomplete$1, {
4195
4192
  var borders = getBorders(props);
4196
4193
  return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .MuiAutocomplete-popper {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n }\n\n & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {\n\n ").concat(search || title || hasSections
4197
4194
  ? "padding-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px !important;")
4198
- : "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n \n ").concat(search || title || hasSections
4195
+ : "", "\n\n .MuiAutocomplete-listbox {\n max-height: 40vh;\n padding-top: 0;\n padding-bottom: 0;\n\n ").concat(search || title || hasSections
4199
4196
  ? "padding-right: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;")
4200
- : "", "\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n } \n ");
4197
+ : "", "\n\n .MuiAutocomplete-option {\n min-height: unset;\n }\n\n .MuiAutocomplete-option.Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"] {\n background-color: white;\n }\n\n .MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n .MuiAutocomplete-option[aria-selected=\"true\"].Mui-focused {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n & > li:last-child .MuiAutocomplete-groupUl {\n border-bottom: none;\n margin-bottom: 0;\n }\n }\n\n .MuiAutocomplete-groupLabel {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px 0;\n }\n\n .MuiAutocomplete-groupUl {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n position: relative;\n padding: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px 0 0;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n\n & li:last-of-type {\n position: relative;\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n }\n }\n ");
4201
4198
  });
4202
4199
  var InputBaseWrapper$1 = styles.styled("div", {
4203
4200
  shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
@@ -4224,7 +4221,7 @@ var StyledHeaderTitle = styles.styled("div", {
4224
4221
  var search = props.search;
4225
4222
  var typography = getTypography(props);
4226
4223
  var spacings = getSpaces(props);
4227
- return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n color: black;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px; \n ").concat(search ? "padding-bottom: 0px;" : "padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;"), "\n ");
4224
+ return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n color: black;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n ").concat(search ? "padding-bottom: 0px;" : "padding-bottom: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;"), "\n ");
4228
4225
  });
4229
4226
  var StyledPopper = styles.styled(material.Popper, {
4230
4227
  shouldForwardProp: function (prop) {
@@ -4313,12 +4310,14 @@ var inputDropdownStyles = function (props) {
4313
4310
  var palette = getPalette(props);
4314
4311
  var spacings = getSpaces(props);
4315
4312
  var borders = getBorders(props);
4316
- return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\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 border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\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 "])), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
4313
+ return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", "px;\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: #000;\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\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), borders === null || borders === void 0 ? void 0 : borders.gray[400], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.s, spacings === null || spacings === void 0 ? void 0 : spacings.l, colors === null || colors === void 0 ? void 0 : colors.gray[500], (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary, borders === null || borders === void 0 ? void 0 : borders.primary[400], (_c = palette === null || palette === void 0 ? void 0 : palette.text) === null || _c === void 0 ? void 0 : _c.primary, colors === null || colors === void 0 ? void 0 : colors.primary[400]);
4317
4314
  };
4318
4315
  var minimal$1 = function (props) {
4316
+ var _a;
4319
4317
  var colors = getColors(props);
4320
4318
  var spacings = getSpaces(props);
4321
- return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\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 /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\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), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
4319
+ var palette = getPalette(props);
4320
+ return react.css(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\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 /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: black;\n }\n\n .styled-label {\n color: #000;\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\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), spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.s, colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[100], (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, colors === null || colors === void 0 ? void 0 : colors.gray[100], labelFontBodyS(props), spacings === null || spacings === void 0 ? void 0 : spacings.xs);
4322
4321
  };
4323
4322
  var square$1 = function (props) {
4324
4323
  var corners = getCorners(props);
@@ -4329,31 +4328,36 @@ var rounded$1 = function (props) {
4329
4328
  return react.css(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n height: 34px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
4330
4329
  };
4331
4330
  var userInput = function (props) {
4331
+ var _a, _b;
4332
+ var palette = getPalette(props);
4333
+ return react.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, (_b = palette === null || palette === void 0 ? void 0 : palette.text) === null || _b === void 0 ? void 0 : _b.primary);
4334
+ };
4335
+ var isOpen = function (props) {
4332
4336
  var _a;
4333
4337
  var colors = getColors(props);
4334
4338
  var palette = getPalette(props);
4335
- return react.css(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
4339
+ return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
4336
4340
  ? "& > span, &:hover > span { color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, "; }")
4337
4341
  : "", colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
4338
4342
  };
4339
4343
  var warning$1 = function (props) {
4340
4344
  var colors = getColors(props);
4341
4345
  var yellow = colors === null || colors === void 0 ? void 0 : colors.warning[400];
4342
- return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), yellow, yellow, yellow);
4346
+ return react.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), yellow, yellow, yellow);
4343
4347
  };
4344
4348
  var error$1 = function (props) {
4345
4349
  var colors = getColors(props);
4346
4350
  var red = colors === null || colors === void 0 ? void 0 : colors.error[400];
4347
- return react.css(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), red, red, red);
4351
+ return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "], ["\n border-color: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:active {\n border-color: ", ";\n }\n "])), red, red, red);
4348
4352
  };
4349
4353
  var isDisabled = function (props) {
4350
4354
  var colors = getColors(props);
4351
4355
  var gray = colors === null || colors === void 0 ? void 0 : colors.gray[300];
4352
- return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n "])), gray, colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
4356
+ return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), gray, colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
4353
4357
  };
4354
4358
  var doNotForwardProps$b = [
4355
4359
  "intent",
4356
- "open",
4360
+ "state",
4357
4361
  "sdsStage",
4358
4362
  "sdsType",
4359
4363
  "isMinimal",
@@ -4362,20 +4366,20 @@ var doNotForwardProps$b = [
4362
4366
  ];
4363
4367
  var StyledInputDropdown = styles.styled(Button, {
4364
4368
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4365
- })(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
4366
- var disabled = props.disabled, intent = props.intent, open = props.open, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
4367
- return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), open && userInput(props), sdsStage === "userInput" && userInput(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
4369
+ })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
4370
+ var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
4371
+ return react.css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
4368
4372
  });
4369
4373
  var StyledDetail = styles.styled("span", {
4370
4374
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4371
- })(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4375
+ })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4372
4376
  var colors = getColors(props);
4373
4377
  var spaces = getSpaces(props);
4374
4378
  return "\n color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
4375
4379
  });
4376
4380
  var StyledLabel$1 = styles.styled("span", {
4377
4381
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4378
- })(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4382
+ })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4379
4383
  var _a;
4380
4384
  var details = props.details, counter = props.counter, sdsType = props.sdsType;
4381
4385
  var colors = getColors(props);
@@ -4388,7 +4392,7 @@ var StyledLabel$1 = styles.styled("span", {
4388
4392
  });
4389
4393
  var StyledCounter = styles.styled("span", {
4390
4394
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4391
- })(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4395
+ })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
4392
4396
  var colors = getColors(props);
4393
4397
  var corners = getCorners(props);
4394
4398
  var spacings = getSpaces(props);
@@ -4396,7 +4400,7 @@ var StyledCounter = styles.styled("span", {
4396
4400
  });
4397
4401
  var MinimalDetails = styles.styled("div", {
4398
4402
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4399
- })(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (_a) {
4403
+ })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (_a) {
4400
4404
  var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
4401
4405
  if (shouldTruncateMinimalDetails) {
4402
4406
  return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
@@ -4404,34 +4408,28 @@ var MinimalDetails = styles.styled("div", {
4404
4408
  });
4405
4409
  var LabelWrapper = styles.styled("span", {
4406
4410
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4407
- })(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
4411
+ })(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
4408
4412
  var isMinimal = _a.isMinimal;
4409
4413
  return "\n align-items: ".concat(isMinimal ? "center" : undefined, ";\n display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n width: 100%;\n ");
4410
4414
  });
4411
4415
  var IconWrapper = styles.styled("span", {
4412
4416
  shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
4413
- })(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
4417
+ })(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
4414
4418
  function labelStyle(props) {
4415
4419
  var _a;
4416
4420
  var colors = getColors(props);
4417
4421
  var palette = getPalette(props);
4418
- var labelColor = props.disabled
4419
- ? colors === null || colors === void 0 ? void 0 : colors.gray[300]
4420
- : (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary;
4421
- return react.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
4422
+ var labelColor = props.sdsType === "value" ? (_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary : colors === null || colors === void 0 ? void 0 : colors.gray[500];
4423
+ return react.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
4422
4424
  }
4423
- var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
4425
+ var templateObject_1$y, templateObject_2$i, templateObject_3$9, templateObject_4$7, templateObject_5$5, templateObject_6$3, templateObject_7$2, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
4424
4426
 
4425
4427
  /**
4426
4428
  * @see https://mui.com/material-ui/react-button/
4427
4429
  */
4428
4430
  var InputDropdown = function (props) {
4429
- var label = props.label, open = props.open, _a = props.multiple, multiple = _a === void 0 ? false : _a, sdsStyle = props.sdsStyle, _b = props.sdsType, sdsType = _b === void 0 ? "label" : _b, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _c = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _c === void 0 ? true : _c, value = props.value;
4431
+ var label = props.label, _a = props.multiple, multiple = _a === void 0 ? false : _a, sdsStyle = props.sdsStyle, _b = props.sdsType, sdsType = _b === void 0 ? "label" : _b, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _c = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _c === void 0 ? true : _c, value = props.value;
4430
4432
  var isMinimal = sdsStyle === "minimal";
4431
- if (open !== undefined) {
4432
- // eslint-disable-next-line no-console
4433
- console.warn("Warning: InputDropdown prop `open` has been replaced by `sdsStage` and will be deprecated.");
4434
- }
4435
4433
  var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
4436
4434
  var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
4437
4435
  var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
@@ -5945,13 +5943,13 @@ var Pagination = React.forwardRef(function (props, ref) {
5945
5943
  });
5946
5944
 
5947
5945
  var doNotForwardProps$1 = ["color", "buttonDefinition"];
5948
- var StyledSegmentedControl = styles.styled(ToggleButtonGroup, {
5946
+ var StyledSegmentedControl = styles.styled(material.ToggleButtonGroup, {
5949
5947
  shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
5950
5948
  })(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
5951
5949
  var colors = getColors(props);
5952
5950
  var spacings = getSpaces(props);
5953
5951
  var corners = getCorners(props);
5954
- return "\n height: 26px;\n \n .Mui-selected.MuiToggleButton-root {\n background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n \n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiToggleButton-root {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n line-height: 0px;\n color: #000;\n padding: 0;\n\n &:hover {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiSvgIcon-root {\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n }\n ");
5952
+ return "\n height: 26px;\n\n .Mui-selected.MuiToggleButton-root {\n background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n\n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiToggleButton-root {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n line-height: 0px;\n color: #000;\n padding: 0;\n\n &:hover {\n border-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n .MuiSvgIcon-root {\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n padding-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n padding-top: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n }\n ");
5955
5953
  });
5956
5954
  var templateObject_1$8;
5957
5955
 
@@ -5967,7 +5965,7 @@ var SegmentedControl = function (props) {
5967
5965
  };
5968
5966
  return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ color: "primary", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
5969
5967
  var iconName = button.iconName, tooltipText = button.tooltipText;
5970
- return (jsxRuntime.jsx(ToggleButton, { "aria-label": tooltipText, disableRipple: true, value: tooltipText, children: jsxRuntime.jsx(Tooltip, { title: tooltipText, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(Icon, { sdsIcon: iconName, sdsSize: "s", sdsType: "button" }) }) }) }, tooltipText));
5968
+ return (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, disableRipple: true, value: tooltipText, children: jsxRuntime.jsx(Tooltip, { title: tooltipText, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(Icon, { sdsIcon: iconName, sdsSize: "s", sdsType: "button" }) }) }) }, tooltipText));
5971
5969
  }), ";"] })));
5972
5970
  };
5973
5971
 
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { AccordionDetailsProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PopperProps, PaperProps, SliderProps, SwitchProps, TabsProps } from "@mui/material";
2
+ import { AccordionDetailsProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PopperProps, PaperProps, SliderProps, SwitchProps, TabsProps, ToggleButtonGroupProps } from "@mui/material";
3
3
  import { AccordionProps as RawAccordionProps } from "@mui/material";
4
4
  import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
5
5
  import { AutocompleteProps as MuiAutocompleteProps } from "@mui/material";
@@ -34,9 +34,6 @@ import { AlertProps as RawAlertProps } from "@mui/lab";
34
34
  import { AlertProps as AlertProps$0 } from "@mui/lab";
35
35
  import { AlertTitleProps } from "@mui/material/AlertTitle";
36
36
  import { AutocompleteValue } from "@mui/material/useAutocomplete";
37
- import { AutocompleteProps as AutocompleteProps$1 } from "@mui/material/Autocomplete";
38
- import { AutocompleteRenderInputParams as AutocompleteRenderInputParams$0 } from "@mui/material/Autocomplete";
39
- import { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
40
37
  declare const AccordionDetails: (props: AccordionDetailsProps) => JSX.Element;
41
38
  interface SdsAccordionHeaderProps {
42
39
  subtitle?: string;
@@ -661,7 +658,7 @@ interface InputDropdownProps extends CommonThemeProps {
661
658
  intent?: "default" | "error" | "warning";
662
659
  label: ReactNode;
663
660
  onClick: (event: React.MouseEvent<HTMLElement>) => void;
664
- open?: boolean;
661
+ state?: "default" | "open";
665
662
  sdsStage: "default" | "userInput";
666
663
  sdsStyle?: "minimal" | "square" | "rounded";
667
664
  sdsType?: "label" | "value";
@@ -921,10 +918,10 @@ interface DefaultMenuSelectOption {
921
918
  }
922
919
  interface MenuSelectExtraProps extends StyleProps$2 {
923
920
  keepSearchOnSelect?: boolean;
924
- renderInput?: (params: AutocompleteRenderInputParams$0) => React.ReactNode;
921
+ renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
925
922
  InputBaseProps?: Partial<InputSearchProps>;
926
923
  }
927
- type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "content">;
924
+ type CustomAutocompleteProps$1<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps$0<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "nonce" | "rev" | "rel" | "content">;
928
925
  type MenuSelectProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = CustomAutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo> & MenuSelectExtraProps;
929
926
  /**
930
927
  * @see https://mui.com/material-ui/react-autocomplete/