@czi-sds/components 21.1.0 → 21.3.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 +40 -9
- package/dist/index.cjs.js +476 -350
- package/dist/index.esm.d.ts +40 -9
- package/dist/index.esm.js +475 -352
- 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,60 +4332,61 @@ 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",
|
|
4379
|
+
"sdsStyle",
|
|
4350
4380
|
"sdsIcon",
|
|
4351
4381
|
"sdsIconProps",
|
|
4352
4382
|
];
|
|
4353
4383
|
var StyledButtonIcon = styled(material.IconButton, {
|
|
4354
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4384
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
4355
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) {
|
|
4356
4386
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4357
|
-
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));
|
|
4358
4388
|
});
|
|
4359
|
-
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;
|
|
4360
4390
|
|
|
4361
4391
|
var ButtonIconSizeToSdsIconSize = {
|
|
4362
4392
|
large: "xl",
|
|
@@ -4457,24 +4487,19 @@ var rounded$3 = function (props) {
|
|
|
4457
4487
|
var _a;
|
|
4458
4488
|
var corners = getCorners(props);
|
|
4459
4489
|
var semanticColors = getSemanticColors(props);
|
|
4460
|
-
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);
|
|
4461
4491
|
};
|
|
4462
|
-
var
|
|
4492
|
+
var applyIntentColor$2 = function (props, intent) {
|
|
4463
4493
|
var _a, _b, _c, _d;
|
|
4464
4494
|
var semanticColors = getSemanticColors(props);
|
|
4465
|
-
return react.css(templateObject_2$
|
|
4466
|
-
};
|
|
4467
|
-
var warning$1 = function (props) {
|
|
4468
|
-
var _a, _b, _c, _d;
|
|
4469
|
-
var semanticColors = getSemanticColors(props);
|
|
4470
|
-
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);
|
|
4471
4496
|
};
|
|
4472
4497
|
var disabledStyled$2 = function (props) {
|
|
4473
4498
|
var _a, _b, _c, _d;
|
|
4474
4499
|
var semanticColors = getSemanticColors(props);
|
|
4475
|
-
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);
|
|
4476
4501
|
};
|
|
4477
|
-
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) {
|
|
4478
4503
|
var spaces = getSpaces(props);
|
|
4479
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 ");
|
|
4480
4505
|
});
|
|
@@ -4482,18 +4507,18 @@ var StyledSearchBase = styled(material.TextField, {
|
|
|
4482
4507
|
shouldForwardProp: function (prop) {
|
|
4483
4508
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4484
4509
|
},
|
|
4485
|
-
})(
|
|
4510
|
+
})(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4486
4511
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
4487
4512
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4488
4513
|
var spaces = getSpaces(props);
|
|
4489
4514
|
var iconSizes = getIconSizes(props);
|
|
4490
4515
|
var semanticColors = getSemanticColors(props);
|
|
4491
|
-
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));
|
|
4492
4517
|
});
|
|
4493
|
-
var StyledInputAdornment = styled(material.InputAdornment)(
|
|
4494
|
-
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;
|
|
4495
4520
|
|
|
4496
|
-
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) {
|
|
4497
4522
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4498
4523
|
var selected = props.selected;
|
|
4499
4524
|
var fontWeights = getFontWeights(props);
|
|
@@ -4501,7 +4526,7 @@ var StyledMenuItem$1 = styled(material.MenuItem)(templateObject_1$L || (template
|
|
|
4501
4526
|
var semanticColors = getSemanticColors(props);
|
|
4502
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 ");
|
|
4503
4528
|
});
|
|
4504
|
-
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"])));
|
|
4505
4530
|
var disabledStyles = function (props) {
|
|
4506
4531
|
var _a;
|
|
4507
4532
|
var disabled = props.disabled;
|
|
@@ -4510,12 +4535,12 @@ var disabledStyles = function (props) {
|
|
|
4510
4535
|
var semanticColors = getSemanticColors(props);
|
|
4511
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 ");
|
|
4512
4537
|
};
|
|
4513
|
-
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) {
|
|
4514
4539
|
var _a;
|
|
4515
4540
|
var semanticColors = getSemanticColors(props);
|
|
4516
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 ");
|
|
4517
4542
|
}, disabledStyles);
|
|
4518
|
-
var StyledMenuItemIcon = styled("span")(templateObject_4$
|
|
4543
|
+
var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4519
4544
|
var _a;
|
|
4520
4545
|
var disabled = props.disabled;
|
|
4521
4546
|
var spaces = getSpaces(props);
|
|
@@ -4523,20 +4548,20 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$
|
|
|
4523
4548
|
var semanticColors = getSemanticColors(props);
|
|
4524
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 ");
|
|
4525
4550
|
});
|
|
4526
|
-
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) {
|
|
4527
4552
|
var _a;
|
|
4528
4553
|
var semanticColors = getSemanticColors(props);
|
|
4529
4554
|
var spaces = getSpaces(props);
|
|
4530
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 ");
|
|
4531
4556
|
}, disabledStyles);
|
|
4532
|
-
var StyledIconWrapper = styled("span")(templateObject_6$
|
|
4557
|
+
var StyledIconWrapper = styled("span")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4533
4558
|
var spaces = getSpaces(props);
|
|
4534
4559
|
var iconSizes = getIconSizes(props);
|
|
4535
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 ");
|
|
4536
4561
|
});
|
|
4537
4562
|
var StyledCheck = styled(iconsMaterial.Check, {
|
|
4538
4563
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4539
|
-
})(templateObject_7$
|
|
4564
|
+
})(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4540
4565
|
var _a, _b;
|
|
4541
4566
|
var selected = props.selected, disabled = props.disabled;
|
|
4542
4567
|
var iconSizes = getIconSizes(props);
|
|
@@ -4558,7 +4583,7 @@ var StyledMinus = styled(iconsMaterial.Remove, {
|
|
|
4558
4583
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
4559
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 ");
|
|
4560
4585
|
});
|
|
4561
|
-
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;
|
|
4562
4587
|
|
|
4563
4588
|
/**
|
|
4564
4589
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4724,7 +4749,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
4724
4749
|
autoComplete: "one-time-code" }, rest))] }));
|
|
4725
4750
|
});
|
|
4726
4751
|
|
|
4727
|
-
var doNotForwardProps$
|
|
4752
|
+
var doNotForwardProps$o = [
|
|
4728
4753
|
"count",
|
|
4729
4754
|
"keepSearchOnSelect",
|
|
4730
4755
|
"search",
|
|
@@ -4733,8 +4758,8 @@ var doNotForwardProps$n = [
|
|
|
4733
4758
|
"onClickAway",
|
|
4734
4759
|
];
|
|
4735
4760
|
var StyledAutocompleteBase = styled(material.Autocomplete, {
|
|
4736
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4737
|
-
})(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) {
|
|
4738
4763
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
4739
4764
|
var search = props.search;
|
|
4740
4765
|
var spaces = getSpaces(props);
|
|
@@ -4743,8 +4768,8 @@ var StyledAutocompleteBase = styled(material.Autocomplete, {
|
|
|
4743
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 ");
|
|
4744
4769
|
});
|
|
4745
4770
|
var InputBaseWrapper$1 = styled("div", {
|
|
4746
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4747
|
-
})(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) {
|
|
4748
4773
|
var search = props.search;
|
|
4749
4774
|
if (!search) {
|
|
4750
4775
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -4754,12 +4779,12 @@ var InputBaseWrapper$1 = styled("div", {
|
|
|
4754
4779
|
}
|
|
4755
4780
|
});
|
|
4756
4781
|
var StyledMenuInputSearch$1 = styled(InputSearch, {
|
|
4757
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4758
|
-
})(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) {
|
|
4759
4784
|
var search = _a.search;
|
|
4760
4785
|
return (search ? "auto" : "transparent");
|
|
4761
4786
|
});
|
|
4762
|
-
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) {
|
|
4763
4788
|
var _a;
|
|
4764
4789
|
var spaces = getSpaces(props);
|
|
4765
4790
|
var corners = getCorners(props);
|
|
@@ -4768,13 +4793,13 @@ var StyledPaper$3 = styled(material.Paper)(templateObject_4$h || (templateObject
|
|
|
4768
4793
|
var semanticColors = getSemanticColors(props);
|
|
4769
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 ");
|
|
4770
4795
|
});
|
|
4771
|
-
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) {
|
|
4772
4797
|
var _a;
|
|
4773
4798
|
var semanticColors = getSemanticColors(props);
|
|
4774
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 ");
|
|
4775
4800
|
});
|
|
4776
|
-
var StyledMenuItemText = styled("div")(templateObject_6$
|
|
4777
|
-
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;
|
|
4778
4803
|
|
|
4779
4804
|
var AutocompleteBase = function (props) {
|
|
4780
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;
|
|
@@ -4939,27 +4964,27 @@ var AutocompleteBase = function (props) {
|
|
|
4939
4964
|
}
|
|
4940
4965
|
};
|
|
4941
4966
|
|
|
4942
|
-
var StyledColumn = styled("div")(templateObject_1$
|
|
4967
|
+
var StyledColumn = styled("div")(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4943
4968
|
var _a;
|
|
4944
4969
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
4945
4970
|
var spaces = getSpaces(props);
|
|
4946
4971
|
var borders = getBorders(props);
|
|
4947
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 ");
|
|
4948
4973
|
});
|
|
4949
|
-
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) {
|
|
4950
4975
|
var _a;
|
|
4951
4976
|
var spaces = getSpaces(props);
|
|
4952
4977
|
var semanticColors = getSemanticColors(props);
|
|
4953
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 ");
|
|
4954
4979
|
});
|
|
4955
|
-
var StyledColumnIcon = styled("span")(templateObject_3$
|
|
4980
|
+
var StyledColumnIcon = styled("span")(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4956
4981
|
var _a, _b;
|
|
4957
4982
|
var spaces = getSpaces(props);
|
|
4958
4983
|
var iconSizes = getIconSizes(props);
|
|
4959
4984
|
var semanticColors = getSemanticColors(props);
|
|
4960
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 ");
|
|
4961
4986
|
});
|
|
4962
|
-
var templateObject_1$
|
|
4987
|
+
var templateObject_1$M, templateObject_2$s, templateObject_3$k;
|
|
4963
4988
|
|
|
4964
4989
|
var AutocompleteGroup = function (props) {
|
|
4965
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"]);
|
|
@@ -4999,7 +5024,7 @@ var AutocompleteGroup = function (props) {
|
|
|
4999
5024
|
}
|
|
5000
5025
|
};
|
|
5001
5026
|
|
|
5002
|
-
var doNotForwardProps$
|
|
5027
|
+
var doNotForwardProps$n = [
|
|
5003
5028
|
"anchorEl",
|
|
5004
5029
|
"count",
|
|
5005
5030
|
"keepSearchOnSelect",
|
|
@@ -5012,9 +5037,9 @@ var doNotForwardProps$m = [
|
|
|
5012
5037
|
];
|
|
5013
5038
|
var StyledPopper$2 = styled(material.Popper, {
|
|
5014
5039
|
shouldForwardProp: function (prop) {
|
|
5015
|
-
return !doNotForwardProps$
|
|
5040
|
+
return !doNotForwardProps$n.includes(prop) || prop === "anchorEl";
|
|
5016
5041
|
},
|
|
5017
|
-
})(templateObject_1$
|
|
5042
|
+
})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5018
5043
|
var _a;
|
|
5019
5044
|
var corners = getCorners(props);
|
|
5020
5045
|
var shadows = getShadows(props);
|
|
@@ -5024,24 +5049,24 @@ var StyledPopper$2 = styled(material.Popper, {
|
|
|
5024
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 ");
|
|
5025
5050
|
});
|
|
5026
5051
|
var StyledPaper$2 = styled(material.Paper, {
|
|
5027
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5028
|
-
})(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) {
|
|
5029
5054
|
var _a;
|
|
5030
5055
|
var shadows = getShadows(props);
|
|
5031
5056
|
var semanticColors = getSemanticColors(props);
|
|
5032
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 ");
|
|
5033
5058
|
});
|
|
5034
|
-
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"])));
|
|
5035
5060
|
var StyledAutocompleteInput = styled(InputSearch, {
|
|
5036
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5037
|
-
})(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) {
|
|
5038
5063
|
var search = _a.search;
|
|
5039
5064
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5040
5065
|
}, function (_a) {
|
|
5041
5066
|
var search = _a.search;
|
|
5042
5067
|
return (search ? "auto" : "transparent");
|
|
5043
5068
|
});
|
|
5044
|
-
var templateObject_1$
|
|
5069
|
+
var templateObject_1$L, templateObject_2$r, templateObject_3$j, templateObject_4$h;
|
|
5045
5070
|
|
|
5046
5071
|
var AutocompleteMultiColumn = function (props) {
|
|
5047
5072
|
var _a;
|
|
@@ -5227,13 +5252,13 @@ var Autocomplete = function (props) {
|
|
|
5227
5252
|
}
|
|
5228
5253
|
};
|
|
5229
5254
|
|
|
5230
|
-
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"])));
|
|
5231
5256
|
var doNotForwardPropsIconWrapper = ["bannerType"];
|
|
5232
5257
|
var IconWrapper$1 = styled("div", {
|
|
5233
5258
|
shouldForwardProp: function (prop) {
|
|
5234
5259
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5235
5260
|
},
|
|
5236
|
-
})(templateObject_2$
|
|
5261
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5237
5262
|
var _a, _b;
|
|
5238
5263
|
var bannerType = props.bannerType;
|
|
5239
5264
|
var iconSizes = getIconSizes(props);
|
|
@@ -5246,7 +5271,7 @@ var StyledButton$2 = styled(Button, {
|
|
|
5246
5271
|
shouldForwardProp: function (prop) {
|
|
5247
5272
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5248
5273
|
},
|
|
5249
|
-
})(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) {
|
|
5250
5275
|
var _a, _b;
|
|
5251
5276
|
var bannerType = props.bannerType;
|
|
5252
5277
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5254,7 +5279,7 @@ var StyledButton$2 = styled(Button, {
|
|
|
5254
5279
|
return "";
|
|
5255
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 ");
|
|
5256
5281
|
});
|
|
5257
|
-
styled("div")(templateObject_4$
|
|
5282
|
+
styled("div")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5258
5283
|
var primary$1 = function (props) {
|
|
5259
5284
|
var _a, _b;
|
|
5260
5285
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5265,15 +5290,15 @@ var secondary$1 = function (props) {
|
|
|
5265
5290
|
var semanticColors = getSemanticColors(props);
|
|
5266
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 ");
|
|
5267
5292
|
};
|
|
5268
|
-
var doNotForwardProps$
|
|
5293
|
+
var doNotForwardProps$m = ["sdsType", "textChild"];
|
|
5269
5294
|
var StyledBanner = styled("div", {
|
|
5270
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5271
|
-
})(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) {
|
|
5272
5297
|
var sdsType = props.sdsType;
|
|
5273
5298
|
var spaces = getSpaces(props);
|
|
5274
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 ");
|
|
5275
5300
|
});
|
|
5276
|
-
var templateObject_1$
|
|
5301
|
+
var templateObject_1$K, templateObject_2$q, templateObject_3$i, templateObject_4$g, templateObject_5$c;
|
|
5277
5302
|
|
|
5278
5303
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5279
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"]);
|
|
@@ -5341,10 +5366,10 @@ var ButtonDropdown = React.forwardRef(function (props, ref) {
|
|
|
5341
5366
|
|
|
5342
5367
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5343
5368
|
|
|
5344
|
-
var doNotForwardProps$
|
|
5369
|
+
var doNotForwardProps$l = ["calloutTitle", "collapsed", "severity"];
|
|
5345
5370
|
var StyledCallout = styled(material.Alert, {
|
|
5346
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5347
|
-
})(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) {
|
|
5348
5373
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
5349
5374
|
var _m = props.intent, intent = _m === void 0 ? "info" : _m;
|
|
5350
5375
|
var spaces = getSpaces(props);
|
|
@@ -5367,7 +5392,7 @@ var StyledCallout = styled(material.Alert, {
|
|
|
5367
5392
|
2);
|
|
5368
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 ");
|
|
5369
5394
|
});
|
|
5370
|
-
var templateObject_1$
|
|
5395
|
+
var templateObject_1$J;
|
|
5371
5396
|
|
|
5372
5397
|
var SDS_STAGE_OPEN = "open";
|
|
5373
5398
|
var SDS_STAGE_CLOSED = "closed";
|
|
@@ -5434,11 +5459,11 @@ var Callout = function (_a) {
|
|
|
5434
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] })) }) }));
|
|
5435
5460
|
};
|
|
5436
5461
|
|
|
5437
|
-
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) {
|
|
5438
5463
|
var spaces = getSpaces(props);
|
|
5439
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 ");
|
|
5440
5465
|
});
|
|
5441
|
-
var templateObject_1$
|
|
5466
|
+
var templateObject_1$I;
|
|
5442
5467
|
|
|
5443
5468
|
var CalloutTitle = function (_a) {
|
|
5444
5469
|
var children = _a.children;
|
|
@@ -5451,22 +5476,22 @@ var dark = function (props) {
|
|
|
5451
5476
|
var _a, _b;
|
|
5452
5477
|
var spaces = getSpaces(props);
|
|
5453
5478
|
var semanticColors = getSemanticColors(props);
|
|
5454
|
-
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);
|
|
5455
5480
|
};
|
|
5456
5481
|
var light = function (props) {
|
|
5457
5482
|
var _a, _b;
|
|
5458
5483
|
var spaces = getSpaces(props);
|
|
5459
5484
|
var semanticColors = getSemanticColors(props);
|
|
5460
|
-
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);
|
|
5461
5486
|
};
|
|
5462
5487
|
var wide = function () {
|
|
5463
|
-
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 "])));
|
|
5464
5489
|
};
|
|
5465
5490
|
var tableStyles = function (props) {
|
|
5466
5491
|
var spaces = getSpaces(props);
|
|
5467
|
-
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);
|
|
5468
5493
|
};
|
|
5469
|
-
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) {
|
|
5470
5495
|
var _a;
|
|
5471
5496
|
var semanticColors = getSemanticColors(props);
|
|
5472
5497
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse, ";\n ");
|
|
@@ -5474,13 +5499,13 @@ var Subtitle$1 = styled("div")(templateObject_5$9 || (templateObject_5$9 = __mak
|
|
|
5474
5499
|
var tooltipCss = function (props) {
|
|
5475
5500
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5476
5501
|
var shadows = getShadows(props);
|
|
5477
|
-
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));
|
|
5478
5503
|
};
|
|
5479
5504
|
var arrowCss = function (props) {
|
|
5480
5505
|
var _a, _b;
|
|
5481
5506
|
var inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5482
5507
|
var semanticColors = getSemanticColors(props);
|
|
5483
|
-
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"
|
|
5484
5509
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimaryInverse
|
|
5485
5510
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary);
|
|
5486
5511
|
};
|
|
@@ -5489,7 +5514,7 @@ var arrowCss = function (props) {
|
|
|
5489
5514
|
* default placement which is calculated by javascript
|
|
5490
5515
|
*/
|
|
5491
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"])));
|
|
5492
|
-
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;
|
|
5493
5518
|
|
|
5494
5519
|
/**
|
|
5495
5520
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5555,7 +5580,7 @@ function mergeClass$1(_a) {
|
|
|
5555
5580
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
5556
5581
|
}
|
|
5557
5582
|
|
|
5558
|
-
var doNotForwardProps$
|
|
5583
|
+
var doNotForwardProps$k = [
|
|
5559
5584
|
"icon",
|
|
5560
5585
|
"iconVerticalAlign",
|
|
5561
5586
|
"horizontalAlign",
|
|
@@ -5583,8 +5608,8 @@ var verticalAlignToFlexMap = {
|
|
|
5583
5608
|
top: "flex-start",
|
|
5584
5609
|
};
|
|
5585
5610
|
var StyledTableData = styled("td", {
|
|
5586
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5587
|
-
})(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) {
|
|
5588
5613
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5589
5614
|
var spaces = getSpaces(props);
|
|
5590
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 ");
|
|
@@ -5595,30 +5620,30 @@ var ShouldWrap = function (lineCount) {
|
|
|
5595
5620
|
var ShouldTruncate = function () {
|
|
5596
5621
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n ";
|
|
5597
5622
|
};
|
|
5598
|
-
var StyledCellContent = styled("div")(templateObject_2$
|
|
5599
|
-
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"])));
|
|
5600
5625
|
var StyledCellIconWrapper = styled("div", {
|
|
5601
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5602
|
-
})(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) {
|
|
5603
5628
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
5604
5629
|
var spaces = getSpaces(props);
|
|
5605
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 ");
|
|
5606
5631
|
});
|
|
5607
|
-
var PrimaryTextWrapper = styled("div")(templateObject_5$
|
|
5632
|
+
var PrimaryTextWrapper = styled("div")(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5608
5633
|
var horizontalAlign = props.horizontalAlign;
|
|
5609
5634
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
5610
5635
|
});
|
|
5611
5636
|
var PrimaryText = styled("div", {
|
|
5612
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5613
|
-
})(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) {
|
|
5614
5639
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
5615
5640
|
return "\n display: block;\n ".concat(props.shouldTextWrap
|
|
5616
5641
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
5617
5642
|
: ShouldTruncate(), "\n ");
|
|
5618
5643
|
});
|
|
5619
5644
|
var SecondaryText = styled("span", {
|
|
5620
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5621
|
-
})(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) {
|
|
5622
5647
|
var _a;
|
|
5623
5648
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
5624
5649
|
var spaces = getSpaces(props);
|
|
@@ -5628,7 +5653,7 @@ var SecondaryText = styled("span", {
|
|
|
5628
5653
|
: ShouldTruncate(), "\n ");
|
|
5629
5654
|
});
|
|
5630
5655
|
var TertiaryText = styled("span", {
|
|
5631
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5656
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
5632
5657
|
})(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5633
5658
|
var _a;
|
|
5634
5659
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b;
|
|
@@ -5646,7 +5671,7 @@ var PrimaryTextComponentSlotRightWrapper = styled("div")(templateObject_10$1 ||
|
|
|
5646
5671
|
var spaces = getSpaces(props);
|
|
5647
5672
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5648
5673
|
});
|
|
5649
|
-
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;
|
|
5650
5675
|
|
|
5651
5676
|
var CellBasicContent = function (props) {
|
|
5652
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;
|
|
@@ -5660,15 +5685,15 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
5660
5685
|
return (jsxRuntime.jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsxRuntime.jsx(CellBasicContent, __assign({}, props)) })));
|
|
5661
5686
|
});
|
|
5662
5687
|
|
|
5663
|
-
var doNotForwardProps$
|
|
5688
|
+
var doNotForwardProps$j = ["horizontalAlign", "verticalAlign"];
|
|
5664
5689
|
var StyledCellComponentData = styled("td", {
|
|
5665
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5666
|
-
})(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) {
|
|
5667
5692
|
var spaces = getSpaces(props);
|
|
5668
5693
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5669
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 ");
|
|
5670
5695
|
});
|
|
5671
|
-
var templateObject_1$
|
|
5696
|
+
var templateObject_1$F;
|
|
5672
5697
|
|
|
5673
5698
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
5674
5699
|
var children = props.children;
|
|
@@ -5680,7 +5705,7 @@ var contentPositionMapping = {
|
|
|
5680
5705
|
left: "flex-start",
|
|
5681
5706
|
right: "flex-end",
|
|
5682
5707
|
};
|
|
5683
|
-
var doNotForwardProps$
|
|
5708
|
+
var doNotForwardProps$i = [
|
|
5684
5709
|
"active",
|
|
5685
5710
|
"horizontalAlign",
|
|
5686
5711
|
"shouldShowTooltipOnHover",
|
|
@@ -5689,8 +5714,8 @@ var doNotForwardProps$h = [
|
|
|
5689
5714
|
"hideSortIcon",
|
|
5690
5715
|
];
|
|
5691
5716
|
var StyledSortingIcon = styled(Icon, {
|
|
5692
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5693
|
-
})(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) {
|
|
5694
5719
|
var _a, _b;
|
|
5695
5720
|
var _c = props.active, active = _c === void 0 ? false : _c, hideSortIcon = props.hideSortIcon;
|
|
5696
5721
|
var spaces = getSpaces(props);
|
|
@@ -5698,8 +5723,8 @@ var StyledSortingIcon = styled(Icon, {
|
|
|
5698
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 ");
|
|
5699
5724
|
});
|
|
5700
5725
|
var StyledTableHeader$1 = styled("th", {
|
|
5701
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5702
|
-
})(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) {
|
|
5703
5728
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5704
5729
|
var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
|
|
5705
5730
|
var spaces = getSpaces(props);
|
|
@@ -5707,12 +5732,12 @@ var StyledTableHeader$1 = styled("th", {
|
|
|
5707
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 ");
|
|
5708
5733
|
});
|
|
5709
5734
|
var StyledCellHeaderContainer = styled("div", {
|
|
5710
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5711
|
-
})(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) {
|
|
5712
5737
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
5713
5738
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
5714
5739
|
});
|
|
5715
|
-
var templateObject_1$
|
|
5740
|
+
var templateObject_1$E, templateObject_2$n, templateObject_3$f;
|
|
5716
5741
|
|
|
5717
5742
|
var CellHeaderContent = function (props) {
|
|
5718
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;
|
|
@@ -5732,20 +5757,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
5732
5757
|
|
|
5733
5758
|
var small = function (props) {
|
|
5734
5759
|
var spaces = getSpaces(props);
|
|
5735
|
-
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));
|
|
5736
5761
|
};
|
|
5737
5762
|
var medium = function (props) {
|
|
5738
5763
|
var spaces = getSpaces(props);
|
|
5739
5764
|
var colors = getColors(props);
|
|
5740
|
-
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);
|
|
5741
5766
|
};
|
|
5742
5767
|
var rounded$2 = function (props) {
|
|
5743
5768
|
var corners = getCorners(props);
|
|
5744
|
-
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);
|
|
5745
5770
|
};
|
|
5746
5771
|
var square$2 = function (props) {
|
|
5747
5772
|
var corners = getCorners(props);
|
|
5748
|
-
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);
|
|
5749
5774
|
};
|
|
5750
5775
|
var success = function (props) {
|
|
5751
5776
|
return createStatusCss(props, "success");
|
|
@@ -5798,7 +5823,7 @@ function createStatusCss(props, status) {
|
|
|
5798
5823
|
},
|
|
5799
5824
|
};
|
|
5800
5825
|
var statusColors = statusToColors[status];
|
|
5801
|
-
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);
|
|
5802
5827
|
}
|
|
5803
5828
|
var statusToCss = {
|
|
5804
5829
|
beta: beta,
|
|
@@ -5808,14 +5833,14 @@ var statusToCss = {
|
|
|
5808
5833
|
success: success,
|
|
5809
5834
|
warning: warning,
|
|
5810
5835
|
};
|
|
5811
|
-
var doNotForwardProps$
|
|
5836
|
+
var doNotForwardProps$h = ["isRounded"];
|
|
5812
5837
|
var StyledChip = styled(material.Chip, {
|
|
5813
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5814
|
-
})(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) {
|
|
5815
5840
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
5816
|
-
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));
|
|
5817
5842
|
});
|
|
5818
|
-
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;
|
|
5819
5844
|
|
|
5820
5845
|
/**
|
|
5821
5846
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -5833,7 +5858,7 @@ var Chip = function (props) {
|
|
|
5833
5858
|
return jsxRuntime.jsx(StyledChip, __assign({}, props));
|
|
5834
5859
|
};
|
|
5835
5860
|
|
|
5836
|
-
var doNotForwardProps$
|
|
5861
|
+
var doNotForwardProps$g = [
|
|
5837
5862
|
"anchorEl",
|
|
5838
5863
|
"count",
|
|
5839
5864
|
"keepSearchOnSelect",
|
|
@@ -5847,20 +5872,19 @@ var doNotForwardProps$f = [
|
|
|
5847
5872
|
"isMultiColumn",
|
|
5848
5873
|
];
|
|
5849
5874
|
var StyledHeaderTitle = styled("div", {
|
|
5850
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
5851
|
-
})(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) {
|
|
5852
5877
|
var _a;
|
|
5853
|
-
var search = props.search;
|
|
5854
5878
|
var spaces = getSpaces(props);
|
|
5855
5879
|
var semanticColors = getSemanticColors(props);
|
|
5856
|
-
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
|
|
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,7 +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
|
|
5905
|
+
var StyledDropdownMenuHeader = styled("div")(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5906
|
+
var search = props.search;
|
|
5907
|
+
var spaces = getSpaces(props);
|
|
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 ");
|
|
5909
|
+
});
|
|
5910
|
+
var templateObject_1$C, templateObject_2$l, templateObject_3$d, templateObject_4$c, templateObject_5$8;
|
|
5882
5911
|
|
|
5883
5912
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
5884
5913
|
// for the dropdownMenu's popper component
|
|
@@ -5889,7 +5918,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
5889
5918
|
var DropdownMenu = function (props) {
|
|
5890
5919
|
var _a, _b;
|
|
5891
5920
|
var theme = material.useTheme();
|
|
5892
|
-
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5921
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, headerComponentSlot = props.headerComponentSlot, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5893
5922
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
5894
5923
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
5895
5924
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -5913,10 +5942,10 @@ var DropdownMenu = function (props) {
|
|
|
5913
5942
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5914
5943
|
// (masoudmanson): To override the width of the Popper,
|
|
5915
5944
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5916
|
-
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsxRuntime.
|
|
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] }) })) }) })));
|
|
5917
5946
|
};
|
|
5918
5947
|
|
|
5919
|
-
var doNotForwardProps$
|
|
5948
|
+
var doNotForwardProps$f = [
|
|
5920
5949
|
"intent",
|
|
5921
5950
|
"state",
|
|
5922
5951
|
"sdsType",
|
|
@@ -5938,27 +5967,27 @@ var inputDropdownStyles = function (props) {
|
|
|
5938
5967
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
5939
5968
|
*/
|
|
5940
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");
|
|
5941
|
-
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);
|
|
5942
5971
|
};
|
|
5943
5972
|
var minimal$1 = function (props) {
|
|
5944
5973
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5945
5974
|
var spaces = getSpaces(props);
|
|
5946
5975
|
var semanticColors = getSemanticColors(props);
|
|
5947
|
-
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);
|
|
5948
5977
|
};
|
|
5949
5978
|
var square$1 = function (props) {
|
|
5950
5979
|
var corners = getCorners(props);
|
|
5951
|
-
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);
|
|
5952
5981
|
};
|
|
5953
5982
|
var rounded$1 = function (props) {
|
|
5954
5983
|
var corners = getCorners(props);
|
|
5955
|
-
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);
|
|
5956
5985
|
};
|
|
5957
5986
|
var userInput = function (props) {
|
|
5958
5987
|
var _a, _b, _c, _d, _e, _f;
|
|
5959
5988
|
var sdsStyle = props.sdsStyle;
|
|
5960
5989
|
var semanticColors = getSemanticColors(props);
|
|
5961
|
-
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"
|
|
5962
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 ")
|
|
5963
5992
|
: "");
|
|
5964
5993
|
};
|
|
@@ -5967,26 +5996,21 @@ var isOpen = function (props) {
|
|
|
5967
5996
|
var sdsStyle = props.sdsStyle;
|
|
5968
5997
|
var borders = getBorders(props);
|
|
5969
5998
|
var semanticColors = getSemanticColors(props);
|
|
5970
|
-
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"
|
|
5971
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 ")
|
|
5972
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"
|
|
5973
6002
|
? ((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover) + "47"
|
|
5974
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);
|
|
5975
6004
|
};
|
|
5976
|
-
var
|
|
6005
|
+
var applyIntentColor$1 = function (props, intent) {
|
|
5977
6006
|
var _a, _b, _c;
|
|
5978
6007
|
var borders = getBorders(props);
|
|
5979
|
-
return react.css(templateObject_7$
|
|
5980
|
-
};
|
|
5981
|
-
var negative$1 = function (props) {
|
|
5982
|
-
var _a, _b, _c;
|
|
5983
|
-
var borders = getBorders(props);
|
|
5984
|
-
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);
|
|
5985
6009
|
};
|
|
5986
6010
|
var isDisabled = function (props) {
|
|
5987
6011
|
var _a, _b, _c, _d;
|
|
5988
6012
|
var semanticColors = getSemanticColors(props);
|
|
5989
|
-
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);
|
|
5990
6014
|
};
|
|
5991
6015
|
/**
|
|
5992
6016
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -5997,22 +6021,28 @@ var isDisabled = function (props) {
|
|
|
5997
6021
|
* to the InputDropdownProps interface.
|
|
5998
6022
|
*/
|
|
5999
6023
|
var StyledInputDropdown = styled(Button, {
|
|
6000
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6001
|
-
})(
|
|
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) {
|
|
6002
6026
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, sdsStyle = props.sdsStyle;
|
|
6003
|
-
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));
|
|
6004
6034
|
});
|
|
6005
6035
|
var StyledDetail = styled("span", {
|
|
6006
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6007
|
-
})(
|
|
6036
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6037
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6008
6038
|
var _a;
|
|
6009
6039
|
var spaces = getSpaces(props);
|
|
6010
6040
|
var semanticColors = getSemanticColors(props);
|
|
6011
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 ");
|
|
6012
6042
|
});
|
|
6013
6043
|
var StyledLabel$1 = styled("span", {
|
|
6014
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6015
|
-
})(
|
|
6044
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6045
|
+
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6016
6046
|
var _a, _b;
|
|
6017
6047
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6018
6048
|
var fontWeights = getFontWeights(props);
|
|
@@ -6023,8 +6053,8 @@ var StyledLabel$1 = styled("span", {
|
|
|
6023
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 ");
|
|
6024
6054
|
});
|
|
6025
6055
|
var StyledCounter = styled("span", {
|
|
6026
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6027
|
-
})(
|
|
6056
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6057
|
+
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6028
6058
|
var _a, _b;
|
|
6029
6059
|
var corners = getCorners(props);
|
|
6030
6060
|
var spaces = getSpaces(props);
|
|
@@ -6032,32 +6062,32 @@ var StyledCounter = styled("span", {
|
|
|
6032
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 ");
|
|
6033
6063
|
});
|
|
6034
6064
|
var MinimalDetails = styled("div", {
|
|
6035
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6036
|
-
})(
|
|
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) {
|
|
6037
6067
|
var _a;
|
|
6038
6068
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6039
6069
|
var semanticColors = getSemanticColors(props);
|
|
6040
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 &&
|
|
6041
|
-
"overflow: hidden;\n
|
|
6071
|
+
"overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;", "\n ");
|
|
6042
6072
|
});
|
|
6043
6073
|
var LabelWrapper = styled("span", {
|
|
6044
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6045
|
-
})(
|
|
6074
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
6075
|
+
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6046
6076
|
var isMinimal = _a.isMinimal;
|
|
6047
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 ");
|
|
6048
6078
|
});
|
|
6049
6079
|
var IconWrapper = styled("span", {
|
|
6050
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6051
|
-
})(
|
|
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"])));
|
|
6052
6082
|
function labelStyle(props) {
|
|
6053
6083
|
var _a, _b;
|
|
6054
6084
|
var semanticColors = getSemanticColors(props);
|
|
6055
6085
|
var labelColor = props.sdsType === "value"
|
|
6056
6086
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6057
6087
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6058
|
-
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);
|
|
6059
6089
|
}
|
|
6060
|
-
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;
|
|
6061
6091
|
|
|
6062
6092
|
/**
|
|
6063
6093
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -6124,33 +6154,33 @@ var tagSizeS = function (props) {
|
|
|
6124
6154
|
var spaces = getSpaces(props);
|
|
6125
6155
|
var iconSizes = getIconSizes(props);
|
|
6126
6156
|
var semanticColors = getSemanticColors(props);
|
|
6127
|
-
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);
|
|
6128
6158
|
};
|
|
6129
6159
|
var tagSizeL = function (props) {
|
|
6130
6160
|
var _a;
|
|
6131
6161
|
var spaces = getSpaces(props);
|
|
6132
6162
|
var iconSizes = getIconSizes(props);
|
|
6133
6163
|
var semanticColors = getSemanticColors(props);
|
|
6134
|
-
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);
|
|
6135
6165
|
};
|
|
6136
6166
|
var rounded = function (props) {
|
|
6137
6167
|
var corners = getCorners(props);
|
|
6138
6168
|
var spaces = getSpaces(props);
|
|
6139
6169
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6140
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;
|
|
6141
|
-
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);
|
|
6142
6172
|
};
|
|
6143
6173
|
var square = function (props) {
|
|
6144
6174
|
var corners = getCorners(props);
|
|
6145
6175
|
var spaces = getSpaces(props);
|
|
6146
6176
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6147
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;
|
|
6148
|
-
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);
|
|
6149
6179
|
};
|
|
6150
6180
|
var withHover = function (props) {
|
|
6151
6181
|
var _a;
|
|
6152
6182
|
var semanticColors = getSemanticColors(props);
|
|
6153
|
-
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);
|
|
6154
6184
|
};
|
|
6155
6185
|
var primary = function (props) {
|
|
6156
6186
|
return createTypeCss(props, "primary");
|
|
@@ -6221,13 +6251,13 @@ function createTypeCss(props, type) {
|
|
|
6221
6251
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
6222
6252
|
};
|
|
6223
6253
|
var typeColors = typeToColors[type];
|
|
6224
|
-
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);
|
|
6225
6255
|
}
|
|
6226
6256
|
var typeToCss = {
|
|
6227
6257
|
primary: primary,
|
|
6228
6258
|
secondary: secondary,
|
|
6229
6259
|
};
|
|
6230
|
-
var doNotForwardProps$
|
|
6260
|
+
var doNotForwardProps$e = [
|
|
6231
6261
|
"sdsType",
|
|
6232
6262
|
"sdsStyle",
|
|
6233
6263
|
"sdsSize",
|
|
@@ -6235,14 +6265,14 @@ var doNotForwardProps$d = [
|
|
|
6235
6265
|
"hover",
|
|
6236
6266
|
];
|
|
6237
6267
|
var StyledTag$1 = styled(material.Chip, {
|
|
6238
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6268
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
6239
6269
|
})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6240
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;
|
|
6241
6271
|
var isRounded = sdsStyle === "rounded";
|
|
6242
6272
|
var type = sdsType || "primary";
|
|
6243
|
-
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;");
|
|
6244
6274
|
});
|
|
6245
|
-
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;
|
|
6246
6276
|
|
|
6247
6277
|
/**
|
|
6248
6278
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6256,14 +6286,14 @@ var Tag = function (props) {
|
|
|
6256
6286
|
return jsxRuntime.jsx(StyledTag$1, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
6257
6287
|
};
|
|
6258
6288
|
|
|
6259
|
-
var StyledTag = styled(Tag)(templateObject_2$
|
|
6289
|
+
var StyledTag = styled(Tag)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6260
6290
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6261
6291
|
var spaces = getSpaces(props);
|
|
6262
6292
|
var iconSizes = getIconSizes(props);
|
|
6263
6293
|
var semanticColors = getSemanticColors(props);
|
|
6264
|
-
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);
|
|
6265
6295
|
});
|
|
6266
|
-
var templateObject_1$
|
|
6296
|
+
var templateObject_1$z, templateObject_2$i;
|
|
6267
6297
|
|
|
6268
6298
|
/**
|
|
6269
6299
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6286,12 +6316,12 @@ var Chips = function (_a) {
|
|
|
6286
6316
|
}) }));
|
|
6287
6317
|
};
|
|
6288
6318
|
|
|
6289
|
-
var Wrapper$1 = styled("div")(templateObject_1$
|
|
6290
|
-
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) {
|
|
6291
6321
|
var spaces = getSpaces(props);
|
|
6292
6322
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
6293
6323
|
});
|
|
6294
|
-
var templateObject_1$
|
|
6324
|
+
var templateObject_1$y, templateObject_2$h;
|
|
6295
6325
|
|
|
6296
6326
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6297
6327
|
var ComplexFilter = function (_a) {
|
|
@@ -6383,10 +6413,10 @@ var ComplexFilter = function (_a) {
|
|
|
6383
6413
|
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
6384
6414
|
|
|
6385
6415
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
6386
|
-
var doNotForwardProps$
|
|
6416
|
+
var doNotForwardProps$d = ["sdsSize"];
|
|
6387
6417
|
var StyledPaper = styled(material.Paper, {
|
|
6388
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6389
|
-
})(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) {
|
|
6390
6420
|
var _a;
|
|
6391
6421
|
var spaces = getSpaces(props);
|
|
6392
6422
|
var corners = getCorners(props);
|
|
@@ -6417,7 +6447,7 @@ function paperDimensions(props) {
|
|
|
6417
6447
|
var _a = sizeToDimensions[sdsSize], width = _a.width, minHeight = _a.minHeight;
|
|
6418
6448
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
6419
6449
|
}
|
|
6420
|
-
var templateObject_1$
|
|
6450
|
+
var templateObject_1$x;
|
|
6421
6451
|
|
|
6422
6452
|
/**
|
|
6423
6453
|
* @see https://mui.com/material-ui/react-paper/
|
|
@@ -6446,15 +6476,15 @@ var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
|
6446
6476
|
});
|
|
6447
6477
|
|
|
6448
6478
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
6449
|
-
var doNotForwardProps$
|
|
6479
|
+
var doNotForwardProps$c = ["buttonPosition"];
|
|
6450
6480
|
var StyledDialogActions = styled(material.DialogActions, {
|
|
6451
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6452
|
-
})(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) {
|
|
6453
6483
|
var spaces = getSpaces(props);
|
|
6454
6484
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
6455
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 ");
|
|
6456
6486
|
});
|
|
6457
|
-
var templateObject_1$
|
|
6487
|
+
var templateObject_1$w;
|
|
6458
6488
|
|
|
6459
6489
|
/**
|
|
6460
6490
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6463,8 +6493,8 @@ var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
|
6463
6493
|
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props));
|
|
6464
6494
|
});
|
|
6465
6495
|
|
|
6466
|
-
var StyledDialogContent = styled(material.DialogContent)(templateObject_1$
|
|
6467
|
-
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;
|
|
6468
6498
|
|
|
6469
6499
|
var index = React.forwardRef(
|
|
6470
6500
|
/**
|
|
@@ -6474,11 +6504,11 @@ function DialogContent(props, ref) {
|
|
|
6474
6504
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
6475
6505
|
});
|
|
6476
6506
|
|
|
6477
|
-
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) {
|
|
6478
6508
|
var spaces = getSpaces(props);
|
|
6479
6509
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
6480
6510
|
});
|
|
6481
|
-
var templateObject_1$
|
|
6511
|
+
var templateObject_1$u;
|
|
6482
6512
|
|
|
6483
6513
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
6484
6514
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
@@ -6494,27 +6524,27 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
6494
6524
|
} }));
|
|
6495
6525
|
});
|
|
6496
6526
|
|
|
6497
|
-
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) {
|
|
6498
6528
|
var spaces = getSpaces(props);
|
|
6499
6529
|
return "\n margin-bottom: ".concat((spaces === null || spaces === void 0 ? void 0 : spaces.xl) || 0, "px;\n ");
|
|
6500
6530
|
});
|
|
6501
|
-
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) {
|
|
6502
6532
|
var _a;
|
|
6503
6533
|
var semanticColors = getSemanticColors(props);
|
|
6504
6534
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n ");
|
|
6505
6535
|
});
|
|
6506
|
-
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) {
|
|
6507
6537
|
var _a;
|
|
6508
6538
|
var semanticColors = getSemanticColors(props);
|
|
6509
6539
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n ");
|
|
6510
6540
|
});
|
|
6511
|
-
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) {
|
|
6512
6542
|
var _a;
|
|
6513
6543
|
var semanticColors = getSemanticColors(props);
|
|
6514
6544
|
var spaces = getSpaces(props);
|
|
6515
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 ");
|
|
6516
6546
|
});
|
|
6517
|
-
var templateObject_1$
|
|
6547
|
+
var templateObject_1$t, templateObject_2$g, templateObject_3$a, templateObject_4$9;
|
|
6518
6548
|
|
|
6519
6549
|
/**
|
|
6520
6550
|
* @see https://mui.com/material-ui/react-dialog/
|
|
@@ -6524,20 +6554,20 @@ var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
|
6524
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 })] })) })));
|
|
6525
6555
|
});
|
|
6526
6556
|
|
|
6527
|
-
var doNotForwardProps$
|
|
6557
|
+
var doNotForwardProps$b = ["buttonPosition"];
|
|
6528
6558
|
var StyledButtonsWrapper = styled("div", {
|
|
6529
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6530
|
-
})(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) {
|
|
6531
6561
|
var buttonPosition = props.buttonPosition;
|
|
6532
6562
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
6533
6563
|
});
|
|
6534
6564
|
var StyledButton = styled(Button, {
|
|
6535
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
6536
|
-
})(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) {
|
|
6537
6567
|
var spaces = getSpaces(props);
|
|
6538
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 ");
|
|
6539
6569
|
});
|
|
6540
|
-
var templateObject_1$
|
|
6570
|
+
var templateObject_1$s, templateObject_2$f;
|
|
6541
6571
|
|
|
6542
6572
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
6543
6573
|
var Dropdown = function (props) {
|
|
@@ -6710,7 +6740,7 @@ var SvgIconCheckboxUnchecked = function SvgIconCheckboxUnchecked(props) {
|
|
|
6710
6740
|
})));
|
|
6711
6741
|
};
|
|
6712
6742
|
|
|
6713
|
-
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) {
|
|
6714
6744
|
var _a, _b, _c, _d, _e, _f;
|
|
6715
6745
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6716
6746
|
var iconSizes = getIconSizes(props);
|
|
@@ -6720,26 +6750,27 @@ var StyledCheckbox = styled(material.Checkbox)(templateObject_1$o || (templateOb
|
|
|
6720
6750
|
default: "base",
|
|
6721
6751
|
negative: "negative",
|
|
6722
6752
|
notice: "notice",
|
|
6753
|
+
positive: "positive",
|
|
6723
6754
|
};
|
|
6724
6755
|
var checkboxColor = intentToColor[intent];
|
|
6725
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 ");
|
|
6726
6757
|
});
|
|
6727
|
-
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) {
|
|
6728
6759
|
var spaces = getSpaces(props);
|
|
6729
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 ");
|
|
6730
6761
|
});
|
|
6731
|
-
var StyledLabelContainer$1 = styled("span")(templateObject_3$
|
|
6732
|
-
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) {
|
|
6733
6764
|
var spaces = getSpaces(props);
|
|
6734
6765
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
6735
6766
|
});
|
|
6736
|
-
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) {
|
|
6737
6768
|
var _a, _b;
|
|
6738
6769
|
var disabled = props.disabled;
|
|
6739
6770
|
var semanticColors = getSemanticColors(props);
|
|
6740
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 ");
|
|
6741
6772
|
});
|
|
6742
|
-
var templateObject_1$
|
|
6773
|
+
var templateObject_1$r, templateObject_2$e, templateObject_3$9, templateObject_4$8, templateObject_5$5;
|
|
6743
6774
|
|
|
6744
6775
|
/**
|
|
6745
6776
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
@@ -6790,7 +6821,7 @@ var SvgIconRadioUnchecked = function SvgIconRadioUnchecked(props) {
|
|
|
6790
6821
|
})));
|
|
6791
6822
|
};
|
|
6792
6823
|
|
|
6793
|
-
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) {
|
|
6794
6825
|
var _a, _b, _c, _d, _e, _f;
|
|
6795
6826
|
var _g = props.intent, intent = _g === void 0 ? "default" : _g;
|
|
6796
6827
|
var spaces = getSpaces(props);
|
|
@@ -6800,26 +6831,27 @@ var StyledRadioButton = styled(material.Radio)(templateObject_1$n || (templateOb
|
|
|
6800
6831
|
default: "base",
|
|
6801
6832
|
negative: "negative",
|
|
6802
6833
|
notice: "notice",
|
|
6834
|
+
positive: "positive",
|
|
6803
6835
|
};
|
|
6804
6836
|
var radioColor = intentToColor[intent];
|
|
6805
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 ");
|
|
6806
6838
|
});
|
|
6807
|
-
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) {
|
|
6808
6840
|
var spaces = getSpaces(props);
|
|
6809
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 ");
|
|
6810
6842
|
});
|
|
6811
|
-
var StyledLabelContainer = styled("span")(templateObject_3$
|
|
6812
|
-
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) {
|
|
6813
6845
|
var spaces = getSpaces(props);
|
|
6814
6846
|
return "\n margin-top: -".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px !important;\n ");
|
|
6815
6847
|
});
|
|
6816
|
-
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) {
|
|
6817
6849
|
var _a, _b;
|
|
6818
6850
|
var disabled = props.disabled;
|
|
6819
6851
|
var semanticColors = getSemanticColors(props);
|
|
6820
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 ");
|
|
6821
6853
|
});
|
|
6822
|
-
var templateObject_1$
|
|
6854
|
+
var templateObject_1$q, templateObject_2$d, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
6823
6855
|
|
|
6824
6856
|
/**
|
|
6825
6857
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
@@ -6867,11 +6899,11 @@ var disabledSlider = function (props) {
|
|
|
6867
6899
|
var mode = getMode(props);
|
|
6868
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 ");
|
|
6869
6901
|
};
|
|
6870
|
-
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) {
|
|
6871
6903
|
var disabled = props.disabled;
|
|
6872
6904
|
return "\n ".concat(inputSlider(props), "\n ").concat(horizontal(props), "\n ").concat(disabled ? disabledSlider(props) : "", "\n ");
|
|
6873
6905
|
});
|
|
6874
|
-
var templateObject_1$
|
|
6906
|
+
var templateObject_1$p;
|
|
6875
6907
|
|
|
6876
6908
|
/**
|
|
6877
6909
|
* @see https://mui.com/material-ui/react-slider/
|
|
@@ -6882,29 +6914,23 @@ var InputSlider = React.forwardRef(function (props, ref) {
|
|
|
6882
6914
|
});
|
|
6883
6915
|
|
|
6884
6916
|
var sdsPropNames$1 = ["sdsStyle", "sdsType", "intent", "hideLabel"];
|
|
6885
|
-
var
|
|
6917
|
+
var applyIntentColor = function (props, intent) {
|
|
6886
6918
|
var _a, _b, _c, _d;
|
|
6887
6919
|
var borders = getBorders(props);
|
|
6888
6920
|
var semanticColors = getSemanticColors(props);
|
|
6889
|
-
return react.css(templateObject_1$
|
|
6890
|
-
};
|
|
6891
|
-
var notice = function (props) {
|
|
6892
|
-
var _a, _b, _c, _d;
|
|
6893
|
-
var borders = getBorders(props);
|
|
6894
|
-
var semanticColors = getSemanticColors(props);
|
|
6895
|
-
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);
|
|
6896
6922
|
};
|
|
6897
6923
|
var disabledStyled$1 = function (props) {
|
|
6898
6924
|
var _a, _b, _c;
|
|
6899
6925
|
var borders = getBorders(props);
|
|
6900
6926
|
var semanticColors = getSemanticColors(props);
|
|
6901
|
-
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);
|
|
6902
6928
|
};
|
|
6903
6929
|
var textArea = function (props) {
|
|
6904
6930
|
var spaces = getSpaces(props);
|
|
6905
|
-
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);
|
|
6906
6932
|
};
|
|
6907
|
-
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) {
|
|
6908
6934
|
var spaces = getSpaces(props);
|
|
6909
6935
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6910
6936
|
});
|
|
@@ -6912,16 +6938,16 @@ var StyledInputBase = styled(material.TextField, {
|
|
|
6912
6938
|
shouldForwardProp: function (prop) {
|
|
6913
6939
|
return !sdsPropNames$1.includes(prop.toString());
|
|
6914
6940
|
},
|
|
6915
|
-
})(
|
|
6941
|
+
})(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6916
6942
|
var _a, _b, _c, _d;
|
|
6917
6943
|
var intent = props.intent, sdsType = props.sdsType, disabled = props.disabled;
|
|
6918
6944
|
var spaces = getSpaces(props);
|
|
6919
6945
|
var borders = getBorders(props);
|
|
6920
6946
|
var corners = getCorners(props);
|
|
6921
6947
|
var semanticColors = getSemanticColors(props);
|
|
6922
|
-
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));
|
|
6923
6949
|
});
|
|
6924
|
-
var templateObject_1$
|
|
6950
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$7, templateObject_4$6, templateObject_5$3, templateObject_6$2;
|
|
6925
6951
|
|
|
6926
6952
|
/**
|
|
6927
6953
|
* @see https://mui.com/material-ui/react-text-field/
|
|
@@ -6982,11 +7008,11 @@ var toggleOff = function (props) {
|
|
|
6982
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 &&
|
|
6983
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 ");
|
|
6984
7010
|
};
|
|
6985
|
-
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) {
|
|
6986
7012
|
var checked = props.checked;
|
|
6987
7013
|
return "\n ".concat(toggle(props), "\n ").concat(checked ? toggleOn(props) : toggleOff(props), "\n ");
|
|
6988
7014
|
});
|
|
6989
|
-
var templateObject_1$
|
|
7015
|
+
var templateObject_1$n;
|
|
6990
7016
|
|
|
6991
7017
|
/**
|
|
6992
7018
|
* @see https://mui.com/material-ui/react-switch/
|
|
@@ -7004,18 +7030,18 @@ var InputToggle = function (props) {
|
|
|
7004
7030
|
return (jsxRuntime.jsx(Toggle, __assign({ checked: finalChecked, color: "primary", onChange: handleChange, value: labelValue }, rest)));
|
|
7005
7031
|
};
|
|
7006
7032
|
|
|
7007
|
-
var doNotForwardProps$
|
|
7033
|
+
var doNotForwardProps$a = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
7008
7034
|
var defaultStyle = function (props) {
|
|
7009
7035
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
7010
7036
|
var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
|
|
7011
7037
|
var semanticColors = getSemanticColors(props);
|
|
7012
|
-
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);
|
|
7013
7039
|
};
|
|
7014
7040
|
var dashedStyle = function (props) {
|
|
7015
7041
|
var _a, _b, _c;
|
|
7016
7042
|
var _d = props.sdsSize, sdsSize = _d === void 0 ? "s" : _d;
|
|
7017
7043
|
var semanticColors = getSemanticColors(props);
|
|
7018
|
-
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);
|
|
7019
7045
|
};
|
|
7020
7046
|
var smallStyle = function (props) {
|
|
7021
7047
|
return fontBodyS$1(props);
|
|
@@ -7025,13 +7051,13 @@ var extraSmallStyle = function (props) {
|
|
|
7025
7051
|
};
|
|
7026
7052
|
var StyledLink = styled(material.Link, {
|
|
7027
7053
|
shouldForwardProp: function (prop) {
|
|
7028
|
-
return !doNotForwardProps$
|
|
7054
|
+
return !doNotForwardProps$a.includes(prop.toString());
|
|
7029
7055
|
},
|
|
7030
|
-
})(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) {
|
|
7031
7057
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
7032
|
-
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");
|
|
7033
7059
|
});
|
|
7034
|
-
var templateObject_1$
|
|
7060
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$6, templateObject_4$5;
|
|
7035
7061
|
|
|
7036
7062
|
/**
|
|
7037
7063
|
* @see https://mui.com/material-ui/react-link/
|
|
@@ -7046,10 +7072,10 @@ var Link = React.forwardRef(function (props, ref) {
|
|
|
7046
7072
|
});
|
|
7047
7073
|
|
|
7048
7074
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
7049
|
-
var doNotForwardProps$
|
|
7075
|
+
var doNotForwardProps$9 = ["marginBottom", "ordered"];
|
|
7050
7076
|
var StyledList = styled(material.List, {
|
|
7051
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7052
|
-
})(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) {
|
|
7053
7079
|
if (!props.ordered)
|
|
7054
7080
|
return "";
|
|
7055
7081
|
return "\n counter-reset: section;\n ";
|
|
@@ -7067,7 +7093,7 @@ function propsToMarginBottom$1(props) {
|
|
|
7067
7093
|
var marginBottom = props.marginBottom;
|
|
7068
7094
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "s"], "px;\n ");
|
|
7069
7095
|
}
|
|
7070
|
-
var templateObject_1$
|
|
7096
|
+
var templateObject_1$l;
|
|
7071
7097
|
|
|
7072
7098
|
/**
|
|
7073
7099
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7084,10 +7110,10 @@ var fontBodyXs$1 = fontBody("xs");
|
|
|
7084
7110
|
var fontBodyXxs = fontBody("xxs");
|
|
7085
7111
|
var fontBodyXxxs = fontBody("xxxs");
|
|
7086
7112
|
// (thuang): Please keep this in sync with the props used in `ListItemExtraProps`
|
|
7087
|
-
var doNotForwardProps$
|
|
7113
|
+
var doNotForwardProps$8 = ["marginBottom", "fontSize", "ordered"];
|
|
7088
7114
|
var StyledListItem = styled(material.ListItem, {
|
|
7089
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7090
|
-
})(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) {
|
|
7091
7117
|
var ordered = props.ordered;
|
|
7092
7118
|
return "\n align-items: flex-start;\n ".concat(ordered ? "counter-increment: section;" : "", "\n ");
|
|
7093
7119
|
}, function (props) {
|
|
@@ -7118,11 +7144,11 @@ function propsToMarginBottom(props) {
|
|
|
7118
7144
|
var marginBottom = props.marginBottom;
|
|
7119
7145
|
return "\n margin-bottom: ".concat(propsToMarginBottomMap[marginBottom || "xs"], "px;\n ");
|
|
7120
7146
|
}
|
|
7121
|
-
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) {
|
|
7122
7148
|
var fontWeights = getFontWeights(props);
|
|
7123
7149
|
return "\n font-weight: ".concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n ");
|
|
7124
7150
|
});
|
|
7125
|
-
var templateObject_1$
|
|
7151
|
+
var templateObject_1$k, templateObject_2$a;
|
|
7126
7152
|
|
|
7127
7153
|
/**
|
|
7128
7154
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7132,11 +7158,11 @@ var ListItem = function (props) {
|
|
|
7132
7158
|
};
|
|
7133
7159
|
|
|
7134
7160
|
var fontHeaderM = fontHeader("m");
|
|
7135
|
-
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) {
|
|
7136
7162
|
var spaces = getSpaces(props);
|
|
7137
7163
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n ");
|
|
7138
7164
|
});
|
|
7139
|
-
var templateObject_1$
|
|
7165
|
+
var templateObject_1$j;
|
|
7140
7166
|
|
|
7141
7167
|
/**
|
|
7142
7168
|
* @see https://mui.com/material-ui/react-list/
|
|
@@ -7145,7 +7171,7 @@ var ListSubheader = function (props) {
|
|
|
7145
7171
|
return jsxRuntime.jsx(StyledListSubheader, __assign({ disableGutters: true }, props));
|
|
7146
7172
|
};
|
|
7147
7173
|
|
|
7148
|
-
var StyledText = styled("span")(templateObject_1$
|
|
7174
|
+
var StyledText = styled("span")(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7149
7175
|
var spaces = getSpaces(props);
|
|
7150
7176
|
return "\n margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
7151
7177
|
});
|
|
@@ -7153,37 +7179,37 @@ var minimal = function (props) {
|
|
|
7153
7179
|
var _a, _b;
|
|
7154
7180
|
var iconSizes = getIconSizes(props);
|
|
7155
7181
|
var semanticColors = getSemanticColors(props);
|
|
7156
|
-
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);
|
|
7157
7183
|
};
|
|
7158
7184
|
var tag = function (props) {
|
|
7159
7185
|
var _a, _b, _c;
|
|
7160
7186
|
var corners = getCorners(props);
|
|
7161
7187
|
var semanticColors = getSemanticColors(props);
|
|
7162
|
-
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);
|
|
7163
7189
|
};
|
|
7164
|
-
var doNotForwardProps$
|
|
7190
|
+
var doNotForwardProps$7 = ["sdsStyle"];
|
|
7165
7191
|
var StyledLoadingIndicator = styled("div", {
|
|
7166
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7167
|
-
})(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) {
|
|
7168
7194
|
var sdsStyle = props.sdsStyle;
|
|
7169
7195
|
var spaces = getSpaces(props);
|
|
7170
|
-
var style = react.css(templateObject_4$
|
|
7171
|
-
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));
|
|
7172
7198
|
});
|
|
7173
|
-
var templateObject_1$
|
|
7199
|
+
var templateObject_1$i, templateObject_2$9, templateObject_3$5, templateObject_4$4, templateObject_5$2, templateObject_6$1;
|
|
7174
7200
|
|
|
7175
7201
|
var LoadingIndicator = function (_a) {
|
|
7176
7202
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
7177
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" })] }));
|
|
7178
7204
|
};
|
|
7179
7205
|
|
|
7180
|
-
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) {
|
|
7181
7207
|
var _a;
|
|
7182
7208
|
var spaces = getSpaces(props);
|
|
7183
7209
|
var semanticColors = getSemanticColors(props);
|
|
7184
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 ");
|
|
7185
7211
|
});
|
|
7186
|
-
var templateObject_1$
|
|
7212
|
+
var templateObject_1$h;
|
|
7187
7213
|
|
|
7188
7214
|
var ANCHOR_ORIGIN = {
|
|
7189
7215
|
horizontal: "center",
|
|
@@ -7200,19 +7226,19 @@ var Menu = function (props) {
|
|
|
7200
7226
|
return (jsxRuntime.jsx(StyledMenu, __assign({ anchorOrigin: ANCHOR_ORIGIN, transformOrigin: TRANSFORM_ORIGIN }, props)));
|
|
7201
7227
|
};
|
|
7202
7228
|
|
|
7203
|
-
var StyledMenuItem = styled(MenuItem)(templateObject_1$
|
|
7204
|
-
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"];
|
|
7205
7231
|
// (thuang): Casting the type to `Autocomplete`
|
|
7206
7232
|
// per https://github.com/mui-org/material-ui/issues/21727#issuecomment-880263271
|
|
7207
7233
|
var StyledAutocomplete = styled(material.Autocomplete, {
|
|
7208
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7209
|
-
})(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) {
|
|
7210
7236
|
var search = _a.search;
|
|
7211
7237
|
return !search && "height: 0; margin: 0 !important;";
|
|
7212
7238
|
});
|
|
7213
7239
|
var InputBaseWrapper = styled("div", {
|
|
7214
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7215
|
-
})(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) {
|
|
7216
7242
|
var search = props.search;
|
|
7217
7243
|
if (!search) {
|
|
7218
7244
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -7224,12 +7250,12 @@ var InputBaseWrapper = styled("div", {
|
|
|
7224
7250
|
return "\n margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7225
7251
|
});
|
|
7226
7252
|
var StyledMenuInputSearch = styled(InputSearch, {
|
|
7227
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7228
|
-
})(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) {
|
|
7229
7255
|
var search = _a.search;
|
|
7230
7256
|
return (search ? "auto" : "transparent");
|
|
7231
7257
|
});
|
|
7232
|
-
var templateObject_1$
|
|
7258
|
+
var templateObject_1$g, templateObject_2$8, templateObject_3$4, templateObject_4$3;
|
|
7233
7259
|
|
|
7234
7260
|
/**
|
|
7235
7261
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
@@ -7333,24 +7359,24 @@ var useScrollStopListener = function (callback, timeout) {
|
|
|
7333
7359
|
}, [timeout]);
|
|
7334
7360
|
};
|
|
7335
7361
|
|
|
7336
|
-
var doNotForwardProps$
|
|
7362
|
+
var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
|
|
7337
7363
|
var StyledTabs$1 = styled(material.Tabs, {
|
|
7338
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7339
|
-
})(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) {
|
|
7340
7366
|
var _a, _b;
|
|
7341
7367
|
var spaces = getSpaces(props);
|
|
7342
7368
|
var semanticColors = getSemanticColors(props);
|
|
7343
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 ");
|
|
7344
7370
|
});
|
|
7345
7371
|
var StyledTab$1 = styled(material.Tab, {
|
|
7346
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7347
|
-
})(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) {
|
|
7348
7374
|
var _a, _b, _c, _d;
|
|
7349
7375
|
var spaces = getSpaces(props);
|
|
7350
7376
|
var semanticColors = getSemanticColors(props);
|
|
7351
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 ");
|
|
7352
7378
|
});
|
|
7353
|
-
var templateObject_1$
|
|
7379
|
+
var templateObject_1$f, templateObject_2$7;
|
|
7354
7380
|
|
|
7355
7381
|
/**
|
|
7356
7382
|
* Custom hook that observes elements to determine if they are in the viewport.
|
|
@@ -7495,34 +7521,34 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
|
7495
7521
|
});
|
|
7496
7522
|
|
|
7497
7523
|
var fontBodyXs = fontBody("xs");
|
|
7498
|
-
var doNotForwardProps$
|
|
7524
|
+
var doNotForwardProps$4 = ["slideDirection"];
|
|
7499
7525
|
var StyledNotification = styled(material.Alert, {
|
|
7500
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7501
|
-
})(templateObject_1$
|
|
7502
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m
|
|
7503
|
-
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;
|
|
7504
7530
|
var spaces = getSpaces(props);
|
|
7505
7531
|
var shadows = getShadows(props);
|
|
7506
7532
|
var corners = getCorners(props);
|
|
7507
7533
|
var iconSizes = getIconSizes(props);
|
|
7508
7534
|
var semanticColors = getSemanticColors(props);
|
|
7509
7535
|
var typography = getTypography(props);
|
|
7510
|
-
var
|
|
7511
|
-
var iconColor = (
|
|
7512
|
-
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";
|
|
7513
7539
|
// (masoudmanson): The Notification Icon should be vertically centered with the Notification
|
|
7514
7540
|
// Title. The padding-top of the Notification Title is calculated based on the difference
|
|
7515
7541
|
// between the height of the Icon and the line-height of the Notification Title.
|
|
7516
|
-
var alertMessagePaddingTop = Math.abs((((
|
|
7517
|
-
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"))) /
|
|
7518
7544
|
2);
|
|
7519
|
-
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 ");
|
|
7520
7546
|
});
|
|
7521
|
-
var StyledButtonWrapper = styled("div")(templateObject_2$
|
|
7547
|
+
var StyledButtonWrapper = styled("div")(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7522
7548
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
7523
7549
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
7524
7550
|
});
|
|
7525
|
-
var templateObject_1$
|
|
7551
|
+
var templateObject_1$e, templateObject_2$6;
|
|
7526
7552
|
|
|
7527
7553
|
/**
|
|
7528
7554
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -7570,7 +7596,7 @@ var Notification = function (_a) {
|
|
|
7570
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 }) }))] })) }) }) }));
|
|
7571
7597
|
};
|
|
7572
7598
|
|
|
7573
|
-
var doNotForwardProps$
|
|
7599
|
+
var doNotForwardProps$3 = [
|
|
7574
7600
|
"sdsStyle",
|
|
7575
7601
|
"selected",
|
|
7576
7602
|
"onPageChange",
|
|
@@ -7583,14 +7609,14 @@ var doNotForwardProps$2 = [
|
|
|
7583
7609
|
"pageSize",
|
|
7584
7610
|
"truncateDropdown",
|
|
7585
7611
|
];
|
|
7586
|
-
var StyledPaginationButton = styled(Button)(templateObject_1$
|
|
7612
|
+
var StyledPaginationButton = styled(Button)(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7587
7613
|
var _a, _b, _c;
|
|
7588
7614
|
var semanticColors = getSemanticColors(props);
|
|
7589
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 ");
|
|
7590
7616
|
});
|
|
7591
7617
|
var StyledPaginationChevronList = styled("li", {
|
|
7592
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7593
|
-
})(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) {
|
|
7594
7620
|
var _a, _b, _c, _d, _e;
|
|
7595
7621
|
var disabled = props.disabled;
|
|
7596
7622
|
var spaces = getSpaces(props);
|
|
@@ -7598,16 +7624,16 @@ var StyledPaginationChevronList = styled("li", {
|
|
|
7598
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 ");
|
|
7599
7625
|
});
|
|
7600
7626
|
var StyledPagination = styled("ul", {
|
|
7601
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7602
|
-
})(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);
|
|
7603
7629
|
var selectedPageStyle = function (props) {
|
|
7604
7630
|
var _a, _b, _c, _d;
|
|
7605
7631
|
var semanticColors = getSemanticColors(props);
|
|
7606
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 ");
|
|
7607
7633
|
};
|
|
7608
7634
|
var Page = styled("li", {
|
|
7609
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7610
|
-
})(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) {
|
|
7611
7637
|
var _a, _b, _c;
|
|
7612
7638
|
var selected = props.selected, sdsStyle = props.sdsStyle;
|
|
7613
7639
|
var spaces = getSpaces(props);
|
|
@@ -7615,10 +7641,10 @@ var Page = styled("li", {
|
|
|
7615
7641
|
var semanticColors = getSemanticColors(props);
|
|
7616
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 ");
|
|
7617
7643
|
});
|
|
7618
|
-
var templateObject_1$
|
|
7644
|
+
var templateObject_1$d, templateObject_2$5, templateObject_3$3, templateObject_4$2;
|
|
7619
7645
|
|
|
7620
|
-
var StyledPaginationDropdownMenu = styled(Menu)(templateObject_1$
|
|
7621
|
-
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;
|
|
7622
7648
|
|
|
7623
7649
|
var PageListDropdown = function (props) {
|
|
7624
7650
|
var pageList = props.pageList, onPageChange = props.onPageChange, sdsStyle = props.sdsStyle;
|
|
@@ -7738,6 +7764,103 @@ var Pagination = React.forwardRef(function (props, ref) {
|
|
|
7738
7764
|
}
|
|
7739
7765
|
});
|
|
7740
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
|
+
|
|
7741
7864
|
var doNotForwardProps$1 = ["buttonDefinition"];
|
|
7742
7865
|
var StyledSegmentedControl = styled(material.ToggleButtonGroup, {
|
|
7743
7866
|
shouldForwardProp: function (prop) { return !doNotForwardProps$1.includes(prop); },
|
|
@@ -8083,7 +8206,10 @@ exports.MenuItem = MenuItem;
|
|
|
8083
8206
|
exports.MenuSelect = MenuSelect;
|
|
8084
8207
|
exports.NavigationJumpTo = NavigationJumpTo;
|
|
8085
8208
|
exports.Notification = Notification;
|
|
8209
|
+
exports.PANEL_BASIC_MIN_WIDTH_PX = PANEL_BASIC_MIN_WIDTH_PX;
|
|
8210
|
+
exports.PANEL_OVERLAY_MIN_WIDTH_PX = PANEL_OVERLAY_MIN_WIDTH_PX;
|
|
8086
8211
|
exports.Pagination = Pagination;
|
|
8212
|
+
exports.Panel = Panel;
|
|
8087
8213
|
exports.SDSChooseTheme = SDSChooseTheme;
|
|
8088
8214
|
exports.SDSDarkAppTheme = SDSDarkAppTheme;
|
|
8089
8215
|
exports.SDSLightAppTheme = SDSLightAppTheme;
|