@czi-sds/components 21.6.2 → 21.7.0

package/dist/index.cjs.js

@@ -287,7 +287,270 @@ var sharedAppTheme = {
             header: fontFamily,
             tabular: fontFamily,
         },
-        styles: {
+        narrowStyles: {
+            body: {
+                regular: {
+                    button: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0.08px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    l: {
+                        fontSize: 16,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "26px",
+                        textTransform: "none",
+                    },
+                    m: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    s: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0.08px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0.08px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    xxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                    xxxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                },
+                semibold: {
+                    button: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.08px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    l: {
+                        fontSize: 16,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "26px",
+                        textTransform: "none",
+                    },
+                    m: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    s: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.08px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.08px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    xxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                    xxxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                },
+            },
+            caps: {
+                semibold: {
+                    xxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.5px",
+                        lineHeight: "18px",
+                        textTransform: "uppercase",
+                    },
+                    xxxs: {
+                        fontSize: 11,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.5px",
+                        lineHeight: "16px",
+                        textTransform: "uppercase",
+                    },
+                    xxxxs: {
+                        fontSize: 11,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.5px",
+                        lineHeight: "16px",
+                        textTransform: "uppercase",
+                    },
+                },
+            },
+            code: {
+                regular: {
+                    s: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                },
+                semibold: {
+                    s: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                },
+            },
+            header: {
+                semibold: {
+                    l: {
+                        fontSize: 16,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "22px",
+                        textTransform: "none",
+                    },
+                    m: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    s: {
+                        fontSize: 14,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.08px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                    xl: {
+                        fontSize: 18,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.08px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                    xxl: {
+                        fontSize: 22,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "30px",
+                        textTransform: "none",
+                    },
+                    xxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                    xxxs: {
+                        fontSize: 12,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0.1px",
+                        lineHeight: "18px",
+                        textTransform: "none",
+                    },
+                },
+            },
+            tabular: {
+                regular: {
+                    s: {
+                        fontSize: 14,
+                        fontVariantNumeric: tabularNums,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontVariantNumeric: tabularNums,
+                        fontWeight: FontWeight.regular,
+                        letterSpacing: "0px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                },
+                semibold: {
+                    s: {
+                        fontSize: 14,
+                        fontVariantNumeric: tabularNums,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "24px",
+                        textTransform: "none",
+                    },
+                    xs: {
+                        fontSize: 13,
+                        fontVariantNumeric: tabularNums,
+                        fontWeight: FontWeight.semibold,
+                        letterSpacing: "0px",
+                        lineHeight: "20px",
+                        textTransform: "none",
+                    },
+                },
+            },
+        },
+        wideStyles: {
             body: {
                 regular: {
                     button: {
@@ -894,6 +1157,13 @@ var SDSPaletteDark = function (appTheme) {
 function makeThemeOptions(appTheme, mode) {
     return {
         app: appTheme,
+        breakpoints: {
+            values: {
+                lg: 1024,
+                md: 512,
+                sm: 0,
+            },
+        },
         components: {
             MuiButtonBase: {
                 defaultProps: {
@@ -1072,20 +1342,20 @@ function makeThemeOptions(appTheme, mode) {
             },
         },
         typography: {
-            body1: appTheme.typography.styles.body.regular.xs,
-            body2: appTheme.typography.styles.body.regular.xxs,
-            button: appTheme.typography.styles.body.regular.button,
-            caption: appTheme.typography.styles.body.regular.xxxs,
+            body1: appTheme.typography.wideStyles.body.regular.xs,
+            body2: appTheme.typography.wideStyles.body.regular.xxs,
+            button: appTheme.typography.wideStyles.body.regular.button,
+            caption: appTheme.typography.wideStyles.body.regular.xxxs,
             fontFamily: "".concat(appTheme.typography.fontFamily.body, ", sans-serif"),
-            h1: appTheme.typography.styles.header.semibold.xxl,
-            h2: appTheme.typography.styles.header.semibold.xl,
-            h3: appTheme.typography.styles.header.semibold.l,
-            h4: appTheme.typography.styles.header.semibold.m,
-            h5: appTheme.typography.styles.header.semibold.s,
-            h6: appTheme.typography.styles.header.semibold.xs,
-            overline: appTheme.typography.styles.caps.semibold.xxxs,
-            subtitle1: appTheme.typography.styles.body.regular.xs,
-            subtitle2: appTheme.typography.styles.header.semibold.xxs,
+            h1: appTheme.typography.wideStyles.header.semibold.xxl,
+            h2: appTheme.typography.wideStyles.header.semibold.xl,
+            h3: appTheme.typography.wideStyles.header.semibold.l,
+            h4: appTheme.typography.wideStyles.header.semibold.m,
+            h5: appTheme.typography.wideStyles.header.semibold.s,
+            h6: appTheme.typography.wideStyles.header.semibold.xs,
+            overline: appTheme.typography.wideStyles.caps.semibold.xxxs,
+            subtitle1: appTheme.typography.wideStyles.body.regular.xs,
+            subtitle2: appTheme.typography.wideStyles.header.semibold.xxs,
         },
     };
 }
@@ -1169,6 +1439,10 @@ var getBorders = function (_a) {
     var theme = _a.theme;
     return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.borders) || null;
 };
+var getBreakpoints = function (_a) {
+    var theme = _a.theme;
+    return (theme === null || theme === void 0 ? void 0 : theme.breakpoints) || null;
+};
 
 function focusVisibleA11yStyle(props) {
     var _a;
@@ -1176,13 +1450,18 @@ function focusVisibleA11yStyle(props) {
     return "\n      &.Mui-focusVisible, &:focus-visible {\n        outline: 2px solid ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n        outline-offset: 1px;\n      }\n  ");
 }
 
-var fontBody = function (fontSize, fontWeight) {
+var fontBody = function (fontSize, fontWeight, isNarrow) {
     if (fontWeight === void 0) { fontWeight = "regular"; }
+    if (isNarrow === void 0) { isNarrow = false; }
     return function (props) {
+        var _a;
         var typography = getTypography(props);
         if (!typography)
             return null;
-        var body = typography.styles.body, bodyFontFamily = typography.fontFamily.body;
+        var body = typography.wideStyles.body, narrowBody = typography.narrowStyles.body, bodyFontFamily = typography.fontFamily.body;
+        if (isNarrow) {
+            return react.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n        ", " {\n          ", "\n        }\n      "], ["\n        ", " {\n          ", "\n        }\n      "])), (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints.down("md"), themeToCss(narrowBody[fontWeight][fontSize], bodyFontFamily));
+        }
         return themeToCss(body[fontWeight][fontSize], bodyFontFamily);
     };
 };
@@ -1198,24 +1477,32 @@ var fontBodySemiboldS = fontBody("s", "semibold");
 var fontBodySemiboldXs = fontBody("xs", "semibold");
 var fontBodySemiboldXxs = fontBody("xxs", "semibold");
 var fontBodySemiboldXxxs = fontBody("xxxs", "semibold");
-var fontCaps = function (fontSize) {
+var fontCaps = function (fontSize, isNarrow) {
+    if (isNarrow === void 0) { isNarrow = false; }
     return function (props) {
+        var _a;
         var typography = getTypography(props);
         if (!typography)
             return null;
-        var caps = typography.styles.caps, capsFontFamily = typography.fontFamily.caps;
-        return react.css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n      ", "\n      text-transform: uppercase;\n    "], ["\n      ", "\n      text-transform: uppercase;\n    "])), themeToCss(caps.semibold[fontSize], capsFontFamily));
+        var caps = typography.wideStyles.caps, narrowCaps = typography.narrowStyles.caps, capsFontFamily = typography.fontFamily.caps;
+        return react.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n      text-transform: uppercase;\n\n      ", "\n    "], ["\n      text-transform: uppercase;\n\n      ", "\n    "])), isNarrow
+            ? react.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));
     };
 };
 var fontCapsXxs = fontCaps("xxs");
 var fontCapsXxxs = fontCaps("xxxs");
 var fontCapsXxxxs = fontCaps("xxxxs");
-var fontHeader = function (fontSize) {
+var fontHeader = function (fontSize, isNarrow) {
+    if (isNarrow === void 0) { isNarrow = false; }
     return function (props) {
+        var _a;
         var typography = getTypography(props);
         if (!typography)
             return null;
-        var header = typography.styles.header, headerFontFamily = typography.fontFamily.header;
+        var header = typography.wideStyles.header, narrowHeader = typography.narrowStyles.header, headerFontFamily = typography.fontFamily.header;
+        if (isNarrow) {
+            return react.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));
+        }
         return themeToCss(header.semibold[fontSize], headerFontFamily);
     };
 };
@@ -1227,28 +1514,36 @@ var fontHeaderS = fontHeader("s");
 var fontHeaderXs = fontHeader("xs");
 var fontHeaderXxs = fontHeader("xxs");
 var fontHeaderXxxs = fontHeader("xxxs");
-var fontCode = function (fontSize, fontWeight) {
+var fontCode = function (fontSize, fontWeight, isNarrow) {
     if (fontWeight === void 0) { fontWeight = "regular"; }
+    if (isNarrow === void 0) { isNarrow = false; }
     return function (props) {
+        var _a;
         var typography = getTypography(props);
         if (!typography)
             return null;
-        var code = typography.styles.code, codeFontFamily = typography.fontFamily.code;
-        return react.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), themeToCss(code[fontWeight][fontSize], codeFontFamily));
+        var code = typography.wideStyles.code, narrowCode = typography.narrowStyles.code, codeFontFamily = typography.fontFamily.code;
+        if (isNarrow) {
+            return react.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));
+        }
+        return themeToCss(code[fontWeight][fontSize], codeFontFamily);
     };
 };
 var fontCodeXs = fontCode("xs", "regular");
 var fontCodeS = fontCode("s", "regular");
 var fontCodeSemiboldXs = fontCode("xs", "semibold");
 var fontCodeSemiboldS = fontCode("s", "semibold");
-var fontTabular = function (fontSize, fontWeight) {
+var fontTabular = function (fontSize, fontWeight, isNarrow) {
     if (fontWeight === void 0) { fontWeight = "regular"; }
+    if (isNarrow === void 0) { isNarrow = false; }
     return function (props) {
+        var _a;
         var typography = getTypography(props);
         if (!typography)
             return null;
-        var tabular = typography.styles.tabular, tabularFontFamily = typography.fontFamily.tabular;
-        return react.css(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n      ", "\n      font-variant-numeric: tabular-nums;\n    "], ["\n      ", "\n      font-variant-numeric: tabular-nums;\n    "])), themeToCss(tabular[fontWeight][fontSize], tabularFontFamily));
+        var tabular = typography.wideStyles.tabular, narrowTabular = typography.narrowStyles.tabular, tabularFontFamily = typography.fontFamily.tabular;
+        return react.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
+            ? react.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));
     };
 };
 var fontTabularXs = fontTabular("xs", "regular");
@@ -1257,9 +1552,9 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
 var fontTabularSemiboldS = fontTabular("s", "semibold");
 function themeToCss(fontTheme, fontFamily) {
     if (fontFamily === void 0) { fontFamily = "inherit"; }
-    return react.css(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: ", ";\n    letter-spacing: ", ";\n    font-weight: ", ";\n    text-transform: ", ";\n  "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
+    return react.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);
 }
-var templateObject_1$Y, templateObject_2$C, templateObject_3$t, templateObject_4$p;
+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;
 
 var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyS$1, function (props) {
     var spaces = getSpaces(props);
@@ -4476,7 +4771,8 @@ var rounded$3 = function (props) {
 var applyIntentColor$2 = function (props, intent) {
     var _a, _b, _c, _d;
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: 1px solid ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: 1px solid ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
+    var borders = getBorders(props);
+    return react.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  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
 };
 var disabledStyled$2 = function (props) {
     var _a, _b, _c, _d;
@@ -4497,7 +4793,7 @@ var StyledSearchBase = styled__default.default(material.TextField, {
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        opacity: 0;\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: 1;\n\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "], ["\n      margin-top: ", "px;\n      margin-bottom: ", "px;\n      margin-right: ", "px;\n      min-width: 120px;\n      display: block;\n\n      [type=\"search\"]::-webkit-search-cancel-button {\n        -webkit-appearance: none;\n        appearance: none;\n      }\n\n      & .input-search-clear-icon {\n        opacity: 0;\n        cursor: pointer;\n\n        svg {\n          height: ", "px;\n          width: ", "px;\n        }\n      }\n\n      .", " {\n        padding: 0 ", "px;\n        background-color: ", ";\n        width: 100%;\n\n        .", " {\n          padding-right: ", "px;\n        }\n\n        .MuiInputAdornment-positionEnd {\n          position: absolute;\n          right: ", "px;\n        }\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        &:hover .input-search-clear-icon,\n        &:focus-within .input-search-clear-icon {\n          opacity: 1;\n\n          svg {\n            color: ", " !important;\n          }\n\n          &:hover {\n            svg {\n              color: ", " !important;\n            }\n          }\n\n          &:active {\n            svg {\n              color: ", " !important;\n            }\n          }\n        }\n      }\n\n      .", " {\n        ", "\n        padding: ", "px ", "px;\n        height: unset;\n        box-sizing: border-box;\n        background-color: ", ";\n      }\n\n      .", ":hover {\n        & .", ":last-of-type {\n          svg {\n            color: ", ";\n          }\n        }\n        .", " {\n          border: 1px solid ", ";\n        }\n      }\n\n      .", ".", " {\n        outline: none;\n\n        .", " {\n          border: 1px solid ", ";\n        }\n\n        .", " .", ":last-of-type {\n          cursor: default;\n          svg {\n            color: ", ";\n          }\n        }\n      }\n\n      &.user-is-tabbing .", ":focus-within {\n        outline: 2px solid ", ";\n        outline-offset: 1px;\n      }\n\n      ", "\n      ", "\n      ", "\n      ", "\n      ", "\n    "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
+    return react.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, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.notchedOutline, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.surfacePrimary, material.outlinedInputClasses.root, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.icon, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderHover, sdsStyle === "rounded" && rounded$3(props), intent === "negative" && applyIntentColor$2(props, "negative"), intent === "notice" && applyIntentColor$2(props, "notice"), intent === "positive" && applyIntentColor$2(props, "positive"), disabled && disabledStyled$2(props));
 });
 var StyledInputAdornment = styled__default.default(material.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"])));
 var templateObject_1$Q, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
@@ -4786,10 +5082,10 @@ var StyledMenuItemText = styled__default.default("div")(templateObject_6$8 || (t
 var templateObject_1$O, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
 
 var AutocompleteBase = function (props) {
-    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;
+    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;
     var theme = material.useTheme();
     var ref = React.useRef(null);
-    var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
+    var _s = React.useState(""), inputValue = _s[0], setInputValue = _s[1];
     useDetectUserTabbing(ref);
     return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ ref: ref, clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple, 
         /**
@@ -4866,7 +5162,7 @@ var AutocompleteBase = function (props) {
                             // when the search prop is set to false.
                             tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
                                 sdsType: "interactive",
-                            }, icon: "Search" }) })) }) }, InputBaseProps)) }));
+                            }, icon: "Search" }) })) }), intent: intent }, InputBaseProps)) }));
     }
     function defaultOnBlur(event) {
         var _a;
@@ -5404,7 +5700,7 @@ var StyledCallout = styled__default.default(material.Alert, {
     // Title. The padding-top of the Callout Message is calculated based on the difference
     // between the height of the Icon and the line-height of the Callout Title.
     var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
-        parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.styles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
+        parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.wideStyles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
         2);
     return "\n      width: 360px;\n      margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0;\n      border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n      color: ").concat((_l = palette === null || palette === void 0 ? void 0 : palette.text) === null || _l === void 0 ? void 0 : _l.primary, ";\n      padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      background-color: ").concat(backgroundColor, ";\n\n      .").concat(material.alertClasses.icon, " {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, "px;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        padding: 0;\n\n        path {\n          fill: ").concat(iconColor, ";\n        }\n      }\n\n      .").concat(material.alertClasses.message, " {\n        padding: ").concat(alertMessagePaddingTop, "px 0 0;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n        .").concat(material.alertTitleClasses.root, " {\n          margin-top: 0;\n          ").concat(titleBottomMargin, "\n        }\n      }\n\n      .").concat(material.alertClasses.action, " {\n        margin-right: 0;\n        padding: 0;\n        align-items: flex-start;\n        margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n        > button {\n          padding: 0;\n        }\n      }\n    ");
 });
@@ -5971,6 +6267,12 @@ var doNotForwardProps$f = [
     "value",
     "sdsStyle",
 ];
+var intentToColor$2 = {
+    default: "accent",
+    negative: "negative",
+    notice: "notice",
+    positive: "positive",
+};
 var labelFontBodyS = fontBody("s", "regular");
 var labelFontBodyXs = fontBody("xs", "regular");
 var inputDropdownStyles = function (props) {
@@ -6008,15 +6310,20 @@ var userInput = function (props) {
         : "");
 };
 var isOpen = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    var sdsStyle = props.sdsStyle;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var sdsStyle = props.sdsStyle, _k = props.intent, intent = _k === void 0 ? "default" : _k;
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
+    var inputColor = intentToColor$2[intent];
     return react.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"
         ? "\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      ")
-        : "", (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen, sdsStyle === "minimal" ? borders === null || borders === void 0 ? void 0 : borders.none : (_e = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _e === void 0 ? void 0 : _e.open, sdsStyle === "minimal"
-        ? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
-        : "transparent", (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconPrimaryHover, (_h = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _h === void 0 ? void 0 : _h.hover);
+        : "", inputColor === "accent"
+        ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconOpen
+        : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[inputColor]) === null || _e === void 0 ? void 0 : _e.ornament, sdsStyle === "minimal"
+        ? borders === null || borders === void 0 ? void 0 : borders.none
+        : (_f = borders === null || borders === void 0 ? void 0 : borders[inputColor]) === null || _f === void 0 ? void 0 : _f.open, sdsStyle === "minimal"
+        ? ((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover) + "47"
+        : "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);
 };
 var applyIntentColor$1 = function (props, intent) {
     var _a, _b, _c;
@@ -6758,24 +7065,27 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
   })));
 };
 
+var intentToColor$1 = {
+    default: "base",
+    negative: "negative",
+    notice: "notice",
+    positive: "positive",
+};
 var StyledCheckbox = styled__default.default(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     var _g = props.intent, intent = _g === void 0 ? "default" : _g;
     var iconSizes = getIconSizes(props);
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    var intentToColor = {
-        default: "base",
-        negative: "negative",
-        notice: "notice",
-        positive: "positive",
-    };
-    var checkboxColor = intentToColor[intent];
+    var checkboxColor = intentToColor$1[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.checkboxClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.checkboxClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.checkboxClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.checkboxClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        padding: 0;\n        margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n        border-radius: 0;\n      }\n\n      .MuiSvgIcon-root {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n      }\n    ");
 });
 var StyledFormControlLabel$1 = styled__default.default(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a, _b, _c, _d;
+    var disabled = props.disabled;
     var spaces = getSpaces(props);
-    return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;\n    ");
+    var semanticColors = getSemanticColors(props);
+    return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;\n      user-select: ").concat(disabled ? "none" : "auto", ";\n\n      &:hover {\n        ").concat(StyledCheckbox, " {\n          color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n\n          &.").concat(material.checkboxClasses.disabled, " {\n            color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderDisabled, ";\n          }\n\n          &.").concat(material.checkboxClasses.checked, " {\n            color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, ";\n            background-color: transparent;\n\n            &.").concat(material.checkboxClasses.disabled, " {\n              color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderDisabled, ";\n            }\n          }\n        }\n      }\n    ");
 });
 var StyledLabelContainer$1 = styled__default.default("span")(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
 var StyledCheckboxLabel = styled__default.default("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
@@ -6839,24 +7149,27 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
   })));
 };
 
+var intentToColor = {
+    default: "base",
+    negative: "negative",
+    notice: "notice",
+    positive: "positive",
+};
 var StyledRadioButton = styled__default.default(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b, _c, _d, _e, _f;
     var _g = props.intent, intent = _g === void 0 ? "default" : _g;
     var spaces = getSpaces(props);
     var iconSizes = getIconSizes(props);
     var semanticColors = getSemanticColors(props);
-    var intentToColor = {
-        default: "base",
-        negative: "negative",
-        notice: "notice",
-        positive: "positive",
-    };
     var radioColor = intentToColor[intent];
     return "\n      color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n        background-color: transparent;\n      }\n\n      &.").concat(material.radioClasses.disabled, " {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n      }\n\n      &.").concat(material.radioClasses.checked, " {\n        color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n        &:hover {\n          color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n          background-color: transparent;\n        }\n\n        &.").concat(material.radioClasses.disabled, " {\n          color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n        }\n      }\n\n      &.").concat(material.radioClasses.root, " {\n        ").concat(focusVisibleA11yStyle(props), "\n        margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n        padding: 0;\n      }\n\n      .MuiSvgIcon-root {\n        height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n        width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n      }\n    ");
 });
 var StyledFormControlLabel = styled__default.default(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a, _b, _c, _d;
+    var disabled = props.disabled;
     var spaces = getSpaces(props);
-    return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;\n    ");
+    var semanticColors = getSemanticColors(props);
+    return "\n      align-items: start;\n      margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-left: 0;\n      margin-right: 0;\n      width: fit-content;user-select: \n      ").concat(disabled ? "none" : "auto", ";\n\n      &:hover {\n        ").concat(StyledRadioButton, " {\n          color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n\n          &.").concat(material.radioClasses.disabled, " {\n            color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderDisabled, ";\n          }\n\n          &.").concat(material.radioClasses.checked, " {\n            color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, ";\n            background-color: transparent;\n\n            &.").concat(material.radioClasses.disabled, " {\n              color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.borderDisabled, ";\n            }\n          }\n        }\n      }\n    ");
 });
 var StyledLabelContainer = styled__default.default("span")(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n"])));
 var StyledRadioLabel = styled__default.default("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), fontBodyXs$2, function (props) {
@@ -6936,7 +7249,7 @@ var applyIntentColor = function (props, intent) {
     var _a, _b, _c, _d;
     var borders = getBorders(props);
     var semanticColors = getSemanticColors(props);
-    return react.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
+    return react.css(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "], ["\n    .", " .", " {\n      border: ", ";\n    }\n\n    .", ":hover\n      .", " {\n      border: ", ";\n    }\n\n    .", ".", " {\n      .", " {\n        border: ", ";\n      }\n\n      .", " .", ":last-of-type {\n        cursor: default;\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _d === void 0 ? void 0 : _d.ornament);
 };
 var disabledStyled$1 = function (props) {
     var _a, _b, _c;
@@ -7554,7 +7867,7 @@ var StyledNotification = styled__default.default(material.Alert, {
     // Title. The padding-top of the Notification Title is calculated based on the difference
     // between the height of the Icon and the line-height of the Notification Title.
     var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
-        parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.styles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
+        parseInt(String((_k = (_j = (_h = (_g = (_f = typography === null || typography === void 0 ? void 0 : typography.wideStyles) === null || _f === void 0 ? void 0 : _f.body) === null || _g === void 0 ? void 0 : _g.regular) === null || _h === void 0 ? void 0 : _h.xs) === null || _j === void 0 ? void 0 : _j.lineHeight) !== null && _k !== void 0 ? _k : "0"))) /
         2);
     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    ");
 });
@@ -7904,13 +8217,11 @@ var SegmentedControl = function (props) {
     var isControlled = valueProp !== undefined;
     var value = isControlled ? valueProp : active;
     var handleActive = function (event, newActive) {
-        if (newActive !== null) {
-            if (!isControlled) {
-                setActive(newActive);
-            }
-            if (onChangeProp) {
-                onChangeProp(event, newActive);
-            }
+        if (!isControlled) {
+            setActive(newActive);
+        }
+        if (onChangeProp) {
+            onChangeProp(event, newActive);
         }
     };
     return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
@@ -8290,6 +8601,7 @@ exports.fontTabularSemiboldS = fontTabularSemiboldS;
 exports.fontTabularSemiboldXs = fontTabularSemiboldXs;
 exports.fontTabularXs = fontTabularXs;
 exports.getBorders = getBorders;
+exports.getBreakpoints = getBreakpoints;
 exports.getColors = getColors;
 exports.getCorners = getCorners;
 exports.getFontWeights = getFontWeights;