@czi-sds/components 21.2.0 → 21.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +41 -11
- package/dist/index.cjs.js +492 -367
- package/dist/index.esm.d.ts +41 -11
- package/dist/index.esm.js +491 -369
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +34 -10
- package/dist/variables.scss +34 -10
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -573,27 +573,39 @@ SDSLightAppTheme.borders = {
|
|
|
573
573
|
table: "1px solid ".concat(SDSLightAppTheme.colors.gray[300]),
|
|
574
574
|
},
|
|
575
575
|
beta: {
|
|
576
|
-
default: "1px solid ".concat(SDSLightAppTheme.colors.purple[
|
|
576
|
+
default: "1px solid ".concat(SDSLightAppTheme.colors.purple[600]),
|
|
577
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.purple[600]),
|
|
578
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.purple[600]),
|
|
577
579
|
},
|
|
578
580
|
info: {
|
|
579
|
-
default: "1px solid ".concat(SDSLightAppTheme.colors.blue[
|
|
581
|
+
default: "1px solid ".concat(SDSLightAppTheme.colors.blue[600]),
|
|
582
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.blue[600]),
|
|
583
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.blue[600]),
|
|
580
584
|
},
|
|
581
585
|
link: {
|
|
582
586
|
dashed: "1px dashed",
|
|
583
587
|
solid: "1px solid",
|
|
584
588
|
},
|
|
585
589
|
negative: {
|
|
586
|
-
default: "1px solid ".concat(SDSLightAppTheme.colors.red[
|
|
590
|
+
default: "1px solid ".concat(SDSLightAppTheme.colors.red[600]),
|
|
591
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.red[600]),
|
|
592
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.red[600]),
|
|
587
593
|
},
|
|
588
594
|
neutral: {
|
|
589
595
|
default: "1px solid ".concat(SDSLightAppTheme.colors.gray[500]),
|
|
596
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.gray[500]),
|
|
597
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.gray[500]),
|
|
590
598
|
},
|
|
591
599
|
none: "none",
|
|
592
600
|
notice: {
|
|
593
|
-
default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[
|
|
601
|
+
default: "1px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
|
|
602
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
|
|
603
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.yellow[600]),
|
|
594
604
|
},
|
|
595
605
|
positive: {
|
|
596
|
-
default: "1px solid ".concat(SDSLightAppTheme.colors.green[
|
|
606
|
+
default: "1px solid ".concat(SDSLightAppTheme.colors.green[600]),
|
|
607
|
+
extraThick: "4px solid ".concat(SDSLightAppTheme.colors.green[600]),
|
|
608
|
+
thick: "2px solid ".concat(SDSLightAppTheme.colors.green[600]),
|
|
597
609
|
},
|
|
598
610
|
};
|
|
599
611
|
var SDSDarkAppTheme = __assign(__assign({}, sharedAppTheme), { colors: SDSDarkThemeColors });
|
|
@@ -615,27 +627,39 @@ SDSDarkAppTheme.borders = {
|
|
|
615
627
|
table: "1px solid ".concat(SDSDarkAppTheme.colors.gray[300]),
|
|
616
628
|
},
|
|
617
629
|
beta: {
|
|
618
|
-
default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[
|
|
630
|
+
default: "1px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
|
|
631
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
|
|
632
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.purple[600]),
|
|
619
633
|
},
|
|
620
634
|
info: {
|
|
621
|
-
default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[
|
|
635
|
+
default: "1px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
|
|
636
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
|
|
637
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.blue[600]),
|
|
622
638
|
},
|
|
623
639
|
link: {
|
|
624
640
|
dashed: "1px dashed",
|
|
625
641
|
solid: "1px solid",
|
|
626
642
|
},
|
|
627
643
|
negative: {
|
|
628
|
-
default: "1px solid ".concat(SDSDarkAppTheme.colors.red[
|
|
644
|
+
default: "1px solid ".concat(SDSDarkAppTheme.colors.red[600]),
|
|
645
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.red[600]),
|
|
646
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.red[600]),
|
|
629
647
|
},
|
|
630
648
|
neutral: {
|
|
631
649
|
default: "1px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
|
|
650
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
|
|
651
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.gray[500]),
|
|
632
652
|
},
|
|
633
653
|
none: "none",
|
|
634
654
|
notice: {
|
|
635
|
-
default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[
|
|
655
|
+
default: "1px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
|
|
656
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
|
|
657
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.yellow[600]),
|
|
636
658
|
},
|
|
637
659
|
positive: {
|
|
638
|
-
default: "1px solid ".concat(SDSDarkAppTheme.colors.green[
|
|
660
|
+
default: "1px solid ".concat(SDSDarkAppTheme.colors.green[600]),
|
|
661
|
+
extraThick: "4px solid ".concat(SDSDarkAppTheme.colors.green[600]),
|
|
662
|
+
thick: "2px solid ".concat(SDSDarkAppTheme.colors.green[600]),
|
|
639
663
|
},
|
|
640
664
|
};
|
|
641
665
|
/**
|
|
@@ -921,6 +945,11 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
921
945
|
disableRipple: true,
|
|
922
946
|
},
|
|
923
947
|
},
|
|
948
|
+
MuiDrawer: {
|
|
949
|
+
defaultProps: {
|
|
950
|
+
hideBackdrop: true,
|
|
951
|
+
},
|
|
952
|
+
},
|
|
924
953
|
MuiLink: {
|
|
925
954
|
defaultProps: {
|
|
926
955
|
underline: "hover",
|
|
@@ -1220,7 +1249,7 @@ var fontCaps = function (fontSize) {
|
|
|
1220
1249
|
if (!typography)
|
|
1221
1250
|
return null;
|
|
1222
1251
|
var caps = typography.styles.caps, capsFontFamily = typography.fontFamily.caps;
|
|
1223
|
-
return react.css(templateObject_1$
|
|
1252
|
+
return react.css(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n text-transform: uppercase;\n "], ["\n ", "\n text-transform: uppercase;\n "])), themeToCss(caps.semibold[fontSize], capsFontFamily));
|
|
1224
1253
|
};
|
|
1225
1254
|
};
|
|
1226
1255
|
var fontCapsXxs = fontCaps("xxs");
|
|
@@ -1250,7 +1279,7 @@ var fontCode = function (fontSize, fontWeight) {
|
|
|
1250
1279
|
if (!typography)
|
|
1251
1280
|
return null;
|
|
1252
1281
|
var code = typography.styles.code, codeFontFamily = typography.fontFamily.code;
|
|
1253
|
-
return react.css(templateObject_2$
|
|
1282
|
+
return react.css(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), themeToCss(code[fontWeight][fontSize], codeFontFamily));
|
|
1254
1283
|
};
|
|
1255
1284
|
};
|
|
1256
1285
|
var fontCodeXs = fontCode("xs", "regular");
|
|
@@ -1264,7 +1293,7 @@ var fontTabular = function (fontSize, fontWeight) {
|
|
|
1264
1293
|
if (!typography)
|
|
1265
1294
|
return null;
|
|
1266
1295
|
var tabular = typography.styles.tabular, tabularFontFamily = typography.fontFamily.tabular;
|
|
1267
|
-
return react.css(templateObject_3$
|
|
1296
|
+
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));
|
|
1268
1297
|
};
|
|
1269
1298
|
};
|
|
1270
1299
|
var fontTabularXs = fontTabular("xs", "regular");
|
|
@@ -1273,33 +1302,33 @@ var fontTabularSemiboldXs = fontTabular("xs", "semibold");
|
|
|
1273
1302
|
var fontTabularSemiboldS = fontTabular("s", "semibold");
|
|
1274
1303
|
function themeToCss(fontTheme, fontFamily) {
|
|
1275
1304
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1276
|
-
return react.css(templateObject_4$
|
|
1305
|
+
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);
|
|
1277
1306
|
}
|
|
1278
|
-
var templateObject_1$
|
|
1307
|
+
var templateObject_1$X, templateObject_2$C, templateObject_3$t, templateObject_4$p;
|
|
1279
1308
|
|
|
1280
|
-
var StyledAccordionDetails = styled(material.AccordionDetails)(templateObject_2$
|
|
1309
|
+
var StyledAccordionDetails = styled(material.AccordionDetails)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1281
1310
|
var spaces = getSpaces(props);
|
|
1282
|
-
return react.css(templateObject_1$
|
|
1311
|
+
return react.css(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: ", "px ", "px ", "px;\n "], ["\n padding: ", "px ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
1283
1312
|
});
|
|
1284
|
-
var templateObject_1$
|
|
1313
|
+
var templateObject_1$W, templateObject_2$B;
|
|
1285
1314
|
|
|
1286
1315
|
var AccordionDetails = function (props) {
|
|
1287
1316
|
var children = props.children;
|
|
1288
1317
|
return jsxRuntime.jsx(StyledAccordionDetails, { children: children });
|
|
1289
1318
|
};
|
|
1290
1319
|
|
|
1291
|
-
var StyledAccordionHeader = styled(material.AccordionSummary)(templateObject_2$
|
|
1320
|
+
var StyledAccordionHeader = styled(material.AccordionSummary)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
1292
1321
|
var _a, _b;
|
|
1293
1322
|
var spaces = getSpaces(props);
|
|
1294
1323
|
var semanticColors = getSemanticColors(props);
|
|
1295
|
-
return react.css(templateObject_1$
|
|
1324
|
+
return react.css(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover);
|
|
1296
1325
|
});
|
|
1297
|
-
var StyledSubtitle = styled("p")(templateObject_4$
|
|
1326
|
+
var StyledSubtitle = styled("p")(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1298
1327
|
var _a;
|
|
1299
1328
|
var semanticColors = getSemanticColors(props);
|
|
1300
|
-
return react.css(templateObject_3$
|
|
1329
|
+
return react.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
1301
1330
|
});
|
|
1302
|
-
var templateObject_1$
|
|
1331
|
+
var templateObject_1$V, templateObject_2$A, templateObject_3$s, templateObject_4$o;
|
|
1303
1332
|
|
|
1304
1333
|
var _path$2a, _path2$D, _path3$6;
|
|
1305
1334
|
function _extends$2f() { _extends$2f = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2f.apply(this, arguments); }
|
|
@@ -3998,33 +4027,33 @@ function iconSize(props) {
|
|
|
3998
4027
|
var _a, _b;
|
|
3999
4028
|
var sdsSize = props.sdsSize;
|
|
4000
4029
|
var iconSizes = getIconSizes(props);
|
|
4001
|
-
return react.css(templateObject_1$
|
|
4030
|
+
return react.css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n "], ["\n height: ", "px;\n width: ", "px;\n "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
|
|
4002
4031
|
}
|
|
4003
4032
|
function buttonStyle() {
|
|
4004
|
-
return react.css(templateObject_2$
|
|
4033
|
+
return react.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
|
|
4005
4034
|
}
|
|
4006
4035
|
function staticStyle(props) {
|
|
4007
4036
|
var _a;
|
|
4008
4037
|
var _b = props.iconColor, iconColor = _b === void 0 ? "blue" : _b, _c = props.shade, shade = _c === void 0 ? 500 : _c;
|
|
4009
4038
|
var colors = getColors(props);
|
|
4010
|
-
return react.css(templateObject_3$
|
|
4039
|
+
return react.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade]);
|
|
4011
4040
|
}
|
|
4012
4041
|
function interactive(props) {
|
|
4013
4042
|
var _a, _b, _c, _d;
|
|
4014
4043
|
var _e = props.iconColor, iconColor = _e === void 0 ? "blue" : _e, _f = props.shade, shade = _f === void 0 ? 500 : _f;
|
|
4015
4044
|
var colors = getColors(props);
|
|
4016
4045
|
var semanticColors = getSemanticColors(props);
|
|
4017
|
-
return react.css(templateObject_4$
|
|
4046
|
+
return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
|
|
4018
4047
|
}
|
|
4019
|
-
var doNotForwardProps$
|
|
4048
|
+
var doNotForwardProps$r = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
|
|
4020
4049
|
var StyledSvgIcon = styled(material.SvgIcon, {
|
|
4021
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4022
|
-
})(templateObject_6$
|
|
4050
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
4051
|
+
})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4023
4052
|
var sdsType = props.sdsType;
|
|
4024
|
-
return react.css(templateObject_5$
|
|
4053
|
+
return react.css(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
|
|
4025
4054
|
});
|
|
4026
|
-
var StyledIcon = styled("div")(templateObject_7$
|
|
4027
|
-
var templateObject_1$
|
|
4055
|
+
var StyledIcon = styled("div")(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
4056
|
+
var templateObject_1$U, templateObject_2$z, templateObject_3$r, templateObject_4$n, templateObject_5$i, templateObject_6$d, templateObject_7$9;
|
|
4028
4057
|
|
|
4029
4058
|
/**
|
|
4030
4059
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4055,7 +4084,7 @@ var StyledAccordion = styled(material.Accordion, {
|
|
|
4055
4084
|
shouldForwardProp: function (prop) {
|
|
4056
4085
|
return !sdsPropNames$3.includes(prop.toString());
|
|
4057
4086
|
},
|
|
4058
|
-
})(templateObject_2$
|
|
4087
|
+
})(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4059
4088
|
var _a, _b, _c;
|
|
4060
4089
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4061
4090
|
var shadows = getShadows(props);
|
|
@@ -4063,17 +4092,17 @@ var StyledAccordion = styled(material.Accordion, {
|
|
|
4063
4092
|
var borders = getBorders(props);
|
|
4064
4093
|
var spaces = getSpaces(props);
|
|
4065
4094
|
var semanticColors = getSemanticColors(props);
|
|
4066
|
-
return react.css(templateObject_1$
|
|
4095
|
+
return react.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: ", ";\n background-image: none;\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceBackground, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_b = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _b === void 0 ? void 0 : _b.body, useDivider ? (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4067
4096
|
});
|
|
4068
4097
|
var leftPosition = function (props) {
|
|
4069
4098
|
var _a, _b, _c;
|
|
4070
4099
|
var spaces = getSpaces(props);
|
|
4071
4100
|
var iconSizes = getIconSizes(props);
|
|
4072
|
-
return react.css(templateObject_3$
|
|
4101
|
+
return react.css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "], ["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.", " {\n transform: rotate(0deg);\n }\n }\n }\n\n /** This is to adjust the padding of the AccordionDetails when the togglePosition is left\n * The padding-left is the sum of the\n * left padding of the AccordionButton = spaces?.m\n * the width of the expandIcon = iconSizes?.xs.width\n * and the left padding of the AccordionSummary = spaces?.s \n */\n & .", " {\n padding-left: ", "px;\n }\n }\n "])), material.accordionClasses.root, material.accordionSummaryClasses.root, material.accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionSummaryClasses.expanded, material.accordionDetailsClasses.root, ((_a = spaces === null || spaces === void 0 ? void 0 : spaces.m) !== null && _a !== void 0 ? _a : 12) +
|
|
4073
4102
|
((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12) +
|
|
4074
4103
|
((_c = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _c !== void 0 ? _c : 8));
|
|
4075
4104
|
};
|
|
4076
|
-
var templateObject_1$
|
|
4105
|
+
var templateObject_1$T, templateObject_2$y, templateObject_3$q;
|
|
4077
4106
|
|
|
4078
4107
|
/**
|
|
4079
4108
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4089,7 +4118,7 @@ var Accordion = React.forwardRef(function (props, ref) {
|
|
|
4089
4118
|
return (jsxRuntime.jsx(StyledAccordion, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
4090
4119
|
});
|
|
4091
4120
|
|
|
4092
|
-
var StyledAlert = styled(material.Alert)(templateObject_1$
|
|
4121
|
+
var StyledAlert = styled(material.Alert)(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4093
4122
|
var _a;
|
|
4094
4123
|
var colors = getColors(props);
|
|
4095
4124
|
var spaces = getSpaces(props);
|
|
@@ -4116,7 +4145,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4116
4145
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4117
4146
|
}
|
|
4118
4147
|
}
|
|
4119
|
-
var templateObject_1$
|
|
4148
|
+
var templateObject_1$S;
|
|
4120
4149
|
|
|
4121
4150
|
/**
|
|
4122
4151
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4207,7 +4236,7 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
4207
4236
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
4208
4237
|
};
|
|
4209
4238
|
|
|
4210
|
-
var doNotForwardProps$
|
|
4239
|
+
var doNotForwardProps$q = [
|
|
4211
4240
|
"isAllCaps",
|
|
4212
4241
|
"isRounded",
|
|
4213
4242
|
"sdsStyle",
|
|
@@ -4241,11 +4270,11 @@ var ButtonStyles = function (props) {
|
|
|
4241
4270
|
var disabledBorder = variant === "outlined"
|
|
4242
4271
|
? "inset 0 0 0 1px ".concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderDisabled)
|
|
4243
4272
|
: "none";
|
|
4244
|
-
return react.css(templateObject_1$
|
|
4273
|
+
return react.css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n box-shadow: ", ";\n border: none;\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), backgroundColor, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.textPrimaryInverse, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _k === void 0 ? void 0 : _k.fillHover, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.borderHover, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.iconPrimaryInverse, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.textPrimaryInverse, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _p === void 0 ? void 0 : _p.fillPressed, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _q === void 0 ? void 0 : _q.fillPressed, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.iconPrimaryInverse, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.textDisabled, disabledBackgroundColor, disabledBorder, (_t = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _t === void 0 ? void 0 : _t.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_u = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _u === void 0 ? void 0 : _u.width, (_v = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _v === void 0 ? void 0 : _v.width, (_w = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _w === void 0 ? void 0 : _w.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
4245
4274
|
};
|
|
4246
4275
|
var Rounded = function (props) {
|
|
4247
4276
|
var corners = getCorners(props);
|
|
4248
|
-
return react.css(templateObject_2$
|
|
4277
|
+
return react.css(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
4249
4278
|
};
|
|
4250
4279
|
var DestructiveButton = function (props) {
|
|
4251
4280
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4261,13 +4290,13 @@ var DestructiveButton = function (props) {
|
|
|
4261
4290
|
var backgroundColor = variant === "outlined"
|
|
4262
4291
|
? "transparent"
|
|
4263
4292
|
: (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _e === void 0 ? void 0 : _e.fillPrimary;
|
|
4264
|
-
return react.css(templateObject_3$
|
|
4293
|
+
return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.iconPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.iconPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.iconDisabled);
|
|
4265
4294
|
};
|
|
4266
4295
|
var StyledButton$3 = styled(material.Button, {
|
|
4267
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4268
|
-
})(templateObject_5$
|
|
4296
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
4297
|
+
})(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4269
4298
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4270
|
-
return react.css(templateObject_4$
|
|
4299
|
+
return react.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n\n ", "\n ", "\n ", "\n "], ["\n ", "\n\n ", "\n ", "\n ", "\n "])), isAllCaps ? fontCapsXxs(props) : fontBodySemiboldXs(props), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
4271
4300
|
});
|
|
4272
4301
|
// Minimal Button Styles
|
|
4273
4302
|
var Minimal = function (props) {
|
|
@@ -4276,26 +4305,26 @@ var Minimal = function (props) {
|
|
|
4276
4305
|
var spaces = getSpaces(props);
|
|
4277
4306
|
var iconSizes = getIconSizes(props);
|
|
4278
4307
|
var semanticColors = getSemanticColors(props);
|
|
4279
|
-
return react.css(templateObject_6$
|
|
4308
|
+
return react.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxxs(props) : fontBodySemiboldXxs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.iconDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
4280
4309
|
};
|
|
4281
4310
|
var PrimaryMinimalButton = function (props) {
|
|
4282
4311
|
var _a;
|
|
4283
4312
|
var semanticColors = getSemanticColors(props);
|
|
4284
|
-
return react.css(templateObject_7$
|
|
4313
|
+
return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction);
|
|
4285
4314
|
};
|
|
4286
4315
|
var SecondaryMinimalButton = function (props) {
|
|
4287
4316
|
var _a;
|
|
4288
4317
|
var semanticColors = getSemanticColors(props);
|
|
4289
|
-
return react.css(templateObject_8$
|
|
4318
|
+
return react.css(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary);
|
|
4290
4319
|
};
|
|
4291
4320
|
var StyledMinimalButton = styled(material.Button, {
|
|
4292
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4321
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
4293
4322
|
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4294
4323
|
var sdsType = props.sdsType;
|
|
4295
4324
|
return react.css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4296
4325
|
});
|
|
4297
4326
|
var StyledButtonLegacy = styled(material.Button, {
|
|
4298
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4327
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
4299
4328
|
})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4300
4329
|
if (!props.isRounded)
|
|
4301
4330
|
return "";
|
|
@@ -4303,47 +4332,47 @@ var StyledButtonLegacy = styled(material.Button, {
|
|
|
4303
4332
|
var spaces = getSpaces(props);
|
|
4304
4333
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4305
4334
|
});
|
|
4306
|
-
var templateObject_1$
|
|
4335
|
+
var templateObject_1$R, templateObject_2$x, templateObject_3$p, templateObject_4$m, templateObject_5$h, templateObject_6$c, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$2, templateObject_11$1;
|
|
4307
4336
|
|
|
4308
4337
|
var isDisabled$1 = function (props) {
|
|
4309
4338
|
var _a, _b;
|
|
4310
4339
|
var semanticColors = getSemanticColors(props);
|
|
4311
|
-
return react.css(templateObject_1$
|
|
4340
|
+
return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled);
|
|
4312
4341
|
};
|
|
4313
4342
|
var primary$2 = function (props) {
|
|
4314
4343
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4315
4344
|
var semanticColors = getSemanticColors(props);
|
|
4316
|
-
return react.css(templateObject_2$
|
|
4345
|
+
return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.textActionPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
|
|
4317
4346
|
};
|
|
4318
4347
|
var secondary$2 = function (props) {
|
|
4319
4348
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4320
4349
|
var semanticColors = getSemanticColors(props);
|
|
4321
|
-
return react.css(templateObject_3$
|
|
4350
|
+
return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.iconPressed);
|
|
4322
4351
|
};
|
|
4323
4352
|
var tertiary = function (props) {
|
|
4324
4353
|
var _a, _b, _c, _d, _e, _f;
|
|
4325
4354
|
var semanticColors = getSemanticColors(props);
|
|
4326
|
-
return react.css(templateObject_4$
|
|
4355
|
+
return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.iconPrimaryPressed);
|
|
4327
4356
|
};
|
|
4328
4357
|
var small$1 = function (props) {
|
|
4329
4358
|
var sdsType = props.sdsType;
|
|
4330
4359
|
var iconSizes = getIconSizes(props);
|
|
4331
4360
|
var spaces = getSpaces(props);
|
|
4332
|
-
return react.css(templateObject_5$
|
|
4361
|
+
return react.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4333
4362
|
};
|
|
4334
4363
|
var medium$1 = function (props) {
|
|
4335
4364
|
var sdsType = props.sdsType;
|
|
4336
4365
|
var iconSizes = getIconSizes(props);
|
|
4337
4366
|
var spaces = getSpaces(props);
|
|
4338
|
-
return react.css(templateObject_6$
|
|
4367
|
+
return react.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
4339
4368
|
};
|
|
4340
4369
|
var large = function (props) {
|
|
4341
4370
|
var sdsType = props.sdsType;
|
|
4342
4371
|
var iconSizes = getIconSizes(props);
|
|
4343
4372
|
var spaces = getSpaces(props);
|
|
4344
|
-
return react.css(templateObject_7$
|
|
4373
|
+
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
|
|
4345
4374
|
};
|
|
4346
|
-
var doNotForwardProps$
|
|
4375
|
+
var doNotForwardProps$p = [
|
|
4347
4376
|
"on",
|
|
4348
4377
|
"sdsSize",
|
|
4349
4378
|
"sdsType",
|
|
@@ -4352,12 +4381,12 @@ var doNotForwardProps$o = [
|
|
|
4352
4381
|
"sdsIconProps",
|
|
4353
4382
|
];
|
|
4354
4383
|
var StyledButtonIcon = styled(material.IconButton, {
|
|
4355
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4384
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
4356
4385
|
})(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4357
4386
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4358
|
-
return react.css(templateObject_8$
|
|
4387
|
+
return react.css(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4359
4388
|
});
|
|
4360
|
-
var templateObject_1$
|
|
4389
|
+
var templateObject_1$Q, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$g, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$2;
|
|
4361
4390
|
|
|
4362
4391
|
var ButtonIconSizeToSdsIconSize = {
|
|
4363
4392
|
large: "xl",
|
|
@@ -4458,24 +4487,19 @@ var rounded$3 = function (props) {
|
|
|
4458
4487
|
var _a;
|
|
4459
4488
|
var corners = getCorners(props);
|
|
4460
4489
|
var semanticColors = getSemanticColors(props);
|
|
4461
|
-
return react.css(templateObject_1$
|
|
4490
|
+
return react.css(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), material.outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border);
|
|
4462
4491
|
};
|
|
4463
|
-
var
|
|
4492
|
+
var applyIntentColor$2 = function (props, intent) {
|
|
4464
4493
|
var _a, _b, _c, _d;
|
|
4465
4494
|
var semanticColors = getSemanticColors(props);
|
|
4466
|
-
return react.css(templateObject_2$
|
|
4467
|
-
};
|
|
4468
|
-
var warning$1 = function (props) {
|
|
4469
|
-
var _a, _b, _c, _d;
|
|
4470
|
-
var semanticColors = getSemanticColors(props);
|
|
4471
|
-
return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.notice) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimaryHover);
|
|
4495
|
+
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);
|
|
4472
4496
|
};
|
|
4473
4497
|
var disabledStyled$2 = function (props) {
|
|
4474
4498
|
var _a, _b, _c, _d;
|
|
4475
4499
|
var semanticColors = getSemanticColors(props);
|
|
4476
|
-
return react.css(
|
|
4500
|
+
return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textDisabled);
|
|
4477
4501
|
};
|
|
4478
|
-
var StyledLabel$2 = styled("label")(
|
|
4502
|
+
var StyledLabel$2 = styled("label")(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4479
4503
|
var spaces = getSpaces(props);
|
|
4480
4504
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n position: absolute;\n overflow: hidden;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px; \n padding: 0; \n border: 0;\n ");
|
|
4481
4505
|
});
|
|
@@ -4483,18 +4507,18 @@ var StyledSearchBase = styled(material.TextField, {
|
|
|
4483
4507
|
shouldForwardProp: function (prop) {
|
|
4484
4508
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4485
4509
|
},
|
|
4486
|
-
})(
|
|
4510
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4487
4511
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
4488
4512
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4489
4513
|
var spaces = getSpaces(props);
|
|
4490
4514
|
var iconSizes = getIconSizes(props);
|
|
4491
4515
|
var semanticColors = getSemanticColors(props);
|
|
4492
|
-
return react.css(
|
|
4516
|
+
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));
|
|
4493
4517
|
});
|
|
4494
|
-
var StyledInputAdornment = styled(material.InputAdornment)(
|
|
4495
|
-
var templateObject_1$
|
|
4518
|
+
var StyledInputAdornment = styled(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"])));
|
|
4519
|
+
var templateObject_1$P, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$f, templateObject_6$a, templateObject_7$6;
|
|
4496
4520
|
|
|
4497
|
-
var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$
|
|
4521
|
+
var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4498
4522
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4499
4523
|
var selected = props.selected;
|
|
4500
4524
|
var fontWeights = getFontWeights(props);
|
|
@@ -4502,7 +4526,7 @@ var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$L || (template
|
|
|
4502
4526
|
var semanticColors = getSemanticColors(props);
|
|
4503
4527
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.iconSelected : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surfacePrimary, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.iconPressed, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _m === void 0 ? void 0 : _m.iconPressed, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
|
|
4504
4528
|
});
|
|
4505
|
-
var ContentWrapper = styled("span")(templateObject_2$
|
|
4529
|
+
var ContentWrapper = styled("span")(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
|
|
4506
4530
|
var disabledStyles = function (props) {
|
|
4507
4531
|
var _a;
|
|
4508
4532
|
var disabled = props.disabled;
|
|
@@ -4511,12 +4535,12 @@ var disabledStyles = function (props) {
|
|
|
4511
4535
|
var semanticColors = getSemanticColors(props);
|
|
4512
4536
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled, ";\n cursor: default;\n ");
|
|
4513
4537
|
};
|
|
4514
|
-
var TextWrapper = styled("span")(templateObject_3$
|
|
4538
|
+
var TextWrapper = styled("span")(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4515
4539
|
var _a;
|
|
4516
4540
|
var semanticColors = getSemanticColors(props);
|
|
4517
4541
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n display: flex;\n white-space: pre-wrap;\n ");
|
|
4518
4542
|
}, disabledStyles);
|
|
4519
|
-
var StyledMenuItemIcon = styled("span")(templateObject_4$
|
|
4543
|
+
var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4520
4544
|
var _a;
|
|
4521
4545
|
var disabled = props.disabled;
|
|
4522
4546
|
var spaces = getSpaces(props);
|
|
@@ -4524,20 +4548,20 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$
|
|
|
4524
4548
|
var semanticColors = getSemanticColors(props);
|
|
4525
4549
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
|
|
4526
4550
|
});
|
|
4527
|
-
var ColumnWrapper = styled("span")(templateObject_5$
|
|
4551
|
+
var ColumnWrapper = styled("span")(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4528
4552
|
var _a;
|
|
4529
4553
|
var semanticColors = getSemanticColors(props);
|
|
4530
4554
|
var spaces = getSpaces(props);
|
|
4531
4555
|
return "\n text-align: right;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4532
4556
|
}, disabledStyles);
|
|
4533
|
-
var StyledIconWrapper = styled("span")(templateObject_6$
|
|
4557
|
+
var StyledIconWrapper = styled("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4534
4558
|
var spaces = getSpaces(props);
|
|
4535
4559
|
var iconSizes = getIconSizes(props);
|
|
4536
4560
|
return "\n align-self: start;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
4537
4561
|
});
|
|
4538
4562
|
var StyledCheck = styled(iconsMaterial.Check, {
|
|
4539
4563
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4540
|
-
})(templateObject_7$
|
|
4564
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4541
4565
|
var _a, _b;
|
|
4542
4566
|
var selected = props.selected, disabled = props.disabled;
|
|
4543
4567
|
var iconSizes = getIconSizes(props);
|
|
@@ -4559,7 +4583,7 @@ var StyledMinus = styled(iconsMaterial.Remove, {
|
|
|
4559
4583
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
4560
4584
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
|
|
4561
4585
|
});
|
|
4562
|
-
var templateObject_1$
|
|
4586
|
+
var templateObject_1$O, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$e, templateObject_6$9, templateObject_7$5, templateObject_8$4;
|
|
4563
4587
|
|
|
4564
4588
|
/**
|
|
4565
4589
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4725,7 +4749,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
4725
4749
|
autoComplete: "one-time-code" }, rest))] }));
|
|
4726
4750
|
});
|
|
4727
4751
|
|
|
4728
|
-
var doNotForwardProps$
|
|
4752
|
+
var doNotForwardProps$o = [
|
|
4729
4753
|
"count",
|
|
4730
4754
|
"keepSearchOnSelect",
|
|
4731
4755
|
"search",
|
|
@@ -4734,8 +4758,8 @@ var doNotForwardProps$n = [
|
|
|
4734
4758
|
"onClickAway",
|
|
4735
4759
|
];
|
|
4736
4760
|
var StyledAutocompleteBase = styled(material.Autocomplete, {
|
|
4737
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4738
|
-
})(templateObject_1$
|
|
4761
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
4762
|
+
})(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper, material.autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
4739
4763
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4740
4764
|
var search = props.search;
|
|
4741
4765
|
var spaces = getSpaces(props);
|
|
@@ -4744,8 +4768,8 @@ var StyledAutocompleteBase = styled(material.Autocomplete, {
|
|
|
4744
4768
|
return "\n ".concat(!search && "height: 0; margin: 0 !important;", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, ";\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textSecondary, ";\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
4745
4769
|
});
|
|
4746
4770
|
var InputBaseWrapper$1 = styled("div", {
|
|
4747
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4748
|
-
})(templateObject_2$
|
|
4771
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
4772
|
+
})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4749
4773
|
var search = props.search;
|
|
4750
4774
|
if (!search) {
|
|
4751
4775
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -4755,12 +4779,12 @@ var InputBaseWrapper$1 = styled("div", {
|
|
|
4755
4779
|
}
|
|
4756
4780
|
});
|
|
4757
4781
|
var StyledMenuInputSearch$1 = styled(InputSearch, {
|
|
4758
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4759
|
-
})(templateObject_3$
|
|
4782
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
4783
|
+
})(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
4760
4784
|
var search = _a.search;
|
|
4761
4785
|
return (search ? "auto" : "transparent");
|
|
4762
4786
|
});
|
|
4763
|
-
var StyledPaper$3 = styled(material.Paper)(templateObject_4$
|
|
4787
|
+
var StyledPaper$3 = styled(material.Paper)(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4764
4788
|
var _a;
|
|
4765
4789
|
var spaces = getSpaces(props);
|
|
4766
4790
|
var corners = getCorners(props);
|
|
@@ -4769,13 +4793,13 @@ var StyledPaper$3 = styled(material.Paper)(templateObject_4$h || (templateObject
|
|
|
4769
4793
|
var semanticColors = getSemanticColors(props);
|
|
4770
4794
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
4771
4795
|
});
|
|
4772
|
-
var StyledMenuItemDetails = styled("div")(templateObject_5$
|
|
4796
|
+
var StyledMenuItemDetails = styled("div")(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4773
4797
|
var _a;
|
|
4774
4798
|
var semanticColors = getSemanticColors(props);
|
|
4775
4799
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n white-space: pre-wrap;\n ");
|
|
4776
4800
|
});
|
|
4777
|
-
var StyledMenuItemText = styled("div")(templateObject_6$
|
|
4778
|
-
var templateObject_1$
|
|
4801
|
+
var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4802
|
+
var templateObject_1$N, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$d, templateObject_6$8;
|
|
4779
4803
|
|
|
4780
4804
|
var AutocompleteBase = function (props) {
|
|
4781
4805
|
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;
|
|
@@ -4940,27 +4964,27 @@ var AutocompleteBase = function (props) {
|
|
|
4940
4964
|
}
|
|
4941
4965
|
};
|
|
4942
4966
|
|
|
4943
|
-
var StyledColumn = styled("div")(templateObject_1$
|
|
4967
|
+
var StyledColumn = styled("div")(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4944
4968
|
var _a;
|
|
4945
4969
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
4946
4970
|
var spaces = getSpaces(props);
|
|
4947
4971
|
var borders = getBorders(props);
|
|
4948
4972
|
return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
|
|
4949
4973
|
});
|
|
4950
|
-
var StyledColumnTitle = styled("p")(templateObject_2$
|
|
4974
|
+
var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
4951
4975
|
var _a;
|
|
4952
4976
|
var spaces = getSpaces(props);
|
|
4953
4977
|
var semanticColors = getSemanticColors(props);
|
|
4954
4978
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
|
|
4955
4979
|
});
|
|
4956
|
-
var StyledColumnIcon = styled("span")(templateObject_3$
|
|
4980
|
+
var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4957
4981
|
var _a, _b;
|
|
4958
4982
|
var spaces = getSpaces(props);
|
|
4959
4983
|
var iconSizes = getIconSizes(props);
|
|
4960
4984
|
var semanticColors = getSemanticColors(props);
|
|
4961
4985
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
|
|
4962
4986
|
});
|
|
4963
|
-
var templateObject_1$
|
|
4987
|
+
var templateObject_1$M, templateObject_2$s, templateObject_3$k;
|
|
4964
4988
|
|
|
4965
4989
|
var AutocompleteGroup = function (props) {
|
|
4966
4990
|
var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
|
|
@@ -5000,7 +5024,7 @@ var AutocompleteGroup = function (props) {
|
|
|
5000
5024
|
}
|
|
5001
5025
|
};
|
|
5002
5026
|
|
|
5003
|
-
var doNotForwardProps$
|
|
5027
|
+
var doNotForwardProps$n = [
|
|
5004
5028
|
"anchorEl",
|
|
5005
5029
|
"count",
|
|
5006
5030
|
"keepSearchOnSelect",
|
|
@@ -5013,9 +5037,9 @@ var doNotForwardProps$m = [
|
|
|
5013
5037
|
];
|
|
5014
5038
|
var StyledPopper$2 = styled(material.Popper, {
|
|
5015
5039
|
shouldForwardProp: function (prop) {
|
|
5016
|
-
return !doNotForwardProps$
|
|
5040
|
+
return !doNotForwardProps$n.includes(prop) || prop === "anchorEl";
|
|
5017
5041
|
},
|
|
5018
|
-
})(templateObject_1$
|
|
5042
|
+
})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5019
5043
|
var _a;
|
|
5020
5044
|
var corners = getCorners(props);
|
|
5021
5045
|
var shadows = getShadows(props);
|
|
@@ -5025,24 +5049,24 @@ var StyledPopper$2 = styled(material.Popper, {
|
|
|
5025
5049
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(material.autocompleteClasses.popper, ".").concat(material.autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(material.autocompleteClasses.listbox, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
5026
5050
|
});
|
|
5027
5051
|
var StyledPaper$2 = styled(material.Paper, {
|
|
5028
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5029
|
-
})(templateObject_2$
|
|
5052
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
5053
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5030
5054
|
var _a;
|
|
5031
5055
|
var shadows = getShadows(props);
|
|
5032
5056
|
var semanticColors = getSemanticColors(props);
|
|
5033
5057
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
|
|
5034
5058
|
});
|
|
5035
|
-
var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$
|
|
5059
|
+
var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5036
5060
|
var StyledAutocompleteInput = styled(InputSearch, {
|
|
5037
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5038
|
-
})(templateObject_4$
|
|
5061
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
5062
|
+
})(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
5039
5063
|
var search = _a.search;
|
|
5040
5064
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5041
5065
|
}, function (_a) {
|
|
5042
5066
|
var search = _a.search;
|
|
5043
5067
|
return (search ? "auto" : "transparent");
|
|
5044
5068
|
});
|
|
5045
|
-
var templateObject_1$
|
|
5069
|
+
var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$h;
|
|
5046
5070
|
|
|
5047
5071
|
var AutocompleteMultiColumn = function (props) {
|
|
5048
5072
|
var _a;
|
|
@@ -5228,13 +5252,13 @@ var Autocomplete = function (props) {
|
|
|
5228
5252
|
}
|
|
5229
5253
|
};
|
|
5230
5254
|
|
|
5231
|
-
var Centered = styled("div")(templateObject_1$
|
|
5255
|
+
var Centered = styled("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
5232
5256
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5233
5257
|
var IconWrapper$1 = styled("div", {
|
|
5234
5258
|
shouldForwardProp: function (prop) {
|
|
5235
5259
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5236
5260
|
},
|
|
5237
|
-
})(templateObject_2$
|
|
5261
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5238
5262
|
var _a, _b;
|
|
5239
5263
|
var bannerType = props.bannerType;
|
|
5240
5264
|
var iconSizes = getIconSizes(props);
|
|
@@ -5247,7 +5271,7 @@ var StyledButton$2 = styled(Button, {
|
|
|
5247
5271
|
shouldForwardProp: function (prop) {
|
|
5248
5272
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5249
5273
|
},
|
|
5250
|
-
})(templateObject_3$
|
|
5274
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5251
5275
|
var _a, _b;
|
|
5252
5276
|
var bannerType = props.bannerType;
|
|
5253
5277
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5255,7 +5279,7 @@ var StyledButton$2 = styled(Button, {
|
|
|
5255
5279
|
return "";
|
|
5256
5280
|
return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, ";\n }\n\n svg:hover {\n fill: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverseHover, ";\n }\n ");
|
|
5257
5281
|
});
|
|
5258
|
-
styled("div")(templateObject_4$
|
|
5282
|
+
styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5259
5283
|
var primary$1 = function (props) {
|
|
5260
5284
|
var _a, _b;
|
|
5261
5285
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5266,15 +5290,15 @@ var secondary$1 = function (props) {
|
|
|
5266
5290
|
var semanticColors = getSemanticColors(props);
|
|
5267
5291
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n ");
|
|
5268
5292
|
};
|
|
5269
|
-
var doNotForwardProps$
|
|
5293
|
+
var doNotForwardProps$m = ["sdsType", "textChild"];
|
|
5270
5294
|
var StyledBanner = styled("div", {
|
|
5271
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5272
|
-
})(templateObject_5$
|
|
5295
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
5296
|
+
})(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5273
5297
|
var sdsType = props.sdsType;
|
|
5274
5298
|
var spaces = getSpaces(props);
|
|
5275
5299
|
return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5276
5300
|
});
|
|
5277
|
-
var templateObject_1$
|
|
5301
|
+
var templateObject_1$K, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
|
|
5278
5302
|
|
|
5279
5303
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5280
5304
|
var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
|
|
@@ -5342,10 +5366,10 @@ var ButtonDropdown = React.forwardRef(function (props, ref) {
|
|
|
5342
5366
|
|
|
5343
5367
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5344
5368
|
|
|
5345
|
-
var doNotForwardProps$
|
|
5369
|
+
var doNotForwardProps$l = ["calloutTitle", "collapsed", "severity"];
|
|
5346
5370
|
var StyledCallout = styled(material.Alert, {
|
|
5347
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5348
|
-
})(templateObject_1$
|
|
5371
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
5372
|
+
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5349
5373
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
5350
5374
|
var _m = props.intent, intent = _m === void 0 ? "info" : _m;
|
|
5351
5375
|
var spaces = getSpaces(props);
|
|
@@ -5368,7 +5392,7 @@ var StyledCallout = styled(material.Alert, {
|
|
|
5368
5392
|
2);
|
|
5369
5393
|
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 ");
|
|
5370
5394
|
});
|
|
5371
|
-
var templateObject_1$
|
|
5395
|
+
var templateObject_1$J;
|
|
5372
5396
|
|
|
5373
5397
|
var SDS_STAGE_OPEN = "open";
|
|
5374
5398
|
var SDS_STAGE_CLOSED = "closed";
|
|
@@ -5435,11 +5459,11 @@ var Callout = function (_a) {
|
|
|
5435
5459
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Grow, { in: !hide, children: jsxRuntime.jsxs(StyledCallout, __assign({ onClose: onClose ? handleClose : undefined, action: getAction(collapsed), icon: getIcon(), intent: intent, collapsed: collapsed || false }, rest, { children: [calloutTitle, !collapsed && calloutContent] })) }) }));
|
|
5436
5460
|
};
|
|
5437
5461
|
|
|
5438
|
-
var StyledCalloutTitle = styled(material.AlertTitle)(templateObject_1$
|
|
5462
|
+
var StyledCalloutTitle = styled(material.AlertTitle)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5439
5463
|
var spaces = getSpaces(props);
|
|
5440
5464
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5441
5465
|
});
|
|
5442
|
-
var templateObject_1$
|
|
5466
|
+
var templateObject_1$I;
|
|
5443
5467
|
|
|
5444
5468
|
var CalloutTitle = function (_a) {
|
|
5445
5469
|
var children = _a.children;
|
|
@@ -5452,22 +5476,22 @@ var dark = function (props) {
|
|
|
5452
5476
|
var _a, _b;
|
|
5453
5477
|
var spaces = getSpaces(props);
|
|
5454
5478
|
var semanticColors = getSemanticColors(props);
|
|
5455
|
-
return css.css(templateObject_1$
|
|
5479
|
+
return css.css(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: center;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5456
5480
|
};
|
|
5457
5481
|
var light = function (props) {
|
|
5458
5482
|
var _a, _b;
|
|
5459
5483
|
var spaces = getSpaces(props);
|
|
5460
5484
|
var semanticColors = getSemanticColors(props);
|
|
5461
|
-
return css.css(templateObject_2$
|
|
5485
|
+
return css.css(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n text-align: left;\n max-width: 250px;\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5462
5486
|
};
|
|
5463
5487
|
var wide = function () {
|
|
5464
|
-
return css.css(templateObject_3$
|
|
5488
|
+
return css.css(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5465
5489
|
};
|
|
5466
5490
|
var tableStyles = function (props) {
|
|
5467
5491
|
var spaces = getSpaces(props);
|
|
5468
|
-
return css.css(templateObject_4$
|
|
5492
|
+
return css.css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5469
5493
|
};
|
|
5470
|
-
var Subtitle$1 = styled("div")(templateObject_5$
|
|
5494
|
+
var Subtitle$1 = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5471
5495
|
var _a;
|
|
5472
5496
|
var semanticColors = getSemanticColors(props);
|
|
5473
5497
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
|
|
@@ -5475,13 +5499,13 @@ var Subtitle$1 = styled("div")(templateObject_5$a || (templateObject_5$a = __mak
|
|
|
5475
5499
|
var tooltipCss = function (props) {
|
|
5476
5500
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5477
5501
|
var shadows = getShadows(props);
|
|
5478
|
-
return css.css(templateObject_6$
|
|
5502
|
+
return css.css(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n\n ", "\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, sdsStyle === "dark" || inverted ? dark(props) : light(props), width === "wide" && sdsStyle === "light" && wide(), followCursor === true && tableStyles(props));
|
|
5479
5503
|
};
|
|
5480
5504
|
var arrowCss = function (props) {
|
|
5481
5505
|
var _a, _b;
|
|
5482
5506
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5483
5507
|
var semanticColors = getSemanticColors(props);
|
|
5484
|
-
return css.css(templateObject_7$
|
|
5508
|
+
return css.css(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, inverted || sdsStyle === "dark"
|
|
5485
5509
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
|
|
5486
5510
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
|
|
5487
5511
|
};
|
|
@@ -5490,7 +5514,7 @@ var arrowCss = function (props) {
|
|
|
5490
5514
|
* default placement which is calculated by javascript
|
|
5491
5515
|
*/
|
|
5492
5516
|
var StyledPopper$1 = styled(material.Popper)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
5493
|
-
var templateObject_1$
|
|
5517
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$b, templateObject_6$7, templateObject_7$4, templateObject_8$3;
|
|
5494
5518
|
|
|
5495
5519
|
/**
|
|
5496
5520
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5556,7 +5580,7 @@ function mergeClass$1(_a) {
|
|
|
5556
5580
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
5557
5581
|
}
|
|
5558
5582
|
|
|
5559
|
-
var doNotForwardProps$
|
|
5583
|
+
var doNotForwardProps$k = [
|
|
5560
5584
|
"icon",
|
|
5561
5585
|
"iconVerticalAlign",
|
|
5562
5586
|
"horizontalAlign",
|
|
@@ -5584,8 +5608,8 @@ var verticalAlignToFlexMap = {
|
|
|
5584
5608
|
top: "flex-start",
|
|
5585
5609
|
};
|
|
5586
5610
|
var StyledTableData = styled("td", {
|
|
5587
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5588
|
-
})(templateObject_1$
|
|
5611
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5612
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
5589
5613
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5590
5614
|
var spaces = getSpaces(props);
|
|
5591
5615
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n overflow: hidden;\n ");
|
|
@@ -5596,30 +5620,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
5596
5620
|
var ShouldTruncate = function () {
|
|
5597
5621
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
5598
5622
|
};
|
|
5599
|
-
var StyledCellContent = styled("div")(templateObject_2$
|
|
5600
|
-
var StyledCellContentWrapper = styled("div")(templateObject_3$
|
|
5623
|
+
var StyledCellContent = styled("div")(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5624
|
+
var StyledCellContentWrapper = styled("div")(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
5601
5625
|
var StyledCellIconWrapper = styled("div", {
|
|
5602
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5603
|
-
})(templateObject_4$
|
|
5626
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5627
|
+
})(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5604
5628
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
5605
5629
|
var spaces = getSpaces(props);
|
|
5606
5630
|
return "\n padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n flex-direction: column;\n justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n ");
|
|
5607
5631
|
});
|
|
5608
|
-
var PrimaryTextWrapper = styled("div")(templateObject_5$
|
|
5632
|
+
var PrimaryTextWrapper = styled("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5609
5633
|
var horizontalAlign = props.horizontalAlign;
|
|
5610
5634
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
5611
5635
|
});
|
|
5612
5636
|
var PrimaryText = styled("div", {
|
|
5613
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5614
|
-
})(templateObject_6$
|
|
5637
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5638
|
+
})(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5615
5639
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
5616
5640
|
return "\n display: block;\n ".concat(props.shouldTextWrap
|
|
5617
5641
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
5618
5642
|
: ShouldTruncate(), "\n ");
|
|
5619
5643
|
});
|
|
5620
5644
|
var SecondaryText = styled("span", {
|
|
5621
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5622
|
-
})(templateObject_7$
|
|
5645
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5646
|
+
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5623
5647
|
var _a;
|
|
5624
5648
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
5625
5649
|
var spaces = getSpaces(props);
|
|
@@ -5629,7 +5653,7 @@ var SecondaryText = styled("span", {
|
|
|
5629
5653
|
: ShouldTruncate(), "\n ");
|
|
5630
5654
|
});
|
|
5631
5655
|
var TertiaryText = styled("span", {
|
|
5632
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5656
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5633
5657
|
})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5634
5658
|
var _a;
|
|
5635
5659
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
@@ -5647,7 +5671,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
|
|
|
5647
5671
|
var spaces = getSpaces(props);
|
|
5648
5672
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5649
5673
|
});
|
|
5650
|
-
var templateObject_1$
|
|
5674
|
+
var templateObject_1$G, templateObject_2$o, templateObject_3$g, templateObject_4$e, templateObject_5$a, templateObject_6$6, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
5651
5675
|
|
|
5652
5676
|
var CellBasicContent = function (props) {
|
|
5653
5677
|
var primaryText = props.primaryText, primaryTextWrapLineCount = props.primaryTextWrapLineCount, secondaryText = props.secondaryText, secondaryTextWrapLineCount = props.secondaryTextWrapLineCount, tertiaryText = props.tertiaryText, tertiaryTextWrapLineCount = props.tertiaryTextWrapLineCount, _a = props.shouldTextWrap, shouldTextWrap = _a === void 0 ? true : _a, icon = props.icon, iconVerticalAlign = props.iconVerticalAlign, primaryTextComponentSlotRight = props.primaryTextComponentSlotRight, primaryTextComponentSlotBottom = props.primaryTextComponentSlotBottom, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
|
|
@@ -5661,15 +5685,15 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
5661
5685
|
return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
|
|
5662
5686
|
});
|
|
5663
5687
|
|
|
5664
|
-
var doNotForwardProps$
|
|
5688
|
+
var doNotForwardProps$j = ["horizontalAlign", "verticalAlign"];
|
|
5665
5689
|
var StyledCellComponentData = styled("td", {
|
|
5666
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5667
|
-
})(templateObject_1$
|
|
5690
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
5691
|
+
})(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
5668
5692
|
var spaces = getSpaces(props);
|
|
5669
5693
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5670
5694
|
return "\n align-items: center;\n text-align: ".concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlign, ";\n overflow: hidden;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5671
5695
|
});
|
|
5672
|
-
var templateObject_1$
|
|
5696
|
+
var templateObject_1$F;
|
|
5673
5697
|
|
|
5674
5698
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
5675
5699
|
var children = props.children;
|
|
@@ -5681,7 +5705,7 @@ var contentPositionMapping = {
|
|
|
5681
5705
|
left: "flex-start",
|
|
5682
5706
|
right: "flex-end",
|
|
5683
5707
|
};
|
|
5684
|
-
var doNotForwardProps$
|
|
5708
|
+
var doNotForwardProps$i = [
|
|
5685
5709
|
"active",
|
|
5686
5710
|
"horizontalAlign",
|
|
5687
5711
|
"shouldShowTooltipOnHover",
|
|
@@ -5690,8 +5714,8 @@ var doNotForwardProps$h = [
|
|
|
5690
5714
|
"hideSortIcon",
|
|
5691
5715
|
];
|
|
5692
5716
|
var StyledSortingIcon = styled(Icon, {
|
|
5693
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5694
|
-
})(templateObject_1$
|
|
5717
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
5718
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5695
5719
|
var _a, _b;
|
|
5696
5720
|
var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
|
|
5697
5721
|
var spaces = getSpaces(props);
|
|
@@ -5699,8 +5723,8 @@ var StyledSortingIcon = styled(Icon, {
|
|
|
5699
5723
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n color: ").concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.icon : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n opacity: ").concat(hideSortIcon ? (active ? 1 : 0) : 1, ";\n outline: none !important;\n ");
|
|
5700
5724
|
});
|
|
5701
5725
|
var StyledTableHeader$1 = styled("th", {
|
|
5702
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5703
|
-
})(templateObject_2$
|
|
5726
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
5727
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
5704
5728
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5705
5729
|
var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
|
|
5706
5730
|
var spaces = getSpaces(props);
|
|
@@ -5708,12 +5732,12 @@ var StyledTableHeader$1 = styled("th", {
|
|
|
5708
5732
|
return "\n color: ".concat(active ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.textActionHover : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.textActionHover : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n opacity: 1;\n }\n\n & svg {\n color: ").concat(active ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.iconHover : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconPrimaryHover, ";\n }\n }\n ");
|
|
5709
5733
|
});
|
|
5710
5734
|
var StyledCellHeaderContainer = styled("div", {
|
|
5711
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5712
|
-
})(templateObject_3$
|
|
5735
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
5736
|
+
})(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5713
5737
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
5714
5738
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
5715
5739
|
});
|
|
5716
|
-
var templateObject_1$
|
|
5740
|
+
var templateObject_1$E, templateObject_2$n, templateObject_3$f;
|
|
5717
5741
|
|
|
5718
5742
|
var CellHeaderContent = function (props) {
|
|
5719
5743
|
var active = props.active, children = props.children, _a = props.direction, direction = _a === void 0 ? "desc" : _a, _b = props.hideSortIcon, hideSortIcon = _b === void 0 ? false : _b, horizontalAlign = props.horizontalAlign;
|
|
@@ -5733,20 +5757,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
5733
5757
|
|
|
5734
5758
|
var small = function (props) {
|
|
5735
5759
|
var spaces = getSpaces(props);
|
|
5736
|
-
return react.css(templateObject_1$
|
|
5760
|
+
return react.css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "], ["\n height: ", "px;\n padding: ", "px ", "px;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontCapsXxxxs(props));
|
|
5737
5761
|
};
|
|
5738
5762
|
var medium = function (props) {
|
|
5739
5763
|
var spaces = getSpaces(props);
|
|
5740
5764
|
var colors = getColors(props);
|
|
5741
|
-
return react.css(templateObject_2$
|
|
5765
|
+
return react.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "], ["\n margin: 0 ", "px;\n height: 24px;\n\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n .MuiChip-label {\n ", "\n color: white;\n padding-left: ", "px;\n }\n\n .MuiChip-deleteIcon {\n color: white;\n padding-right: ", "px;\n margin: 0 0 0 -", "px;\n height: ", "px;\n width: ", "px;\n\n &:hover,\n &:focus-visible {\n color: white;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.s, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[500], colors === null || colors === void 0 ? void 0 : colors.blue[600], fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5742
5766
|
};
|
|
5743
5767
|
var rounded$2 = function (props) {
|
|
5744
5768
|
var corners = getCorners(props);
|
|
5745
|
-
return react.css(templateObject_3$
|
|
5769
|
+
return react.css(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
5746
5770
|
};
|
|
5747
5771
|
var square$2 = function (props) {
|
|
5748
5772
|
var corners = getCorners(props);
|
|
5749
|
-
return react.css(templateObject_4$
|
|
5773
|
+
return react.css(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
5750
5774
|
};
|
|
5751
5775
|
var success = function (props) {
|
|
5752
5776
|
return createStatusCss(props, "success");
|
|
@@ -5799,7 +5823,7 @@ function createStatusCss(props, status) {
|
|
|
5799
5823
|
},
|
|
5800
5824
|
};
|
|
5801
5825
|
var statusColors = statusToColors[status];
|
|
5802
|
-
return react.css(templateObject_5$
|
|
5826
|
+
return react.css(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "], ["\n background-color: ", ";\n\n .MuiChip-label {\n color: ", ";\n }\n "])), statusColors.light, statusColors.dark);
|
|
5803
5827
|
}
|
|
5804
5828
|
var statusToCss = {
|
|
5805
5829
|
beta: beta,
|
|
@@ -5809,14 +5833,14 @@ var statusToCss = {
|
|
|
5809
5833
|
success: success,
|
|
5810
5834
|
warning: warning,
|
|
5811
5835
|
};
|
|
5812
|
-
var doNotForwardProps$
|
|
5836
|
+
var doNotForwardProps$h = ["isRounded"];
|
|
5813
5837
|
var StyledChip = styled(material.Chip, {
|
|
5814
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5815
|
-
})(templateObject_7$
|
|
5838
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
5839
|
+
})(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
5816
5840
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
5817
|
-
return react.css(templateObject_6$
|
|
5841
|
+
return react.css(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
|
|
5818
5842
|
});
|
|
5819
|
-
var templateObject_1$
|
|
5843
|
+
var templateObject_1$D, templateObject_2$m, templateObject_3$e, templateObject_4$d, templateObject_5$9, templateObject_6$5, templateObject_7$2;
|
|
5820
5844
|
|
|
5821
5845
|
/**
|
|
5822
5846
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -5834,7 +5858,7 @@ var Chip = function (props) {
|
|
|
5834
5858
|
return jsxRuntime.jsx(StyledChip, __assign({}, props));
|
|
5835
5859
|
};
|
|
5836
5860
|
|
|
5837
|
-
var doNotForwardProps$
|
|
5861
|
+
var doNotForwardProps$g = [
|
|
5838
5862
|
"anchorEl",
|
|
5839
5863
|
"count",
|
|
5840
5864
|
"keepSearchOnSelect",
|
|
@@ -5848,19 +5872,19 @@ var doNotForwardProps$f = [
|
|
|
5848
5872
|
"isMultiColumn",
|
|
5849
5873
|
];
|
|
5850
5874
|
var StyledHeaderTitle = styled("div", {
|
|
5851
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5852
|
-
})(templateObject_1$
|
|
5875
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
5876
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
5853
5877
|
var _a;
|
|
5854
5878
|
var spaces = getSpaces(props);
|
|
5855
5879
|
var semanticColors = getSemanticColors(props);
|
|
5856
5880
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n padding-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5857
5881
|
});
|
|
5858
|
-
var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$
|
|
5882
|
+
var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper);
|
|
5859
5883
|
var StyledPopper = styled(material.Popper, {
|
|
5860
5884
|
shouldForwardProp: function (prop) {
|
|
5861
|
-
return !doNotForwardProps$
|
|
5885
|
+
return !doNotForwardProps$g.includes(prop) || prop === "anchorEl";
|
|
5862
5886
|
},
|
|
5863
|
-
})(templateObject_3$
|
|
5887
|
+
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5864
5888
|
var _a;
|
|
5865
5889
|
var borders = getBorders(props);
|
|
5866
5890
|
var corners = getCorners(props);
|
|
@@ -5869,8 +5893,8 @@ var StyledPopper = styled(material.Popper, {
|
|
|
5869
5893
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n z-index: 1400;\n ");
|
|
5870
5894
|
});
|
|
5871
5895
|
var StyledPaper$1 = styled(material.Paper, {
|
|
5872
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5873
|
-
})(templateObject_4$
|
|
5896
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
5897
|
+
})(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5874
5898
|
var _a;
|
|
5875
5899
|
var spaces = getSpaces(props);
|
|
5876
5900
|
var borders = getBorders(props);
|
|
@@ -5878,12 +5902,12 @@ var StyledPaper$1 = styled(material.Paper, {
|
|
|
5878
5902
|
var semanticColors = getSemanticColors(props);
|
|
5879
5903
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
5880
5904
|
});
|
|
5881
|
-
var StyledDropdownMenuHeader = styled("div")(templateObject_5$
|
|
5905
|
+
var StyledDropdownMenuHeader = styled("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5882
5906
|
var search = props.search;
|
|
5883
5907
|
var spaces = getSpaces(props);
|
|
5884
5908
|
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.s : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
5885
5909
|
});
|
|
5886
|
-
var templateObject_1$
|
|
5910
|
+
var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
|
|
5887
5911
|
|
|
5888
5912
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
5889
5913
|
// for the dropdownMenu's popper component
|
|
@@ -5918,10 +5942,10 @@ var DropdownMenu = function (props) {
|
|
|
5918
5942
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5919
5943
|
// (masoudmanson): To override the width of the Popper,
|
|
5920
5944
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5921
|
-
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] }), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5945
|
+
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [(title || headerComponentSlot) && (jsxRuntime.jsxs(StyledDropdownMenuHeader, { search: search, children: [title && jsxRuntime.jsx(StyledHeaderTitle, { children: title }), headerComponentSlot && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerComponentSlot })] })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5922
5946
|
};
|
|
5923
5947
|
|
|
5924
|
-
var doNotForwardProps$
|
|
5948
|
+
var doNotForwardProps$f = [
|
|
5925
5949
|
"intent",
|
|
5926
5950
|
"state",
|
|
5927
5951
|
"sdsType",
|
|
@@ -5943,27 +5967,27 @@ var inputDropdownStyles = function (props) {
|
|
|
5943
5967
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
5944
5968
|
*/
|
|
5945
5969
|
var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
|
|
5946
|
-
return react.css(templateObject_1$
|
|
5970
|
+
return react.css(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfacePrimary, padding, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.surfacePrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.borderHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.iconPrimaryHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = borders === null || borders === void 0 ? void 0 : borders.base) === null || _l === void 0 ? void 0 : _l.pressed, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.textPrimary, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.iconPrimaryPressed);
|
|
5947
5971
|
};
|
|
5948
5972
|
var minimal$1 = function (props) {
|
|
5949
5973
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5950
5974
|
var spaces = getSpaces(props);
|
|
5951
5975
|
var semanticColors = getSemanticColors(props);
|
|
5952
|
-
return react.css(templateObject_2$
|
|
5976
|
+
return react.css(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n background-color: transparent;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
5953
5977
|
};
|
|
5954
5978
|
var square$1 = function (props) {
|
|
5955
5979
|
var corners = getCorners(props);
|
|
5956
|
-
return react.css(templateObject_3$
|
|
5980
|
+
return react.css(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
5957
5981
|
};
|
|
5958
5982
|
var rounded$1 = function (props) {
|
|
5959
5983
|
var corners = getCorners(props);
|
|
5960
|
-
return react.css(templateObject_4$
|
|
5984
|
+
return react.css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
5961
5985
|
};
|
|
5962
5986
|
var userInput = function (props) {
|
|
5963
5987
|
var _a, _b, _c, _d, _e, _f;
|
|
5964
5988
|
var sdsStyle = props.sdsStyle;
|
|
5965
5989
|
var semanticColors = getSemanticColors(props);
|
|
5966
|
-
return react.css(templateObject_5$
|
|
5990
|
+
return react.css(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, sdsStyle === "minimal"
|
|
5967
5991
|
? "\n \n background-color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, "47;\n border: none;\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n\n path {\n fill: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, ";\n }\n ")
|
|
5968
5992
|
: "");
|
|
5969
5993
|
};
|
|
@@ -5972,26 +5996,21 @@ var isOpen = function (props) {
|
|
|
5972
5996
|
var sdsStyle = props.sdsStyle;
|
|
5973
5997
|
var borders = getBorders(props);
|
|
5974
5998
|
var semanticColors = getSemanticColors(props);
|
|
5975
|
-
return react.css(templateObject_6$
|
|
5999
|
+
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"
|
|
5976
6000
|
? "\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 ")
|
|
5977
6001
|
: "", (_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"
|
|
5978
6002
|
? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
|
|
5979
6003
|
: "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);
|
|
5980
6004
|
};
|
|
5981
|
-
var
|
|
6005
|
+
var applyIntentColor$1 = function (props, intent) {
|
|
5982
6006
|
var _a, _b, _c;
|
|
5983
6007
|
var borders = getBorders(props);
|
|
5984
|
-
return react.css(templateObject_7$
|
|
5985
|
-
};
|
|
5986
|
-
var negative$1 = function (props) {
|
|
5987
|
-
var _a, _b, _c;
|
|
5988
|
-
var borders = getBorders(props);
|
|
5989
|
-
return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders.negative) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
|
|
6008
|
+
return react.css(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "], ["\n border: ", ";\n\n &:hover {\n border: ", ";\n }\n\n &:active {\n border: ", ";\n }\n "])), (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.pressed);
|
|
5990
6009
|
};
|
|
5991
6010
|
var isDisabled = function (props) {
|
|
5992
6011
|
var _a, _b, _c, _d;
|
|
5993
6012
|
var semanticColors = getSemanticColors(props);
|
|
5994
|
-
return react.css(
|
|
6013
|
+
return react.css(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
|
|
5995
6014
|
};
|
|
5996
6015
|
/**
|
|
5997
6016
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6002,22 +6021,28 @@ var isDisabled = function (props) {
|
|
|
6002
6021
|
* to the InputDropdownProps interface.
|
|
6003
6022
|
*/
|
|
6004
6023
|
var StyledInputDropdown = styled(Button, {
|
|
6005
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6006
|
-
})(
|
|
6024
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6025
|
+
})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n ", "\n outline-offset: 1px !important;\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, focusVisibleA11yStyle, function (props) {
|
|
6007
6026
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6008
|
-
return react.css(
|
|
6027
|
+
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 ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), value && userInput(props), intent === "notice" &&
|
|
6028
|
+
sdsStyle !== "minimal" &&
|
|
6029
|
+
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6030
|
+
sdsStyle !== "minimal" &&
|
|
6031
|
+
applyIntentColor$1(props, "negative"), intent === "positive" &&
|
|
6032
|
+
sdsStyle !== "minimal" &&
|
|
6033
|
+
applyIntentColor$1(props, "positive"), state === "open" && isOpen(props), disabled && isDisabled(props));
|
|
6009
6034
|
});
|
|
6010
6035
|
var StyledDetail = styled("span", {
|
|
6011
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6012
|
-
})(
|
|
6036
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6037
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6013
6038
|
var _a;
|
|
6014
6039
|
var spaces = getSpaces(props);
|
|
6015
6040
|
var semanticColors = getSemanticColors(props);
|
|
6016
6041
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
6017
6042
|
});
|
|
6018
6043
|
var StyledLabel$1 = styled("span", {
|
|
6019
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6020
|
-
})(
|
|
6044
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6045
|
+
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6021
6046
|
var _a, _b;
|
|
6022
6047
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6023
6048
|
var fontWeights = getFontWeights(props);
|
|
@@ -6028,8 +6053,8 @@ var StyledLabel$1 = styled("span", {
|
|
|
6028
6053
|
return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
|
|
6029
6054
|
});
|
|
6030
6055
|
var StyledCounter = styled("span", {
|
|
6031
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6032
|
-
})(
|
|
6056
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6057
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6033
6058
|
var _a, _b;
|
|
6034
6059
|
var corners = getCorners(props);
|
|
6035
6060
|
var spaces = getSpaces(props);
|
|
@@ -6037,32 +6062,32 @@ var StyledCounter = styled("span", {
|
|
|
6037
6062
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textAction, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6038
6063
|
});
|
|
6039
6064
|
var MinimalDetails = styled("div", {
|
|
6040
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6041
|
-
})(
|
|
6065
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6066
|
+
})(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 (props) {
|
|
6042
6067
|
var _a;
|
|
6043
6068
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6044
6069
|
var semanticColors = getSemanticColors(props);
|
|
6045
6070
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n\n ").concat(shouldTruncateMinimalDetails &&
|
|
6046
|
-
"overflow: hidden;\n
|
|
6071
|
+
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6047
6072
|
});
|
|
6048
6073
|
var LabelWrapper = styled("span", {
|
|
6049
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6050
|
-
})(
|
|
6074
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6075
|
+
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6051
6076
|
var isMinimal = _a.isMinimal;
|
|
6052
6077
|
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 ");
|
|
6053
6078
|
});
|
|
6054
6079
|
var IconWrapper = styled("span", {
|
|
6055
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6056
|
-
})(
|
|
6080
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6081
|
+
})(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"])));
|
|
6057
6082
|
function labelStyle(props) {
|
|
6058
6083
|
var _a, _b;
|
|
6059
6084
|
var semanticColors = getSemanticColors(props);
|
|
6060
6085
|
var labelColor = props.sdsType === "value"
|
|
6061
6086
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6062
6087
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6063
|
-
return react.css(
|
|
6088
|
+
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);
|
|
6064
6089
|
}
|
|
6065
|
-
var templateObject_1$
|
|
6090
|
+
var templateObject_1$B, templateObject_2$k, templateObject_3$c, templateObject_4$b, templateObject_5$7, templateObject_6$4, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
6066
6091
|
|
|
6067
6092
|
/**
|
|
6068
6093
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6129,33 +6154,33 @@ var tagSizeS = function (props) {
|
|
|
6129
6154
|
var spaces = getSpaces(props);
|
|
6130
6155
|
var iconSizes = getIconSizes(props);
|
|
6131
6156
|
var semanticColors = getSemanticColors(props);
|
|
6132
|
-
return react.css(templateObject_1$
|
|
6157
|
+
return react.css(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6133
6158
|
};
|
|
6134
6159
|
var tagSizeL = function (props) {
|
|
6135
6160
|
var _a;
|
|
6136
6161
|
var spaces = getSpaces(props);
|
|
6137
6162
|
var iconSizes = getIconSizes(props);
|
|
6138
6163
|
var semanticColors = getSemanticColors(props);
|
|
6139
|
-
return react.css(templateObject_2$
|
|
6164
|
+
return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
6140
6165
|
};
|
|
6141
6166
|
var rounded = function (props) {
|
|
6142
6167
|
var corners = getCorners(props);
|
|
6143
6168
|
var spaces = getSpaces(props);
|
|
6144
6169
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6145
6170
|
var topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
|
|
6146
|
-
return react.css(templateObject_3$
|
|
6171
|
+
return react.css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6147
6172
|
};
|
|
6148
6173
|
var square = function (props) {
|
|
6149
6174
|
var corners = getCorners(props);
|
|
6150
6175
|
var spaces = getSpaces(props);
|
|
6151
6176
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6152
6177
|
var topBottomPadding = sdsSize === "s" ? spaces === null || spaces === void 0 ? void 0 : spaces.xxxs : icon ? spaces === null || spaces === void 0 ? void 0 : spaces.xxs : spaces === null || spaces === void 0 ? void 0 : spaces.xs;
|
|
6153
|
-
return react.css(templateObject_4$
|
|
6178
|
+
return react.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "], ["\n border-radius: ", "px;\n padding: ", "px ", "px;\n\n &:after {\n border-radius: ", "px;\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.m, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6154
6179
|
};
|
|
6155
6180
|
var withHover = function (props) {
|
|
6156
6181
|
var _a;
|
|
6157
6182
|
var semanticColors = getSemanticColors(props);
|
|
6158
|
-
return react.css(templateObject_5$
|
|
6183
|
+
return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "], ["\n &:hover {\n cursor: pointer;\n }\n\n &:hover,\n &:focus-visible {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse);
|
|
6159
6184
|
};
|
|
6160
6185
|
var primary = function (props) {
|
|
6161
6186
|
return createTypeCss(props, "primary");
|
|
@@ -6226,13 +6251,13 @@ function createTypeCss(props, type) {
|
|
|
6226
6251
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
6227
6252
|
};
|
|
6228
6253
|
var typeColors = typeToColors[type];
|
|
6229
|
-
return react.css(templateObject_6$
|
|
6254
|
+
return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
6230
6255
|
}
|
|
6231
6256
|
var typeToCss = {
|
|
6232
6257
|
primary: primary,
|
|
6233
6258
|
secondary: secondary,
|
|
6234
6259
|
};
|
|
6235
|
-
var doNotForwardProps$
|
|
6260
|
+
var doNotForwardProps$e = [
|
|
6236
6261
|
"sdsType",
|
|
6237
6262
|
"sdsStyle",
|
|
6238
6263
|
"sdsSize",
|
|
@@ -6240,14 +6265,14 @@ var doNotForwardProps$d = [
|
|
|
6240
6265
|
"hover",
|
|
6241
6266
|
];
|
|
6242
6267
|
var StyledTag$1 = styled(material.Chip, {
|
|
6243
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6268
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
6244
6269
|
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6245
6270
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
6246
6271
|
var isRounded = sdsStyle === "rounded";
|
|
6247
6272
|
var type = sdsType || "primary";
|
|
6248
|
-
return react.css(templateObject_7
|
|
6273
|
+
return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsSize === "l" ? tagSizeL(props) : tagSizeS(props), typeToCss[type](props), isRounded ? rounded(props) : square(props), hover ? withHover(props) : "pointer-events: none;");
|
|
6249
6274
|
});
|
|
6250
|
-
var templateObject_1$
|
|
6275
|
+
var templateObject_1$A, templateObject_2$j, templateObject_3$b, templateObject_4$a, templateObject_5$6, templateObject_6$3, templateObject_7, templateObject_8;
|
|
6251
6276
|
|
|
6252
6277
|
/**
|
|
6253
6278
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6261,14 +6286,14 @@ var Tag = function (props) {
|
|
|
6261
6286
|
return jsxRuntime.jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6262
6287
|
};
|
|
6263
6288
|
|
|
6264
|
-
var StyledTag = styled(Tag)(templateObject_2$
|
|
6289
|
+
var StyledTag = styled(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6265
6290
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6266
6291
|
var spaces = getSpaces(props);
|
|
6267
6292
|
var iconSizes = getIconSizes(props);
|
|
6268
6293
|
var semanticColors = getSemanticColors(props);
|
|
6269
|
-
return react.css(templateObject_1$
|
|
6294
|
+
return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n &:hover,\n &:focus {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _f === void 0 ? void 0 : _f.width, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _g === void 0 ? void 0 : _g.height);
|
|
6270
6295
|
});
|
|
6271
|
-
var templateObject_1$
|
|
6296
|
+
var templateObject_1$z, templateObject_2$i;
|
|
6272
6297
|
|
|
6273
6298
|
/**
|
|
6274
6299
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6291,12 +6316,12 @@ var Chips = function (_a) {
|
|
|
6291
6316
|
}) }));
|
|
6292
6317
|
};
|
|
6293
6318
|
|
|
6294
|
-
var Wrapper$1 = styled("div")(templateObject_1$
|
|
6295
|
-
var StyledChipsWrapper = styled("div")(templateObject_2$
|
|
6319
|
+
var Wrapper$1 = styled("div")(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
6320
|
+
var StyledChipsWrapper = styled("div")(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6296
6321
|
var spaces = getSpaces(props);
|
|
6297
6322
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6298
6323
|
});
|
|
6299
|
-
var templateObject_1$
|
|
6324
|
+
var templateObject_1$y, templateObject_2$h;
|
|
6300
6325
|
|
|
6301
6326
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6302
6327
|
var ComplexFilter = function (_a) {
|
|
@@ -6388,10 +6413,10 @@ var ComplexFilter = function (_a) {
|
|
|
6388
6413
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
6389
6414
|
|
|
6390
6415
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
6391
|
-
var doNotForwardProps$
|
|
6416
|
+
var doNotForwardProps$d = ["sdsSize"];
|
|
6392
6417
|
var StyledPaper = styled(material.Paper, {
|
|
6393
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6394
|
-
})(templateObject_1$
|
|
6418
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
6419
|
+
})(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
6395
6420
|
var _a;
|
|
6396
6421
|
var spaces = getSpaces(props);
|
|
6397
6422
|
var corners = getCorners(props);
|
|
@@ -6422,7 +6447,7 @@ function paperDimensions(props) {
|
|
|
6422
6447
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
6423
6448
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
6424
6449
|
}
|
|
6425
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$x;
|
|
6426
6451
|
|
|
6427
6452
|
/**
|
|
6428
6453
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -6451,15 +6476,15 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
6451
6476
|
});
|
|
6452
6477
|
|
|
6453
6478
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
6454
|
-
var doNotForwardProps$
|
|
6479
|
+
var doNotForwardProps$c = ["buttonPosition"];
|
|
6455
6480
|
var StyledDialogActions = styled(material.DialogActions, {
|
|
6456
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6457
|
-
})(templateObject_1$
|
|
6481
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
6482
|
+
})(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
6458
6483
|
var spaces = getSpaces(props);
|
|
6459
6484
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
6460
6485
|
return "\n justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n\n &.").concat(material.dialogActionsClasses.spacing, " > :not(:first-of-type) {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
6461
6486
|
});
|
|
6462
|
-
var templateObject_1$
|
|
6487
|
+
var templateObject_1$w;
|
|
6463
6488
|
|
|
6464
6489
|
/**
|
|
6465
6490
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6468,8 +6493,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
6468
6493
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
6469
6494
|
});
|
|
6470
6495
|
|
|
6471
|
-
var StyledDialogContent = styled(material.DialogContent)(templateObject_1$
|
|
6472
|
-
var templateObject_1$
|
|
6496
|
+
var StyledDialogContent = styled(material.DialogContent)(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
6497
|
+
var templateObject_1$v;
|
|
6473
6498
|
|
|
6474
6499
|
var index = React.forwardRef(
|
|
6475
6500
|
/**
|
|
@@ -6479,11 +6504,11 @@ function DialogContent(props, ref) {
|
|
|
6479
6504
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
6480
6505
|
});
|
|
6481
6506
|
|
|
6482
|
-
var StyledButton$1 = styled(Button)(templateObject_1$
|
|
6507
|
+
var StyledButton$1 = styled(Button)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
6483
6508
|
var spaces = getSpaces(props);
|
|
6484
6509
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
6485
6510
|
});
|
|
6486
|
-
var templateObject_1$
|
|
6511
|
+
var templateObject_1$u;
|
|
6487
6512
|
|
|
6488
6513
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
6489
6514
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -6499,27 +6524,27 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
6499
6524
|
} }));
|
|
6500
6525
|
});
|
|
6501
6526
|
|
|
6502
|
-
var StyledDialogTitle = styled(material.DialogTitle)(templateObject_1$
|
|
6527
|
+
var StyledDialogTitle = styled(material.DialogTitle)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
6503
6528
|
var spaces = getSpaces(props);
|
|
6504
6529
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
6505
6530
|
});
|
|
6506
|
-
var Title = styled(material.Typography)(templateObject_2$
|
|
6531
|
+
var Title = styled(material.Typography)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXl, function (props) {
|
|
6507
6532
|
var _a;
|
|
6508
6533
|
var semanticColors = getSemanticColors(props);
|
|
6509
6534
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
6510
6535
|
});
|
|
6511
|
-
var Subtitle = styled(material.Typography)(templateObject_3$
|
|
6536
|
+
var Subtitle = styled(material.Typography)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6512
6537
|
var _a;
|
|
6513
6538
|
var semanticColors = getSemanticColors(props);
|
|
6514
6539
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
6515
6540
|
});
|
|
6516
|
-
var Overline = styled(material.Typography)(templateObject_4$
|
|
6541
|
+
var Overline = styled(material.Typography)(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6517
6542
|
var _a;
|
|
6518
6543
|
var semanticColors = getSemanticColors(props);
|
|
6519
6544
|
var spaces = getSpaces(props);
|
|
6520
6545
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
|
|
6521
6546
|
});
|
|
6522
|
-
var templateObject_1$
|
|
6547
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
|
|
6523
6548
|
|
|
6524
6549
|
/**
|
|
6525
6550
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6529,20 +6554,20 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
6529
6554
|
return (jsxRuntime.jsx(StyledDialogTitle, __assign({ ref: ref }, rest, { children: children || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onClose && jsxRuntime.jsx(CloseButton, { icon: "XMark", onClick: onClose }), jsxRuntime.jsx(Overline, { children: overline }), jsxRuntime.jsx(Title, { children: title }), jsxRuntime.jsx(Subtitle, { children: subtitle })] })) })));
|
|
6530
6555
|
});
|
|
6531
6556
|
|
|
6532
|
-
var doNotForwardProps$
|
|
6557
|
+
var doNotForwardProps$b = ["buttonPosition"];
|
|
6533
6558
|
var StyledButtonsWrapper = styled("div", {
|
|
6534
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6535
|
-
})(templateObject_1$
|
|
6559
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
6560
|
+
})(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6536
6561
|
var buttonPosition = props.buttonPosition;
|
|
6537
6562
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
6538
6563
|
});
|
|
6539
6564
|
var StyledButton = styled(Button, {
|
|
6540
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6541
|
-
})(templateObject_2$
|
|
6565
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
6566
|
+
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6542
6567
|
var spaces = getSpaces(props);
|
|
6543
6568
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
6544
6569
|
});
|
|
6545
|
-
var templateObject_1$
|
|
6570
|
+
var templateObject_1$s, templateObject_2$f;
|
|
6546
6571
|
|
|
6547
6572
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6548
6573
|
var Dropdown = function (props) {
|
|
@@ -6715,7 +6740,7 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
|
|
|
6715
6740
|
})));
|
|
6716
6741
|
};
|
|
6717
6742
|
|
|
6718
|
-
var StyledCheckbox = styled(material.Checkbox)(templateObject_1$
|
|
6743
|
+
var StyledCheckbox = styled(material.Checkbox)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6719
6744
|
var _a, _b, _c, _d, _e, _f;
|
|
6720
6745
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6721
6746
|
var iconSizes = getIconSizes(props);
|
|
@@ -6725,26 +6750,27 @@ var StyledCheckbox = styled(material.Checkbox)(templateObject_1$o || (templateOb
|
|
|
6725
6750
|
default: "base",
|
|
6726
6751
|
negative: "negative",
|
|
6727
6752
|
notice: "notice",
|
|
6753
|
+
positive: "positive",
|
|
6728
6754
|
};
|
|
6729
6755
|
var checkboxColor = intentToColor[intent];
|
|
6730
6756
|
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 ");
|
|
6731
6757
|
});
|
|
6732
|
-
var StyledFormControlLabel$1 = styled(material.FormControlLabel)(templateObject_2$
|
|
6758
|
+
var StyledFormControlLabel$1 = styled(material.FormControlLabel)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6733
6759
|
var spaces = getSpaces(props);
|
|
6734
6760
|
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 ");
|
|
6735
6761
|
});
|
|
6736
|
-
var StyledLabelContainer$1 = styled("span")(templateObject_3$
|
|
6737
|
-
var StyledCheckboxLabel = styled("span")(templateObject_4$
|
|
6762
|
+
var StyledLabelContainer$1 = styled("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"])));
|
|
6763
|
+
var StyledCheckboxLabel = styled("span")(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6738
6764
|
var spaces = getSpaces(props);
|
|
6739
6765
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
6740
6766
|
});
|
|
6741
|
-
var StyledCheckboxCaption = styled("span")(templateObject_5$
|
|
6767
|
+
var StyledCheckboxCaption = styled("span")(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6742
6768
|
var _a, _b;
|
|
6743
6769
|
var disabled = props.disabled;
|
|
6744
6770
|
var semanticColors = getSemanticColors(props);
|
|
6745
6771
|
return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
6746
6772
|
});
|
|
6747
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
|
|
6748
6774
|
|
|
6749
6775
|
/**
|
|
6750
6776
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -6795,7 +6821,7 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
|
|
|
6795
6821
|
})));
|
|
6796
6822
|
};
|
|
6797
6823
|
|
|
6798
|
-
var StyledRadioButton = styled(material.Radio)(templateObject_1$
|
|
6824
|
+
var StyledRadioButton = styled(material.Radio)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6799
6825
|
var _a, _b, _c, _d, _e, _f;
|
|
6800
6826
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6801
6827
|
var spaces = getSpaces(props);
|
|
@@ -6805,26 +6831,27 @@ var StyledRadioButton = styled(material.Radio)(templateObject_1$n || (templateOb
|
|
|
6805
6831
|
default: "base",
|
|
6806
6832
|
negative: "negative",
|
|
6807
6833
|
notice: "notice",
|
|
6834
|
+
positive: "positive",
|
|
6808
6835
|
};
|
|
6809
6836
|
var radioColor = intentToColor[intent];
|
|
6810
6837
|
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 ");
|
|
6811
6838
|
});
|
|
6812
|
-
var StyledFormControlLabel = styled(material.FormControlLabel)(templateObject_2$
|
|
6839
|
+
var StyledFormControlLabel = styled(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6813
6840
|
var spaces = getSpaces(props);
|
|
6814
6841
|
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 ");
|
|
6815
6842
|
});
|
|
6816
|
-
var StyledLabelContainer = styled("span")(templateObject_3$
|
|
6817
|
-
var StyledRadioLabel = styled("span")(templateObject_4$
|
|
6843
|
+
var StyledLabelContainer = styled("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"])));
|
|
6844
|
+
var StyledRadioLabel = styled("span")(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6818
6845
|
var spaces = getSpaces(props);
|
|
6819
6846
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
6820
6847
|
});
|
|
6821
|
-
var StyledRadioCaption = styled("span")(templateObject_5$
|
|
6848
|
+
var StyledRadioCaption = styled("span")(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6822
6849
|
var _a, _b;
|
|
6823
6850
|
var disabled = props.disabled;
|
|
6824
6851
|
var semanticColors = getSemanticColors(props);
|
|
6825
6852
|
return "\n color: ".concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
6826
6853
|
});
|
|
6827
|
-
var templateObject_1$
|
|
6854
|
+
var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
6828
6855
|
|
|
6829
6856
|
/**
|
|
6830
6857
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -6872,11 +6899,11 @@ var disabledSlider = function (props) {
|
|
|
6872
6899
|
var mode = getMode(props);
|
|
6873
6900
|
return "\n .".concat(material.sliderClasses.track, " {\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.thumb, ".").concat(material.sliderClasses.disabled, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled, ";\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n background-color: ").concat(mode === "light" ? (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n \n & * {\n color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled, ";\n }\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textDisabled, "\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillPrimary, ";\n }\n ");
|
|
6874
6901
|
};
|
|
6875
|
-
var StyledSlider = styled(material.Slider)(templateObject_1$
|
|
6902
|
+
var StyledSlider = styled(material.Slider)(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6876
6903
|
var disabled = props.disabled;
|
|
6877
6904
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
6878
6905
|
});
|
|
6879
|
-
var templateObject_1$
|
|
6906
|
+
var templateObject_1$p;
|
|
6880
6907
|
|
|
6881
6908
|
/**
|
|
6882
6909
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -6887,29 +6914,23 @@ var InputSlider = React.forwardRef(function (props, ref) {
|
|
|
6887
6914
|
});
|
|
6888
6915
|
|
|
6889
6916
|
var sdsPropNames$1 = ["sdsStyle", "sdsType", "intent", "hideLabel"];
|
|
6890
|
-
var
|
|
6917
|
+
var applyIntentColor = function (props, intent) {
|
|
6891
6918
|
var _a, _b, _c, _d;
|
|
6892
6919
|
var borders = getBorders(props);
|
|
6893
6920
|
var semanticColors = getSemanticColors(props);
|
|
6894
|
-
return react.css(templateObject_1$
|
|
6895
|
-
};
|
|
6896
|
-
var notice = function (props) {
|
|
6897
|
-
var _a, _b, _c, _d;
|
|
6898
|
-
var borders = getBorders(props);
|
|
6899
|
-
var semanticColors = getSemanticColors(props);
|
|
6900
|
-
return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.notice) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary);
|
|
6921
|
+
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);
|
|
6901
6922
|
};
|
|
6902
6923
|
var disabledStyled$1 = function (props) {
|
|
6903
6924
|
var _a, _b, _c;
|
|
6904
6925
|
var borders = getBorders(props);
|
|
6905
6926
|
var semanticColors = getSemanticColors(props);
|
|
6906
|
-
return react.css(
|
|
6927
|
+
return react.css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .", " {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled);
|
|
6907
6928
|
};
|
|
6908
6929
|
var textArea = function (props) {
|
|
6909
6930
|
var spaces = getSpaces(props);
|
|
6910
|
-
return react.css(
|
|
6931
|
+
return react.css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), material.outlinedInputClasses.multiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.outlinedInputClasses.inputMultiline, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
6911
6932
|
};
|
|
6912
|
-
var StyledLabel = styled("label")(
|
|
6933
|
+
var StyledLabel = styled("label")(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: block;\n ", "\n\n ", "\n"], ["\n display: block;\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6913
6934
|
var spaces = getSpaces(props);
|
|
6914
6935
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6915
6936
|
});
|
|
@@ -6917,16 +6938,16 @@ var StyledInputBase = styled(material.TextField, {
|
|
|
6917
6938
|
shouldForwardProp: function (prop) {
|
|
6918
6939
|
return !sdsPropNames$1.includes(prop.toString());
|
|
6919
6940
|
},
|
|
6920
|
-
})(
|
|
6941
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6921
6942
|
var _a, _b, _c, _d;
|
|
6922
6943
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
6923
6944
|
var spaces = getSpaces(props);
|
|
6924
6945
|
var borders = getBorders(props);
|
|
6925
6946
|
var corners = getCorners(props);
|
|
6926
6947
|
var semanticColors = getSemanticColors(props);
|
|
6927
|
-
return react.css(
|
|
6948
|
+
return react.css(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n display: block;\n\n .", " {\n width: 100%;\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n width: 100%;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.root, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(props), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders.base) === null || _c === void 0 ? void 0 : _c.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "negative" && applyIntentColor(props, "negative"), intent === "notice" && applyIntentColor(props, "notice"), intent === "positive" && applyIntentColor(props, "positive"), disabled && disabledStyled$1(props));
|
|
6928
6949
|
});
|
|
6929
|
-
var templateObject_1$
|
|
6950
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
6930
6951
|
|
|
6931
6952
|
/**
|
|
6932
6953
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -6987,11 +7008,11 @@ var toggleOff = function (props) {
|
|
|
6987
7008
|
: (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconPrimary, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled : (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textSecondary, ";\n content: \"").concat(value, "\";\n }\n }\n\n &:hover {\n .").concat(material.switchClasses.switchBase, " {\n &:after {\n color: ").concat(disabled ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, ";\n }\n }\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.fillPrimary, " !important;\n opacity: 1 !important;\n }\n\n ").concat(!disabled &&
|
|
6988
7009
|
"&:hover {\n outline: ".concat((_k = borders === null || borders === void 0 ? void 0 : borders.base) === null || _k === void 0 ? void 0 : _k.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.iconPrimaryHover, ";\n }\n }"), "\n ");
|
|
6989
7010
|
};
|
|
6990
|
-
var Toggle = styled(material.Switch)(templateObject_1$
|
|
7011
|
+
var Toggle = styled(material.Switch)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
6991
7012
|
var checked = props.checked;
|
|
6992
7013
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
6993
7014
|
});
|
|
6994
|
-
var templateObject_1$
|
|
7015
|
+
var templateObject_1$n;
|
|
6995
7016
|
|
|
6996
7017
|
/**
|
|
6997
7018
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7009,18 +7030,18 @@ var InputToggle = function (props) {
|
|
|
7009
7030
|
return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
7010
7031
|
};
|
|
7011
7032
|
|
|
7012
|
-
var doNotForwardProps$
|
|
7033
|
+
var doNotForwardProps$a = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
7013
7034
|
var defaultStyle = function (props) {
|
|
7014
7035
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
7015
7036
|
var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
|
|
7016
7037
|
var semanticColors = getSemanticColors(props);
|
|
7017
|
-
return react.css(templateObject_1$
|
|
7038
|
+
return react.css(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "], ["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, sdsSize === "s" ? -4 : -3, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.textActionHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.textActionPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
|
|
7018
7039
|
};
|
|
7019
7040
|
var dashedStyle = function (props) {
|
|
7020
7041
|
var _a, _b, _c;
|
|
7021
7042
|
var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
|
|
7022
7043
|
var semanticColors = getSemanticColors(props);
|
|
7023
|
-
return react.css(templateObject_2$
|
|
7044
|
+
return react.css(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n margin-left: 1px;\n width: 100%;\n background-image: linear-gradient(\n to right,\n ", " 60%,\n transparent 60%\n );\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(\n to right,\n ", " 60%,\n ", " 60%\n );\n }\n }\n "], ["\n color: inherit;\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n margin-left: 1px;\n width: 100%;\n background-image: linear-gradient(\n to right,\n ", " 60%,\n transparent 60%\n );\n background-size: 5px 100%;\n }\n\n &:hover,\n &:focus {\n text-decoration: none;\n &::after {\n background-image: linear-gradient(\n to right,\n ", " 60%,\n ", " 60%\n );\n }\n }\n "])), sdsSize === "s" ? -4 : -3, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderHover);
|
|
7024
7045
|
};
|
|
7025
7046
|
var smallStyle = function (props) {
|
|
7026
7047
|
return fontBodyS$1(props);
|
|
@@ -7030,13 +7051,13 @@ var extraSmallStyle = function (props) {
|
|
|
7030
7051
|
};
|
|
7031
7052
|
var StyledLink = styled(material.Link, {
|
|
7032
7053
|
shouldForwardProp: function (prop) {
|
|
7033
|
-
return !doNotForwardProps$
|
|
7054
|
+
return !doNotForwardProps$a.includes(prop.toString());
|
|
7034
7055
|
},
|
|
7035
|
-
})(templateObject_4$
|
|
7056
|
+
})(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
7036
7057
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7037
|
-
return react.css(templateObject_3$
|
|
7058
|
+
return react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
7038
7059
|
});
|
|
7039
|
-
var templateObject_1$
|
|
7060
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
|
|
7040
7061
|
|
|
7041
7062
|
/**
|
|
7042
7063
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7051,10 +7072,10 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7051
7072
|
});
|
|
7052
7073
|
|
|
7053
7074
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
7054
|
-
var doNotForwardProps$
|
|
7075
|
+
var doNotForwardProps$9 = ["marginBottom", "ordered"];
|
|
7055
7076
|
var StyledList = styled(material.List, {
|
|
7056
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7057
|
-
})(templateObject_1$
|
|
7077
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
7078
|
+
})(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"], ["\n .MuiListSubheader-root {\n ", "\n }\n\n ", "\n"])), propsToMarginBottom$1, function (props) {
|
|
7058
7079
|
if (!props.ordered)
|
|
7059
7080
|
return "";
|
|
7060
7081
|
return "\n counter-reset: section;\n ";
|
|
@@ -7072,7 +7093,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7072
7093
|
var marginBottom = props.marginBottom;
|
|
7073
7094
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7074
7095
|
}
|
|
7075
|
-
var templateObject_1$
|
|
7096
|
+
var templateObject_1$l;
|
|
7076
7097
|
|
|
7077
7098
|
/**
|
|
7078
7099
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7089,10 +7110,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
7089
7110
|
var fontBodyXxs = fontBody("xxs");
|
|
7090
7111
|
var fontBodyXxxs = fontBody("xxxs");
|
|
7091
7112
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
7092
|
-
var doNotForwardProps$
|
|
7113
|
+
var doNotForwardProps$8 = ["marginBottom", "fontSize", "ordered"];
|
|
7093
7114
|
var StyledListItem = styled(material.ListItem, {
|
|
7094
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7095
|
-
})(templateObject_1$
|
|
7115
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
7116
|
+
})(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"], ["\n ", "\n ", "\n\n padding: 0;\n\n ", "\n\n &:before {\n display: inline-block;\n\n ", "\n }\n"])), propsToMarginBottom, propsToFontBody, function (props) {
|
|
7096
7117
|
var ordered = props.ordered;
|
|
7097
7118
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7098
7119
|
}, function (props) {
|
|
@@ -7123,11 +7144,11 @@ function propsToMarginBottom(props) {
|
|
|
7123
7144
|
var marginBottom = props.marginBottom;
|
|
7124
7145
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
7125
7146
|
}
|
|
7126
|
-
var ListItemLabel = styled("span")(templateObject_2$
|
|
7147
|
+
var ListItemLabel = styled("span")(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-right: 5px;\n\n ", "\n"], ["\n margin-right: 5px;\n\n ", "\n"])), function (props) {
|
|
7127
7148
|
var fontWeights = getFontWeights(props);
|
|
7128
7149
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7129
7150
|
});
|
|
7130
|
-
var templateObject_1$
|
|
7151
|
+
var templateObject_1$k, templateObject_2$a;
|
|
7131
7152
|
|
|
7132
7153
|
/**
|
|
7133
7154
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7137,11 +7158,11 @@ var ListItem = function (props) {
|
|
|
7137
7158
|
};
|
|
7138
7159
|
|
|
7139
7160
|
var fontHeaderM = fontHeader("m");
|
|
7140
|
-
var StyledListSubheader = styled(material.ListSubheader)(templateObject_1$
|
|
7161
|
+
var StyledListSubheader = styled(material.ListSubheader)(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"], ["\n &.MuiListSubheader-root {\n ", "\n\n line-height: unset;\n color: unset;\n\n ", "\n }\n"])), fontHeaderM, function (props) {
|
|
7141
7162
|
var spaces = getSpaces(props);
|
|
7142
7163
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7143
7164
|
});
|
|
7144
|
-
var templateObject_1$
|
|
7165
|
+
var templateObject_1$j;
|
|
7145
7166
|
|
|
7146
7167
|
/**
|
|
7147
7168
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7150,7 +7171,7 @@ var ListSubheader = function (props) {
|
|
|
7150
7171
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7151
7172
|
};
|
|
7152
7173
|
|
|
7153
|
-
var StyledText = styled("span")(templateObject_1$
|
|
7174
|
+
var StyledText = styled("span")(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7154
7175
|
var spaces = getSpaces(props);
|
|
7155
7176
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7156
7177
|
});
|
|
@@ -7158,37 +7179,37 @@ var minimal = function (props) {
|
|
|
7158
7179
|
var _a, _b;
|
|
7159
7180
|
var iconSizes = getIconSizes(props);
|
|
7160
7181
|
var semanticColors = getSemanticColors(props);
|
|
7161
|
-
return react.css(templateObject_2$
|
|
7182
|
+
return react.css(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n color: ", ";\n\n svg {\n height: ", "px;\n width: ", "px;\n\n path {\n fill: ", ";\n }\n }\n "])), fontBodyS$1(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary);
|
|
7162
7183
|
};
|
|
7163
7184
|
var tag = function (props) {
|
|
7164
7185
|
var _a, _b, _c;
|
|
7165
7186
|
var corners = getCorners(props);
|
|
7166
7187
|
var semanticColors = getSemanticColors(props);
|
|
7167
|
-
return react.css(templateObject_3$
|
|
7188
|
+
return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "], ["\n ", "\n\n background-color: ", ";\n border-radius: ", "px;\n color: ", ";\n\n svg {\n path {\n fill: ", ";\n }\n }\n "])), fontCapsXxxxs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _a === void 0 ? void 0 : _a.surfacePrimary, corners === null || corners === void 0 ? void 0 : corners.l, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _b === void 0 ? void 0 : _b.text, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.info) === null || _c === void 0 ? void 0 : _c.ornament);
|
|
7168
7189
|
};
|
|
7169
|
-
var doNotForwardProps$
|
|
7190
|
+
var doNotForwardProps$7 = ["sdsStyle"];
|
|
7170
7191
|
var StyledLoadingIndicator = styled("div", {
|
|
7171
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7172
|
-
})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7192
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$7.includes(prop); },
|
|
7193
|
+
})(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7173
7194
|
var sdsStyle = props.sdsStyle;
|
|
7174
7195
|
var spaces = getSpaces(props);
|
|
7175
|
-
var style = react.css(templateObject_4$
|
|
7176
|
-
return react.css(templateObject_5$
|
|
7196
|
+
var style = react.css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "], ["\n display: inline-flex;\n align-items: center;\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
7197
|
+
return react.css(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), style, sdsStyle === "minimal" && minimal(props), sdsStyle === "tag" && tag(props));
|
|
7177
7198
|
});
|
|
7178
|
-
var templateObject_1$
|
|
7199
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
|
|
7179
7200
|
|
|
7180
7201
|
var LoadingIndicator = function (_a) {
|
|
7181
7202
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7182
7203
|
return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
|
|
7183
7204
|
};
|
|
7184
7205
|
|
|
7185
|
-
var StyledMenu = styled(material.Menu)(templateObject_1$
|
|
7206
|
+
var StyledMenu = styled(material.Menu)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), material.menuClasses.paper, function (props) {
|
|
7186
7207
|
var _a;
|
|
7187
7208
|
var spaces = getSpaces(props);
|
|
7188
7209
|
var semanticColors = getSemanticColors(props);
|
|
7189
7210
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n background-image: none;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7190
7211
|
});
|
|
7191
|
-
var templateObject_1$
|
|
7212
|
+
var templateObject_1$h;
|
|
7192
7213
|
|
|
7193
7214
|
var ANCHOR_ORIGIN = {
|
|
7194
7215
|
horizontal: "center",
|
|
@@ -7205,19 +7226,19 @@ var Menu = function (props) {
|
|
|
7205
7226
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7206
7227
|
};
|
|
7207
7228
|
|
|
7208
|
-
var StyledMenuItem = styled(MenuItem)(templateObject_1$
|
|
7209
|
-
var doNotForwardProps$
|
|
7229
|
+
var StyledMenuItem = styled(MenuItem)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
7230
|
+
var doNotForwardProps$6 = ["search", "InputBaseProps", "keepSearchOnSelect"];
|
|
7210
7231
|
// (thuang): Casting the type to `Autocomplete`
|
|
7211
7232
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
7212
7233
|
var StyledAutocomplete = styled(material.Autocomplete, {
|
|
7213
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7214
|
-
})(templateObject_2$
|
|
7234
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
7235
|
+
})(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n ", "\n width: 100%;\n"], ["\n ", "\n width: 100%;\n"])), function (_a) {
|
|
7215
7236
|
var search = _a.search;
|
|
7216
7237
|
return !search && "height: 0; margin: 0 !important;";
|
|
7217
7238
|
});
|
|
7218
7239
|
var InputBaseWrapper = styled("div", {
|
|
7219
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7220
|
-
})(templateObject_3$
|
|
7240
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
7241
|
+
})(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7221
7242
|
var search = props.search;
|
|
7222
7243
|
if (!search) {
|
|
7223
7244
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -7229,12 +7250,12 @@ var InputBaseWrapper = styled("div", {
|
|
|
7229
7250
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7230
7251
|
});
|
|
7231
7252
|
var StyledMenuInputSearch = styled(InputSearch, {
|
|
7232
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7233
|
-
})(templateObject_4$
|
|
7253
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$6.includes(prop); },
|
|
7254
|
+
})(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"], ["\n && {\n margin: 0;\n\n .", " {\n width: 100%;\n padding: 0;\n padding-right: 14px !important;\n }\n\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n }\n"])), material.inputBaseClasses.root, function (_a) {
|
|
7234
7255
|
var search = _a.search;
|
|
7235
7256
|
return (search ? "auto" : "transparent");
|
|
7236
7257
|
});
|
|
7237
|
-
var templateObject_1$
|
|
7258
|
+
var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
|
|
7238
7259
|
|
|
7239
7260
|
/**
|
|
7240
7261
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -7338,24 +7359,24 @@ var useScrollStopListener = function (callback, timeout) {
|
|
|
7338
7359
|
}, [timeout]);
|
|
7339
7360
|
};
|
|
7340
7361
|
|
|
7341
|
-
var doNotForwardProps$
|
|
7362
|
+
var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
|
|
7342
7363
|
var StyledTabs$1 = styled(material.Tabs, {
|
|
7343
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7344
|
-
})(templateObject_1$
|
|
7364
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
7365
|
+
})(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7345
7366
|
var _a, _b;
|
|
7346
7367
|
var spaces = getSpaces(props);
|
|
7347
7368
|
var semanticColors = getSemanticColors(props);
|
|
7348
7369
|
return "\n &:before {\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n overflow: visible;\n\n .").concat(material.tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
|
|
7349
7370
|
});
|
|
7350
7371
|
var StyledTab$1 = styled(material.Tab, {
|
|
7351
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7352
|
-
})(templateObject_2$
|
|
7372
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
|
|
7373
|
+
})(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
7353
7374
|
var _a, _b, _c, _d;
|
|
7354
7375
|
var spaces = getSpaces(props);
|
|
7355
7376
|
var semanticColors = getSemanticColors(props);
|
|
7356
7377
|
return "\n ".concat(focusVisibleA11yStyle(props), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
7357
7378
|
});
|
|
7358
|
-
var templateObject_1$
|
|
7379
|
+
var templateObject_1$f, templateObject_2$7;
|
|
7359
7380
|
|
|
7360
7381
|
/**
|
|
7361
7382
|
* Custom hook that observes elements to determine if they are in the viewport.
|
|
@@ -7500,34 +7521,34 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
|
7500
7521
|
});
|
|
7501
7522
|
|
|
7502
7523
|
var fontBodyXs = fontBody("xs");
|
|
7503
|
-
var doNotForwardProps$
|
|
7524
|
+
var doNotForwardProps$4 = ["slideDirection"];
|
|
7504
7525
|
var StyledNotification = styled(material.Alert, {
|
|
7505
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7506
|
-
})(templateObject_1$
|
|
7507
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m
|
|
7508
|
-
var
|
|
7526
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
|
|
7527
|
+
})(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs, function (props) {
|
|
7528
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
7529
|
+
var _o = props.intent, intent = _o === void 0 ? "info" : _o;
|
|
7509
7530
|
var spaces = getSpaces(props);
|
|
7510
7531
|
var shadows = getShadows(props);
|
|
7511
7532
|
var corners = getCorners(props);
|
|
7512
7533
|
var iconSizes = getIconSizes(props);
|
|
7513
7534
|
var semanticColors = getSemanticColors(props);
|
|
7514
7535
|
var typography = getTypography(props);
|
|
7515
|
-
var
|
|
7516
|
-
var iconColor = (
|
|
7517
|
-
var backgroundColor = (
|
|
7536
|
+
var borders = getBorders(props);
|
|
7537
|
+
var iconColor = (_b = (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.ornament) !== null && _b !== void 0 ? _b : "black";
|
|
7538
|
+
var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfacePrimary) !== null && _d !== void 0 ? _d : "white";
|
|
7518
7539
|
// (masoudmanson): The Notification Icon should be vertically centered with the Notification
|
|
7519
7540
|
// Title. The padding-top of the Notification Title is calculated based on the difference
|
|
7520
7541
|
// between the height of the Icon and the line-height of the Notification Title.
|
|
7521
|
-
var alertMessagePaddingTop = Math.abs((((
|
|
7522
|
-
parseInt(String((
|
|
7542
|
+
var alertMessagePaddingTop = Math.abs((((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height) !== null && _e !== void 0 ? _e : 0) -
|
|
7543
|
+
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"))) /
|
|
7523
7544
|
2);
|
|
7524
|
-
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((
|
|
7545
|
+
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 ");
|
|
7525
7546
|
});
|
|
7526
|
-
var StyledButtonWrapper = styled("div")(templateObject_2$
|
|
7547
|
+
var StyledButtonWrapper = styled("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7527
7548
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
7528
7549
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
7529
7550
|
});
|
|
7530
|
-
var templateObject_1$
|
|
7551
|
+
var templateObject_1$e, templateObject_2$6;
|
|
7531
7552
|
|
|
7532
7553
|
/**
|
|
7533
7554
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -7575,7 +7596,7 @@ var Notification = function (_a) {
|
|
|
7575
7596
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsxRuntime.jsx(Button, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", "data-testid": "notificationCloseButton", icon: "XMark" })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsxRuntime.jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsxRuntime.jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
|
|
7576
7597
|
};
|
|
7577
7598
|
|
|
7578
|
-
var doNotForwardProps$
|
|
7599
|
+
var doNotForwardProps$3 = [
|
|
7579
7600
|
"sdsStyle",
|
|
7580
7601
|
"selected",
|
|
7581
7602
|
"onPageChange",
|
|
@@ -7588,14 +7609,14 @@ var doNotForwardProps$2 = [
|
|
|
7588
7609
|
"pageSize",
|
|
7589
7610
|
"truncateDropdown",
|
|
7590
7611
|
];
|
|
7591
|
-
var StyledPaginationButton = styled(Button)(templateObject_1$
|
|
7612
|
+
var StyledPaginationButton = styled(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7592
7613
|
var _a, _b, _c;
|
|
7593
7614
|
var semanticColors = getSemanticColors(props);
|
|
7594
7615
|
return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconPrimary, "\n }\n\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.iconPrimaryHover, "\n }\n }\n ");
|
|
7595
7616
|
});
|
|
7596
7617
|
var StyledPaginationChevronList = styled("li", {
|
|
7597
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7598
|
-
})(templateObject_2$
|
|
7618
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
|
|
7619
|
+
})(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7599
7620
|
var _a, _b, _c, _d, _e;
|
|
7600
7621
|
var disabled = props.disabled;
|
|
7601
7622
|
var spaces = getSpaces(props);
|
|
@@ -7603,16 +7624,16 @@ var StyledPaginationChevronList = styled("li", {
|
|
|
7603
7624
|
return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.iconPrimary, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.iconPrimaryHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(props), "\n ");
|
|
7604
7625
|
});
|
|
7605
7626
|
var StyledPagination = styled("ul", {
|
|
7606
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7607
|
-
})(templateObject_3$
|
|
7627
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
|
|
7628
|
+
})(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", "\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n & li {\n list-style: none;\n }\n"], ["\n ", "\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n & li {\n list-style: none;\n }\n"])), fontBodyS$1);
|
|
7608
7629
|
var selectedPageStyle = function (props) {
|
|
7609
7630
|
var _a, _b, _c, _d;
|
|
7610
7631
|
var semanticColors = getSemanticColors(props);
|
|
7611
7632
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillSelected, ";\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, ";\n\n &:hover {\n background-color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillSelected, ";\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimaryInverse, ";\n }\n ");
|
|
7612
7633
|
};
|
|
7613
7634
|
var Page = styled("li", {
|
|
7614
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7615
|
-
})(templateObject_4$
|
|
7635
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$3.includes(prop); },
|
|
7636
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodySemiboldS, function (props) {
|
|
7616
7637
|
var _a, _b, _c;
|
|
7617
7638
|
var selected = props.selected, sdsStyle = props.sdsStyle;
|
|
7618
7639
|
var spaces = getSpaces(props);
|
|
@@ -7620,10 +7641,10 @@ var Page = styled("li", {
|
|
|
7620
7641
|
var semanticColors = getSemanticColors(props);
|
|
7621
7642
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(props), "\n ");
|
|
7622
7643
|
});
|
|
7623
|
-
var templateObject_1$
|
|
7644
|
+
var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
|
|
7624
7645
|
|
|
7625
|
-
var StyledPaginationDropdownMenu = styled(Menu)(templateObject_1$
|
|
7626
|
-
var templateObject_1$
|
|
7646
|
+
var StyledPaginationDropdownMenu = styled(Menu)(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"], ["\n & .MuiPaper-root {\n max-height: 120px;\n }\n"])));
|
|
7647
|
+
var templateObject_1$c;
|
|
7627
7648
|
|
|
7628
7649
|
var PageListDropdown = function (props) {
|
|
7629
7650
|
var pageList = props.pageList, onPageChange = props.onPageChange, sdsStyle = props.sdsStyle;
|
|
@@ -7743,40 +7764,141 @@ var Pagination = React.forwardRef(function (props, ref) {
|
|
|
7743
7764
|
}
|
|
7744
7765
|
});
|
|
7745
7766
|
|
|
7767
|
+
var doNotForwardProps$2 = [
|
|
7768
|
+
"sdsType",
|
|
7769
|
+
"position",
|
|
7770
|
+
"width",
|
|
7771
|
+
"headerComponent",
|
|
7772
|
+
"onClick",
|
|
7773
|
+
"disableScrollLock",
|
|
7774
|
+
"closeButtonOnClick",
|
|
7775
|
+
"CloseButtonComponent",
|
|
7776
|
+
];
|
|
7777
|
+
var basicPanelStyles = function (props) {
|
|
7778
|
+
var _a;
|
|
7779
|
+
var semanticColors = getSemanticColors(props);
|
|
7780
|
+
var spaces = getSpaces(props);
|
|
7781
|
+
return react.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.l, PANEL_BASIC_MIN_WIDTH_PX, PANEL_BASIC_MIN_WIDTH_PX);
|
|
7782
|
+
};
|
|
7783
|
+
var overlayPanelStyles = function (props) {
|
|
7784
|
+
var _a;
|
|
7785
|
+
var semanticColors = getSemanticColors(props);
|
|
7786
|
+
var spaces = getSpaces(props);
|
|
7787
|
+
var shadows = getShadows(props);
|
|
7788
|
+
return react.css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "], ["\n .", " {\n background-color: ", ";\n padding: ", "px;\n min-width: ", "px;\n min-height: ", "px;\n box-shadow: ", ";\n background-image: none;\n }\n "])), material.drawerClasses.paper, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xl, PANEL_OVERLAY_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, shadows === null || shadows === void 0 ? void 0 : shadows.l);
|
|
7789
|
+
};
|
|
7790
|
+
var StyledDrawer = styled(material.Drawer, {
|
|
7791
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
7792
|
+
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7793
|
+
var _a;
|
|
7794
|
+
var _b = props.sdsType, sdsType = _b === void 0 ? "basic" : _b, _c = props.anchor, anchor = _c === void 0 ? "left" : _c, width = props.width;
|
|
7795
|
+
var semanticColors = getSemanticColors(props);
|
|
7796
|
+
var spaces = getSpaces(props);
|
|
7797
|
+
var widthString = typeof width === "number" ? "".concat(width, "px") : width;
|
|
7798
|
+
var panelWidth = anchor !== "bottom" ? widthString : "100%";
|
|
7799
|
+
var panelHeight = anchor !== "bottom" ? "100%" : widthString;
|
|
7800
|
+
return react.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n .", " {\n border-color: ", ";\n border-width: ", "px;\n height: ", ";\n width: ", ";\n }\n\n .", " {\n height: ", ";\n width: ", ";\n }\n\n ", "\n ", "\n "], ["\n .", " {\n border-color: ", ";\n border-width: ", "px;\n height: ", ";\n width: ", ";\n }\n\n .", " {\n height: ", ";\n width: ", ";\n }\n\n ", "\n ", "\n "])), material.drawerClasses.root, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, panelHeight, panelWidth, material.drawerClasses.paper, panelHeight, panelWidth, sdsType === "basic" && basicPanelStyles(props), sdsType === "overlay" && overlayPanelStyles(props));
|
|
7801
|
+
});
|
|
7802
|
+
var StyledHeaderComponent = styled("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7803
|
+
var spaces = getSpaces(props);
|
|
7804
|
+
return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl);
|
|
7805
|
+
});
|
|
7806
|
+
var templateObject_1$b, templateObject_2$4, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
7807
|
+
|
|
7808
|
+
var StyledPanelHeader = styled("div")(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7809
|
+
var spaces = getSpaces(props);
|
|
7810
|
+
return "\n width: 100%;\n height: 100%;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7811
|
+
});
|
|
7812
|
+
var templateObject_1$a;
|
|
7813
|
+
|
|
7814
|
+
var PanelHeader = function (props) {
|
|
7815
|
+
var children = props.children;
|
|
7816
|
+
return jsxRuntime.jsx(StyledPanelHeader, { children: children });
|
|
7817
|
+
};
|
|
7818
|
+
|
|
7819
|
+
var StyledPanelHeaderClose = styled("div")(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n align-items: center;\n"], ["\n display: flex;\n justify-content: end;\n align-items: center;\n"])));
|
|
7820
|
+
var templateObject_1$9;
|
|
7821
|
+
|
|
7822
|
+
var PanelHeaderClose = function (props) {
|
|
7823
|
+
var onClick = props.onClick, CloseButtonComponent = props.CloseButtonComponent;
|
|
7824
|
+
return (jsxRuntime.jsx(StyledPanelHeaderClose, { onClick: onClick, children: CloseButtonComponent ? (CloseButtonComponent) : (jsxRuntime.jsx(Button, { sdsStyle: "icon", sdsType: "tertiary", icon: "XMark", "aria-label": "Panel Toggle" })) }));
|
|
7825
|
+
};
|
|
7826
|
+
|
|
7827
|
+
// Type guard to narrow the type
|
|
7828
|
+
function isOverlayPanelProps(props) {
|
|
7829
|
+
return props.sdsType === "overlay";
|
|
7830
|
+
}
|
|
7831
|
+
var PANEL_BASIC_MIN_WIDTH_PX = 240;
|
|
7832
|
+
var PANEL_OVERLAY_MIN_WIDTH_PX = 320;
|
|
7833
|
+
/**
|
|
7834
|
+
* @see https://mui.com/material-ui/react-drawer/
|
|
7835
|
+
*/
|
|
7836
|
+
var Panel = React.forwardRef(function (props, ref) {
|
|
7837
|
+
var children = props.children, _a = props.sdsType, sdsType = _a === void 0 ? "basic" : _a, _b = props.position, position = _b === void 0 ? "left" : _b, width = props.width;
|
|
7838
|
+
var drawerWidth = width
|
|
7839
|
+
? width
|
|
7840
|
+
: sdsType === "basic"
|
|
7841
|
+
? PANEL_BASIC_MIN_WIDTH_PX
|
|
7842
|
+
: PANEL_OVERLAY_MIN_WIDTH_PX;
|
|
7843
|
+
var drawerVariant = sdsType === "basic" ? "persistent" : "temporary";
|
|
7844
|
+
// (masoudmanson): The basic Panel only supports "left" or "right" positions.
|
|
7845
|
+
// If a "bottom" position is provided for a basic Panel, it defaults to "left".
|
|
7846
|
+
var drawerAnchor = sdsType === "overlay"
|
|
7847
|
+
? position
|
|
7848
|
+
: position === "bottom"
|
|
7849
|
+
? "left"
|
|
7850
|
+
: position;
|
|
7851
|
+
return (
|
|
7852
|
+
/**
|
|
7853
|
+
* (masoudmanson): We need the props after {...props} to override any
|
|
7854
|
+
* user-defined values. Placing them afterward ensures that our values
|
|
7855
|
+
* take priority.
|
|
7856
|
+
*
|
|
7857
|
+
* For example, the SDS design specifies that a BasicPanel should only be anchored
|
|
7858
|
+
* to the left or right. To prevent users from positioning it at the bottom,
|
|
7859
|
+
* the 'anchor' prop must always be set to our predefined value.
|
|
7860
|
+
*/
|
|
7861
|
+
jsxRuntime.jsxs(StyledDrawer, __assign({}, props, { ref: ref, anchor: drawerAnchor, variant: drawerVariant, width: drawerWidth, children: [isOverlayPanelProps(props) && (jsxRuntime.jsxs(StyledHeaderComponent, { children: [(props === null || props === void 0 ? void 0 : props.HeaderComponent) && (jsxRuntime.jsx(PanelHeader, { children: props === null || props === void 0 ? void 0 : props.HeaderComponent })), jsxRuntime.jsx(PanelHeaderClose, { onClick: props === null || props === void 0 ? void 0 : props.closeButtonOnClick, CloseButtonComponent: props === null || props === void 0 ? void 0 : props.CloseButtonComponent })] })), children] })));
|
|
7862
|
+
});
|
|
7863
|
+
|
|
7746
7864
|
var doNotForwardProps$1 = ["buttonDefinition"];
|
|
7747
7865
|
var StyledSegmentedControl = styled(material.ToggleButtonGroup, {
|
|
7748
7866
|
shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
|
|
7749
7867
|
})(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7750
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
7868
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
7751
7869
|
var spaces = getSpaces(props);
|
|
7752
7870
|
var semanticColors = getSemanticColors(props);
|
|
7753
|
-
return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.
|
|
7871
|
+
return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.disabled, " {\n border-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n }\n\n .").concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.fillOpen, ";\n color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.iconSelected, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n background-color: ").concat((_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(props), "\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPrimary, ";\n border-color: ").concat((_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.border, ";\n line-height: 0px;\n color: ").concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.iconSecondary, ";\n padding: ").concat(((_j = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _j !== void 0 ? _j : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.border, ";\n background-color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.fillHover, ";\n }\n }\n ");
|
|
7754
7872
|
});
|
|
7755
7873
|
var templateObject_1$8;
|
|
7756
7874
|
|
|
7875
|
+
/**
|
|
7876
|
+
* @see https://mui.com/material-ui/react-toggle-button/
|
|
7877
|
+
*/
|
|
7757
7878
|
var SegmentedControl = function (props) {
|
|
7758
7879
|
var _a;
|
|
7759
|
-
var buttonDefinition = props.buttonDefinition;
|
|
7760
|
-
var
|
|
7761
|
-
var _b = React.useState(
|
|
7880
|
+
var buttonDefinition = props.buttonDefinition, valueProp = props.value, onChangeProp = props.onChange, restProps = __rest(props, ["buttonDefinition", "value", "onChange"]);
|
|
7881
|
+
var initialValue = ((_a = buttonDefinition.find(function (button) { return !button.disabled; })) === null || _a === void 0 ? void 0 : _a.value) || null;
|
|
7882
|
+
var _b = React.useState(initialValue), active = _b[0], setActive = _b[1];
|
|
7883
|
+
// (masoudmanson): Add Controlled/Uncontrolled Component pattern
|
|
7884
|
+
var isControlled = valueProp !== undefined;
|
|
7885
|
+
var value = isControlled ? valueProp : active;
|
|
7762
7886
|
var handleActive = function (event, newActive) {
|
|
7763
7887
|
if (newActive !== null) {
|
|
7764
|
-
|
|
7888
|
+
if (!isControlled) {
|
|
7889
|
+
setActive(newActive);
|
|
7890
|
+
}
|
|
7891
|
+
if (onChangeProp) {
|
|
7892
|
+
onChangeProp(event, newActive);
|
|
7893
|
+
}
|
|
7765
7894
|
}
|
|
7766
7895
|
};
|
|
7767
|
-
return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value:
|
|
7768
|
-
var icon = button.icon, tooltipText = button.tooltipText, value = button.
|
|
7769
|
-
var iconItem =
|
|
7770
|
-
|
|
7771
|
-
|
|
7772
|
-
|
|
7773
|
-
}
|
|
7774
|
-
else {
|
|
7775
|
-
return jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" });
|
|
7776
|
-
}
|
|
7777
|
-
}
|
|
7778
|
-
};
|
|
7779
|
-
return (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, value: value, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
|
|
7896
|
+
return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: value, exclusive: true, onChange: handleActive }, restProps, { children: [buttonDefinition.map(function (button) {
|
|
7897
|
+
var icon = button.icon, tooltipText = button.tooltipText, buttonValue = button.value, _a = button.disabled, disabled = _a === void 0 ? false : _a;
|
|
7898
|
+
var iconItem = icon ? (typeof icon !== "string" ? (icon) : (jsxRuntime.jsx(Icon, { sdsIcon: icon, sdsSize: "s", sdsType: "button" }))) : null;
|
|
7899
|
+
var toggleButton = (jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, value: buttonValue, disabled: disabled, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem }) }, buttonValue));
|
|
7900
|
+
// (masoudmanson): If the button is disabled, we don't want to show the tooltip.
|
|
7901
|
+
return disabled ? (toggleButton) : (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : buttonValue, sdsStyle: "dark", arrow: true, children: toggleButton }, buttonValue));
|
|
7780
7902
|
}), ";"] })));
|
|
7781
7903
|
};
|
|
7782
7904
|
|
|
@@ -8088,7 +8210,10 @@ exports.MenuItem = MenuItem;
|
|
|
8088
8210
|
exports.MenuSelect = MenuSelect;
|
|
8089
8211
|
exports.NavigationJumpTo = NavigationJumpTo;
|
|
8090
8212
|
exports.Notification = Notification;
|
|
8213
|
+
exports.PANEL_BASIC_MIN_WIDTH_PX = PANEL_BASIC_MIN_WIDTH_PX;
|
|
8214
|
+
exports.PANEL_OVERLAY_MIN_WIDTH_PX = PANEL_OVERLAY_MIN_WIDTH_PX;
|
|
8091
8215
|
exports.Pagination = Pagination;
|
|
8216
|
+
exports.Panel = Panel;
|
|
8092
8217
|
exports.SDSChooseTheme = SDSChooseTheme;
|
|
8093
8218
|
exports.SDSDarkAppTheme = SDSDarkAppTheme;
|
|
8094
8219
|
exports.SDSLightAppTheme = SDSLightAppTheme;
|