@czi-sds/components 22.13.2 → 22.14.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 +118 -41
- package/dist/index.cjs.js +515 -336
- package/dist/index.esm.d.ts +118 -41
- package/dist/index.esm.js +517 -338
- package/dist/tailwind.json +448 -366
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +96 -0
- package/dist/variables.scss +48 -0
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -95,6 +95,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
95
95
|
var FontSizeValues = {
|
|
96
96
|
wide: {
|
|
97
97
|
body: {
|
|
98
|
+
xxxxs: 10,
|
|
98
99
|
xxxs: 11,
|
|
99
100
|
xxs: 12,
|
|
100
101
|
xs: 13,
|
|
@@ -122,6 +123,7 @@ var FontSizeValues = {
|
|
|
122
123
|
xxxxs: 10,
|
|
123
124
|
},
|
|
124
125
|
tabular: {
|
|
126
|
+
xxxxs: 10,
|
|
125
127
|
xxxs: 11,
|
|
126
128
|
xxs: 12,
|
|
127
129
|
xs: 13,
|
|
@@ -135,6 +137,7 @@ var FontSizeValues = {
|
|
|
135
137
|
},
|
|
136
138
|
narrow: {
|
|
137
139
|
body: {
|
|
140
|
+
xxxxs: 10,
|
|
138
141
|
xxxs: 12,
|
|
139
142
|
xxs: 12,
|
|
140
143
|
xs: 13,
|
|
@@ -162,6 +165,7 @@ var FontSizeValues = {
|
|
|
162
165
|
xxxxs: 11,
|
|
163
166
|
},
|
|
164
167
|
tabular: {
|
|
168
|
+
xxxxs: 10,
|
|
165
169
|
xxxs: 11,
|
|
166
170
|
xxs: 12,
|
|
167
171
|
xs: 13,
|
|
@@ -177,6 +181,7 @@ var FontSizeValues = {
|
|
|
177
181
|
var LineHeightValues = {
|
|
178
182
|
wide: {
|
|
179
183
|
body: {
|
|
184
|
+
xxxxs: 14,
|
|
180
185
|
xxxs: 16,
|
|
181
186
|
xxs: 18,
|
|
182
187
|
xs: 20,
|
|
@@ -204,6 +209,7 @@ var LineHeightValues = {
|
|
|
204
209
|
xxxxs: 14,
|
|
205
210
|
},
|
|
206
211
|
tabular: {
|
|
212
|
+
xxxxs: 14,
|
|
207
213
|
xxxs: 16,
|
|
208
214
|
xxs: 18,
|
|
209
215
|
xs: 20,
|
|
@@ -217,6 +223,7 @@ var LineHeightValues = {
|
|
|
217
223
|
},
|
|
218
224
|
narrow: {
|
|
219
225
|
body: {
|
|
226
|
+
xxxxs: 14,
|
|
220
227
|
xxxs: 18,
|
|
221
228
|
xxs: 18,
|
|
222
229
|
xs: 20,
|
|
@@ -244,6 +251,7 @@ var LineHeightValues = {
|
|
|
244
251
|
xxxxs: 16,
|
|
245
252
|
},
|
|
246
253
|
tabular: {
|
|
254
|
+
xxxxs: 14,
|
|
247
255
|
xxxs: 16,
|
|
248
256
|
xxs: 18,
|
|
249
257
|
xs: 20,
|
|
@@ -259,6 +267,7 @@ var LineHeightValues = {
|
|
|
259
267
|
var LetterSpacingValues = {
|
|
260
268
|
wide: {
|
|
261
269
|
body: {
|
|
270
|
+
xxxxs: "0.06px",
|
|
262
271
|
xxxs: "0.06px",
|
|
263
272
|
xxs: "0.06px",
|
|
264
273
|
xs: "0px",
|
|
@@ -286,6 +295,7 @@ var LetterSpacingValues = {
|
|
|
286
295
|
xxxxs: "0.4px",
|
|
287
296
|
},
|
|
288
297
|
tabular: {
|
|
298
|
+
xxxxs: "-0.25px",
|
|
289
299
|
xxxs: "-0.25px",
|
|
290
300
|
xxs: "-0.25px",
|
|
291
301
|
xs: "-0.3px",
|
|
@@ -299,6 +309,7 @@ var LetterSpacingValues = {
|
|
|
299
309
|
},
|
|
300
310
|
narrow: {
|
|
301
311
|
body: {
|
|
312
|
+
xxxxs: "0.06px",
|
|
302
313
|
xxxs: "0.06px",
|
|
303
314
|
xxs: "0.06px",
|
|
304
315
|
xs: "0px",
|
|
@@ -326,6 +337,7 @@ var LetterSpacingValues = {
|
|
|
326
337
|
xxxxs: "0.4px",
|
|
327
338
|
},
|
|
328
339
|
tabular: {
|
|
340
|
+
xxxxs: "-0.25px",
|
|
329
341
|
xxxs: "-0.25px",
|
|
330
342
|
xxs: "-0.25px",
|
|
331
343
|
xs: "-0.3px",
|
|
@@ -341,7 +353,7 @@ var LetterSpacingValues = {
|
|
|
341
353
|
var TypographyCategories = {
|
|
342
354
|
body: {
|
|
343
355
|
weights: ["regular", "medium", "semibold"],
|
|
344
|
-
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
|
|
356
|
+
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
345
357
|
},
|
|
346
358
|
header: {
|
|
347
359
|
weights: ["semibold"],
|
|
@@ -357,7 +369,7 @@ var TypographyCategories = {
|
|
|
357
369
|
},
|
|
358
370
|
tabular: {
|
|
359
371
|
weights: ["regular", "medium", "semibold"],
|
|
360
|
-
sizes: ["s", "xs", "xxs", "xxxs"],
|
|
372
|
+
sizes: ["s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
361
373
|
},
|
|
362
374
|
title: {
|
|
363
375
|
weights: ["bold"],
|
|
@@ -365,7 +377,7 @@ var TypographyCategories = {
|
|
|
365
377
|
},
|
|
366
378
|
link: {
|
|
367
379
|
weights: ["regular", "medium", "semibold"],
|
|
368
|
-
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
|
|
380
|
+
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
369
381
|
},
|
|
370
382
|
};
|
|
371
383
|
var FontWeight = {
|
|
@@ -1401,9 +1413,9 @@ function createFontFunction(config) {
|
|
|
1401
1413
|
var fontFamily = typography.fontFamily[styleType];
|
|
1402
1414
|
var additionalCss = config.additionalCss || "";
|
|
1403
1415
|
if (isNarrow) {
|
|
1404
|
-
return react.css(templateObject_1$
|
|
1416
|
+
return react.css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), additionalCss, themeToCss(narrowStyles[weight][fontSize], fontFamily));
|
|
1405
1417
|
}
|
|
1406
|
-
return react.css(templateObject_2$
|
|
1418
|
+
return react.css(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n ", "\n ", "\n\n ", " {\n ", "\n }\n "], ["\n ", "\n ", "\n\n ", " {\n ", "\n }\n "])), additionalCss, themeToCss(wideStyles[weight][fontSize], fontFamily), (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.down("md"), themeToCss(narrowStyles[weight][fontSize], fontFamily));
|
|
1407
1419
|
};
|
|
1408
1420
|
};
|
|
1409
1421
|
}
|
|
@@ -1507,17 +1519,17 @@ var fontLinkSemiboldXxs = fontLink("xxs", "semibold");
|
|
|
1507
1519
|
var fontLinkSemiboldXxxs = fontLink("xxxs", "semibold");
|
|
1508
1520
|
function themeToCss(fontTheme, fontFamily) {
|
|
1509
1521
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1510
|
-
return react.css(templateObject_3$
|
|
1522
|
+
return react.css(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "], ["\n font-family: ", ";\n font-size: ", "px;\n line-height: ", " !important;\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n ", "\n "])), fontFamily, fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform, fontTheme.textDecoration
|
|
1511
1523
|
? "text-decoration: ".concat(fontTheme.textDecoration, ";")
|
|
1512
1524
|
: "");
|
|
1513
1525
|
}
|
|
1514
|
-
var templateObject_1$
|
|
1526
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$D;
|
|
1515
1527
|
|
|
1516
|
-
var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$
|
|
1528
|
+
var StyledAccordionDetails = styled__default.default(material.AccordionDetails)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1517
1529
|
var spaces = getSpaces(props);
|
|
1518
|
-
return react.css(templateObject_1$
|
|
1530
|
+
return react.css(templateObject_1$1a || (templateObject_1$1a = __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);
|
|
1519
1531
|
});
|
|
1520
|
-
var templateObject_1$
|
|
1532
|
+
var templateObject_1$1a, templateObject_2$M;
|
|
1521
1533
|
|
|
1522
1534
|
var AccordionDetails = function (props) {
|
|
1523
1535
|
var children = props.children, id = props.id, rest = __rest(props, ["children", "id"]);
|
|
@@ -1527,21 +1539,21 @@ var AccordionDetails = function (props) {
|
|
|
1527
1539
|
var doNotForwardProps$I = ["chevronSize", "hasInvertedStyle"];
|
|
1528
1540
|
var StyledAccordionHeader = styled__default.default(material.AccordionSummary, {
|
|
1529
1541
|
shouldForwardProp: function (prop) { return !doNotForwardProps$I.includes(prop); },
|
|
1530
|
-
})(templateObject_2$
|
|
1542
|
+
})(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodySemiboldL, function (props) {
|
|
1531
1543
|
var _a, _b;
|
|
1532
1544
|
var chevronSize = props.chevronSize;
|
|
1533
1545
|
var spaces = getSpaces(props);
|
|
1534
1546
|
var semanticColors = getSemanticColors(props);
|
|
1535
|
-
return react.css(templateObject_1$
|
|
1547
|
+
return react.css(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n padding-right: ", "px;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-top: ", "px !important;\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 padding-right: ", "px;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-top: ", "px !important;\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, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, chevronSize === "xs"
|
|
1536
1548
|
? spaces === null || spaces === void 0 ? void 0 : spaces.xs
|
|
1537
1549
|
: spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1538
1550
|
});
|
|
1539
|
-
var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$
|
|
1551
|
+
var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1540
1552
|
var _a;
|
|
1541
1553
|
var semanticColors = getSemanticColors(props);
|
|
1542
|
-
return react.css(templateObject_3$
|
|
1554
|
+
return react.css(templateObject_3$C || (templateObject_3$C = __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);
|
|
1543
1555
|
});
|
|
1544
|
-
var templateObject_1$
|
|
1556
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$C, templateObject_4$y;
|
|
1545
1557
|
|
|
1546
1558
|
var _path$2e, _path2$E, _path3$6;
|
|
1547
1559
|
function _extends$2k() { return _extends$2k = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2k.apply(null, arguments); }
|
|
@@ -3461,7 +3473,7 @@ var SvgIconSparkleLarge = function SvgIconSparkleLarge(props) {
|
|
|
3461
3473
|
width: 24,
|
|
3462
3474
|
height: 24
|
|
3463
3475
|
}, props), _path$u || (_path$u = /*#__PURE__*/React__namespace.createElement("path", {
|
|
3464
|
-
d: "M11.
|
|
3476
|
+
d: "M11.63 2.21c.06-.28.68-.28.74 0 .428 2.034 1.289 4.97 2.87 6.55 1.58 1.581 4.516 2.442 6.55 2.87.28.06.28.68 0 .74-2.034.428-4.97 1.289-6.55 2.87-1.581 1.58-2.442 4.516-2.87 6.55-.06.28-.68.28-.74 0-.428-2.034-1.289-4.97-2.87-6.55-1.58-1.581-4.516-2.442-6.55-2.87-.28-.06-.28-.68 0-.74 2.034-.428 4.97-1.289 6.55-2.87 1.581-1.58 2.442-4.516 2.87-6.55"
|
|
3465
3477
|
})));
|
|
3466
3478
|
};
|
|
3467
3479
|
|
|
@@ -3473,7 +3485,7 @@ var SvgIconSparkleSmall = function SvgIconSparkleSmall(props) {
|
|
|
3473
3485
|
width: 16,
|
|
3474
3486
|
height: 16
|
|
3475
3487
|
}, props), _path$t || (_path$t = /*#__PURE__*/React__namespace.createElement("path", {
|
|
3476
|
-
d: "M7.
|
|
3488
|
+
d: "M7.754 1.476c.04-.188.453-.188.492 0 .286 1.355.86 3.311 1.913 4.365 1.054 1.053 3.01 1.627 4.365 1.913.188.04.188.453 0 .492-1.355.286-3.31.86-4.365 1.913-1.053 1.054-1.627 3.01-1.913 4.365-.04.188-.453.188-.492 0-.286-1.355-.86-3.31-1.913-4.365-1.054-1.053-3.01-1.627-4.365-1.913-.188-.04-.188-.453 0-.492 1.355-.286 3.311-.86 4.365-1.913 1.053-1.054 1.627-3.01 1.913-4.365"
|
|
3477
3489
|
})));
|
|
3478
3490
|
};
|
|
3479
3491
|
|
|
@@ -3485,7 +3497,7 @@ var SvgIconSparklesLarge = function SvgIconSparklesLarge(props) {
|
|
|
3485
3497
|
width: 24,
|
|
3486
3498
|
height: 24
|
|
3487
3499
|
}, props), _path$s || (_path$s = /*#__PURE__*/React__namespace.createElement("path", {
|
|
3488
|
-
d: "M13.
|
|
3500
|
+
d: "M13.63 4.21c.06-.28.68-.28.74 0 .428 2.034 1.289 4.97 2.87 6.55 1.58 1.581 4.516 2.442 6.55 2.87.28.06.28.68 0 .74-2.034.428-4.97 1.289-6.55 2.87-1.581 1.58-2.442 4.516-2.87 6.55-.06.28-.68.28-.74 0-.428-2.034-1.289-4.97-2.87-6.55-1.58-1.581-4.516-2.442-6.55-2.87-.28-.06-.28-.68 0-.74 2.034-.428 4.97-1.289 6.55-2.87 1.581-1.58 2.442-4.516 2.87-6.55M4.334.095c.026-.127.306-.127.332 0 .193.915.58 2.236 1.292 2.947.711.712 2.032 1.099 2.947 1.292.127.026.127.306 0 .332-.915.193-2.236.58-2.947 1.292-.712.711-1.099 2.032-1.292 2.947-.026.127-.306.127-.332 0-.193-.915-.58-2.236-1.292-2.947C2.331 5.246 1.01 4.859.095 4.666c-.127-.026-.127-.306 0-.332.915-.193 2.236-.58 2.947-1.292.712-.711 1.099-2.032 1.292-2.947"
|
|
3489
3501
|
})));
|
|
3490
3502
|
};
|
|
3491
3503
|
|
|
@@ -3497,7 +3509,7 @@ var SvgIconSparklesSmall = function SvgIconSparklesSmall(props) {
|
|
|
3497
3509
|
width: 16,
|
|
3498
3510
|
height: 16
|
|
3499
3511
|
}, props), _path$r || (_path$r = /*#__PURE__*/React__namespace.createElement("path", {
|
|
3500
|
-
d: "
|
|
3512
|
+
d: "M9.087 2.807c.04-.187.453-.187.493 0 .286 1.356.86 3.312 1.913 4.367 1.054 1.054 3.01 1.627 4.366 1.913.188.04.188.453 0 .493-1.355.286-3.312.86-4.366 1.913-1.054 1.054-1.627 3.01-1.913 4.366-.04.188-.453.188-.493 0-.286-1.355-.86-3.312-1.913-4.366C6.119 10.44 4.163 9.866 2.807 9.58c-.187-.04-.187-.453 0-.493 1.356-.286 3.312-.86 4.367-1.913C8.228 6.119 8.8 4.163 9.087 2.807M2.89.063c.017-.084.203-.084.22 0 .13.61.388 1.49.862 1.965.474.474 1.355.732 1.965.861.084.018.084.204 0 .222-.61.129-1.49.387-1.965.86-.474.475-.732 1.356-.861 1.966-.018.084-.204.084-.222 0-.129-.61-.387-1.49-.86-1.965C1.553 3.498.672 3.24.062 3.11c-.084-.018-.084-.204 0-.222.61-.129 1.49-.387 1.965-.86.474-.475.732-1.356.861-1.966"
|
|
3501
3513
|
})));
|
|
3502
3514
|
};
|
|
3503
3515
|
|
|
@@ -4389,16 +4401,16 @@ var doNotForwardProps$H = ["sdsIcon", "sdsSize", "iconColor"];
|
|
|
4389
4401
|
*/
|
|
4390
4402
|
var StyledSvgIcon = styled__default.default(material.SvgIcon, {
|
|
4391
4403
|
shouldForwardProp: function (prop) { return !doNotForwardProps$H.includes(prop); },
|
|
4392
|
-
})(templateObject_2$
|
|
4404
|
+
})(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4393
4405
|
var _a, _b, _c;
|
|
4394
4406
|
var mode = getMode(props);
|
|
4395
4407
|
var _d = props.iconColor, iconColor = _d === void 0 ? "blue" : _d, _e = props.shade, shade = _e === void 0 ? mode === "dark" ? 600 : 500 : _e, sdsSize = props.sdsSize;
|
|
4396
4408
|
var iconSizes = getIconSizes(props);
|
|
4397
4409
|
var colors = getColors(props);
|
|
4398
|
-
return react.css(templateObject_1$
|
|
4410
|
+
return react.css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "], ["\n color: ", ";\n height: ", "px;\n width: ", "px;\n "])), (_a = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _a === void 0 ? void 0 : _a[shade], (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _c === void 0 ? void 0 : _c.width);
|
|
4399
4411
|
});
|
|
4400
|
-
var StyledIcon$2 = styled__default.default("div")(templateObject_3$
|
|
4401
|
-
var templateObject_1$
|
|
4412
|
+
var StyledIcon$2 = styled__default.default("div")(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
4413
|
+
var templateObject_1$18, templateObject_2$K, templateObject_3$B;
|
|
4402
4414
|
|
|
4403
4415
|
/**
|
|
4404
4416
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4429,21 +4441,21 @@ var StyledAccordion$1 = styled__default.default(material.Accordion, {
|
|
|
4429
4441
|
shouldForwardProp: function (prop) {
|
|
4430
4442
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4431
4443
|
},
|
|
4432
|
-
})(templateObject_2$
|
|
4444
|
+
})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4433
4445
|
var _a;
|
|
4434
4446
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4435
4447
|
var shadows = getShadows(props);
|
|
4436
4448
|
var borders = getBorders(props);
|
|
4437
4449
|
var spaces = getSpaces(props);
|
|
4438
|
-
return react.css(templateObject_1$
|
|
4450
|
+
return react.css(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n border-bottom: ", ";\n height: fit-content;\n padding: ", "px;\n\n & .", " {\n ", "\n ", "\n padding: 0;\n min-height: unset;\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 }\n }\n\n .", " {\n ", "\n padding: ", "px 0 0 0;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n background-color: transparent;\n background-image: none;\n box-shadow: ", ";\n border-bottom: ", ";\n height: fit-content;\n padding: ", "px;\n\n & .", " {\n ", "\n ", "\n padding: 0;\n min-height: unset;\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 }\n }\n\n .", " {\n ", "\n padding: ", "px 0 0 0;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, useDivider ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider : "none", spaces === null || spaces === void 0 ? void 0 : spaces.s, material.accordionSummaryClasses.root, fontBodyMediumS(props), focusVisibleA11yStyle(props), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.l, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4439
4451
|
});
|
|
4440
4452
|
var leftPosition = function (props) {
|
|
4441
4453
|
var _a, _b;
|
|
4442
4454
|
var spaces = getSpaces(props);
|
|
4443
4455
|
var iconSizes = getIconSizes(props);
|
|
4444
|
-
return react.css(templateObject_3$
|
|
4456
|
+
return react.css(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n &.", " {\n & .", " {\n flex-direction: row-reverse;\n padding: 0;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\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?.s\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 padding: 0;\n\n .", " {\n padding-left: ", "px;\n }\n\n .", " {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\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?.s\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, material.accordionSummaryClasses.expanded, material.accordionDetailsClasses.root, ((_a = spaces === null || spaces === void 0 ? void 0 : spaces.s) !== null && _a !== void 0 ? _a : 8) + ((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width) !== null && _b !== void 0 ? _b : 12));
|
|
4445
4457
|
};
|
|
4446
|
-
var templateObject_1$
|
|
4458
|
+
var templateObject_1$17, templateObject_2$J, templateObject_3$A;
|
|
4447
4459
|
|
|
4448
4460
|
/**
|
|
4449
4461
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4473,7 +4485,7 @@ var Accordion = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4473
4485
|
return (jsxRuntime.jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, ref: ref, expanded: expanded === id, onChange: handleChange(id) }, rest, { children: enhancedChildren })));
|
|
4474
4486
|
});
|
|
4475
4487
|
|
|
4476
|
-
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$
|
|
4488
|
+
var StyledAlert = styled__default.default(material.Alert)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4477
4489
|
var _a;
|
|
4478
4490
|
var colors = getColors(props);
|
|
4479
4491
|
var spaces = getSpaces(props);
|
|
@@ -4500,7 +4512,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4500
4512
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4501
4513
|
}
|
|
4502
4514
|
}
|
|
4503
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$16;
|
|
4504
4516
|
|
|
4505
4517
|
/**
|
|
4506
4518
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4518,6 +4530,28 @@ var toKebabCase = function (str) {
|
|
|
4518
4530
|
return str.replace(/[\s_]+/g, "-").toLowerCase();
|
|
4519
4531
|
};
|
|
4520
4532
|
var EMPTY_OBJECT = {};
|
|
4533
|
+
/**
|
|
4534
|
+
* (masoudmanson):
|
|
4535
|
+
* Utility function to concatenate classNames and filter out falsy values.
|
|
4536
|
+
* Returns undefined if no valid classNames are provided, preventing empty class attributes.
|
|
4537
|
+
*
|
|
4538
|
+
* @param classNames - Variable number of className values (string | undefined | null | false)
|
|
4539
|
+
* @returns Concatenated className string or undefined
|
|
4540
|
+
*
|
|
4541
|
+
* @example
|
|
4542
|
+
* cn("foo", "bar") // "foo bar"
|
|
4543
|
+
* cn("foo", undefined, "bar") // "foo bar"
|
|
4544
|
+
* cn(undefined, null, false) // undefined
|
|
4545
|
+
* cn("foo", condition && "bar") // "foo bar" or "foo"
|
|
4546
|
+
*/
|
|
4547
|
+
var cn = function () {
|
|
4548
|
+
var classNames = [];
|
|
4549
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
4550
|
+
classNames[_i] = arguments[_i];
|
|
4551
|
+
}
|
|
4552
|
+
var result = classNames.filter(Boolean).join(" ");
|
|
4553
|
+
return result || undefined;
|
|
4554
|
+
};
|
|
4521
4555
|
function filterProps(props, excludeProps) {
|
|
4522
4556
|
var result = {};
|
|
4523
4557
|
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
|
|
@@ -4665,7 +4699,7 @@ var ButtonStyles = function (props) {
|
|
|
4665
4699
|
var boxshadow = variant === "outlined"
|
|
4666
4700
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4667
4701
|
: "none";
|
|
4668
|
-
return react.css(templateObject_1$
|
|
4702
|
+
return react.css(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n ", "\n background-color: ", ";\n border: none;\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\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 ", "\n background-color: ", ";\n border: none;\n border-radius: ", "px;\n box-shadow: ", ";\n padding: ", ";\n color: ", ";\n line-height: ", ";\n white-space: nowrap;\n min-width: fit-content;\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 "])), fontBodyMediumXs(props), backgroundColor, corners === null || corners === void 0 ? void 0 : corners.l, boxshadow, padding, contentColor, isAllCaps ? "20px" : "unset", ornamentColor, variant === "outlined"
|
|
4669
4703
|
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.textActionHover
|
|
4670
4704
|
: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimaryInverse, variant === "outlined"
|
|
4671
4705
|
? (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.surfaceSecondary
|
|
@@ -4681,7 +4715,7 @@ var ButtonStyles = function (props) {
|
|
|
4681
4715
|
};
|
|
4682
4716
|
var Rounded = function (props) {
|
|
4683
4717
|
var corners = getCorners(props);
|
|
4684
|
-
return react.css(templateObject_2$
|
|
4718
|
+
return react.css(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
4685
4719
|
};
|
|
4686
4720
|
var DestructiveButton = function (props) {
|
|
4687
4721
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4700,13 +4734,13 @@ var DestructiveButton = function (props) {
|
|
|
4700
4734
|
var boxshadow = variant === "outlined"
|
|
4701
4735
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4702
4736
|
: "none";
|
|
4703
|
-
return react.css(templateObject_3$
|
|
4737
|
+
return react.css(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), boxshadow, contentColor, backgroundColor, ornamentColor, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _h === void 0 ? void 0 : _h.fillHover, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _j === void 0 ? void 0 : _j.fillHover, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.ornamentPrimaryInverse, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.textPrimaryInverse, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _m === void 0 ? void 0 : _m.fillPressed, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _o === void 0 ? void 0 : _o.fillPressed, (_p = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _p === void 0 ? void 0 : _p.ornamentPrimaryInverse, (_q = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _q === void 0 ? void 0 : _q.textDisabled, (_r = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _r === void 0 ? void 0 : _r.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_s = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _s === void 0 ? void 0 : _s.ornamentDisabled);
|
|
4704
4738
|
};
|
|
4705
4739
|
var StyledButton$2 = styled__default.default(material.Button, {
|
|
4706
4740
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4707
|
-
})(templateObject_5$
|
|
4741
|
+
})(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4708
4742
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4709
|
-
return react.css(templateObject_4$
|
|
4743
|
+
return react.css(templateObject_4$x || (templateObject_4$x = __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));
|
|
4710
4744
|
});
|
|
4711
4745
|
// Minimal Button Styles
|
|
4712
4746
|
var Minimal = function (props) {
|
|
@@ -4716,60 +4750,60 @@ var Minimal = function (props) {
|
|
|
4716
4750
|
var iconSizes = getIconSizes(props);
|
|
4717
4751
|
var semanticColors = getSemanticColors(props);
|
|
4718
4752
|
var corners = getCorners(props);
|
|
4719
|
-
return react.css(templateObject_6$
|
|
4753
|
+
return react.css(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: fit-content;\n padding: ", "px ", "px;\n border-radius: ", "px;\n\n &:hover,\n &:focus-visible {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(props), isAllCaps ? fontCapsXxs(props) : fontBodyMediumXs(props), isAllCaps ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 7, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textActionHover, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornamentHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.textActionPressed, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.ornamentPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textDisabled, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, (_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _k === void 0 ? void 0 : _k.width, (_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _l === void 0 ? void 0 : _l.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
4720
4754
|
};
|
|
4721
4755
|
var PrimaryMinimalButton = function (props) {
|
|
4722
4756
|
var _a, _b;
|
|
4723
4757
|
var semanticColors = getSemanticColors(props);
|
|
4724
|
-
return react.css(templateObject_7$
|
|
4758
|
+
return react.css(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.textAction, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament);
|
|
4725
4759
|
};
|
|
4726
4760
|
var SecondaryMinimalButton = function (props) {
|
|
4727
4761
|
var _a, _b;
|
|
4728
4762
|
var semanticColors = getSemanticColors(props);
|
|
4729
|
-
return react.css(templateObject_8$
|
|
4763
|
+
return react.css(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n ", "\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), Minimal(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary);
|
|
4730
4764
|
};
|
|
4731
4765
|
var StyledMinimalButton = styled__default.default(material.Button, {
|
|
4732
4766
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4733
|
-
})(templateObject_10$
|
|
4767
|
+
})(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4734
4768
|
var sdsType = props.sdsType;
|
|
4735
|
-
return react.css(templateObject_9$
|
|
4769
|
+
return react.css(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4736
4770
|
});
|
|
4737
4771
|
var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
4738
4772
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4739
|
-
})(templateObject_11$
|
|
4773
|
+
})(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4740
4774
|
if (!props.isRounded)
|
|
4741
4775
|
return "";
|
|
4742
4776
|
var corners = getCorners(props);
|
|
4743
4777
|
var spaces = getSpaces(props);
|
|
4744
4778
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.rounded, "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 ");
|
|
4745
4779
|
});
|
|
4746
|
-
var templateObject_1$
|
|
4780
|
+
var templateObject_1$15, templateObject_2$I, templateObject_3$z, templateObject_4$x, templateObject_5$r, templateObject_6$n, templateObject_7$i, templateObject_8$f, templateObject_9$c, templateObject_10$8, templateObject_11$7;
|
|
4747
4781
|
|
|
4748
4782
|
var isDisabled$1 = function (props) {
|
|
4749
4783
|
var _a, _b;
|
|
4750
4784
|
var semanticColors = getSemanticColors(props);
|
|
4751
|
-
return react.css(templateObject_1$
|
|
4785
|
+
return react.css(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled);
|
|
4752
4786
|
};
|
|
4753
4787
|
var primary$2 = function (props) {
|
|
4754
4788
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4755
4789
|
var semanticColors = getSemanticColors(props);
|
|
4756
|
-
return react.css(templateObject_2$
|
|
4790
|
+
return react.css(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.ornament, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.ornament, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4757
4791
|
};
|
|
4758
4792
|
var secondary$2 = function (props) {
|
|
4759
4793
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4760
4794
|
var semanticColors = getSemanticColors(props);
|
|
4761
|
-
return react.css(templateObject_3$
|
|
4795
|
+
return react.css(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.ornamentHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _e === void 0 ? void 0 : _e.ornamentHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _g === void 0 ? void 0 : _g.ornamentPressed, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.ornamentPressed);
|
|
4762
4796
|
};
|
|
4763
4797
|
var tertiary = function (props) {
|
|
4764
4798
|
var _a, _b, _c, _d, _e, _f;
|
|
4765
4799
|
var semanticColors = getSemanticColors(props);
|
|
4766
|
-
return react.css(templateObject_4$
|
|
4800
|
+
return react.css(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.ornamentSecondaryHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryPressed, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryPressed);
|
|
4767
4801
|
};
|
|
4768
4802
|
var small$1 = function (props) {
|
|
4769
4803
|
var sdsType = props.sdsType;
|
|
4770
4804
|
var iconSizes = getIconSizes(props);
|
|
4771
4805
|
var spaces = getSpaces(props);
|
|
4772
|
-
return react.css(templateObject_5$
|
|
4806
|
+
return react.css(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4773
4807
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4774
4808
|
: "", 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;") : "");
|
|
4775
4809
|
};
|
|
@@ -4777,7 +4811,7 @@ var medium$1 = function (props) {
|
|
|
4777
4811
|
var sdsType = props.sdsType;
|
|
4778
4812
|
var iconSizes = getIconSizes(props);
|
|
4779
4813
|
var spaces = getSpaces(props);
|
|
4780
|
-
return react.css(templateObject_6$
|
|
4814
|
+
return react.css(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4781
4815
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;")
|
|
4782
4816
|
: "", 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;") : "");
|
|
4783
4817
|
};
|
|
@@ -4785,7 +4819,7 @@ var large = function (props) {
|
|
|
4785
4819
|
var sdsType = props.sdsType;
|
|
4786
4820
|
var iconSizes = getIconSizes(props);
|
|
4787
4821
|
var spaces = getSpaces(props);
|
|
4788
|
-
return react.css(templateObject_7$
|
|
4822
|
+
return react.css(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n ", "\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), sdsType !== "tertiary"
|
|
4789
4823
|
? "margin: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0;")
|
|
4790
4824
|
: "", 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;") : "");
|
|
4791
4825
|
};
|
|
@@ -4800,11 +4834,11 @@ var doNotForwardProps$F = [
|
|
|
4800
4834
|
];
|
|
4801
4835
|
var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
4802
4836
|
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
4803
|
-
})(templateObject_9$
|
|
4837
|
+
})(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4804
4838
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4805
|
-
return react.css(templateObject_8$
|
|
4839
|
+
return react.css(templateObject_8$e || (templateObject_8$e = __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));
|
|
4806
4840
|
});
|
|
4807
|
-
var templateObject_1$
|
|
4841
|
+
var templateObject_1$14, templateObject_2$H, templateObject_3$y, templateObject_4$w, templateObject_5$q, templateObject_6$m, templateObject_7$h, templateObject_8$e, templateObject_9$b;
|
|
4808
4842
|
|
|
4809
4843
|
var ButtonIconSizeToSdsIconSize = {
|
|
4810
4844
|
large: "xl",
|
|
@@ -4913,20 +4947,20 @@ var rounded$3 = function (props) {
|
|
|
4913
4947
|
var _a;
|
|
4914
4948
|
var corners = getCorners(props);
|
|
4915
4949
|
var semanticColors = getSemanticColors(props);
|
|
4916
|
-
return react.css(templateObject_1$
|
|
4950
|
+
return react.css(templateObject_1$13 || (templateObject_1$13 = __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.rounded, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.rounded, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary);
|
|
4917
4951
|
};
|
|
4918
4952
|
var applyIntentColor$2 = function (props, intent) {
|
|
4919
4953
|
var _a, _b, _c, _d;
|
|
4920
4954
|
var semanticColors = getSemanticColors(props);
|
|
4921
4955
|
var borders = getBorders(props);
|
|
4922
|
-
return react.css(templateObject_2$
|
|
4956
|
+
return react.css(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed);
|
|
4923
4957
|
};
|
|
4924
4958
|
var disabledStyled$2 = function (props) {
|
|
4925
4959
|
var _a, _b, _c, _d, _e;
|
|
4926
4960
|
var semanticColors = getSemanticColors(props);
|
|
4927
|
-
return react.css(templateObject_3$
|
|
4961
|
+
return react.css(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n background-color: unset;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover {\n background-color: unset;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", " !important;\n }\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryDisabled, material.inputAdornmentClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentDisabled, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.textDisabled);
|
|
4928
4962
|
};
|
|
4929
|
-
var StyledLabel$3 = styled__default.default("label")(templateObject_4$
|
|
4963
|
+
var StyledLabel$3 = styled__default.default("label")(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4930
4964
|
var spaces = getSpaces(props);
|
|
4931
4965
|
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 ");
|
|
4932
4966
|
});
|
|
@@ -4934,19 +4968,19 @@ var StyledSearchBase = styled__default.default(material.TextField, {
|
|
|
4934
4968
|
shouldForwardProp: function (prop) {
|
|
4935
4969
|
return !doNotForwardProps$E.includes(prop.toString());
|
|
4936
4970
|
},
|
|
4937
|
-
})(templateObject_6$
|
|
4971
|
+
})(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4938
4972
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
4939
4973
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4940
4974
|
var spaces = getSpaces(props);
|
|
4941
4975
|
var iconSizes = getIconSizes(props);
|
|
4942
4976
|
var semanticColors = getSemanticColors(props);
|
|
4943
4977
|
var corners = getCorners(props);
|
|
4944
|
-
return react.css(templateObject_5$
|
|
4978
|
+
return react.css(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n border-radius: ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n background-color: ", ";\n\n & .", ":last-of-type {\n svg {\n color: ", ";\n }\n }\n .", " {\n border: 1px solid ", ";\n }\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n border-radius: ", "px;\n width: 100%;\n\n .", " {\n padding-right: ", "px;\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n\n .MuiInputAdornment-positionEnd {\n position: absolute;\n right: ", "px;\n }\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n }\n\n .", ":hover {\n background-color: ", ";\n\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, corners === null || corners === void 0 ? void 0 : corners.l, material.outlinedInputClasses.input, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textTertiary, 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.borderPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.ornamentSecondaryHover, (_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, material.outlinedInputClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.fillHover, material.buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.ornamentSecondary, material.outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderPrimaryHover, 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.base) === null || _m === void 0 ? void 0 : _m.ornamentSecondaryPressed, material.outlinedInputClasses.root, (_o = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _o === void 0 ? void 0 : _o.borderPrimaryHover, 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));
|
|
4945
4979
|
});
|
|
4946
|
-
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$
|
|
4947
|
-
var templateObject_1$
|
|
4980
|
+
var StyledInputAdornment = styled__default.default(material.InputAdornment)(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4981
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$x, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$g;
|
|
4948
4982
|
|
|
4949
|
-
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$
|
|
4983
|
+
var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4950
4984
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4951
4985
|
var selected = props.selected;
|
|
4952
4986
|
var spaces = getSpaces(props);
|
|
@@ -4954,7 +4988,7 @@ var StyledMenuItem$1 = styled__default.default(material.MenuItem)(templateObject
|
|
|
4954
4988
|
var semanticColors = getSemanticColors(props);
|
|
4955
4989
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px !important;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\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 background-color: unset !important;\n\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 ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat(selected ? (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimary : (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondary, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.fillHover, ";\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat(selected ? (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentPrimary : (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentSecondary, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: ").concat((_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.surface, ";\n &:hover {\n background-color: ").concat((_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.fillHover, ";\n }\n }\n\n &:active {\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat((_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentPrimary, ";\n }\n\n &:active {\n ").concat(StyledIcon$1, ", ").concat(DotIcon, " {\n color: ").concat((_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentPrimary, ";\n }\n }\n }\n ");
|
|
4956
4990
|
});
|
|
4957
|
-
var ContentWrapper = styled__default.default("span")(templateObject_2$
|
|
4991
|
+
var ContentWrapper = styled__default.default("span")(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
4958
4992
|
var disabledStyles$2 = function (props) {
|
|
4959
4993
|
var _a;
|
|
4960
4994
|
var disabled = props.disabled;
|
|
@@ -4963,12 +4997,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4963
4997
|
var semanticColors = getSemanticColors(props);
|
|
4964
4998
|
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 ");
|
|
4965
4999
|
};
|
|
4966
|
-
var TextWrapper = styled__default.default("span")(templateObject_3$
|
|
5000
|
+
var TextWrapper = styled__default.default("span")(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4967
5001
|
var _a;
|
|
4968
5002
|
var semanticColors = getSemanticColors(props);
|
|
4969
5003
|
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 ");
|
|
4970
5004
|
}, disabledStyles$2);
|
|
4971
|
-
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$
|
|
5005
|
+
var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4972
5006
|
var _a;
|
|
4973
5007
|
var disabled = props.disabled;
|
|
4974
5008
|
var spaces = getSpaces(props);
|
|
@@ -4976,18 +5010,18 @@ var StyledMenuItemIcon = styled__default.default("span")(templateObject_4$t || (
|
|
|
4976
5010
|
var semanticColors = getSemanticColors(props);
|
|
4977
5011
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentDisabled, ";") : null, ";\n }\n ");
|
|
4978
5012
|
});
|
|
4979
|
-
var ColumnWrapper = styled__default.default("span")(templateObject_5$
|
|
5013
|
+
var ColumnWrapper = styled__default.default("span")(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4980
5014
|
var _a;
|
|
4981
5015
|
var semanticColors = getSemanticColors(props);
|
|
4982
5016
|
var spaces = getSpaces(props);
|
|
4983
5017
|
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 ");
|
|
4984
5018
|
}, disabledStyles$2);
|
|
4985
|
-
var StyledIconWrapper = styled__default.default("span")(templateObject_6$
|
|
5019
|
+
var StyledIconWrapper = styled__default.default("span")(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4986
5020
|
var spaces = getSpaces(props);
|
|
4987
5021
|
var iconSizes = getIconSizes(props);
|
|
4988
5022
|
return "\n display: flex;\n align-self: start;\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.xxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
4989
5023
|
});
|
|
4990
|
-
var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$
|
|
5024
|
+
var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4991
5025
|
var _a, _b;
|
|
4992
5026
|
var selected = props.selected, disabled = props.disabled;
|
|
4993
5027
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4996,7 +5030,7 @@ var StyledIcon$1 = styled__default.default(Icon)(templateObject_7$e || (template
|
|
|
4996
5030
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
4997
5031
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n ");
|
|
4998
5032
|
});
|
|
4999
|
-
var DotIcon = styled__default.default("svg")(templateObject_8$
|
|
5033
|
+
var DotIcon = styled__default.default("svg")(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5000
5034
|
var _a, _b;
|
|
5001
5035
|
var selected = props.selected, disabled = props.disabled;
|
|
5002
5036
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5007,7 +5041,7 @@ var DotIcon = styled__default.default("svg")(templateObject_8$c || (templateObje
|
|
|
5007
5041
|
});
|
|
5008
5042
|
styled__default.default(iconsMaterial.Remove, {
|
|
5009
5043
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
5010
|
-
})(templateObject_9$
|
|
5044
|
+
})(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5011
5045
|
var _a, _b;
|
|
5012
5046
|
var selected = props.selected, disabled = props.disabled;
|
|
5013
5047
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5017,7 +5051,7 @@ styled__default.default(iconsMaterial.Remove, {
|
|
|
5017
5051
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
5018
5052
|
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 ");
|
|
5019
5053
|
});
|
|
5020
|
-
var templateObject_1$
|
|
5054
|
+
var templateObject_1$12, templateObject_2$F, templateObject_3$w, templateObject_4$u, templateObject_5$o, templateObject_6$k, templateObject_7$f, templateObject_8$d, templateObject_9$a;
|
|
5021
5055
|
|
|
5022
5056
|
/**
|
|
5023
5057
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5123,7 +5157,8 @@ var useDetectUserTabbing = function (ref) {
|
|
|
5123
5157
|
* @see https://mui.com/material-ui/react-text-field/
|
|
5124
5158
|
*/
|
|
5125
5159
|
var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
5126
|
-
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled"]);
|
|
5160
|
+
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, _c = props.classes, classes = _c === void 0 ? EMPTY_OBJECT : _c, className = props.className, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled", "classes", "className"]);
|
|
5161
|
+
var rootClassName = classes.root, labelClassName = classes.label, inputClassName = classes.input, endAdornmentClassName = classes.endAdornment, startAdornmentClassName = classes.startAdornment, clearButtonClassName = classes.clearButton, searchButtonClassName = classes.searchButton;
|
|
5127
5162
|
/**
|
|
5128
5163
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
5129
5164
|
*/
|
|
@@ -5137,7 +5172,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5137
5172
|
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
5138
5173
|
*/
|
|
5139
5174
|
useDetectUserTabbing((ref ? ref : inputRef));
|
|
5140
|
-
var
|
|
5175
|
+
var _d = React.useState(""), value = _d[0], setValue = _d[1];
|
|
5141
5176
|
var handleChange = function (event) {
|
|
5142
5177
|
setValue(event.target.value);
|
|
5143
5178
|
if (onChange)
|
|
@@ -5173,11 +5208,11 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5173
5208
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5174
5209
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
5175
5210
|
}
|
|
5176
|
-
return (jsxRuntime.jsxs(
|
|
5211
|
+
return (jsxRuntime.jsxs("div", { className: cn(rootClassName), children: [jsxRuntime.jsx(StyledLabel$3, { htmlFor: id, className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef, className: cn(inputClassName, className),
|
|
5177
5212
|
// passed to mui Input
|
|
5178
5213
|
InputProps: {
|
|
5179
|
-
endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
5180
|
-
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
|
|
5214
|
+
endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", className: cn(endAdornmentClassName), children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: cn("input-search-clear-icon", clearButtonClassName), onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
5215
|
+
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", className: cn(startAdornmentClassName), children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search", className: cn(searchButtonClassName) }) })),
|
|
5181
5216
|
}, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
|
|
5182
5217
|
/**
|
|
5183
5218
|
* (masoudmanson): This prevents the browser's default auto completion
|
|
@@ -5197,7 +5232,7 @@ var doNotForwardProps$D = [
|
|
|
5197
5232
|
];
|
|
5198
5233
|
var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
5199
5234
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5200
|
-
})(templateObject_1$
|
|
5235
|
+
})(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
5201
5236
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5202
5237
|
var search = props.search, groupBy = props.groupBy;
|
|
5203
5238
|
var spaces = getSpaces(props);
|
|
@@ -5207,7 +5242,7 @@ var StyledAutocompleteBase = styled__default.default(material.Autocomplete, {
|
|
|
5207
5242
|
});
|
|
5208
5243
|
var InputBaseWrapper$1 = styled__default.default("div", {
|
|
5209
5244
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5210
|
-
})(templateObject_2$
|
|
5245
|
+
})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5211
5246
|
var search = props.search;
|
|
5212
5247
|
if (!search) {
|
|
5213
5248
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5218,11 +5253,11 @@ var InputBaseWrapper$1 = styled__default.default("div", {
|
|
|
5218
5253
|
});
|
|
5219
5254
|
var StyledMenuInputSearch$1 = styled__default.default(InputSearch, {
|
|
5220
5255
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5221
|
-
})(templateObject_3$
|
|
5256
|
+
})(templateObject_3$v || (templateObject_3$v = __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) {
|
|
5222
5257
|
var search = _a.search;
|
|
5223
5258
|
return (search ? "auto" : "transparent");
|
|
5224
5259
|
});
|
|
5225
|
-
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$
|
|
5260
|
+
var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5226
5261
|
var _a, _b;
|
|
5227
5262
|
var corners = getCorners(props);
|
|
5228
5263
|
var shadows = getShadows(props);
|
|
@@ -5231,13 +5266,13 @@ var StyledPaper$3 = styled__default.default(material.Paper)(templateObject_4$s |
|
|
|
5231
5266
|
var semanticColors = getSemanticColors(props);
|
|
5232
5267
|
return "\n background-image: none;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n outline: 1px solid ").concat(addOpacityToHex(((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary) || "#000", 15), ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
5233
5268
|
});
|
|
5234
|
-
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$
|
|
5269
|
+
var StyledMenuItemDetails = styled__default.default("div")(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5235
5270
|
var _a;
|
|
5236
5271
|
var semanticColors = getSemanticColors(props);
|
|
5237
5272
|
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 ");
|
|
5238
5273
|
});
|
|
5239
|
-
var StyledMenuItemText = styled__default.default("div")(templateObject_6$
|
|
5240
|
-
var templateObject_1$
|
|
5274
|
+
var StyledMenuItemText = styled__default.default("div")(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5275
|
+
var templateObject_1$11, templateObject_2$E, templateObject_3$v, templateObject_4$t, templateObject_5$n, templateObject_6$j;
|
|
5241
5276
|
|
|
5242
5277
|
var AutocompleteBase = function (props) {
|
|
5243
5278
|
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled, _r = props.intent, intent = _r === void 0 ? "default" : _r;
|
|
@@ -5398,17 +5433,17 @@ var AutocompleteBase = function (props) {
|
|
|
5398
5433
|
}
|
|
5399
5434
|
};
|
|
5400
5435
|
|
|
5401
|
-
var StyledColumn = styled__default.default("div")(templateObject_1
|
|
5436
|
+
var StyledColumn = styled__default.default("div")(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5402
5437
|
var _a = props.width, width = _a === void 0 ? 280 : _a;
|
|
5403
5438
|
return "\n position: relative;\n width: ".concat(width, "px;\n ");
|
|
5404
5439
|
});
|
|
5405
|
-
var StyledColumnTitle = styled__default.default("p")(templateObject_2$
|
|
5440
|
+
var StyledColumnTitle = styled__default.default("p")(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
5406
5441
|
var _a;
|
|
5407
5442
|
var spaces = getSpaces(props);
|
|
5408
5443
|
var semanticColors = getSemanticColors(props);
|
|
5409
5444
|
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.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
|
|
5410
5445
|
});
|
|
5411
|
-
var templateObject_1
|
|
5446
|
+
var templateObject_1$10, templateObject_2$D;
|
|
5412
5447
|
|
|
5413
5448
|
var AutocompleteGroup = function (props) {
|
|
5414
5449
|
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"]);
|
|
@@ -5463,7 +5498,7 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5463
5498
|
shouldForwardProp: function (prop) {
|
|
5464
5499
|
return !doNotForwardProps$C.includes(prop) || prop === "anchorEl";
|
|
5465
5500
|
},
|
|
5466
|
-
})(templateObject_1
|
|
5501
|
+
})(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5467
5502
|
var _a;
|
|
5468
5503
|
var corners = getCorners(props);
|
|
5469
5504
|
var shadows = getShadows(props);
|
|
@@ -5474,38 +5509,38 @@ var StyledPopper$2 = styled__default.default(material.Popper, {
|
|
|
5474
5509
|
});
|
|
5475
5510
|
var StyledPaper$2 = styled__default.default(material.Paper, {
|
|
5476
5511
|
shouldForwardProp: function (prop) { return !doNotForwardProps$C.includes(prop); },
|
|
5477
|
-
})(templateObject_2$
|
|
5512
|
+
})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5478
5513
|
var _a;
|
|
5479
5514
|
var shadows = getShadows(props);
|
|
5480
5515
|
var semanticColors = getSemanticColors(props);
|
|
5481
5516
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
|
|
5482
5517
|
});
|
|
5483
|
-
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$
|
|
5518
|
+
var StyledAutocompleteGroupWrapper = styled__default.default("div")(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5484
5519
|
var StyledAutocompleteInput = styled__default.default(InputSearch, {
|
|
5485
5520
|
shouldForwardProp: function (prop) { return !doNotForwardProps$C.includes(prop); },
|
|
5486
|
-
})(templateObject_4$
|
|
5521
|
+
})(templateObject_4$s || (templateObject_4$s = __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) {
|
|
5487
5522
|
var search = _a.search;
|
|
5488
5523
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5489
5524
|
}, function (_a) {
|
|
5490
5525
|
var search = _a.search;
|
|
5491
5526
|
return (search ? "auto" : "transparent");
|
|
5492
5527
|
});
|
|
5493
|
-
var templateObject_1
|
|
5528
|
+
var templateObject_1$$, templateObject_2$C, templateObject_3$u, templateObject_4$s;
|
|
5494
5529
|
|
|
5495
|
-
var StyledVerticalDivider = material.styled("div")(templateObject_1$
|
|
5530
|
+
var StyledVerticalDivider = material.styled("div")(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5496
5531
|
var _a;
|
|
5497
5532
|
var spaces = getSpaces(props);
|
|
5498
5533
|
var semanticColors = getSemanticColors(props);
|
|
5499
5534
|
return "\n position: relative;\n width: 1px;\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5500
5535
|
});
|
|
5501
|
-
var StyledColumnIcon = material.styled("span")(templateObject_2$
|
|
5536
|
+
var StyledColumnIcon = material.styled("span")(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5502
5537
|
var _a, _b;
|
|
5503
5538
|
var spaces = getSpaces(props);
|
|
5504
5539
|
var iconSizes = getIconSizes(props);
|
|
5505
5540
|
var semanticColors = getSemanticColors(props);
|
|
5506
5541
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n\n svg {\n color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, ";\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 ");
|
|
5507
5542
|
});
|
|
5508
|
-
var templateObject_1$
|
|
5543
|
+
var templateObject_1$_, templateObject_2$B;
|
|
5509
5544
|
|
|
5510
5545
|
var VerticalDivider = function (_a) {
|
|
5511
5546
|
var icon = _a.icon;
|
|
@@ -5692,13 +5727,13 @@ var Autocomplete = function (props) {
|
|
|
5692
5727
|
}
|
|
5693
5728
|
};
|
|
5694
5729
|
|
|
5695
|
-
var Centered = styled__default.default("div")(templateObject_1$
|
|
5730
|
+
var Centered = styled__default.default("div")(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
5696
5731
|
var doNotForwardPropsIconWrapper = ["bannerType", "intent"];
|
|
5697
5732
|
var IconWrapper$1 = styled__default.default("div", {
|
|
5698
5733
|
shouldForwardProp: function (prop) {
|
|
5699
5734
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5700
5735
|
},
|
|
5701
|
-
})(templateObject_2$
|
|
5736
|
+
})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5702
5737
|
var _a, _b;
|
|
5703
5738
|
var bannerType = props.bannerType, _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
5704
5739
|
var spaces = getSpaces(props);
|
|
@@ -5713,7 +5748,7 @@ var StyledButton$1 = styled__default.default(Button, {
|
|
|
5713
5748
|
shouldForwardProp: function (prop) {
|
|
5714
5749
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5715
5750
|
},
|
|
5716
|
-
})(templateObject_3$
|
|
5751
|
+
})(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
5717
5752
|
var _a, _b;
|
|
5718
5753
|
var bannerType = props.bannerType;
|
|
5719
5754
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5721,7 +5756,7 @@ var StyledButton$1 = styled__default.default(Button, {
|
|
|
5721
5756
|
return "\n svg {\n fill: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentOnFill, ";\n opacity: .65;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
|
|
5722
5757
|
return "\n svg {\n fill: ".concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary, ";\n opacity: .55;\n }\n\n svg:hover {\n opacity: 1;\n }\n ");
|
|
5723
5758
|
});
|
|
5724
|
-
styled__default.default("div")(templateObject_4$
|
|
5759
|
+
styled__default.default("div")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5725
5760
|
var primary$1 = function (props) {
|
|
5726
5761
|
var _a, _b;
|
|
5727
5762
|
var _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
@@ -5737,12 +5772,12 @@ var secondary$1 = function (props) {
|
|
|
5737
5772
|
var doNotForwardProps$B = ["sdsType", "textChild", "intent"];
|
|
5738
5773
|
var StyledBanner = styled__default.default("div", {
|
|
5739
5774
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5740
|
-
})(templateObject_5$
|
|
5775
|
+
})(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5741
5776
|
var sdsType = props.sdsType;
|
|
5742
5777
|
var spaces = getSpaces(props);
|
|
5743
5778
|
return "\n display: flex;\n align-items: center;\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 \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
5744
5779
|
});
|
|
5745
|
-
var templateObject_1$
|
|
5780
|
+
var templateObject_1$Z, templateObject_2$A, templateObject_3$t, templateObject_4$r, templateObject_5$m;
|
|
5746
5781
|
|
|
5747
5782
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
5748
5783
|
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, _b = props.intent, intent = _b === void 0 ? "info" : _b, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps", "intent"]);
|
|
@@ -5817,13 +5852,13 @@ var ButtonDropdown = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
5817
5852
|
var doNotForwardProps$A = ["sdsStage"];
|
|
5818
5853
|
var StyledButtonToggle = styled__default.default(ButtonIcon, {
|
|
5819
5854
|
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5820
|
-
})(templateObject_1$
|
|
5855
|
+
})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5821
5856
|
var _a;
|
|
5822
5857
|
var sdsStage = props.sdsStage;
|
|
5823
5858
|
var semanticColors = getSemanticColors(props);
|
|
5824
5859
|
return "\n background-color: ".concat(sdsStage === "on" ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen : "transparent", ";\n ");
|
|
5825
5860
|
});
|
|
5826
|
-
var templateObject_1$
|
|
5861
|
+
var templateObject_1$Y;
|
|
5827
5862
|
|
|
5828
5863
|
/**
|
|
5829
5864
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5848,7 +5883,7 @@ var doNotForwardProps$z = [
|
|
|
5848
5883
|
];
|
|
5849
5884
|
var StyledCallout = styled__default.default(material.Alert, {
|
|
5850
5885
|
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
5851
|
-
})(templateObject_1$
|
|
5886
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5852
5887
|
var _a, _b, _c, _d, _e;
|
|
5853
5888
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5854
5889
|
var spaces = getSpaces(props);
|
|
@@ -5859,12 +5894,12 @@ var StyledCallout = styled__default.default(material.Alert, {
|
|
|
5859
5894
|
var backgroundColor = (_d = (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _c === void 0 ? void 0 : _c.surfaceSecondary) !== null && _d !== void 0 ? _d : "white";
|
|
5860
5895
|
return "\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.xl, "px;\n color: ").concat((_e = palette === null || palette === void 0 ? void 0 : palette.text) === null || _e === void 0 ? void 0 : _e.primary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n background-color: ").concat(backgroundColor, ";\n align-items: ").concat((hideBody && sdsStyle === "expandable" && collapsed) || (hideBody && sdsStyle !== "expandable") ? "center" : "flex-start", ";\n\n .").concat(material.alertClasses.icon, " {\n margin-top: ").concat((hideBody && sdsStyle === "expandable" && collapsed) || (hideBody && sdsStyle !== "expandable") ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "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 width: 100%;\n padding: 0;\n margin: 0;\n\n .").concat(material.alertTitleClasses.root, " {\n margin: 0;\n }\n }\n\n .").concat(material.alertClasses.action, " {\n display: ").concat(sdsStyle === "persistent" ? "none" : "block", ";\n margin: 0 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n padding: 0;\n align-items: flex-start;\n\n > button {\n padding: 0;\n }\n }\n ");
|
|
5861
5896
|
});
|
|
5862
|
-
var templateObject_1$
|
|
5897
|
+
var templateObject_1$X;
|
|
5863
5898
|
|
|
5864
5899
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5865
5900
|
|
|
5866
|
-
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$
|
|
5867
|
-
var templateObject_1$
|
|
5901
|
+
var StyledCalloutTitle = styled__default.default(material.AlertTitle)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5902
|
+
var templateObject_1$W;
|
|
5868
5903
|
|
|
5869
5904
|
var CalloutTitle = function (_a) {
|
|
5870
5905
|
var children = _a.children;
|
|
@@ -5873,24 +5908,24 @@ var CalloutTitle = function (_a) {
|
|
|
5873
5908
|
// Display name required to ensure Callout expand works correctly.
|
|
5874
5909
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5875
5910
|
|
|
5876
|
-
var StyledCalloutBody = styled__default.default("div")(templateObject_1$
|
|
5911
|
+
var StyledCalloutBody = styled__default.default("div")(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5877
5912
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5878
5913
|
var spaces = getSpaces(props);
|
|
5879
5914
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5880
5915
|
});
|
|
5881
|
-
var templateObject_1$
|
|
5916
|
+
var templateObject_1$V;
|
|
5882
5917
|
|
|
5883
5918
|
var CalloutBody = function (_a) {
|
|
5884
5919
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5885
5920
|
return (jsxRuntime.jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5886
5921
|
};
|
|
5887
5922
|
|
|
5888
|
-
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$
|
|
5923
|
+
var StyledCalloutExtraContent = styled__default.default("div")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5889
5924
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5890
5925
|
var spaces = getSpaces(props);
|
|
5891
5926
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5892
5927
|
});
|
|
5893
|
-
var templateObject_1$
|
|
5928
|
+
var templateObject_1$U;
|
|
5894
5929
|
|
|
5895
5930
|
var CalloutExtraContent = function (_a) {
|
|
5896
5931
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5959,22 +5994,22 @@ var dark$1 = function (props) {
|
|
|
5959
5994
|
var _a, _b;
|
|
5960
5995
|
var spaces = getSpaces(props);
|
|
5961
5996
|
var semanticColors = getSemanticColors(props);
|
|
5962
|
-
return css.css(templateObject_1$
|
|
5997
|
+
return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5963
5998
|
};
|
|
5964
5999
|
var light$1 = function (props) {
|
|
5965
6000
|
var _a, _b;
|
|
5966
6001
|
var spaces = getSpaces(props);
|
|
5967
6002
|
var semanticColors = getSemanticColors(props);
|
|
5968
|
-
return css.css(templateObject_2$
|
|
6003
|
+
return css.css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5969
6004
|
};
|
|
5970
6005
|
var tableStyles = function (props) {
|
|
5971
6006
|
var spaces = getSpaces(props);
|
|
5972
|
-
return css.css(templateObject_3$
|
|
6007
|
+
return css.css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5973
6008
|
};
|
|
5974
6009
|
var doNotForwardProps$y = ["hasInvertedStyle", "textAlign"];
|
|
5975
6010
|
var StyledTitle = styled__default.default("p", {
|
|
5976
6011
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5977
|
-
})(templateObject_4$
|
|
6012
|
+
})(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
5978
6013
|
var _a, _b;
|
|
5979
6014
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5980
6015
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5982,7 +6017,7 @@ var StyledTitle = styled__default.default("p", {
|
|
|
5982
6017
|
});
|
|
5983
6018
|
var StyledSubtitle = styled__default.default("p", {
|
|
5984
6019
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5985
|
-
})(templateObject_5$
|
|
6020
|
+
})(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5986
6021
|
var _a, _b;
|
|
5987
6022
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5988
6023
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5994,7 +6029,7 @@ var tooltipCss = function (props) {
|
|
|
5994
6029
|
var shadows = getShadows(props);
|
|
5995
6030
|
var corners = getCorners(props);
|
|
5996
6031
|
var semanticColors = getSemanticColors(props);
|
|
5997
|
-
return css.css(templateObject_6$
|
|
6032
|
+
return css.css(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n border-radius: ", "px;\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n border-radius: ", "px;\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n\n ", "\n }\n "])), corners === null || corners === void 0 ? void 0 : corners.l, shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
|
|
5998
6033
|
? textAlign
|
|
5999
6034
|
: width === "wide"
|
|
6000
6035
|
? "left"
|
|
@@ -6007,7 +6042,7 @@ var arrowCss = function (props) {
|
|
|
6007
6042
|
var _a, _b;
|
|
6008
6043
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
6009
6044
|
var semanticColors = getSemanticColors(props);
|
|
6010
|
-
return css.css(templateObject_7$
|
|
6045
|
+
return css.css(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "], ["\n &.MuiTooltip-arrow {\n /* (bethbertozzi): !important is needed to fight inline style */\n left: ", "px !important;\n color: ", ";\n &:before {\n box-sizing: border-box;\n width: 12px;\n height: 12px;\n }\n }\n "])), arrowOffset, hasInvertedStyle || inverted || sdsStyle === "dark"
|
|
6011
6046
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
6012
6047
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
6013
6048
|
};
|
|
@@ -6015,13 +6050,13 @@ var arrowCss = function (props) {
|
|
|
6015
6050
|
* (masoudmanson): !important is needed to override arrow's
|
|
6016
6051
|
* default placement which is calculated by javascript
|
|
6017
6052
|
*/
|
|
6018
|
-
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$
|
|
6019
|
-
var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$
|
|
6053
|
+
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
6054
|
+
var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6020
6055
|
var shouldAddMargin = props.shouldAddMargin;
|
|
6021
6056
|
var spaces = getSpaces(props);
|
|
6022
6057
|
return "\n margin-top: ".concat(shouldAddMargin ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 0, "px;\n ");
|
|
6023
6058
|
});
|
|
6024
|
-
var templateObject_1$
|
|
6059
|
+
var templateObject_1$T, templateObject_2$z, templateObject_3$s, templateObject_4$q, templateObject_5$l, templateObject_6$i, templateObject_7$e, templateObject_8$c, templateObject_9$9;
|
|
6025
6060
|
|
|
6026
6061
|
/**
|
|
6027
6062
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6130,7 +6165,7 @@ var verticalAlignToFlexMap = {
|
|
|
6130
6165
|
};
|
|
6131
6166
|
var StyledTableData = styled__default.default("td", {
|
|
6132
6167
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6133
|
-
})(templateObject_1$
|
|
6168
|
+
})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6134
6169
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6135
6170
|
var spaces = getSpaces(props);
|
|
6136
6171
|
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 ");
|
|
@@ -6141,22 +6176,22 @@ var ShouldWrap = function (lineCount) {
|
|
|
6141
6176
|
var ShouldTruncate$1 = function () {
|
|
6142
6177
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n word-break: break-all;\n ";
|
|
6143
6178
|
};
|
|
6144
|
-
var StyledCellContent = styled__default.default("div")(templateObject_2$
|
|
6145
|
-
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$
|
|
6179
|
+
var StyledCellContent = styled__default.default("div")(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6180
|
+
var StyledCellContentWrapper = styled__default.default("div")(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6146
6181
|
var StyledCellIconWrapper = styled__default.default("div", {
|
|
6147
6182
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6148
|
-
})(templateObject_4$
|
|
6183
|
+
})(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6149
6184
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6150
6185
|
var spaces = getSpaces(props);
|
|
6151
6186
|
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 ");
|
|
6152
6187
|
});
|
|
6153
|
-
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$
|
|
6188
|
+
var PrimaryTextWrapper = styled__default.default("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6154
6189
|
var horizontalAlign = props.horizontalAlign;
|
|
6155
6190
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6156
6191
|
});
|
|
6157
6192
|
var PrimaryText = styled__default.default("div", {
|
|
6158
6193
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6159
|
-
})(templateObject_6$
|
|
6194
|
+
})(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6160
6195
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a, _b = props.tabularNums, tabularNums = _b === void 0 ? false : _b;
|
|
6161
6196
|
return "\n display: block;\n font-variant-numeric: ".concat(tabularNums ? TABULAR_NUMS : "normal", ";\n \n ").concat(props.shouldTextWrap
|
|
6162
6197
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
@@ -6164,7 +6199,7 @@ var PrimaryText = styled__default.default("div", {
|
|
|
6164
6199
|
});
|
|
6165
6200
|
var SecondaryText = styled__default.default("span", {
|
|
6166
6201
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6167
|
-
})(templateObject_7$
|
|
6202
|
+
})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6168
6203
|
var _a;
|
|
6169
6204
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6170
6205
|
var spaces = getSpaces(props);
|
|
@@ -6175,7 +6210,7 @@ var SecondaryText = styled__default.default("span", {
|
|
|
6175
6210
|
});
|
|
6176
6211
|
var TertiaryText = styled__default.default("span", {
|
|
6177
6212
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6178
|
-
})(templateObject_8$
|
|
6213
|
+
})(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6179
6214
|
var _a;
|
|
6180
6215
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6181
6216
|
var spaces = getSpaces(props);
|
|
@@ -6184,15 +6219,15 @@ var TertiaryText = styled__default.default("span", {
|
|
|
6184
6219
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6185
6220
|
: ShouldTruncate$1(), "\n ");
|
|
6186
6221
|
});
|
|
6187
|
-
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$
|
|
6222
|
+
var PrimaryTextComponentSlotBottomWrapper = styled__default.default("div")(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6188
6223
|
var spaces = getSpaces(props);
|
|
6189
6224
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6190
6225
|
});
|
|
6191
|
-
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$
|
|
6226
|
+
var PrimaryTextComponentSlotRightWrapper = styled__default.default("div")(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6192
6227
|
var spaces = getSpaces(props);
|
|
6193
6228
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6194
6229
|
});
|
|
6195
|
-
var templateObject_1$
|
|
6230
|
+
var templateObject_1$S, templateObject_2$y, templateObject_3$r, templateObject_4$p, templateObject_5$k, templateObject_6$h, templateObject_7$d, templateObject_8$b, templateObject_9$8, templateObject_10$7;
|
|
6196
6231
|
|
|
6197
6232
|
var CellBasicContent = function (props) {
|
|
6198
6233
|
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, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
@@ -6209,12 +6244,12 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
6209
6244
|
var doNotForwardProps$w = ["horizontalAlign", "verticalAlign"];
|
|
6210
6245
|
var StyledCellComponentData = styled__default.default("td", {
|
|
6211
6246
|
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
6212
|
-
})(templateObject_1$
|
|
6247
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6213
6248
|
var spaces = getSpaces(props);
|
|
6214
6249
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6215
6250
|
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 ");
|
|
6216
6251
|
});
|
|
6217
|
-
var templateObject_1$
|
|
6252
|
+
var templateObject_1$R;
|
|
6218
6253
|
|
|
6219
6254
|
var CellComponent = React.forwardRef(function (props, _) {
|
|
6220
6255
|
var children = props.children, rest = __rest(props, ["children"]);
|
|
@@ -6238,7 +6273,7 @@ var doNotForwardProps$v = [
|
|
|
6238
6273
|
];
|
|
6239
6274
|
var StyledSortingIcon = styled__default.default(Icon, {
|
|
6240
6275
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6241
|
-
})(templateObject_1$
|
|
6276
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6242
6277
|
var _a;
|
|
6243
6278
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6244
6279
|
var spaces = getSpaces(props);
|
|
@@ -6250,7 +6285,7 @@ var ShouldTruncate = function () {
|
|
|
6250
6285
|
};
|
|
6251
6286
|
var StyledTableHeader$1 = styled__default.default("th", {
|
|
6252
6287
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6253
|
-
})(templateObject_2$
|
|
6288
|
+
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6254
6289
|
var _a, _b, _c, _d, _e, _f;
|
|
6255
6290
|
var _g = props.active, active = _g === void 0 ? false : _g, _h = props.horizontalAlign, horizontalAlign = _h === void 0 ? "left" : _h, _j = props.hover, hover = _j === void 0 ? true : _j;
|
|
6256
6291
|
var spaces = getSpaces(props);
|
|
@@ -6265,17 +6300,17 @@ var StyledTableHeader$1 = styled__default.default("th", {
|
|
|
6265
6300
|
});
|
|
6266
6301
|
var StyledCellHeaderText = styled__default.default("div", {
|
|
6267
6302
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6268
|
-
})(templateObject_3$
|
|
6303
|
+
})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
6269
6304
|
var _a = props.shouldTruncate, shouldTruncate = _a === void 0 ? false : _a;
|
|
6270
6305
|
return "\n ".concat(shouldTruncate && ShouldTruncate(), "\n ");
|
|
6271
6306
|
});
|
|
6272
6307
|
var StyledCellHeaderContainer = styled__default.default("div", {
|
|
6273
6308
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6274
|
-
})(templateObject_4$
|
|
6309
|
+
})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6275
6310
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6276
6311
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6277
6312
|
});
|
|
6278
|
-
var templateObject_1$
|
|
6313
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$q, templateObject_4$o;
|
|
6279
6314
|
|
|
6280
6315
|
var CellHeaderContent = function (props) {
|
|
6281
6316
|
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, hover = props.hover, _c = props.shouldTruncate, shouldTruncate = _c === void 0 ? false : _c;
|
|
@@ -6295,20 +6330,20 @@ var CellHeader = React.forwardRef(function (props, ref) {
|
|
|
6295
6330
|
|
|
6296
6331
|
var small = function (props) {
|
|
6297
6332
|
var spaces = getSpaces(props);
|
|
6298
|
-
return react.css(templateObject_1$
|
|
6333
|
+
return react.css(templateObject_1$P || (templateObject_1$P = __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));
|
|
6299
6334
|
};
|
|
6300
6335
|
var medium = function (props) {
|
|
6301
6336
|
var spaces = getSpaces(props);
|
|
6302
6337
|
var colors = getColors(props);
|
|
6303
|
-
return react.css(templateObject_2$
|
|
6338
|
+
return react.css(templateObject_2$w || (templateObject_2$w = __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);
|
|
6304
6339
|
};
|
|
6305
6340
|
var rounded$2 = function (props) {
|
|
6306
6341
|
var corners = getCorners(props);
|
|
6307
|
-
return react.css(templateObject_3$
|
|
6342
|
+
return react.css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
6308
6343
|
};
|
|
6309
6344
|
var square$2 = function (props) {
|
|
6310
6345
|
var corners = getCorners(props);
|
|
6311
|
-
return react.css(templateObject_4$
|
|
6346
|
+
return react.css(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.m);
|
|
6312
6347
|
};
|
|
6313
6348
|
var success = function (props) {
|
|
6314
6349
|
return createStatusCss(props, "success");
|
|
@@ -6361,7 +6396,7 @@ function createStatusCss(props, status) {
|
|
|
6361
6396
|
},
|
|
6362
6397
|
};
|
|
6363
6398
|
var statusColors = statusToColors[status];
|
|
6364
|
-
return react.css(templateObject_5$
|
|
6399
|
+
return react.css(templateObject_5$j || (templateObject_5$j = __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);
|
|
6365
6400
|
}
|
|
6366
6401
|
var statusToCss = {
|
|
6367
6402
|
beta: beta,
|
|
@@ -6374,11 +6409,11 @@ var statusToCss = {
|
|
|
6374
6409
|
var doNotForwardProps$u = ["isRounded"];
|
|
6375
6410
|
var StyledChip = styled__default.default(material.Chip, {
|
|
6376
6411
|
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6377
|
-
})(templateObject_7$
|
|
6412
|
+
})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6378
6413
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6379
|
-
return react.css(templateObject_6$
|
|
6414
|
+
return react.css(templateObject_6$g || (templateObject_6$g = __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));
|
|
6380
6415
|
});
|
|
6381
|
-
var templateObject_1$
|
|
6416
|
+
var templateObject_1$P, templateObject_2$w, templateObject_3$p, templateObject_4$n, templateObject_5$j, templateObject_6$g, templateObject_7$c;
|
|
6382
6417
|
|
|
6383
6418
|
/**
|
|
6384
6419
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6412,7 +6447,7 @@ var doNotForwardProps$t = [
|
|
|
6412
6447
|
];
|
|
6413
6448
|
var StyledHeaderTitle = styled__default.default("div", {
|
|
6414
6449
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6415
|
-
})(templateObject_1$
|
|
6450
|
+
})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
6416
6451
|
var _a;
|
|
6417
6452
|
var spaces = getSpaces(props);
|
|
6418
6453
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6420,7 +6455,7 @@ var StyledHeaderTitle = styled__default.default("div", {
|
|
|
6420
6455
|
});
|
|
6421
6456
|
var StyledDropdownMenuAutocompleteWrapper = styled__default.default("div", {
|
|
6422
6457
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6423
|
-
})(templateObject_2$
|
|
6458
|
+
})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6424
6459
|
var search = props.search, titleValue = props.titleValue;
|
|
6425
6460
|
var spaces = getSpaces(props);
|
|
6426
6461
|
return "\n & .SdsAutocompleteMultiColumn-wrapper {\n padding: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n }\n\n & .").concat(material.autocompleteClasses.popper, ", & .MuiPopper-root,\n .base-Popper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: ").concat(!search && !titleValue ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0;\n border: none;\n outline: none !important;\n\n .MuiAutocomplete-listbox {\n outline: none !important;\n }\n\n .").concat(material.autocompleteClasses.paper, ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n outline: none !important;\n }\n }\n ");
|
|
@@ -6429,7 +6464,7 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6429
6464
|
shouldForwardProp: function (prop) {
|
|
6430
6465
|
return !doNotForwardProps$t.includes(prop) || prop === "anchorEl";
|
|
6431
6466
|
},
|
|
6432
|
-
})(templateObject_3$
|
|
6467
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6433
6468
|
var _a;
|
|
6434
6469
|
var borders = getBorders(props);
|
|
6435
6470
|
var corners = getCorners(props);
|
|
@@ -6439,7 +6474,7 @@ var StyledPopper = styled__default.default(material.Popper, {
|
|
|
6439
6474
|
});
|
|
6440
6475
|
var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
6441
6476
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6442
|
-
})(templateObject_4$
|
|
6477
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6443
6478
|
var _a, _b, _c, _d;
|
|
6444
6479
|
var spaces = getSpaces(props);
|
|
6445
6480
|
var shadows = getShadows(props);
|
|
@@ -6447,14 +6482,14 @@ var StyledPaper$1 = styled__default.default(material.Paper, {
|
|
|
6447
6482
|
var corners = getCorners(props);
|
|
6448
6483
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: none !important;\n outline: 1px solid ").concat(addOpacityToHex(((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary) || "#000000", 15), ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface, ";\n background-image: none;\n margin: 0;\n padding: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n overflow: hidden;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n\n & .MuiInputBase-root.MuiOutlinedInput-root {\n border-radius: 0;\n }\n\n & fieldset {\n border-left: none !important;\n border-right: none !important;\n border-top: none !important;\n border-bottom: 1px solid ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.divider, ";\n border-color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.divider, " !important;\n border-radius: 0;\n }\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 ");
|
|
6449
6484
|
});
|
|
6450
|
-
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$
|
|
6485
|
+
var StyledDropdownMenuHeader = styled__default.default("div")(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6451
6486
|
var _a;
|
|
6452
6487
|
var search = props.search;
|
|
6453
6488
|
var spaces = getSpaces(props);
|
|
6454
6489
|
var semanticColors = getSemanticColors(props);
|
|
6455
6490
|
return "\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(search ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ").concat(search && "border-bottom: solid 1px ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";"), "\n ");
|
|
6456
6491
|
});
|
|
6457
|
-
var templateObject_1$
|
|
6492
|
+
var templateObject_1$O, templateObject_2$v, templateObject_3$o, templateObject_4$m, templateObject_5$i;
|
|
6458
6493
|
|
|
6459
6494
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6460
6495
|
// for the dropdownMenu's popper component
|
|
@@ -6465,7 +6500,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
6465
6500
|
var DropdownMenu = function (props) {
|
|
6466
6501
|
var _a, _b;
|
|
6467
6502
|
var theme = material.useTheme();
|
|
6468
|
-
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.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
6503
|
+
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.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, onOpen = props.onOpen, onClose = props.onClose, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width", "onOpen", "onClose"]);
|
|
6469
6504
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
6470
6505
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
6471
6506
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -6487,7 +6522,7 @@ var DropdownMenu = function (props) {
|
|
|
6487
6522
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
6488
6523
|
// (masoudmanson): To override the width of the Popper,
|
|
6489
6524
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
6490
|
-
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), 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] }) })) }) })));
|
|
6525
|
+
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { search: search, titleValue: !!(title || headerComponentSlot), 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, onOpen: onOpen, onClose: onClose }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
6491
6526
|
};
|
|
6492
6527
|
|
|
6493
6528
|
var doNotForwardProps$s = [
|
|
@@ -6514,27 +6549,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6514
6549
|
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6515
6550
|
var spaces = getSpaces(props);
|
|
6516
6551
|
var semanticColors = getSemanticColors(props);
|
|
6517
|
-
return react.css(templateObject_1$
|
|
6552
|
+
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n cursor: pointer;\n padding: ", "px ", "px;\n justify-content: start;\n width: ", ";\n min-width: 90px !important;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n ", " {\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: transparent;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n background-color: transparent;\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, /^\d+$/.test(width) ? "".concat(width, "px") : width, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, IconWrapper, 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.ornamentSecondary, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.borderPrimaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.ornamentSecondaryHover, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.textPrimary, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.border, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimary, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _l === void 0 ? void 0 : _l.ornamentSecondaryPressed);
|
|
6518
6553
|
};
|
|
6519
6554
|
var minimal$1 = function (props) {
|
|
6520
6555
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6521
6556
|
var spaces = getSpaces(props);
|
|
6522
6557
|
var semanticColors = getSemanticColors(props);
|
|
6523
|
-
return react.css(templateObject_2$
|
|
6558
|
+
return react.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n box-shadow: none !important;\n background-color: transparent;\n min-width: auto;\n\n span {\n color: ", ";\n }\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n\n & > span {\n ", "\n margin-left: 0;\n }\n\n ", " {\n margin-left: ", "px;\n margin-right: 0;\n }\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 ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none !important;\n flex-direction: column;\n padding: ", "px ", "px;\n box-shadow: none !important;\n background-color: transparent;\n min-width: auto;\n\n span {\n color: ", ";\n }\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n\n & > span {\n ", "\n margin-left: 0;\n }\n\n ", " {\n margin-left: ", "px;\n margin-right: 0;\n }\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 "])), labelStyle(props), focusVisibleA11yStyle(props), 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.base) === null || _a === void 0 ? void 0 : _a.textSecondary, labelFontBodyS(props), IconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xs, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondary, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, (_e = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _e === void 0 ? void 0 : _e.ornamentSecondaryHover, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _f === void 0 ? void 0 : _f.textPrimary, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.fillHover);
|
|
6524
6559
|
};
|
|
6525
6560
|
var square$1 = function (props) {
|
|
6526
6561
|
var corners = getCorners(props);
|
|
6527
|
-
return react.css(templateObject_3$
|
|
6562
|
+
return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
6528
6563
|
};
|
|
6529
6564
|
var rounded$1 = function (props) {
|
|
6530
6565
|
var corners = getCorners(props);
|
|
6531
|
-
return react.css(templateObject_4$
|
|
6566
|
+
return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "], ["\n border-radius: ", "px;\n min-width: auto;\n background-color: transparent;\n "])), corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
6532
6567
|
};
|
|
6533
6568
|
var userInput = function (props) {
|
|
6534
6569
|
var _a, _b, _c, _d;
|
|
6535
6570
|
var _e = props.sdsStyle, sdsStyle = _e === void 0 ? "square" : _e;
|
|
6536
6571
|
var semanticColors = getSemanticColors(props);
|
|
6537
|
-
return react.css(templateObject_5$
|
|
6572
|
+
return react.css(templateObject_5$h || (templateObject_5$h = __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"
|
|
6538
6573
|
? "\n border: none;\n color: ".concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n\n .styled-label {\n color: ").concat((_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.textPrimary, ";\n }\n ")
|
|
6539
6574
|
: "");
|
|
6540
6575
|
};
|
|
@@ -6543,7 +6578,7 @@ var isOpen = function (props) {
|
|
|
6543
6578
|
var _j = props.sdsStyle, sdsStyle = _j === void 0 ? "square" : _j, _k = props.intent, intent = _k === void 0 ? "default" : _k;
|
|
6544
6579
|
var semanticColors = getSemanticColors(props);
|
|
6545
6580
|
var inputColor = intentToColor$2[intent];
|
|
6546
|
-
return react.css(templateObject_6$
|
|
6581
|
+
return react.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n box-shadow: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n\n path {\n fill: ", ";\n }\n\n box-shadow: ", ";\n\n background-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, sdsStyle === "minimal"
|
|
6547
6582
|
? "\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 ")
|
|
6548
6583
|
: "", (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed, sdsStyle === "minimal"
|
|
6549
6584
|
? "none"
|
|
@@ -6554,12 +6589,12 @@ var isOpen = function (props) {
|
|
|
6554
6589
|
var applyIntentColor$1 = function (props, intent) {
|
|
6555
6590
|
var _a, _b, _c;
|
|
6556
6591
|
var semanticColors = getSemanticColors(props);
|
|
6557
|
-
return react.css(templateObject_7$
|
|
6592
|
+
return react.css(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n box-shadow: inset 0 0 0 1px ", ";\n\n &:hover {\n box-shadow: inset 0 0 0 1px ", ";\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px ", ";\n }\n "], ["\n box-shadow: inset 0 0 0 1px ", ";\n\n &:hover {\n box-shadow: inset 0 0 0 1px ", ";\n }\n\n &:active {\n box-shadow: inset 0 0 0 1px ", ";\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors[intent]) === null || _a === void 0 ? void 0 : _a.border, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderPrimaryHover, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryPressed);
|
|
6558
6593
|
};
|
|
6559
6594
|
var isDisabled = function (props) {
|
|
6560
6595
|
var _a, _b, _c, _d, _e, _f;
|
|
6561
6596
|
var semanticColors = getSemanticColors(props);
|
|
6562
|
-
return react.css(templateObject_8$
|
|
6597
|
+
return react.css(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n cursor: default;\n box-shadow: inset 0 0 0 1px ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label,\n ", ", ", " {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n box-shadow: inset 0 0 0 1px ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label,\n ", ", ", " {\n color: ", ";\n }\n\n ", " {\n background-color: ", ";\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.borderPrimaryDisabled, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textDisabled, MinimalDetails, StyledDetail, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textDisabled, StyledCounter, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.backgroundTertiary, (_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.ornamentDisabled);
|
|
6563
6598
|
};
|
|
6564
6599
|
/**
|
|
6565
6600
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6571,9 +6606,9 @@ var isDisabled = function (props) {
|
|
|
6571
6606
|
*/
|
|
6572
6607
|
var StyledInputDropdown = styled__default.default(Button, {
|
|
6573
6608
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6574
|
-
})(templateObject_10$
|
|
6609
|
+
})(templateObject_10$6 || (templateObject_10$6 = __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) {
|
|
6575
6610
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a;
|
|
6576
|
-
return react.css(templateObject_9$
|
|
6611
|
+
return react.css(templateObject_9$7 || (templateObject_9$7 = __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" &&
|
|
6577
6612
|
sdsStyle !== "minimal" &&
|
|
6578
6613
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6579
6614
|
sdsStyle !== "minimal" &&
|
|
@@ -6583,7 +6618,7 @@ var StyledInputDropdown = styled__default.default(Button, {
|
|
|
6583
6618
|
});
|
|
6584
6619
|
var StyledDetail = styled__default.default("span", {
|
|
6585
6620
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6586
|
-
})(templateObject_11$
|
|
6621
|
+
})(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6587
6622
|
var _a;
|
|
6588
6623
|
var spaces = getSpaces(props);
|
|
6589
6624
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6591,7 +6626,7 @@ var StyledDetail = styled__default.default("span", {
|
|
|
6591
6626
|
});
|
|
6592
6627
|
var StyledLabel$2 = styled__default.default("span", {
|
|
6593
6628
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6594
|
-
})(templateObject_12$
|
|
6629
|
+
})(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6595
6630
|
var _a, _b;
|
|
6596
6631
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6597
6632
|
var fontWeights = getFontWeights(props);
|
|
@@ -6603,7 +6638,7 @@ var StyledLabel$2 = styled__default.default("span", {
|
|
|
6603
6638
|
});
|
|
6604
6639
|
var StyledCounter = styled__default.default("span", {
|
|
6605
6640
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6606
|
-
})(templateObject_13$
|
|
6641
|
+
})(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6607
6642
|
var _a, _b;
|
|
6608
6643
|
var corners = getCorners(props);
|
|
6609
6644
|
var spaces = getSpaces(props);
|
|
@@ -6612,7 +6647,7 @@ var StyledCounter = styled__default.default("span", {
|
|
|
6612
6647
|
});
|
|
6613
6648
|
var MinimalDetails = styled__default.default("div", {
|
|
6614
6649
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6615
|
-
})(templateObject_14$
|
|
6650
|
+
})(templateObject_14$4 || (templateObject_14$4 = __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) {
|
|
6616
6651
|
var _a;
|
|
6617
6652
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6618
6653
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6621,19 +6656,19 @@ var MinimalDetails = styled__default.default("div", {
|
|
|
6621
6656
|
});
|
|
6622
6657
|
var LabelWrapper = styled__default.default("span", {
|
|
6623
6658
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6624
|
-
})(templateObject_15$
|
|
6659
|
+
})(templateObject_15$4 || (templateObject_15$4 = __makeTemplateObject(["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"], ["\n align-items: center;\n display: inline-flex;\n justify-content: space-between;\n width: 100%;\n\n & > div {\n align-items: center;\n display: inline-flex;\n justify-content: start;\n width: 100%;\n overflow: hidden;\n }\n"])));
|
|
6625
6660
|
var IconWrapper = styled__default.default("span", {
|
|
6626
6661
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6627
|
-
})(templateObject_16$
|
|
6662
|
+
})(templateObject_16$3 || (templateObject_16$3 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-self: end;\n"])));
|
|
6628
6663
|
function labelStyle(props) {
|
|
6629
6664
|
var _a, _b;
|
|
6630
6665
|
var semanticColors = getSemanticColors(props);
|
|
6631
6666
|
var labelColor = props.sdsType === "value"
|
|
6632
6667
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6633
6668
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6634
|
-
return react.css(templateObject_17$
|
|
6669
|
+
return react.css(templateObject_17$3 || (templateObject_17$3 = __makeTemplateObject(["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "], ["\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n "])), labelColor);
|
|
6635
6670
|
}
|
|
6636
|
-
var templateObject_1$
|
|
6671
|
+
var templateObject_1$N, templateObject_2$u, templateObject_3$n, templateObject_4$l, templateObject_5$h, templateObject_6$f, templateObject_7$b, templateObject_8$a, templateObject_9$7, templateObject_10$6, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$4, templateObject_15$4, templateObject_16$3, templateObject_17$3;
|
|
6637
6672
|
|
|
6638
6673
|
var VALID_SDS_STYLES = ["minimal", "square", "rounded"];
|
|
6639
6674
|
var validateSdsStyle = function (sdsStyle) {
|
|
@@ -6647,14 +6682,15 @@ var validateSdsStyle = function (sdsStyle) {
|
|
|
6647
6682
|
* @see https://mui.com/material-ui/react-button/
|
|
6648
6683
|
*/
|
|
6649
6684
|
var InputDropdown = function (props) {
|
|
6650
|
-
var label = props.label, _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.sdsStyle, rawSdsStyle = _b === void 0 ? "square" : _b, _c = props.sdsType, sdsType = _c === void 0 ? "label" : _c, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _d = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _d === void 0 ? true : _d, value = props.value;
|
|
6685
|
+
var label = props.label, _a = props.multiple, multiple = _a === void 0 ? false : _a, _b = props.sdsStyle, rawSdsStyle = _b === void 0 ? "square" : _b, _c = props.sdsType, sdsType = _c === void 0 ? "label" : _c, details = props.details, counter = props.counter, shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails, _d = props.shouldPutAColonAfterLabel, shouldPutAColonAfterLabel = _d === void 0 ? true : _d, value = props.value, _e = props.classes, classes = _e === void 0 ? EMPTY_OBJECT : _e, className = props.className;
|
|
6651
6686
|
var sdsStyle = validateSdsStyle(rawSdsStyle);
|
|
6652
6687
|
var isMinimal = sdsStyle === "minimal";
|
|
6653
6688
|
var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
|
|
6654
6689
|
var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple && details;
|
|
6655
6690
|
var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
|
|
6656
6691
|
var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
|
|
6657
|
-
|
|
6692
|
+
var rootClassName = classes.root, labelClassName = classes.label, contentWrapperClassName = classes.contentWrapper, labelDetailsWrapperClassName = classes.labelDetailsWrapper, detailsClassName = classes.details, counterClassName = classes.counter, iconWrapperClassName = classes.iconWrapper, chevronIconClassName = classes.chevronIcon, minimalDetailsClassName = classes.minimalDetails;
|
|
6693
|
+
return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { className: cn(rootClassName, className), sdsStyle: sdsStyle, "aria-label": "Dropdown input", children: [jsxRuntime.jsxs(LabelWrapper, { className: cn(contentWrapperClassName), children: [jsxRuntime.jsxs("div", { className: cn(labelDetailsWrapperClassName), children: [jsxRuntime.jsx(StyledLabel$2, { className: cn("styled-label", labelClassName), details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
|
|
6658
6694
|
counter: counter,
|
|
6659
6695
|
details: details,
|
|
6660
6696
|
isMinimal: isMinimal,
|
|
@@ -6663,7 +6699,7 @@ var InputDropdown = function (props) {
|
|
|
6663
6699
|
sdsType: sdsType,
|
|
6664
6700
|
shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
|
|
6665
6701
|
value: value,
|
|
6666
|
-
}) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsxRuntime.jsx(StyledCounter, { children: counter })] }), jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
|
|
6702
|
+
}) }), shouldRenderDetails && (jsxRuntime.jsx(StyledDetail, { className: cn(detailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsxRuntime.jsx(StyledDetail, { className: cn(detailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && (jsxRuntime.jsx(StyledCounter, { className: cn(counterClassName), children: counter }))] }), jsxRuntime.jsx(IconWrapper, { className: cn(iconWrapperClassName), children: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", className: cn(chevronIconClassName) }) })] }), shouldRenderMinimalDetails && (jsxRuntime.jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, className: cn(minimalDetailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
|
|
6667
6703
|
};
|
|
6668
6704
|
function renderLabelText(props) {
|
|
6669
6705
|
var sdsType = props.sdsType;
|
|
@@ -6705,12 +6741,12 @@ function renderDetailsText(_a) {
|
|
|
6705
6741
|
var doNotForwardProps$r = ["buttonPosition"];
|
|
6706
6742
|
var StyledButtonsWrapper = styled__default.default("div", {
|
|
6707
6743
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6708
|
-
})(templateObject_1$
|
|
6744
|
+
})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6709
6745
|
var buttonPosition = props.buttonPosition;
|
|
6710
6746
|
var spaces = getSpaces(props);
|
|
6711
6747
|
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n width: 100%;\n\n & > div {\n gap: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0;\n display: flex;\n align-items: center;\n flex-direction: row;\n width: 100%;\n\n & > button {\n width: 100%;\n }\n }\n ");
|
|
6712
6748
|
});
|
|
6713
|
-
var templateObject_1$
|
|
6749
|
+
var templateObject_1$M;
|
|
6714
6750
|
|
|
6715
6751
|
// Custom hook for managing dropdown state
|
|
6716
6752
|
function useDropdownState(propValue, multiple, options) {
|
|
@@ -6783,7 +6819,7 @@ var Dropdown = function (props) {
|
|
|
6783
6819
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
6784
6820
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
6785
6821
|
// unapplied changes.
|
|
6786
|
-
closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
|
|
6822
|
+
closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onOpen = props.onOpen, onChange = props.onChange, title = props.title, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, InputDropdownProps = props.InputDropdownProps, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onOpen", "onChange", "title", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
|
|
6787
6823
|
if (buttons && !multiple) {
|
|
6788
6824
|
// eslint-disable-next-line no-console
|
|
6789
6825
|
console.warn("Warning: buttons are only supported for multiple select dropdowns.");
|
|
@@ -6880,6 +6916,7 @@ var Dropdown = function (props) {
|
|
|
6880
6916
|
}
|
|
6881
6917
|
setAnchorEl(event.currentTarget);
|
|
6882
6918
|
setOpen(true);
|
|
6919
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
|
|
6883
6920
|
}
|
|
6884
6921
|
}, [
|
|
6885
6922
|
onClick,
|
|
@@ -6889,6 +6926,7 @@ var Dropdown = function (props) {
|
|
|
6889
6926
|
setPendingValue,
|
|
6890
6927
|
value,
|
|
6891
6928
|
handleDropdownClose,
|
|
6929
|
+
onOpen,
|
|
6892
6930
|
]);
|
|
6893
6931
|
var handleClose = React.useCallback(function (event, reason) {
|
|
6894
6932
|
if (reason === "toggleInput")
|
|
@@ -6941,7 +6979,10 @@ var Dropdown = function (props) {
|
|
|
6941
6979
|
}
|
|
6942
6980
|
anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.focus();
|
|
6943
6981
|
setOpen(false);
|
|
6944
|
-
|
|
6982
|
+
// Create a synthetic event for the onClose callback
|
|
6983
|
+
var syntheticEvent = new Event("cancel");
|
|
6984
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(syntheticEvent, "escape");
|
|
6985
|
+
}, [multiple, setPendingValue, value, anchorEl, onClose]);
|
|
6945
6986
|
// Helper function to count multi-column selections
|
|
6946
6987
|
var countMultiColumnSelections = React.useCallback(function (currentValue) {
|
|
6947
6988
|
if (!currentValue || typeof currentValue !== "object")
|
|
@@ -6989,7 +7030,7 @@ var Dropdown = function (props) {
|
|
|
6989
7030
|
countMultiColumnSelections,
|
|
6990
7031
|
getSingleSelectionProps,
|
|
6991
7032
|
]);
|
|
6992
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
|
|
7033
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, "aria-expanded": open, "aria-haspopup": "listbox", multiple: multiple || isMultiColumn }, getInputDropdownProps, InputDropdownProps, rest)), jsxRuntime.jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, onOpen: onOpen, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus, title: title }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsxRuntime.jsx(DropdownButtons, { buttonPosition: buttonPosition, onApply: handleButtonClose, onCancel: handleCancel })) : null }))] }));
|
|
6993
7034
|
};
|
|
6994
7035
|
|
|
6995
7036
|
var tagSizeS = function (props) {
|
|
@@ -6997,33 +7038,33 @@ var tagSizeS = function (props) {
|
|
|
6997
7038
|
var spaces = getSpaces(props);
|
|
6998
7039
|
var iconSizes = getIconSizes(props);
|
|
6999
7040
|
var semanticColors = getSemanticColors(props);
|
|
7000
|
-
return react.css(templateObject_1$
|
|
7041
|
+
return react.css(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXxxs$1(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
7001
7042
|
};
|
|
7002
7043
|
var tagSizeL = function (props) {
|
|
7003
7044
|
var _a;
|
|
7004
7045
|
var spaces = getSpaces(props);
|
|
7005
7046
|
var iconSizes = getIconSizes(props);
|
|
7006
7047
|
var semanticColors = getSemanticColors(props);
|
|
7007
|
-
return react.css(templateObject_2$
|
|
7048
|
+
return react.css(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "], ["\n height: unset;\n margin: 0 ", "px ", "px 0;\n\n .MuiChip-label {\n ", "\n padding: 0;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n margin: 0 ", "px 0 -", "px;\n }\n\n .MuiChip-deleteIcon {\n ", "\n color: ", ";\n margin: 0 0 0 ", "px;\n height: ", "px;\n width: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xs, fontBodyXs$2(props), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width);
|
|
7008
7049
|
};
|
|
7009
7050
|
var rounded = function (props) {
|
|
7010
7051
|
var corners = getCorners(props);
|
|
7011
7052
|
var spaces = getSpaces(props);
|
|
7012
7053
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
7013
7054
|
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;
|
|
7014
|
-
return react.css(templateObject_3$
|
|
7055
|
+
return react.css(templateObject_3$m || (templateObject_3$m = __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.rounded, topBottomPadding, spaces === null || spaces === void 0 ? void 0 : spaces.s, corners === null || corners === void 0 ? void 0 : corners.rounded);
|
|
7015
7056
|
};
|
|
7016
7057
|
var square = function (props) {
|
|
7017
7058
|
var corners = getCorners(props);
|
|
7018
7059
|
var spaces = getSpaces(props);
|
|
7019
7060
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
7020
7061
|
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;
|
|
7021
|
-
return react.css(templateObject_4$
|
|
7062
|
+
return react.css(templateObject_4$k || (templateObject_4$k = __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);
|
|
7022
7063
|
};
|
|
7023
7064
|
var withHover = function (props) {
|
|
7024
7065
|
var _a;
|
|
7025
7066
|
var semanticColors = getSemanticColors(props);
|
|
7026
|
-
return react.css(templateObject_5$
|
|
7067
|
+
return react.css(templateObject_5$g || (templateObject_5$g = __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);
|
|
7027
7068
|
};
|
|
7028
7069
|
var primary = function (props) {
|
|
7029
7070
|
return createTypeCss(props, "primary");
|
|
@@ -7092,7 +7133,7 @@ function createTypeCss(props, type) {
|
|
|
7092
7133
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
7093
7134
|
};
|
|
7094
7135
|
var typeColors = typeToColors[type];
|
|
7095
|
-
return react.css(templateObject_6$
|
|
7136
|
+
return react.css(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(props), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
7096
7137
|
}
|
|
7097
7138
|
var typeToCss = {
|
|
7098
7139
|
primary: primary,
|
|
@@ -7107,13 +7148,13 @@ var doNotForwardProps$q = [
|
|
|
7107
7148
|
];
|
|
7108
7149
|
var StyledTag$3 = styled__default.default(material.Chip, {
|
|
7109
7150
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7110
|
-
})(templateObject_8$
|
|
7151
|
+
})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
7111
7152
|
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;
|
|
7112
7153
|
var isRounded = sdsStyle === "rounded";
|
|
7113
7154
|
var type = sdsType || "primary";
|
|
7114
|
-
return react.css(templateObject_7$
|
|
7155
|
+
return react.css(templateObject_7$a || (templateObject_7$a = __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;");
|
|
7115
7156
|
});
|
|
7116
|
-
var templateObject_1$
|
|
7157
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$m, templateObject_4$k, templateObject_5$g, templateObject_6$e, templateObject_7$a, templateObject_8$9;
|
|
7117
7158
|
|
|
7118
7159
|
/**
|
|
7119
7160
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7127,14 +7168,14 @@ var Tag = function (props) {
|
|
|
7127
7168
|
return jsxRuntime.jsx(StyledTag$3, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
7128
7169
|
};
|
|
7129
7170
|
|
|
7130
|
-
var StyledTag$2 = styled__default.default(Tag)(templateObject_2$
|
|
7171
|
+
var StyledTag$2 = styled__default.default(Tag)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7131
7172
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7132
7173
|
var spaces = getSpaces(props);
|
|
7133
7174
|
var iconSizes = getIconSizes(props);
|
|
7134
7175
|
var semanticColors = getSemanticColors(props);
|
|
7135
|
-
return react.css(templateObject_1$
|
|
7176
|
+
return react.css(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "], ["\n padding: ", "px ", "px;\n background-color: ", ";\n\n .MuiChip-label {\n ", "\n z-index: auto;\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n svg {\n z-index: auto;\n }\n\n &:hover,\n &:focus,\n &:focus-within {\n background-color: ", ";\n\n .MuiChip-label {\n color: ", " !important;\n }\n\n .MuiChip-deleteIcon svg {\n fill: ", " !important;\n }\n }\n\n &:active {\n background-color: ", ";\n }\n\n &:after {\n display: none;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _a === void 0 ? void 0 : _a.fillPrimary, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.height, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.width, (_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _e === void 0 ? void 0 : _e.height, (_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _g === void 0 ? void 0 : _g.textPrimaryInverse, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.ornamentPrimaryInverse, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed);
|
|
7136
7177
|
});
|
|
7137
|
-
var templateObject_1$
|
|
7178
|
+
var templateObject_1$K, templateObject_2$s;
|
|
7138
7179
|
|
|
7139
7180
|
/**
|
|
7140
7181
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7201,12 +7242,12 @@ var Chips = function (_a) {
|
|
|
7201
7242
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: chipLabels.map(function (label) { return (jsxRuntime.jsx(TagFilter, { label: label, onDelete: function () { return onDelete(label); }, onClick: function () { return onDelete(label); } }, label)); }) }));
|
|
7202
7243
|
};
|
|
7203
7244
|
|
|
7204
|
-
var Wrapper = styled__default.default("div")(templateObject_1$
|
|
7205
|
-
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$
|
|
7245
|
+
var Wrapper = styled__default.default("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
7246
|
+
var StyledChipsWrapper = styled__default.default("div")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7206
7247
|
var spaces = getSpaces(props);
|
|
7207
7248
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7208
7249
|
});
|
|
7209
|
-
var templateObject_1$
|
|
7250
|
+
var templateObject_1$J, templateObject_2$r;
|
|
7210
7251
|
|
|
7211
7252
|
// Helper function to remove item from array
|
|
7212
7253
|
var removeItemFromArray = function (arr, tag) {
|
|
@@ -7361,7 +7402,7 @@ var doNotForwardProps$p = [
|
|
|
7361
7402
|
];
|
|
7362
7403
|
var StyledCard = styled__default.default(material.Card, {
|
|
7363
7404
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7364
|
-
})(templateObject_5$
|
|
7405
|
+
})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7365
7406
|
var _a, _b, _c, _d;
|
|
7366
7407
|
var _e = props.imagePosition, imagePosition = _e === void 0 ? "left" : _e, _f = props.sdsType, sdsType = _f === void 0 ? "wide" : _f, _g = props.boundingBox, boundingBox = _g === void 0 ? true : _g, _h = props.decorativeBorder, decorativeBorder = _h === void 0 ? false : _h, _j = props.imagePadding, imagePadding = _j === void 0 ? false : _j, visualElementType = props.visualElementType, _k = props.clickableCard, clickableCard = _k === void 0 ? false : _k;
|
|
7367
7408
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7377,13 +7418,13 @@ var StyledCard = styled__default.default(material.Card, {
|
|
|
7377
7418
|
var showDecorativeBorder = visualElementType === "image"
|
|
7378
7419
|
? boundingBox && decorativeBorder && imagePadding
|
|
7379
7420
|
: boundingBox && decorativeBorder;
|
|
7380
|
-
return react.css(templateObject_4$
|
|
7381
|
-
showDecorativeBorder && react.css(templateObject_2$
|
|
7382
|
-
showDecorativeBorder && react.css(templateObject_3$
|
|
7421
|
+
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "], ["\n display: flex;\n background-color: transparent;\n background-image: none;\n flex-direction: ", ";\n overflow: auto;\n box-shadow: none;\n border-radius: ", "px;\n\n .MuiCardActionArea-focusHighlight {\n background: transparent;\n }\n\n &:hover,\n &:active {\n box-shadow: ", " !important;\n }\n\n ", "\n\n ", "\n\n ", "\n "])), flexDirection, corners === null || corners === void 0 ? void 0 : corners.xl, clickableCard ? shadows === null || shadows === void 0 ? void 0 : shadows.l : shadows === null || shadows === void 0 ? void 0 : shadows.none, boundingBox && react.css(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n border: 1px solid ", ";\n background-color: ", ";\n "], ["\n border: 1px solid ", ";\n background-color: ", ";\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderSecondary, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.backgroundPrimary), sdsType === "wide" &&
|
|
7422
|
+
showDecorativeBorder && react.css(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n border-left: 4px solid ", ";\n "], ["\n border-left: 4px solid ", ";\n "])), (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.border), sdsType === "narrow" &&
|
|
7423
|
+
showDecorativeBorder && react.css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n border-top: 4px solid ", ";\n "], ["\n border-top: 4px solid ", ";\n "])), (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.border));
|
|
7383
7424
|
});
|
|
7384
7425
|
var StyledCardActionArea = styled__default.default(Button, {
|
|
7385
7426
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7386
|
-
})(templateObject_6$
|
|
7427
|
+
})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7387
7428
|
var _a, _b;
|
|
7388
7429
|
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
7389
7430
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7398,29 +7439,29 @@ var StyledCardActionArea = styled__default.default(Button, {
|
|
|
7398
7439
|
});
|
|
7399
7440
|
var StyledIconMediaWrapper = styled__default.default("div", {
|
|
7400
7441
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7401
|
-
})(templateObject_10$
|
|
7442
|
+
})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7402
7443
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7403
7444
|
var spaces = getSpaces(props);
|
|
7404
|
-
return react.css(templateObject_9$
|
|
7405
|
-
? react.css(templateObject_7$
|
|
7445
|
+
return react.css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
7446
|
+
? react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding: ", "px 0 ", "px ", "px;\n "], ["\n padding: ", "px 0 ", "px ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xl) : react.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n padding-right: ", "px;\n "], ["\n padding-right: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
7406
7447
|
});
|
|
7407
7448
|
var StyledCardContent = styled__default.default("div", {
|
|
7408
7449
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7409
|
-
})(templateObject_13$
|
|
7450
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7410
7451
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7411
7452
|
var spaces = getSpaces(props);
|
|
7412
|
-
return react.css(templateObject_12$
|
|
7453
|
+
return react.css(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "], ["\n display: flex;\n flex-direction: column;\n min-width: 100px;\n width: 100%;\n height: 100%;\n\n ", "\n "])), boundingBox && react.css(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl));
|
|
7413
7454
|
});
|
|
7414
7455
|
var StyledContentCardBody = styled__default.default(material.CardContent, {
|
|
7415
7456
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7416
|
-
})(templateObject_14$
|
|
7457
|
+
})(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7417
7458
|
var _a;
|
|
7418
7459
|
var semanticColors = getSemanticColors(props);
|
|
7419
7460
|
var spaces = getSpaces(props);
|
|
7420
7461
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px 0 0;\n padding: 0;\n ");
|
|
7421
7462
|
});
|
|
7422
|
-
var StyledCardContentAligner = styled__default.default("div")(templateObject_15$
|
|
7423
|
-
var templateObject_1$
|
|
7463
|
+
var StyledCardContentAligner = styled__default.default("div")(templateObject_15$3 || (templateObject_15$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: 100%;\n"])));
|
|
7464
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$l, templateObject_4$j, templateObject_5$f, templateObject_6$d, templateObject_7$9, templateObject_8$8, templateObject_9$6, templateObject_10$5, templateObject_11$5, templateObject_12$3, templateObject_13$3, templateObject_14$3, templateObject_15$3;
|
|
7424
7465
|
|
|
7425
7466
|
var doNotForwardProps$o = [
|
|
7426
7467
|
"visualElement",
|
|
@@ -7435,47 +7476,47 @@ var doNotForwardProps$o = [
|
|
|
7435
7476
|
];
|
|
7436
7477
|
var StyledTitleWrapper = material.styled("div", {
|
|
7437
7478
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7438
|
-
})(templateObject_1$
|
|
7479
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7439
7480
|
var spaces = getSpaces(props);
|
|
7440
7481
|
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7441
7482
|
});
|
|
7442
7483
|
var StyledOverlineText = material.styled("p", {
|
|
7443
7484
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7444
|
-
})(templateObject_2$
|
|
7485
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
7445
7486
|
var _a;
|
|
7446
7487
|
var semanticColors = getSemanticColors(props);
|
|
7447
7488
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: 0;\n ");
|
|
7448
7489
|
});
|
|
7449
7490
|
var StyledTitleText = material.styled("p", {
|
|
7450
7491
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7451
|
-
})(templateObject_3$
|
|
7492
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
7452
7493
|
var _a;
|
|
7453
7494
|
var semanticColors = getSemanticColors(props);
|
|
7454
7495
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: 0;\n ");
|
|
7455
7496
|
});
|
|
7456
7497
|
var StyledSubtitleText = material.styled("p", {
|
|
7457
7498
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7458
|
-
})(templateObject_4$
|
|
7499
|
+
})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
7459
7500
|
var _a;
|
|
7460
7501
|
var semanticColors = getSemanticColors(props);
|
|
7461
7502
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary, ";\n margin: 0;\n ");
|
|
7462
7503
|
});
|
|
7463
7504
|
var StyledMetadataText = material.styled("p", {
|
|
7464
7505
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7465
|
-
})(templateObject_5$
|
|
7506
|
+
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7466
7507
|
var _a;
|
|
7467
7508
|
var semanticColors = getSemanticColors(props);
|
|
7468
7509
|
var spaces = getSpaces(props);
|
|
7469
7510
|
return "\n color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary, ";\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0 0;\n ");
|
|
7470
7511
|
});
|
|
7471
|
-
var templateObject_1$
|
|
7512
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$k, templateObject_4$i, templateObject_5$e;
|
|
7472
7513
|
|
|
7473
7514
|
var createTextComponent = function (StyledComponent) {
|
|
7474
7515
|
return function (_a) {
|
|
7475
7516
|
var text = _a.text, className = _a.className;
|
|
7476
7517
|
if (!text)
|
|
7477
7518
|
return null;
|
|
7478
|
-
return typeof text === "string" ? (jsxRuntime.jsx(StyledComponent, { className: className, children: text })) : (text);
|
|
7519
|
+
return typeof text === "string" ? (jsxRuntime.jsx(StyledComponent, { className: cn(className), children: text })) : (text);
|
|
7479
7520
|
};
|
|
7480
7521
|
};
|
|
7481
7522
|
var OverlineText = createTextComponent(StyledOverlineText);
|
|
@@ -7485,18 +7526,18 @@ var MetadataText = createTextComponent(StyledMetadataText);
|
|
|
7485
7526
|
var ContentCardTitle = React.forwardRef(function ContentCardTitle(props, ref) {
|
|
7486
7527
|
var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
|
|
7487
7528
|
var cardHeader = classes.cardHeader, cardOverline = classes.cardOverline, cardTitle = classes.cardTitle, cardSubtitle = classes.cardSubtitle, cardMetadata = classes.cardMetadata;
|
|
7488
|
-
return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7529
|
+
return (jsxRuntime.jsxs("div", { ref: ref, children: [jsxRuntime.jsxs(StyledTitleWrapper, { className: cn(cardHeader), children: [jsxRuntime.jsx(OverlineText, { text: overlineText, className: cardOverline }), jsxRuntime.jsx(TitleText, { text: titleText, className: cardTitle }), jsxRuntime.jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsxRuntime.jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7489
7530
|
});
|
|
7490
7531
|
|
|
7491
7532
|
var doNotForwardProps$n = ["buttonsPosition"];
|
|
7492
7533
|
var StyledCardActions = styled__default.default(material.CardActions, {
|
|
7493
7534
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
7494
|
-
})(templateObject_1$
|
|
7535
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7495
7536
|
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7496
7537
|
var spaces = getSpaces(props);
|
|
7497
7538
|
return "\n margin: 0;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px 0 0;\n display: flex;\n gap: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n justify-content: ").concat(buttonsPosition === "right" ? "flex-end" : "flex-start", ";\n\n & > * {\n margin: 0 !important;\n }\n ");
|
|
7498
7539
|
});
|
|
7499
|
-
var templateObject_1$
|
|
7540
|
+
var templateObject_1$G;
|
|
7500
7541
|
|
|
7501
7542
|
var isButtonElement = function (child) {
|
|
7502
7543
|
if (React__namespace.default.isValidElement(child) && child.type === Button) {
|
|
@@ -7540,11 +7581,11 @@ var ContentCardActions = React.forwardRef(function ContentCardActions(props, ref
|
|
|
7540
7581
|
if (!clickableCardButton) {
|
|
7541
7582
|
return null;
|
|
7542
7583
|
}
|
|
7543
|
-
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: [
|
|
7584
|
+
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cn(cardActions), children: [
|
|
7544
7585
|
React__namespace.default.cloneElement(clickableCardButton, __assign({ component: "div" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
|
|
7545
7586
|
] }));
|
|
7546
7587
|
}
|
|
7547
|
-
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: validChildren }));
|
|
7588
|
+
return (jsxRuntime.jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cn(cardActions), children: validChildren }));
|
|
7548
7589
|
});
|
|
7549
7590
|
|
|
7550
7591
|
var doNotForwardProps$m = [
|
|
@@ -7557,22 +7598,22 @@ var doNotForwardProps$m = [
|
|
|
7557
7598
|
];
|
|
7558
7599
|
var StyledImageMediaWrapper = material.styled("div", {
|
|
7559
7600
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7560
|
-
})(templateObject_9$
|
|
7601
|
+
})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7561
7602
|
var _a = props.imagePadding, imagePadding = _a === void 0 ? false : _a, _b = props.boundingBox, boundingBox = _b === void 0 ? true : _b, _c = props.sdsType, sdsType = _c === void 0 ? "wide" : _c, _d = props.imagePosition, imagePosition = _d === void 0 ? "left" : _d;
|
|
7562
7603
|
var spaces = getSpaces(props);
|
|
7563
|
-
return material.css(templateObject_8$
|
|
7604
|
+
return material.css(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "], ["\n display: flex;\n align-items: start;\n\n ", "\n\n ", "\n "])), boundingBox
|
|
7564
7605
|
? imagePadding
|
|
7565
|
-
? material.css(templateObject_1$
|
|
7606
|
+
? material.css(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n padding: ", "px;\n ", "\n "], ["\n padding: ", "px;\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl, imagePosition === "left"
|
|
7566
7607
|
? "padding-right: 0;"
|
|
7567
|
-
: "padding-left: 0;") : material.css(templateObject_2$
|
|
7568
|
-
: material.css(templateObject_3$
|
|
7608
|
+
: "padding-left: 0;") : material.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7609
|
+
: material.css(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7569
7610
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7570
|
-
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$
|
|
7611
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && material.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7571
7612
|
? imagePadding
|
|
7572
|
-
? material.css(templateObject_4$
|
|
7573
|
-
: material.css(templateObject_6$
|
|
7613
|
+
? material.css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0;\n "], ["\n padding: ", "px;\n padding-bottom: 0;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl) : material.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7614
|
+
: material.css(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n padding-bottom: ", "px;\n "], ["\n padding-bottom: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl)));
|
|
7574
7615
|
});
|
|
7575
|
-
var templateObject_1$
|
|
7616
|
+
var templateObject_1$F, templateObject_2$o, templateObject_3$j, templateObject_4$h, templateObject_5$d, templateObject_6$c, templateObject_7$8, templateObject_8$7, templateObject_9$5;
|
|
7576
7617
|
|
|
7577
7618
|
/**
|
|
7578
7619
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7665,8 +7706,8 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
7665
7706
|
resizeObserver.disconnect();
|
|
7666
7707
|
};
|
|
7667
7708
|
}, [handleResize]);
|
|
7668
|
-
var visualElement = visualElementType === "image" && image ? (jsxRuntime.jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cardMedia })) : visualElementType === "icon" && icon ? (jsxRuntime.jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cardMedia, children: icon })) : null;
|
|
7669
|
-
var cardInnerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visualElement, jsxRuntime.jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cardContent, children: [jsxRuntime.jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
|
|
7709
|
+
var visualElement = visualElementType === "image" && image ? (jsxRuntime.jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cn(cardMedia) })) : visualElementType === "icon" && icon ? (jsxRuntime.jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cn(cardMedia), children: icon })) : null;
|
|
7710
|
+
var cardInnerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [visualElement, jsxRuntime.jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cn(cardContent), children: [jsxRuntime.jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
|
|
7670
7711
|
cardHeader: cardHeader,
|
|
7671
7712
|
cardMetadata: cardMetadata,
|
|
7672
7713
|
cardOverline: cardOverline,
|
|
@@ -7675,20 +7716,18 @@ var ContentCard = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
7675
7716
|
} }), jsxRuntime.jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
|
|
7676
7717
|
cardActions: cardActions,
|
|
7677
7718
|
}) })] })] }));
|
|
7678
|
-
return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({}, clickableCardProps, {
|
|
7719
|
+
return (jsxRuntime.jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cn(cardPaper), children: clickableCard ? (jsxRuntime.jsx(StyledCardActionArea, __assign({}, clickableCardProps, {
|
|
7679
7720
|
// (masoudmanson): The following props are for internal use only and should not be user editable.
|
|
7680
7721
|
// To prevent users from overriding them, we use the spread operator to pass user provided props
|
|
7681
7722
|
// to the StyledCardActionArea component on top while hardcoding the rest after it.
|
|
7682
|
-
sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
|
|
7723
|
+
sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: cn(clickableCardButton), children: cardInnerContent }))) : (cardInnerContent) })));
|
|
7683
7724
|
});
|
|
7684
7725
|
|
|
7685
|
-
var DialogContext = React.createContext({ sdsSize: "m" });
|
|
7686
|
-
|
|
7687
7726
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
7688
7727
|
var doNotForwardProps$l = ["sdsSize"];
|
|
7689
7728
|
var StyledPaper = styled__default.default(material.Paper, {
|
|
7690
7729
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7691
|
-
})(templateObject_1$
|
|
7730
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
7692
7731
|
var _a, _b;
|
|
7693
7732
|
var sdsSize = props.sdsSize;
|
|
7694
7733
|
var spaces = getSpaces(props);
|
|
@@ -7699,7 +7738,7 @@ var StyledPaper = styled__default.default(material.Paper, {
|
|
|
7699
7738
|
return "\n background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.l, ";\n max-height: calc(100vh - ").concat(2 * ((spaces === null || spaces === void 0 ? void 0 : spaces.xxl) || 0), "px);\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.xl, "px;\n padding: ").concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n outline: 1px solid ").concat(addOpacityToHex(((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.borderSecondary) || "#000000", 15), ";\n ");
|
|
7700
7739
|
});
|
|
7701
7740
|
function paperDimensions(props) {
|
|
7702
|
-
var
|
|
7741
|
+
var _a = props.sdsSize, sdsSize = _a === void 0 ? "m" : _a;
|
|
7703
7742
|
var sizeToDimensions = {
|
|
7704
7743
|
l: {
|
|
7705
7744
|
minHeight: "600px",
|
|
@@ -7718,82 +7757,27 @@ function paperDimensions(props) {
|
|
|
7718
7757
|
width: "400px",
|
|
7719
7758
|
},
|
|
7720
7759
|
};
|
|
7721
|
-
var
|
|
7760
|
+
var _b = sizeToDimensions[sdsSize], width = _b.width, minHeight = _b.minHeight;
|
|
7722
7761
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7723
7762
|
}
|
|
7724
|
-
var templateObject_1$
|
|
7763
|
+
var templateObject_1$E;
|
|
7725
7764
|
|
|
7726
7765
|
/**
|
|
7727
7766
|
* @see https://mui.com/material-ui/react-paper/
|
|
7728
7767
|
*/
|
|
7729
7768
|
var DialogPaper = React.forwardRef(function DialogPaper(props, ref) {
|
|
7730
|
-
|
|
7731
|
-
|
|
7732
|
-
return (jsxRuntime.jsx(StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, props)));
|
|
7733
|
-
} }));
|
|
7769
|
+
var _a = props.sdsSize, sdsSize = _a === void 0 ? "m" : _a, rest = __rest(props, ["sdsSize"]);
|
|
7770
|
+
return jsxRuntime.jsx(StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, rest));
|
|
7734
7771
|
});
|
|
7735
7772
|
|
|
7736
|
-
|
|
7737
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7738
|
-
*/
|
|
7739
|
-
var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
7740
|
-
var _a = props.canClickOutsideClose, canClickOutsideClose = _a === void 0 ? true : _a, onClose = props.onClose, _b = props.sdsSize, sdsSize = _b === void 0 ? "m" : _b, _c = props.PaperComponent, PaperComponent = _c === void 0 ? DialogPaper : _c, rest = __rest(props, ["canClickOutsideClose", "onClose", "sdsSize", "PaperComponent"]);
|
|
7741
|
-
var contextValue = React.useMemo(function () { return ({ sdsSize: sdsSize }); }, [sdsSize]);
|
|
7742
|
-
return (jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children: jsxRuntime.jsx(material.Dialog, __assign({ ref: ref, PaperComponent: PaperComponent }, rest, { onClose: function (event, reason) {
|
|
7743
|
-
if (!canClickOutsideClose &&
|
|
7744
|
-
reason &&
|
|
7745
|
-
(reason === "backdropClick" || reason === "escapeKeyDown"))
|
|
7746
|
-
return;
|
|
7747
|
-
if (onClose)
|
|
7748
|
-
onClose(event, reason);
|
|
7749
|
-
} })) }));
|
|
7750
|
-
});
|
|
7751
|
-
|
|
7752
|
-
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
7753
|
-
var doNotForwardProps$k = ["buttonPosition", "sdsSize"];
|
|
7754
|
-
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
7755
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7756
|
-
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7757
|
-
var spaces = getSpaces(props);
|
|
7758
|
-
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a, sdsSize = props.sdsSize;
|
|
7759
|
-
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7760
|
-
return "\n justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n margin-top: ").concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : 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 ");
|
|
7761
|
-
});
|
|
7762
|
-
var templateObject_1$C;
|
|
7763
|
-
|
|
7764
|
-
/**
|
|
7765
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7766
|
-
*/
|
|
7767
|
-
var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
7768
|
-
var sdsSize = React.useContext(DialogContext).sdsSize;
|
|
7769
|
-
return jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref }, props, { sdsSize: sdsSize }));
|
|
7770
|
-
});
|
|
7771
|
-
|
|
7772
|
-
var doNotForwardProps$j = ["sdsSize"];
|
|
7773
|
-
var StyledDialogContent = styled__default.default(material.DialogContent, {
|
|
7774
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7775
|
-
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7776
|
-
var templateObject_1$B;
|
|
7777
|
-
|
|
7778
|
-
var index = React.forwardRef(
|
|
7779
|
-
/**
|
|
7780
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7781
|
-
*/
|
|
7782
|
-
function DialogContent(props, ref) {
|
|
7783
|
-
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
7784
|
-
});
|
|
7785
|
-
|
|
7786
|
-
var doNotForwardProps$i = ["sdsSize"];
|
|
7787
|
-
var StyledButton = styled__default.default(Button, {
|
|
7788
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7789
|
-
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7773
|
+
var StyledButton = styled__default.default(Button)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7790
7774
|
var sdsSize = props.sdsSize;
|
|
7791
7775
|
var isSmall = sdsSize === "small" || sdsSize === "medium";
|
|
7792
7776
|
var spaces = getSpaces(props);
|
|
7793
7777
|
var right = isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xxl;
|
|
7794
7778
|
return "\n right: ".concat(right, "px;\n ");
|
|
7795
7779
|
});
|
|
7796
|
-
var templateObject_1$
|
|
7780
|
+
var templateObject_1$D;
|
|
7797
7781
|
|
|
7798
7782
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
7799
7783
|
l: "large",
|
|
@@ -7802,25 +7786,24 @@ var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
|
7802
7786
|
xs: "small",
|
|
7803
7787
|
};
|
|
7804
7788
|
var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
7805
|
-
|
|
7806
|
-
|
|
7807
|
-
|
|
7808
|
-
|
|
7809
|
-
} }));
|
|
7789
|
+
var _a;
|
|
7790
|
+
var _b = props.dialogSize, dialogSize = _b === void 0 ? "m" : _b, onClick = props.onClick, className = props.className, rest = __rest(props, ["dialogSize", "onClick", "className"]);
|
|
7791
|
+
var size = (_a = SDS_SIZE_TO_COMPONENT_SIZE[dialogSize]) !== null && _a !== void 0 ? _a : "large";
|
|
7792
|
+
return (jsxRuntime.jsx(StyledButton, __assign({ "aria-label": "Close", ref: ref, onClick: onClick, sdsSize: size, icon: "XMark", sdsStyle: "icon", sdsType: "tertiary", className: className }, rest)));
|
|
7810
7793
|
});
|
|
7811
7794
|
|
|
7812
|
-
var doNotForwardProps$
|
|
7795
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
7813
7796
|
var StyledDialogTitle = styled__default.default(material.DialogTitle, {
|
|
7814
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7815
|
-
})(templateObject_1$
|
|
7797
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7798
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
7816
7799
|
var sdsSize = props.sdsSize;
|
|
7817
7800
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7818
7801
|
var spaces = getSpaces(props);
|
|
7819
7802
|
return "\n margin-bottom: ".concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.l : spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n ");
|
|
7820
7803
|
});
|
|
7821
7804
|
var Title = styled__default.default(material.Typography, {
|
|
7822
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7823
|
-
})(templateObject_2$
|
|
7805
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7806
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7824
7807
|
var _a;
|
|
7825
7808
|
var sdsSize = props.sdsSize;
|
|
7826
7809
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7831,8 +7814,8 @@ var Title = styled__default.default(material.Typography, {
|
|
|
7831
7814
|
];
|
|
7832
7815
|
});
|
|
7833
7816
|
var Subtitle = styled__default.default(material.Typography, {
|
|
7834
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7835
|
-
})(templateObject_3$
|
|
7817
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7818
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7836
7819
|
var _a;
|
|
7837
7820
|
var sdsSize = props.sdsSize;
|
|
7838
7821
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7843,8 +7826,8 @@ var Subtitle = styled__default.default(material.Typography, {
|
|
|
7843
7826
|
];
|
|
7844
7827
|
});
|
|
7845
7828
|
var Overline = styled__default.default(material.Typography, {
|
|
7846
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7847
|
-
})(templateObject_4$
|
|
7829
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7830
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7848
7831
|
var _a;
|
|
7849
7832
|
var sdsSize = props.sdsSize;
|
|
7850
7833
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7855,16 +7838,218 @@ var Overline = styled__default.default(material.Typography, {
|
|
|
7855
7838
|
"\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 "),
|
|
7856
7839
|
];
|
|
7857
7840
|
});
|
|
7858
|
-
var templateObject_1$
|
|
7841
|
+
var templateObject_1$C, templateObject_2$n, templateObject_3$i, templateObject_4$g;
|
|
7842
|
+
|
|
7843
|
+
var DialogTitle = React.forwardRef(function DialogTitle(props, ref) {
|
|
7844
|
+
var children = props.children, title = props.title, subtitle = props.subtitle, overline = props.overline, onClose = props.onClose, sdsSize = props.sdsSize, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a, rest = __rest(props, ["children", "title", "subtitle", "overline", "onClose", "sdsSize", "classes"]);
|
|
7845
|
+
var rootClassName = classes.root, titleClassName = classes.title, subtitleClassName = classes.subtitle, overlineClassName = classes.overline, closeButtonClassName = classes.closeButton;
|
|
7846
|
+
return (jsxRuntime.jsx(StyledDialogTitle, __assign({ ref: ref, sdsSize: sdsSize, className: cn(rootClassName) }, rest, { children: children || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onClose && (jsxRuntime.jsx(CloseButton, { onClick: onClose, dialogSize: sdsSize, className: cn(closeButtonClassName) })), jsxRuntime.jsx(Overline, { sdsSize: sdsSize, className: cn(overlineClassName), children: overline }), jsxRuntime.jsx(Title, { sdsSize: sdsSize, className: cn(titleClassName), children: title }), jsxRuntime.jsx(Subtitle, { sdsSize: sdsSize, className: cn(subtitleClassName), children: subtitle })] })) })));
|
|
7847
|
+
});
|
|
7848
|
+
|
|
7849
|
+
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
7850
|
+
var doNotForwardProps$j = ["buttonPosition", "sdsSize"];
|
|
7851
|
+
var StyledDialogActions = styled__default.default(material.DialogActions, {
|
|
7852
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7853
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7854
|
+
var spaces = getSpaces(props);
|
|
7855
|
+
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a, sdsSize = props.sdsSize;
|
|
7856
|
+
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7857
|
+
return "\n justify-content: ".concat(buttonPosition === "right" ? "flex-end" : "flex-start", ";;\n\n margin-top: ").concat(isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : 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 ");
|
|
7858
|
+
});
|
|
7859
|
+
var templateObject_1$B;
|
|
7860
|
+
|
|
7861
|
+
/**
|
|
7862
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
7863
|
+
*/
|
|
7864
|
+
var DialogActions = React.forwardRef(function DialogActions(props, ref) {
|
|
7865
|
+
var _a = props.sdsSize, sdsSize = _a === void 0 ? "m" : _a, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b, rest = __rest(props, ["sdsSize", "classes"]);
|
|
7866
|
+
var rootClassName = classes.root;
|
|
7867
|
+
return (jsxRuntime.jsx(StyledDialogActions, __assign({ ref: ref, sdsSize: sdsSize, className: cn(rootClassName) }, rest)));
|
|
7868
|
+
});
|
|
7859
7869
|
|
|
7860
7870
|
/**
|
|
7861
7871
|
* @see https://mui.com/material-ui/react-dialog/
|
|
7862
7872
|
*/
|
|
7863
|
-
var
|
|
7864
|
-
var
|
|
7865
|
-
var
|
|
7866
|
-
|
|
7873
|
+
var Dialog = React.forwardRef(function Dialog(props, ref) {
|
|
7874
|
+
var _a = props.canClickOutsideClose, canClickOutsideClose = _a === void 0 ? true : _a, onClose = props.onClose, _b = props.sdsSize, sdsSize = _b === void 0 ? "m" : _b, _c = props.PaperComponent, PaperComponent = _c === void 0 ? DialogPaper : _c, children = props.children, _d = props.classes, classes = _d === void 0 ? EMPTY_OBJECT : _d, rest = __rest(props, ["canClickOutsideClose", "onClose", "sdsSize", "PaperComponent", "children", "classes"]);
|
|
7875
|
+
var rootClassName = classes.root, paperClassName = classes.paper;
|
|
7876
|
+
// Create a wrapper for PaperComponent that injects sdsSize
|
|
7877
|
+
var PaperWithSize = React__namespace.default.useCallback(function (paperProps) { return (jsxRuntime.jsx(PaperComponent, __assign({}, paperProps, { sdsSize: sdsSize, className: cn(paperClassName, paperProps.className) }))); }, [PaperComponent, paperClassName, sdsSize]);
|
|
7878
|
+
return (jsxRuntime.jsx(material.Dialog, __assign({ ref: ref, className: cn(rootClassName), PaperComponent: PaperWithSize, onClose: function (event, reason) {
|
|
7879
|
+
if (!canClickOutsideClose &&
|
|
7880
|
+
reason &&
|
|
7881
|
+
(reason === "backdropClick" || reason === "escapeKeyDown"))
|
|
7882
|
+
return;
|
|
7883
|
+
if (onClose)
|
|
7884
|
+
onClose(event, reason);
|
|
7885
|
+
} }, rest, { children: React__namespace.default.Children.map(children, function (child) {
|
|
7886
|
+
if (!React__namespace.default.isValidElement(child))
|
|
7887
|
+
return child;
|
|
7888
|
+
// Only pass sdsSize to DialogTitle and DialogActions components
|
|
7889
|
+
if (child.type === DialogTitle || child.type === DialogActions) {
|
|
7890
|
+
return React__namespace.default.cloneElement(child, { sdsSize: sdsSize });
|
|
7891
|
+
}
|
|
7892
|
+
return child;
|
|
7893
|
+
}) })));
|
|
7894
|
+
});
|
|
7895
|
+
|
|
7896
|
+
var doNotForwardProps$i = ["sdsSize"];
|
|
7897
|
+
var StyledDialogContent = styled__default.default(material.DialogContent, {
|
|
7898
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7899
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7900
|
+
var templateObject_1$A;
|
|
7901
|
+
|
|
7902
|
+
var index = React.forwardRef(
|
|
7903
|
+
/**
|
|
7904
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
7905
|
+
*/
|
|
7906
|
+
function DialogContent(props, ref) {
|
|
7907
|
+
var _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a, rest = __rest(props, ["classes"]);
|
|
7908
|
+
var rootClassName = classes.root;
|
|
7909
|
+
return (jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref, className: cn(rootClassName) }, rest)));
|
|
7910
|
+
});
|
|
7911
|
+
|
|
7912
|
+
var HeroMargins = {
|
|
7913
|
+
SMALL: "24px",
|
|
7914
|
+
MEDIUM: "40px",
|
|
7915
|
+
LARGE: "120px",
|
|
7916
|
+
};
|
|
7917
|
+
var textAlignmentMapping = {
|
|
7918
|
+
left: "flex-start",
|
|
7919
|
+
center: "center",
|
|
7920
|
+
right: "flex-end",
|
|
7921
|
+
};
|
|
7922
|
+
var overlayContentPositionAlignMapping = {
|
|
7923
|
+
"top-left": "flex-start",
|
|
7924
|
+
top: "center",
|
|
7925
|
+
"top-right": "flex-end",
|
|
7926
|
+
left: "flex-start",
|
|
7927
|
+
center: "center",
|
|
7928
|
+
right: "flex-end",
|
|
7929
|
+
"bottom-left": "flex-start",
|
|
7930
|
+
bottom: "center",
|
|
7931
|
+
"bottom-right": "flex-end",
|
|
7932
|
+
};
|
|
7933
|
+
var overlayContentPositionJustifyMapping = {
|
|
7934
|
+
"top-left": "flex-start",
|
|
7935
|
+
top: "flex-start",
|
|
7936
|
+
"top-right": "flex-start",
|
|
7937
|
+
left: "center",
|
|
7938
|
+
center: "center",
|
|
7939
|
+
right: "center",
|
|
7940
|
+
"bottom-left": "flex-end",
|
|
7941
|
+
bottom: "flex-end",
|
|
7942
|
+
"bottom-right": "flex-end",
|
|
7943
|
+
};
|
|
7944
|
+
|
|
7945
|
+
var doNotForwardProps$h = [
|
|
7946
|
+
"heroHeight",
|
|
7947
|
+
"overlayContainerMinMargin",
|
|
7948
|
+
"backgroundFillColor",
|
|
7949
|
+
"overlayContentPosition",
|
|
7950
|
+
];
|
|
7951
|
+
var getResponsivePadding = function (props) {
|
|
7952
|
+
var overlayContainerMinMargin = props.overlayContainerMinMargin;
|
|
7953
|
+
var spaces = getSpaces(props);
|
|
7954
|
+
var breakpoints = getBreakpoints(props);
|
|
7955
|
+
return react.css(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n padding: ", "px\n ", ";\n\n ", " {\n padding: ", "px\n ", ";\n }\n\n ", " {\n padding: ", "px\n ", ";\n }\n "], ["\n padding: ", "px\n ", ";\n\n ", " {\n padding: ", "px\n ", ";\n }\n\n ", " {\n padding: ", "px\n ", ";\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.small) || HeroMargins.SMALL, breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("md"), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.medium) || HeroMargins.MEDIUM, breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.up("lg"), spaces === null || spaces === void 0 ? void 0 : spaces.xxl, (overlayContainerMinMargin === null || overlayContainerMinMargin === void 0 ? void 0 : overlayContainerMinMargin.large) || HeroMargins.LARGE);
|
|
7956
|
+
};
|
|
7957
|
+
// Main Hero Container
|
|
7958
|
+
var StyledHeroContainer = styled__default.default("section", {
|
|
7959
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
7960
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7961
|
+
var _a = props.heroHeight, heroHeight = _a === void 0 ? "fit-content" : _a, overlayContentPosition = props.overlayContentPosition, backgroundFillColor = props.backgroundFillColor;
|
|
7962
|
+
var breakpoints = getBreakpoints(props);
|
|
7963
|
+
return react.css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", ";\n display: flex;\n position: relative;\n overflow: hidden;\n height: ", ";\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n ", "\n\n ", " {\n height: fit-content;\n }\n "], ["\n ", ";\n display: flex;\n position: relative;\n overflow: hidden;\n height: ", ";\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n ", "\n\n ", " {\n height: fit-content;\n }\n "])), getResponsivePadding(props), heroHeight, overlayContentPosition
|
|
7964
|
+
? overlayContentPositionAlignMapping[overlayContentPosition]
|
|
7965
|
+
: "center", overlayContentPosition
|
|
7966
|
+
? overlayContentPositionJustifyMapping[overlayContentPosition]
|
|
7967
|
+
: "center", backgroundFillColor ? "background-color: ".concat(backgroundFillColor, ";") : "", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("md"));
|
|
7968
|
+
});
|
|
7969
|
+
var BackgroundFillContainer = styled__default.default("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n overflow: hidden;\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n overflow: hidden;\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n"])));
|
|
7970
|
+
var OverlayContent = styled__default.default("div")(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7971
|
+
var textAlignment = props.textAlignment, _a = props.overlayContentWidth, overlayContentWidth = _a === void 0 ? "100%" : _a;
|
|
7972
|
+
return react.css(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: ", ";\n text-align: ", ";\n width: ", ";\n "], ["\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n align-items: ", ";\n text-align: ", ";\n width: ", ";\n "])), textAlignment
|
|
7973
|
+
? textAlignmentMapping[textAlignment]
|
|
7974
|
+
: "start", textAlignment, overlayContentWidth);
|
|
7975
|
+
});
|
|
7976
|
+
var HeroTitle = styled__default.default("h1")(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n\n ", "\n\n margin: 0;\n padding: 0;\n"], ["\n ", "\n\n ", "\n\n margin: 0;\n padding: 0;\n"])), function (props) {
|
|
7977
|
+
var _a = props.headerFontSize, headerFontSize = _a === void 0 ? "m" : _a;
|
|
7978
|
+
if (headerFontSize === "s") {
|
|
7979
|
+
return fontHeaderS(props);
|
|
7980
|
+
}
|
|
7981
|
+
else if (headerFontSize === "m") {
|
|
7982
|
+
return fontHeaderM$1(props);
|
|
7983
|
+
}
|
|
7984
|
+
else if (headerFontSize === "l") {
|
|
7985
|
+
return fontHeaderL(props);
|
|
7986
|
+
}
|
|
7987
|
+
}, function (props) {
|
|
7988
|
+
var _a, _b;
|
|
7989
|
+
var hasInvertTextColor = props.hasInvertTextColor;
|
|
7990
|
+
var semanticColors = getSemanticColors(props);
|
|
7991
|
+
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), hasInvertTextColor
|
|
7992
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
7993
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary);
|
|
7994
|
+
});
|
|
7995
|
+
var HeroCaption = styled__default.default("p")(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n ", "\n\n ", "\n\n padding: 0;\n"], ["\n ", "\n\n ", "\n\n padding: 0;\n"])), fontBodyXxxs$1, function (props) {
|
|
7996
|
+
var _a, _b;
|
|
7997
|
+
var hasInvertTextColor = props.hasInvertTextColor;
|
|
7998
|
+
var semanticColors = getSemanticColors(props);
|
|
7999
|
+
var spaces = getSpaces(props);
|
|
8000
|
+
return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n color: ", ";\n\n margin: ", "px 0 0;\n "], ["\n color: ", ";\n\n margin: ", "px 0 0;\n "])), hasInvertTextColor
|
|
8001
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
8002
|
+
: (_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.m);
|
|
8003
|
+
});
|
|
8004
|
+
var ContentSlot = styled__default.default("div")(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8005
|
+
var spaces = getSpaces(props);
|
|
8006
|
+
return react.css(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n margin: ", "px 0 0;\n width: 100%;\n height: 100%;\n "], ["\n margin: ", "px 0 0;\n width: 100%;\n height: 100%;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
7867
8007
|
});
|
|
8008
|
+
var DarkeningMask = styled__default.default("div")(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8009
|
+
var _a = props.darkeningMaskColor, darkeningMaskColor = _a === void 0 ? "#000000" : _a, _b = props.darkeningMaskOpacity, darkeningMaskOpacity = _b === void 0 ? 0 : _b;
|
|
8010
|
+
return react.css(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: ", ";\n "], ["\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: ", ";\n "])), darkeningMaskColor, darkeningMaskOpacity);
|
|
8011
|
+
});
|
|
8012
|
+
styled__default.default("div")(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8013
|
+
var _a, _b;
|
|
8014
|
+
var semanticColors = getSemanticColors(props);
|
|
8015
|
+
return react.css(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n color: ", ";\n border: 1px dashed ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px;\n width: 100%;\n "], ["\n color: ", ";\n border: 1px dashed ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px;\n width: 100%;\n "])), (_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.borderSecondary);
|
|
8016
|
+
});
|
|
8017
|
+
var DarkeningVignette = styled__default.default("div")(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 40px;\n z-index: 1;\n background-image: linear-gradient(\n to bottom,\n black 0%,\n rgba(0, 0, 0, 0.738) 19%,\n rgba(0, 0, 0, 0.541) 34%,\n rgba(0, 0, 0, 0.382) 47%,\n rgba(0, 0, 0, 0.278) 56.5%,\n rgba(0, 0, 0, 0.194) 65%,\n rgba(0, 0, 0, 0.126) 73%,\n rgba(0, 0, 0, 0.075) 80.2%,\n rgba(0, 0, 0, 0.042) 86.1%,\n rgba(0, 0, 0, 0.021) 91%,\n rgba(0, 0, 0, 0.008) 95.2%,\n rgba(0, 0, 0, 0.002) 98.2%,\n transparent 100%\n );\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 40px;\n z-index: 1;\n background-image: linear-gradient(\n to bottom,\n black 0%,\n rgba(0, 0, 0, 0.738) 19%,\n rgba(0, 0, 0, 0.541) 34%,\n rgba(0, 0, 0, 0.382) 47%,\n rgba(0, 0, 0, 0.278) 56.5%,\n rgba(0, 0, 0, 0.194) 65%,\n rgba(0, 0, 0, 0.126) 73%,\n rgba(0, 0, 0, 0.075) 80.2%,\n rgba(0, 0, 0, 0.042) 86.1%,\n rgba(0, 0, 0, 0.021) 91%,\n rgba(0, 0, 0, 0.008) 95.2%,\n rgba(0, 0, 0, 0.002) 98.2%,\n transparent 100%\n );\n"])));
|
|
8018
|
+
var OverlayMediaWrapper = styled__default.default("div")(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8019
|
+
var overlayMediaPosition = props.overlayMediaPosition;
|
|
8020
|
+
return react.css(templateObject_18$2 || (templateObject_18$2 = __makeTemplateObject(["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n height: 100%;\n "], ["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n flex-direction: column;\n align-items: ", ";\n justify-content: ", ";\n height: 100%;\n "])), overlayMediaPosition
|
|
8021
|
+
? overlayContentPositionAlignMapping[overlayMediaPosition]
|
|
8022
|
+
: "center", overlayMediaPosition
|
|
8023
|
+
? overlayContentPositionJustifyMapping[overlayMediaPosition]
|
|
8024
|
+
: "center");
|
|
8025
|
+
});
|
|
8026
|
+
var OverlayMedia = styled__default.default("div")(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8027
|
+
var overlayMediaMaxHeight = props.overlayMediaMaxHeight, overlayMediaMaxWidth = props.overlayMediaMaxWidth, overlayMediaMargin = props.overlayMediaMargin;
|
|
8028
|
+
var breakpoints = getBreakpoints(props);
|
|
8029
|
+
return react.css(templateObject_20$2 || (templateObject_20$2 = __makeTemplateObject(["\n position: absolute;\n z-index: 1;\n width: ", ";\n height: ", ";\n margin: ", ";\n\n ", " {\n margin: ", ";\n }\n\n ", " {\n margin: ", ";\n }\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n "], ["\n position: absolute;\n z-index: 1;\n width: ", ";\n height: ", ";\n margin: ", ";\n\n ", " {\n margin: ", ";\n }\n\n ", " {\n margin: ", ";\n }\n\n img,\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n "])), overlayMediaMaxWidth, overlayMediaMaxHeight, overlayMediaMargin
|
|
8030
|
+
? typeof overlayMediaMargin === "string"
|
|
8031
|
+
? overlayMediaMargin
|
|
8032
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.large
|
|
8033
|
+
: "0", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("lg"), overlayMediaMargin
|
|
8034
|
+
? typeof overlayMediaMargin === "string"
|
|
8035
|
+
? overlayMediaMargin
|
|
8036
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.medium
|
|
8037
|
+
: "0", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("md"), overlayMediaMargin
|
|
8038
|
+
? typeof overlayMediaMargin === "string"
|
|
8039
|
+
? overlayMediaMargin
|
|
8040
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.small
|
|
8041
|
+
: "0");
|
|
8042
|
+
});
|
|
8043
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$h, templateObject_4$f, templateObject_5$c, templateObject_6$b, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$4, templateObject_11$4, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$2, templateObject_21$2;
|
|
8044
|
+
|
|
8045
|
+
var Hero = React__namespace.default.forwardRef(function (props, ref) {
|
|
8046
|
+
var heroHeight = props.heroHeight, children = props.children, headerText = props.headerText, captionText = props.captionText, headerFontSize = props.headerFontSize, hasInvertTextColor = props.hasInvertTextColor, overlayContentWidth = props.overlayContentWidth, textAlignment = props.textAlignment, darkeningMask = props.darkeningMask, _a = props.darkeningMaskColor, darkeningMaskColor = _a === void 0 ? "#000000" : _a, _b = props.darkeningMaskOpacity, darkeningMaskOpacity = _b === void 0 ? 0 : _b, darkeningVignette = props.darkeningVignette, overlayMedia = props.overlayMedia, overlayMediaPosition = props.overlayMediaPosition, overlayMediaMaxHeight = props.overlayMediaMaxHeight, overlayMediaMaxWidth = props.overlayMediaMaxWidth, overlayMediaMargin = props.overlayMediaMargin, backgroundFill = props.backgroundFill, rest = __rest(props, ["heroHeight", "children", "headerText", "captionText", "headerFontSize", "hasInvertTextColor", "overlayContentWidth", "textAlignment", "darkeningMask", "darkeningMaskColor", "darkeningMaskOpacity", "darkeningVignette", "overlayMedia", "overlayMediaPosition", "overlayMediaMaxHeight", "overlayMediaMaxWidth", "overlayMediaMargin", "backgroundFill"]);
|
|
8047
|
+
// Determine if backgroundFill is a color string or a React node
|
|
8048
|
+
var isBackgroundFillColorString = typeof backgroundFill === "string" && !React.isValidElement(backgroundFill);
|
|
8049
|
+
var isBackgroundFillReactNode = React.isValidElement(backgroundFill);
|
|
8050
|
+
return (jsxRuntime.jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsxRuntime.jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsxRuntime.jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsxRuntime.jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsxRuntime.jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxRuntime.jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsxRuntime.jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsxRuntime.jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsxRuntime.jsx(ContentSlot, { children: children })] }), darkeningVignette && jsxRuntime.jsx(DarkeningVignette, {})] })));
|
|
8051
|
+
});
|
|
8052
|
+
Hero.displayName = "Hero";
|
|
7868
8053
|
|
|
7869
8054
|
var intentToColor$1 = {
|
|
7870
8055
|
default: "base",
|
|
@@ -7924,7 +8109,8 @@ var templateObject_1$y, templateObject_2$l, templateObject_3$g, templateObject_4
|
|
|
7924
8109
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
7925
8110
|
*/
|
|
7926
8111
|
var InputCheckbox = function (props) {
|
|
7927
|
-
var caption = props.caption, checkboxProps = props.checkboxProps, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, stage = props.stage, value = props.value, rest = __rest(props, ["caption", "checkboxProps", "disabled", "intent", "label", "stage", "value"]);
|
|
8112
|
+
var caption = props.caption, checkboxProps = props.checkboxProps, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b, className = props.className, rest = __rest(props, ["caption", "checkboxProps", "disabled", "intent", "label", "stage", "value", "classes", "className"]);
|
|
8113
|
+
var rootClassName = classes.root, labelCaptionContainerClassName = classes.labelCaptionContainer, labelClassName = classes.label, captionClassName = classes.caption, checkboxClassName = classes.checkbox, checkboxCheckedIconClassName = classes.checkboxCheckedIcon, checkboxDefaultIconClassName = classes.checkboxDefaultIcon, checkboxIndeterminateIconClassName = classes.checkboxIndeterminateIcon;
|
|
7928
8114
|
var newProps;
|
|
7929
8115
|
switch (stage) {
|
|
7930
8116
|
case "checked":
|
|
@@ -7939,12 +8125,8 @@ var InputCheckbox = function (props) {
|
|
|
7939
8125
|
default:
|
|
7940
8126
|
newProps = rest;
|
|
7941
8127
|
}
|
|
7942
|
-
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer$1, { children: [jsxRuntime.jsx(StyledCheckboxLabel, { children: label }), jsxRuntime.jsx(StyledCheckboxCaption, { children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer$1, { children: jsxRuntime.jsx(StyledCheckboxLabel, { children: label }) }));
|
|
7943
|
-
return (jsxRuntime.jsx(StyledFormControlLabel$1, { control: jsxRuntime.jsx(StyledCheckbox
|
|
7944
|
-
// disabled={disabled}
|
|
7945
|
-
, __assign({
|
|
7946
|
-
// disabled={disabled}
|
|
7947
|
-
checkedIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsxRuntime.jsx(StyledCheckboxDefaultIcon, { intent: intent }), indeterminateIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
|
|
8128
|
+
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsxRuntime.jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
|
|
8129
|
+
return (jsxRuntime.jsx(StyledFormControlLabel$1, { control: jsxRuntime.jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsxRuntime.jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsxRuntime.jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsxRuntime.jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(rootClassName, className) }));
|
|
7948
8130
|
};
|
|
7949
8131
|
|
|
7950
8132
|
var intentToColor = {
|
|
@@ -8004,7 +8186,7 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
|
|
|
8004
8186
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
8005
8187
|
*/
|
|
8006
8188
|
var InputRadio = function (props) {
|
|
8007
|
-
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b;
|
|
8189
|
+
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b, className = props.className;
|
|
8008
8190
|
// (masoudmanson): We don't need to pass the label prop to the radio component
|
|
8009
8191
|
// so we are destructuring it here.
|
|
8010
8192
|
var label = props.label, restProps = __rest(props, ["label"]);
|
|
@@ -8024,8 +8206,8 @@ var InputRadio = function (props) {
|
|
|
8024
8206
|
// Otherwise, the screen reader will read the label twice!
|
|
8025
8207
|
var labelId = "".concat(value, "-label");
|
|
8026
8208
|
var captionId = caption ? "".concat(value, "-caption") : undefined;
|
|
8027
|
-
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
|
|
8028
|
-
return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsxRuntime.jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
|
|
8209
|
+
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { className: cn(labelCaptionContainer), children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: cn(labelClassName), children: label }), jsxRuntime.jsx(StyledRadioCaption, { id: captionId, className: cn(captionClassName), children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { className: cn(labelCaptionContainer), children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, className: cn(labelClassName), children: label }) }));
|
|
8210
|
+
return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ className: cn(radioButtonClassName), checkedIcon: jsxRuntime.jsx(StyledRadioCheckedIcon, { className: cn(radioCheckedIconClassName), children: jsxRuntime.jsx(StyledRadioDot, { className: cn(radioCheckedIconDotClassName) }) }), icon: jsxRuntime.jsx(StyledRadioDefaultIcon, { intent: intent, className: cn(radioDefaultIconClassName) }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(root, className) }));
|
|
8029
8211
|
};
|
|
8030
8212
|
|
|
8031
8213
|
var inputSlider = function (props) {
|
|
@@ -8111,7 +8293,8 @@ var templateObject_1$v, templateObject_2$j, templateObject_3$e, templateObject_4
|
|
|
8111
8293
|
* @see https://mui.com/material-ui/react-text-field/
|
|
8112
8294
|
*/
|
|
8113
8295
|
var InputText = React.forwardRef(function InputText(props, ref) {
|
|
8114
|
-
var id = props.id, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, placeholder = props.placeholder, sdsType = props.sdsType, hideLabel = props.hideLabel, rest = __rest(props, ["id", "intent", "label", "placeholder", "sdsType", "hideLabel"]);
|
|
8296
|
+
var id = props.id, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, placeholder = props.placeholder, sdsType = props.sdsType, hideLabel = props.hideLabel, _b = props.classes, classes = _b === void 0 ? EMPTY_OBJECT : _b, className = props.className, rest = __rest(props, ["id", "intent", "label", "placeholder", "sdsType", "hideLabel", "classes", "className"]);
|
|
8297
|
+
var rootClassName = classes.root, labelClassName = classes.label, inputClassName = classes.input;
|
|
8115
8298
|
/**
|
|
8116
8299
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
8117
8300
|
*/
|
|
@@ -8133,8 +8316,8 @@ var InputText = React.forwardRef(function InputText(props, ref) {
|
|
|
8133
8316
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
8134
8317
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
8135
8318
|
}
|
|
8136
|
-
var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel$1, { htmlFor: id, children: label })) : (label);
|
|
8137
|
-
return (jsxRuntime.jsxs(
|
|
8319
|
+
var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel$1, { htmlFor: id, className: cn(labelClassName), children: label })) : (label);
|
|
8320
|
+
return (jsxRuntime.jsxs("div", { className: cn(rootClassName), children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ className: cn(inputClassName, className), ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsType: sdsType }, rest))] }));
|
|
8138
8321
|
});
|
|
8139
8322
|
|
|
8140
8323
|
var toggle = function (props) {
|
|
@@ -8207,7 +8390,7 @@ var StyledLink = styled__default.default(material.Link, {
|
|
|
8207
8390
|
return !doNotForwardProps$g.includes(prop.toString());
|
|
8208
8391
|
},
|
|
8209
8392
|
})(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
8210
|
-
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a,
|
|
8393
|
+
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "default" : _b, _c = props.sdsSize, sdsSize = _c === void 0 ? "s" : _c;
|
|
8211
8394
|
return react.css(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
8212
8395
|
});
|
|
8213
8396
|
var templateObject_1$t, templateObject_2$i, templateObject_3$d, templateObject_4$b;
|
|
@@ -8216,12 +8399,8 @@ var templateObject_1$t, templateObject_2$i, templateObject_3$d, templateObject_4
|
|
|
8216
8399
|
* @see https://mui.com/material-ui/react-link/
|
|
8217
8400
|
*/
|
|
8218
8401
|
var Link = React.forwardRef(function (props, ref) {
|
|
8219
|
-
var
|
|
8220
|
-
|
|
8221
|
-
if (sdsStyle === "default") {
|
|
8222
|
-
underline = "none";
|
|
8223
|
-
}
|
|
8224
|
-
return jsxRuntime.jsx(StyledLink, __assign({}, props, { underline: underline, ref: ref }));
|
|
8402
|
+
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "default" : _a, rest = __rest(props, ["sdsStyle"]);
|
|
8403
|
+
return (jsxRuntime.jsx(StyledLink, __assign({}, rest, { sdsStyle: sdsStyle, underline: sdsStyle === "default" ? "hover" : "always", ref: ref })));
|
|
8225
8404
|
});
|
|
8226
8405
|
|
|
8227
8406
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
@@ -16406,7 +16585,6 @@ exports.ContentCardTitle = StyledTitleText;
|
|
|
16406
16585
|
exports.Dialog = Dialog;
|
|
16407
16586
|
exports.DialogActions = DialogActions;
|
|
16408
16587
|
exports.DialogContent = index;
|
|
16409
|
-
exports.DialogContext = DialogContext;
|
|
16410
16588
|
exports.DialogPaper = DialogPaper;
|
|
16411
16589
|
exports.DialogTitle = DialogTitle;
|
|
16412
16590
|
exports.DialogTitleOverline = Overline;
|
|
@@ -16417,6 +16595,7 @@ exports.DropdownInputDropdown = InputDropdown;
|
|
|
16417
16595
|
exports.DropdownMenu = DropdownMenu;
|
|
16418
16596
|
exports.DropdownPaper = StyledPaper$1;
|
|
16419
16597
|
exports.DropdownPopper = StyledPopper;
|
|
16598
|
+
exports.Hero = Hero;
|
|
16420
16599
|
exports.Icon = Icon;
|
|
16421
16600
|
exports.InputCheckbox = InputCheckbox;
|
|
16422
16601
|
exports.InputDropdown = InputDropdown;
|