@czi-sds/components 22.13.3 → 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 +113 -41
- package/dist/index.cjs.js +505 -331
- package/dist/index.esm.d.ts +113 -41
- package/dist/index.esm.js +507 -333
- 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.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo,
|
|
4
|
+
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, isValidElement, memo, Fragment as Fragment$1, createContext, useContext } from 'react';
|
|
5
5
|
import { css, ThemeContext as ThemeContext$1 } from '@emotion/react';
|
|
6
|
-
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, CardActions, css as css$2, CardMedia,
|
|
6
|
+
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, styled as styled$3, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Card, CardContent, CardActions, css as css$2, CardMedia, DialogTitle as DialogTitle$1, Typography, DialogActions as DialogActions$1, dialogActionsClasses, Dialog as Dialog$1, DialogContent, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Divider, useMediaQuery, AppBar, Toolbar, Drawer, useScrollTrigger, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableContainer, TableCell, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
7
7
|
export { CardMedia as ContentCardMedia } from '@mui/material';
|
|
8
8
|
import styled$2 from '@emotion/styled';
|
|
9
9
|
import { Remove, Clear } from '@mui/icons-material';
|
|
@@ -72,6 +72,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
72
72
|
var FontSizeValues = {
|
|
73
73
|
wide: {
|
|
74
74
|
body: {
|
|
75
|
+
xxxxs: 10,
|
|
75
76
|
xxxs: 11,
|
|
76
77
|
xxs: 12,
|
|
77
78
|
xs: 13,
|
|
@@ -99,6 +100,7 @@ var FontSizeValues = {
|
|
|
99
100
|
xxxxs: 10,
|
|
100
101
|
},
|
|
101
102
|
tabular: {
|
|
103
|
+
xxxxs: 10,
|
|
102
104
|
xxxs: 11,
|
|
103
105
|
xxs: 12,
|
|
104
106
|
xs: 13,
|
|
@@ -112,6 +114,7 @@ var FontSizeValues = {
|
|
|
112
114
|
},
|
|
113
115
|
narrow: {
|
|
114
116
|
body: {
|
|
117
|
+
xxxxs: 10,
|
|
115
118
|
xxxs: 12,
|
|
116
119
|
xxs: 12,
|
|
117
120
|
xs: 13,
|
|
@@ -139,6 +142,7 @@ var FontSizeValues = {
|
|
|
139
142
|
xxxxs: 11,
|
|
140
143
|
},
|
|
141
144
|
tabular: {
|
|
145
|
+
xxxxs: 10,
|
|
142
146
|
xxxs: 11,
|
|
143
147
|
xxs: 12,
|
|
144
148
|
xs: 13,
|
|
@@ -154,6 +158,7 @@ var FontSizeValues = {
|
|
|
154
158
|
var LineHeightValues = {
|
|
155
159
|
wide: {
|
|
156
160
|
body: {
|
|
161
|
+
xxxxs: 14,
|
|
157
162
|
xxxs: 16,
|
|
158
163
|
xxs: 18,
|
|
159
164
|
xs: 20,
|
|
@@ -181,6 +186,7 @@ var LineHeightValues = {
|
|
|
181
186
|
xxxxs: 14,
|
|
182
187
|
},
|
|
183
188
|
tabular: {
|
|
189
|
+
xxxxs: 14,
|
|
184
190
|
xxxs: 16,
|
|
185
191
|
xxs: 18,
|
|
186
192
|
xs: 20,
|
|
@@ -194,6 +200,7 @@ var LineHeightValues = {
|
|
|
194
200
|
},
|
|
195
201
|
narrow: {
|
|
196
202
|
body: {
|
|
203
|
+
xxxxs: 14,
|
|
197
204
|
xxxs: 18,
|
|
198
205
|
xxs: 18,
|
|
199
206
|
xs: 20,
|
|
@@ -221,6 +228,7 @@ var LineHeightValues = {
|
|
|
221
228
|
xxxxs: 16,
|
|
222
229
|
},
|
|
223
230
|
tabular: {
|
|
231
|
+
xxxxs: 14,
|
|
224
232
|
xxxs: 16,
|
|
225
233
|
xxs: 18,
|
|
226
234
|
xs: 20,
|
|
@@ -236,6 +244,7 @@ var LineHeightValues = {
|
|
|
236
244
|
var LetterSpacingValues = {
|
|
237
245
|
wide: {
|
|
238
246
|
body: {
|
|
247
|
+
xxxxs: "0.06px",
|
|
239
248
|
xxxs: "0.06px",
|
|
240
249
|
xxs: "0.06px",
|
|
241
250
|
xs: "0px",
|
|
@@ -263,6 +272,7 @@ var LetterSpacingValues = {
|
|
|
263
272
|
xxxxs: "0.4px",
|
|
264
273
|
},
|
|
265
274
|
tabular: {
|
|
275
|
+
xxxxs: "-0.25px",
|
|
266
276
|
xxxs: "-0.25px",
|
|
267
277
|
xxs: "-0.25px",
|
|
268
278
|
xs: "-0.3px",
|
|
@@ -276,6 +286,7 @@ var LetterSpacingValues = {
|
|
|
276
286
|
},
|
|
277
287
|
narrow: {
|
|
278
288
|
body: {
|
|
289
|
+
xxxxs: "0.06px",
|
|
279
290
|
xxxs: "0.06px",
|
|
280
291
|
xxs: "0.06px",
|
|
281
292
|
xs: "0px",
|
|
@@ -303,6 +314,7 @@ var LetterSpacingValues = {
|
|
|
303
314
|
xxxxs: "0.4px",
|
|
304
315
|
},
|
|
305
316
|
tabular: {
|
|
317
|
+
xxxxs: "-0.25px",
|
|
306
318
|
xxxs: "-0.25px",
|
|
307
319
|
xxs: "-0.25px",
|
|
308
320
|
xs: "-0.3px",
|
|
@@ -318,7 +330,7 @@ var LetterSpacingValues = {
|
|
|
318
330
|
var TypographyCategories = {
|
|
319
331
|
body: {
|
|
320
332
|
weights: ["regular", "medium", "semibold"],
|
|
321
|
-
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
|
|
333
|
+
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
322
334
|
},
|
|
323
335
|
header: {
|
|
324
336
|
weights: ["semibold"],
|
|
@@ -334,7 +346,7 @@ var TypographyCategories = {
|
|
|
334
346
|
},
|
|
335
347
|
tabular: {
|
|
336
348
|
weights: ["regular", "medium", "semibold"],
|
|
337
|
-
sizes: ["s", "xs", "xxs", "xxxs"],
|
|
349
|
+
sizes: ["s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
338
350
|
},
|
|
339
351
|
title: {
|
|
340
352
|
weights: ["bold"],
|
|
@@ -342,7 +354,7 @@ var TypographyCategories = {
|
|
|
342
354
|
},
|
|
343
355
|
link: {
|
|
344
356
|
weights: ["regular", "medium", "semibold"],
|
|
345
|
-
sizes: ["l", "m", "s", "xs", "xxs", "xxxs"],
|
|
357
|
+
sizes: ["l", "m", "s", "xs", "xxs", "xxxs", "xxxxs"],
|
|
346
358
|
},
|
|
347
359
|
};
|
|
348
360
|
var FontWeight = {
|
|
@@ -1378,9 +1390,9 @@ function createFontFunction(config) {
|
|
|
1378
1390
|
var fontFamily = typography.fontFamily[styleType];
|
|
1379
1391
|
var additionalCss = config.additionalCss || "";
|
|
1380
1392
|
if (isNarrow) {
|
|
1381
|
-
return css(templateObject_1$
|
|
1393
|
+
return css(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), additionalCss, themeToCss(narrowStyles[weight][fontSize], fontFamily));
|
|
1382
1394
|
}
|
|
1383
|
-
return css(templateObject_2$
|
|
1395
|
+
return 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));
|
|
1384
1396
|
};
|
|
1385
1397
|
};
|
|
1386
1398
|
}
|
|
@@ -1484,17 +1496,17 @@ var fontLinkSemiboldXxs = fontLink("xxs", "semibold");
|
|
|
1484
1496
|
var fontLinkSemiboldXxxs = fontLink("xxxs", "semibold");
|
|
1485
1497
|
function themeToCss(fontTheme, fontFamily) {
|
|
1486
1498
|
if (fontFamily === void 0) { fontFamily = "inherit"; }
|
|
1487
|
-
return css(templateObject_3$
|
|
1499
|
+
return 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
|
|
1488
1500
|
? "text-decoration: ".concat(fontTheme.textDecoration, ";")
|
|
1489
1501
|
: "");
|
|
1490
1502
|
}
|
|
1491
|
-
var templateObject_1$
|
|
1503
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$D;
|
|
1492
1504
|
|
|
1493
|
-
var StyledAccordionDetails = styled$2(AccordionDetails$1)(templateObject_2$
|
|
1505
|
+
var StyledAccordionDetails = styled$2(AccordionDetails$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
1494
1506
|
var spaces = getSpaces(props);
|
|
1495
|
-
return css(templateObject_1$
|
|
1507
|
+
return 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);
|
|
1496
1508
|
});
|
|
1497
|
-
var templateObject_1$
|
|
1509
|
+
var templateObject_1$1a, templateObject_2$M;
|
|
1498
1510
|
|
|
1499
1511
|
var AccordionDetails = function (props) {
|
|
1500
1512
|
var children = props.children, id = props.id, rest = __rest(props, ["children", "id"]);
|
|
@@ -1504,21 +1516,21 @@ var AccordionDetails = function (props) {
|
|
|
1504
1516
|
var doNotForwardProps$I = ["chevronSize", "hasInvertedStyle"];
|
|
1505
1517
|
var StyledAccordionHeader = styled$2(AccordionSummary, {
|
|
1506
1518
|
shouldForwardProp: function (prop) { return !doNotForwardProps$I.includes(prop); },
|
|
1507
|
-
})(templateObject_2$
|
|
1519
|
+
})(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodySemiboldL, function (props) {
|
|
1508
1520
|
var _a, _b;
|
|
1509
1521
|
var chevronSize = props.chevronSize;
|
|
1510
1522
|
var spaces = getSpaces(props);
|
|
1511
1523
|
var semanticColors = getSemanticColors(props);
|
|
1512
|
-
return css(templateObject_1$
|
|
1524
|
+
return 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, accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, chevronSize === "xs"
|
|
1513
1525
|
? spaces === null || spaces === void 0 ? void 0 : spaces.xs
|
|
1514
1526
|
: 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, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1515
1527
|
});
|
|
1516
|
-
var StyledSubtitle$1 = styled$2("p")(templateObject_4$
|
|
1528
|
+
var StyledSubtitle$1 = styled$2("p")(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1517
1529
|
var _a;
|
|
1518
1530
|
var semanticColors = getSemanticColors(props);
|
|
1519
|
-
return css(templateObject_3$
|
|
1531
|
+
return 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);
|
|
1520
1532
|
});
|
|
1521
|
-
var templateObject_1$
|
|
1533
|
+
var templateObject_1$19, templateObject_2$L, templateObject_3$C, templateObject_4$y;
|
|
1522
1534
|
|
|
1523
1535
|
var _path$2e, _path2$E, _path3$6;
|
|
1524
1536
|
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); }
|
|
@@ -3438,7 +3450,7 @@ var SvgIconSparkleLarge = function SvgIconSparkleLarge(props) {
|
|
|
3438
3450
|
width: 24,
|
|
3439
3451
|
height: 24
|
|
3440
3452
|
}, props), _path$u || (_path$u = /*#__PURE__*/React.createElement("path", {
|
|
3441
|
-
d: "M11.
|
|
3453
|
+
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"
|
|
3442
3454
|
})));
|
|
3443
3455
|
};
|
|
3444
3456
|
|
|
@@ -3450,7 +3462,7 @@ var SvgIconSparkleSmall = function SvgIconSparkleSmall(props) {
|
|
|
3450
3462
|
width: 16,
|
|
3451
3463
|
height: 16
|
|
3452
3464
|
}, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
|
|
3453
|
-
d: "M7.
|
|
3465
|
+
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"
|
|
3454
3466
|
})));
|
|
3455
3467
|
};
|
|
3456
3468
|
|
|
@@ -3462,7 +3474,7 @@ var SvgIconSparklesLarge = function SvgIconSparklesLarge(props) {
|
|
|
3462
3474
|
width: 24,
|
|
3463
3475
|
height: 24
|
|
3464
3476
|
}, props), _path$s || (_path$s = /*#__PURE__*/React.createElement("path", {
|
|
3465
|
-
d: "M13.
|
|
3477
|
+
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"
|
|
3466
3478
|
})));
|
|
3467
3479
|
};
|
|
3468
3480
|
|
|
@@ -3474,7 +3486,7 @@ var SvgIconSparklesSmall = function SvgIconSparklesSmall(props) {
|
|
|
3474
3486
|
width: 16,
|
|
3475
3487
|
height: 16
|
|
3476
3488
|
}, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
|
|
3477
|
-
d: "
|
|
3489
|
+
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"
|
|
3478
3490
|
})));
|
|
3479
3491
|
};
|
|
3480
3492
|
|
|
@@ -4366,16 +4378,16 @@ var doNotForwardProps$H = ["sdsIcon", "sdsSize", "iconColor"];
|
|
|
4366
4378
|
*/
|
|
4367
4379
|
var StyledSvgIcon = styled$2(SvgIcon, {
|
|
4368
4380
|
shouldForwardProp: function (prop) { return !doNotForwardProps$H.includes(prop); },
|
|
4369
|
-
})(templateObject_2$
|
|
4381
|
+
})(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4370
4382
|
var _a, _b, _c;
|
|
4371
4383
|
var mode = getMode(props);
|
|
4372
4384
|
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;
|
|
4373
4385
|
var iconSizes = getIconSizes(props);
|
|
4374
4386
|
var colors = getColors(props);
|
|
4375
|
-
return css(templateObject_1$
|
|
4387
|
+
return 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);
|
|
4376
4388
|
});
|
|
4377
|
-
var StyledIcon$2 = styled$2("div")(templateObject_3$
|
|
4378
|
-
var templateObject_1$
|
|
4389
|
+
var StyledIcon$2 = styled$2("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"])));
|
|
4390
|
+
var templateObject_1$18, templateObject_2$K, templateObject_3$B;
|
|
4379
4391
|
|
|
4380
4392
|
/**
|
|
4381
4393
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -4406,21 +4418,21 @@ var StyledAccordion$1 = styled$2(Accordion$1, {
|
|
|
4406
4418
|
shouldForwardProp: function (prop) {
|
|
4407
4419
|
return !sdsPropNames$2.includes(prop.toString());
|
|
4408
4420
|
},
|
|
4409
|
-
})(templateObject_2$
|
|
4421
|
+
})(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4410
4422
|
var _a;
|
|
4411
4423
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
4412
4424
|
var shadows = getShadows(props);
|
|
4413
4425
|
var borders = getBorders(props);
|
|
4414
4426
|
var spaces = getSpaces(props);
|
|
4415
|
-
return css(templateObject_1$
|
|
4427
|
+
return 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 "])), 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, accordionSummaryClasses.root, fontBodyMediumS(props), focusVisibleA11yStyle(props), accordionSummaryClasses.focusVisible, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.l, accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
4416
4428
|
});
|
|
4417
4429
|
var leftPosition = function (props) {
|
|
4418
4430
|
var _a, _b;
|
|
4419
4431
|
var spaces = getSpaces(props);
|
|
4420
4432
|
var iconSizes = getIconSizes(props);
|
|
4421
|
-
return css(templateObject_3$
|
|
4433
|
+
return 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 "])), accordionClasses.root, accordionSummaryClasses.root, accordionSummaryClasses.content, spaces === null || spaces === void 0 ? void 0 : spaces.s, accordionSummaryClasses.expandIconWrapper, accordionSummaryClasses.expanded, 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));
|
|
4422
4434
|
};
|
|
4423
|
-
var templateObject_1$
|
|
4435
|
+
var templateObject_1$17, templateObject_2$J, templateObject_3$A;
|
|
4424
4436
|
|
|
4425
4437
|
/**
|
|
4426
4438
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -4450,7 +4462,7 @@ var Accordion = React__default.forwardRef(function (props, ref) {
|
|
|
4450
4462
|
return (jsx(StyledAccordion$1, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, ref: ref, expanded: expanded === id, onChange: handleChange(id) }, rest, { children: enhancedChildren })));
|
|
4451
4463
|
});
|
|
4452
4464
|
|
|
4453
|
-
var StyledAlert = styled$2(Alert$2)(templateObject_1$
|
|
4465
|
+
var StyledAlert = styled$2(Alert$2)(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4454
4466
|
var _a;
|
|
4455
4467
|
var colors = getColors(props);
|
|
4456
4468
|
var spaces = getSpaces(props);
|
|
@@ -4477,7 +4489,7 @@ function severityToColor(alertSeverity, colors) {
|
|
|
4477
4489
|
return colors === null || colors === void 0 ? void 0 : colors.green;
|
|
4478
4490
|
}
|
|
4479
4491
|
}
|
|
4480
|
-
var templateObject_1$
|
|
4492
|
+
var templateObject_1$16;
|
|
4481
4493
|
|
|
4482
4494
|
/**
|
|
4483
4495
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -4495,6 +4507,28 @@ var toKebabCase = function (str) {
|
|
|
4495
4507
|
return str.replace(/[\s_]+/g, "-").toLowerCase();
|
|
4496
4508
|
};
|
|
4497
4509
|
var EMPTY_OBJECT = {};
|
|
4510
|
+
/**
|
|
4511
|
+
* (masoudmanson):
|
|
4512
|
+
* Utility function to concatenate classNames and filter out falsy values.
|
|
4513
|
+
* Returns undefined if no valid classNames are provided, preventing empty class attributes.
|
|
4514
|
+
*
|
|
4515
|
+
* @param classNames - Variable number of className values (string | undefined | null | false)
|
|
4516
|
+
* @returns Concatenated className string or undefined
|
|
4517
|
+
*
|
|
4518
|
+
* @example
|
|
4519
|
+
* cn("foo", "bar") // "foo bar"
|
|
4520
|
+
* cn("foo", undefined, "bar") // "foo bar"
|
|
4521
|
+
* cn(undefined, null, false) // undefined
|
|
4522
|
+
* cn("foo", condition && "bar") // "foo bar" or "foo"
|
|
4523
|
+
*/
|
|
4524
|
+
var cn = function () {
|
|
4525
|
+
var classNames = [];
|
|
4526
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
4527
|
+
classNames[_i] = arguments[_i];
|
|
4528
|
+
}
|
|
4529
|
+
var result = classNames.filter(Boolean).join(" ");
|
|
4530
|
+
return result || undefined;
|
|
4531
|
+
};
|
|
4498
4532
|
function filterProps(props, excludeProps) {
|
|
4499
4533
|
var result = {};
|
|
4500
4534
|
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
|
|
@@ -4642,7 +4676,7 @@ var ButtonStyles = function (props) {
|
|
|
4642
4676
|
var boxshadow = variant === "outlined"
|
|
4643
4677
|
? "inset 0 0 0 1px ".concat((_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _h === void 0 ? void 0 : _h.border)
|
|
4644
4678
|
: "none";
|
|
4645
|
-
return css(templateObject_1$
|
|
4679
|
+
return 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"
|
|
4646
4680
|
? (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _j === void 0 ? void 0 : _j.textActionHover
|
|
4647
4681
|
: (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.textPrimaryInverse, variant === "outlined"
|
|
4648
4682
|
? (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.surfaceSecondary
|
|
@@ -4658,7 +4692,7 @@ var ButtonStyles = function (props) {
|
|
|
4658
4692
|
};
|
|
4659
4693
|
var Rounded = function (props) {
|
|
4660
4694
|
var corners = getCorners(props);
|
|
4661
|
-
return css(templateObject_2$
|
|
4695
|
+
return 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);
|
|
4662
4696
|
};
|
|
4663
4697
|
var DestructiveButton = function (props) {
|
|
4664
4698
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -4677,13 +4711,13 @@ var DestructiveButton = function (props) {
|
|
|
4677
4711
|
var boxshadow = variant === "outlined"
|
|
4678
4712
|
? "inset 0 0 0 1px ".concat((_f = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.negative) === null || _f === void 0 ? void 0 : _f.border)
|
|
4679
4713
|
: "none";
|
|
4680
|
-
return css(templateObject_3$
|
|
4714
|
+
return 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);
|
|
4681
4715
|
};
|
|
4682
4716
|
var StyledButton$2 = styled$2(Button$1, {
|
|
4683
4717
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4684
|
-
})(templateObject_5$
|
|
4718
|
+
})(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4685
4719
|
var sdsStyle = props.sdsStyle, sdsType = props.sdsType, isAllCaps = props.isAllCaps;
|
|
4686
|
-
return css(templateObject_4$
|
|
4720
|
+
return 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));
|
|
4687
4721
|
});
|
|
4688
4722
|
// Minimal Button Styles
|
|
4689
4723
|
var Minimal = function (props) {
|
|
@@ -4693,60 +4727,60 @@ var Minimal = function (props) {
|
|
|
4693
4727
|
var iconSizes = getIconSizes(props);
|
|
4694
4728
|
var semanticColors = getSemanticColors(props);
|
|
4695
4729
|
var corners = getCorners(props);
|
|
4696
|
-
return css(templateObject_6$
|
|
4730
|
+
return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
4697
4731
|
};
|
|
4698
4732
|
var PrimaryMinimalButton = function (props) {
|
|
4699
4733
|
var _a, _b;
|
|
4700
4734
|
var semanticColors = getSemanticColors(props);
|
|
4701
|
-
return css(templateObject_7$
|
|
4735
|
+
return 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);
|
|
4702
4736
|
};
|
|
4703
4737
|
var SecondaryMinimalButton = function (props) {
|
|
4704
4738
|
var _a, _b;
|
|
4705
4739
|
var semanticColors = getSemanticColors(props);
|
|
4706
|
-
return css(templateObject_8$
|
|
4740
|
+
return 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);
|
|
4707
4741
|
};
|
|
4708
4742
|
var StyledMinimalButton = styled$2(Button$1, {
|
|
4709
4743
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4710
|
-
})(templateObject_10$
|
|
4744
|
+
})(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4711
4745
|
var sdsType = props.sdsType;
|
|
4712
|
-
return css(templateObject_9$
|
|
4746
|
+
return css(templateObject_9$c || (templateObject_9$c = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4713
4747
|
});
|
|
4714
4748
|
var StyledButtonLegacy = styled$2(Button$1, {
|
|
4715
4749
|
shouldForwardProp: function (prop) { return !doNotForwardProps$G.includes(prop); },
|
|
4716
|
-
})(templateObject_11$
|
|
4750
|
+
})(templateObject_11$7 || (templateObject_11$7 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4717
4751
|
if (!props.isRounded)
|
|
4718
4752
|
return "";
|
|
4719
4753
|
var corners = getCorners(props);
|
|
4720
4754
|
var spaces = getSpaces(props);
|
|
4721
4755
|
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 ");
|
|
4722
4756
|
});
|
|
4723
|
-
var templateObject_1$
|
|
4757
|
+
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;
|
|
4724
4758
|
|
|
4725
4759
|
var isDisabled$1 = function (props) {
|
|
4726
4760
|
var _a, _b;
|
|
4727
4761
|
var semanticColors = getSemanticColors(props);
|
|
4728
|
-
return css(templateObject_1$
|
|
4762
|
+
return 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);
|
|
4729
4763
|
};
|
|
4730
4764
|
var primary$2 = function (props) {
|
|
4731
4765
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4732
4766
|
var semanticColors = getSemanticColors(props);
|
|
4733
|
-
return css(templateObject_2$
|
|
4767
|
+
return 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);
|
|
4734
4768
|
};
|
|
4735
4769
|
var secondary$2 = function (props) {
|
|
4736
4770
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4737
4771
|
var semanticColors = getSemanticColors(props);
|
|
4738
|
-
return css(templateObject_3$
|
|
4772
|
+
return 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);
|
|
4739
4773
|
};
|
|
4740
4774
|
var tertiary = function (props) {
|
|
4741
4775
|
var _a, _b, _c, _d, _e, _f;
|
|
4742
4776
|
var semanticColors = getSemanticColors(props);
|
|
4743
|
-
return css(templateObject_4$
|
|
4777
|
+
return 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);
|
|
4744
4778
|
};
|
|
4745
4779
|
var small$1 = function (props) {
|
|
4746
4780
|
var sdsType = props.sdsType;
|
|
4747
4781
|
var iconSizes = getIconSizes(props);
|
|
4748
4782
|
var spaces = getSpaces(props);
|
|
4749
|
-
return css(templateObject_5$
|
|
4783
|
+
return 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"
|
|
4750
4784
|
? "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;")
|
|
4751
4785
|
: "", 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;") : "");
|
|
4752
4786
|
};
|
|
@@ -4754,7 +4788,7 @@ var medium$1 = function (props) {
|
|
|
4754
4788
|
var sdsType = props.sdsType;
|
|
4755
4789
|
var iconSizes = getIconSizes(props);
|
|
4756
4790
|
var spaces = getSpaces(props);
|
|
4757
|
-
return css(templateObject_6$
|
|
4791
|
+
return 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"
|
|
4758
4792
|
? "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;")
|
|
4759
4793
|
: "", 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;") : "");
|
|
4760
4794
|
};
|
|
@@ -4762,7 +4796,7 @@ var large = function (props) {
|
|
|
4762
4796
|
var sdsType = props.sdsType;
|
|
4763
4797
|
var iconSizes = getIconSizes(props);
|
|
4764
4798
|
var spaces = getSpaces(props);
|
|
4765
|
-
return css(templateObject_7$
|
|
4799
|
+
return 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"
|
|
4766
4800
|
? "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;")
|
|
4767
4801
|
: "", 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;") : "");
|
|
4768
4802
|
};
|
|
@@ -4777,11 +4811,11 @@ var doNotForwardProps$F = [
|
|
|
4777
4811
|
];
|
|
4778
4812
|
var StyledButtonIcon = styled$2(IconButton, {
|
|
4779
4813
|
shouldForwardProp: function (prop) { return !doNotForwardProps$F.includes(prop); },
|
|
4780
|
-
})(templateObject_9$
|
|
4814
|
+
})(templateObject_9$b || (templateObject_9$b = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4781
4815
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4782
|
-
return css(templateObject_8$
|
|
4816
|
+
return 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));
|
|
4783
4817
|
});
|
|
4784
|
-
var templateObject_1$
|
|
4818
|
+
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;
|
|
4785
4819
|
|
|
4786
4820
|
var ButtonIconSizeToSdsIconSize = {
|
|
4787
4821
|
large: "xl",
|
|
@@ -4890,20 +4924,20 @@ var rounded$3 = function (props) {
|
|
|
4890
4924
|
var _a;
|
|
4891
4925
|
var corners = getCorners(props);
|
|
4892
4926
|
var semanticColors = getSemanticColors(props);
|
|
4893
|
-
return css(templateObject_1$
|
|
4927
|
+
return 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 "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.rounded, 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);
|
|
4894
4928
|
};
|
|
4895
4929
|
var applyIntentColor$2 = function (props, intent) {
|
|
4896
4930
|
var _a, _b, _c, _d;
|
|
4897
4931
|
var semanticColors = getSemanticColors(props);
|
|
4898
4932
|
var borders = getBorders(props);
|
|
4899
|
-
return css(templateObject_2$
|
|
4933
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _a === void 0 ? void 0 : _a.default, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.hover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = borders === null || borders === void 0 ? void 0 : borders[intent]) === null || _c === void 0 ? void 0 : _c.default, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed);
|
|
4900
4934
|
};
|
|
4901
4935
|
var disabledStyled$2 = function (props) {
|
|
4902
4936
|
var _a, _b, _c, _d, _e;
|
|
4903
4937
|
var semanticColors = getSemanticColors(props);
|
|
4904
|
-
return css(templateObject_3$
|
|
4938
|
+
return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimaryDisabled, inputAdornmentClasses.root, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentDisabled, outlinedInputClasses.notchedOutline, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.borderPrimaryDisabled, 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);
|
|
4905
4939
|
};
|
|
4906
|
-
var StyledLabel$3 = styled$2("label")(templateObject_4$
|
|
4940
|
+
var StyledLabel$3 = styled$2("label")(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4907
4941
|
var spaces = getSpaces(props);
|
|
4908
4942
|
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 ");
|
|
4909
4943
|
});
|
|
@@ -4911,19 +4945,19 @@ var StyledSearchBase = styled$2(TextField, {
|
|
|
4911
4945
|
shouldForwardProp: function (prop) {
|
|
4912
4946
|
return !doNotForwardProps$E.includes(prop.toString());
|
|
4913
4947
|
},
|
|
4914
|
-
})(templateObject_6$
|
|
4948
|
+
})(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4915
4949
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
4916
4950
|
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle;
|
|
4917
4951
|
var spaces = getSpaces(props);
|
|
4918
4952
|
var iconSizes = getIconSizes(props);
|
|
4919
4953
|
var semanticColors = getSemanticColors(props);
|
|
4920
4954
|
var corners = getCorners(props);
|
|
4921
|
-
return css(templateObject_5$
|
|
4955
|
+
return 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, outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, corners === null || corners === void 0 ? void 0 : corners.l, 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, 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, inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, outlinedInputClasses.root, (_h = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _h === void 0 ? void 0 : _h.fillHover, buttonBaseClasses.root, (_j = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _j === void 0 ? void 0 : _j.ornamentSecondary, outlinedInputClasses.notchedOutline, (_k = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _k === void 0 ? void 0 : _k.borderPrimaryHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_l = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _l === void 0 ? void 0 : _l.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_m = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _m === void 0 ? void 0 : _m.ornamentSecondaryPressed, 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));
|
|
4922
4956
|
});
|
|
4923
|
-
var StyledInputAdornment = styled$2(InputAdornment)(templateObject_7$
|
|
4924
|
-
var templateObject_1$
|
|
4957
|
+
var StyledInputAdornment = styled$2(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"])));
|
|
4958
|
+
var templateObject_1$13, templateObject_2$G, templateObject_3$x, templateObject_4$v, templateObject_5$p, templateObject_6$l, templateObject_7$g;
|
|
4925
4959
|
|
|
4926
|
-
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$
|
|
4960
|
+
var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4927
4961
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4928
4962
|
var selected = props.selected;
|
|
4929
4963
|
var spaces = getSpaces(props);
|
|
@@ -4931,7 +4965,7 @@ var StyledMenuItem$1 = styled$2(MenuItem$1)(templateObject_1$11 || (templateObje
|
|
|
4931
4965
|
var semanticColors = getSemanticColors(props);
|
|
4932
4966
|
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(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(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(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 ");
|
|
4933
4967
|
});
|
|
4934
|
-
var ContentWrapper = styled$2("span")(templateObject_2$
|
|
4968
|
+
var ContentWrapper = styled$2("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"])));
|
|
4935
4969
|
var disabledStyles$2 = function (props) {
|
|
4936
4970
|
var _a;
|
|
4937
4971
|
var disabled = props.disabled;
|
|
@@ -4940,12 +4974,12 @@ var disabledStyles$2 = function (props) {
|
|
|
4940
4974
|
var semanticColors = getSemanticColors(props);
|
|
4941
4975
|
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 ");
|
|
4942
4976
|
};
|
|
4943
|
-
var TextWrapper = styled$2("span")(templateObject_3$
|
|
4977
|
+
var TextWrapper = styled$2("span")(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4944
4978
|
var _a;
|
|
4945
4979
|
var semanticColors = getSemanticColors(props);
|
|
4946
4980
|
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 ");
|
|
4947
4981
|
}, disabledStyles$2);
|
|
4948
|
-
var StyledMenuItemIcon = styled$2("span")(templateObject_4$
|
|
4982
|
+
var StyledMenuItemIcon = styled$2("span")(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4949
4983
|
var _a;
|
|
4950
4984
|
var disabled = props.disabled;
|
|
4951
4985
|
var spaces = getSpaces(props);
|
|
@@ -4953,18 +4987,18 @@ var StyledMenuItemIcon = styled$2("span")(templateObject_4$t || (templateObject_
|
|
|
4953
4987
|
var semanticColors = getSemanticColors(props);
|
|
4954
4988
|
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 ");
|
|
4955
4989
|
});
|
|
4956
|
-
var ColumnWrapper = styled$2("span")(templateObject_5$
|
|
4990
|
+
var ColumnWrapper = styled$2("span")(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
4957
4991
|
var _a;
|
|
4958
4992
|
var semanticColors = getSemanticColors(props);
|
|
4959
4993
|
var spaces = getSpaces(props);
|
|
4960
4994
|
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 ");
|
|
4961
4995
|
}, disabledStyles$2);
|
|
4962
|
-
var StyledIconWrapper = styled$2("span")(templateObject_6$
|
|
4996
|
+
var StyledIconWrapper = styled$2("span")(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4963
4997
|
var spaces = getSpaces(props);
|
|
4964
4998
|
var iconSizes = getIconSizes(props);
|
|
4965
4999
|
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 ");
|
|
4966
5000
|
});
|
|
4967
|
-
var StyledIcon$1 = styled$2(Icon)(templateObject_7$
|
|
5001
|
+
var StyledIcon$1 = styled$2(Icon)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4968
5002
|
var _a, _b;
|
|
4969
5003
|
var selected = props.selected, disabled = props.disabled;
|
|
4970
5004
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4973,7 +5007,7 @@ var StyledIcon$1 = styled$2(Icon)(templateObject_7$e || (templateObject_7$e = __
|
|
|
4973
5007
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
4974
5008
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n ");
|
|
4975
5009
|
});
|
|
4976
|
-
var DotIcon = styled$2("svg")(templateObject_8$
|
|
5010
|
+
var DotIcon = styled$2("svg")(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4977
5011
|
var _a, _b;
|
|
4978
5012
|
var selected = props.selected, disabled = props.disabled;
|
|
4979
5013
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4984,7 +5018,7 @@ var DotIcon = styled$2("svg")(templateObject_8$c || (templateObject_8$c = __make
|
|
|
4984
5018
|
});
|
|
4985
5019
|
styled$2(Remove, {
|
|
4986
5020
|
shouldForwardProp: function (prop) { return prop !== "selected"; },
|
|
4987
|
-
})(templateObject_9$
|
|
5021
|
+
})(templateObject_9$a || (templateObject_9$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4988
5022
|
var _a, _b;
|
|
4989
5023
|
var selected = props.selected, disabled = props.disabled;
|
|
4990
5024
|
var semanticColors = getSemanticColors(props);
|
|
@@ -4994,7 +5028,7 @@ styled$2(Remove, {
|
|
|
4994
5028
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimary;
|
|
4995
5029
|
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 ");
|
|
4996
5030
|
});
|
|
4997
|
-
var templateObject_1$
|
|
5031
|
+
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;
|
|
4998
5032
|
|
|
4999
5033
|
/**
|
|
5000
5034
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -5100,7 +5134,8 @@ var useDetectUserTabbing = function (ref) {
|
|
|
5100
5134
|
* @see https://mui.com/material-ui/react-text-field/
|
|
5101
5135
|
*/
|
|
5102
5136
|
var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
5103
|
-
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"]);
|
|
5137
|
+
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"]);
|
|
5138
|
+
var rootClassName = classes.root, labelClassName = classes.label, inputClassName = classes.input, endAdornmentClassName = classes.endAdornment, startAdornmentClassName = classes.startAdornment, clearButtonClassName = classes.clearButton, searchButtonClassName = classes.searchButton;
|
|
5104
5139
|
/**
|
|
5105
5140
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
5106
5141
|
*/
|
|
@@ -5114,7 +5149,7 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
5114
5149
|
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
5115
5150
|
*/
|
|
5116
5151
|
useDetectUserTabbing((ref ? ref : inputRef));
|
|
5117
|
-
var
|
|
5152
|
+
var _d = useState(""), value = _d[0], setValue = _d[1];
|
|
5118
5153
|
var handleChange = function (event) {
|
|
5119
5154
|
setValue(event.target.value);
|
|
5120
5155
|
if (onChange)
|
|
@@ -5150,11 +5185,11 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
5150
5185
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5151
5186
|
return jsx(Fragment, {});
|
|
5152
5187
|
}
|
|
5153
|
-
return (jsxs(
|
|
5188
|
+
return (jsxs("div", { className: cn(rootClassName), children: [jsx(StyledLabel$3, { htmlFor: id, className: cn(labelClassName), children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef, className: cn(inputClassName, className),
|
|
5154
5189
|
// passed to mui Input
|
|
5155
5190
|
InputProps: {
|
|
5156
|
-
endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
5157
|
-
startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search" }) })),
|
|
5191
|
+
endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", className: cn(endAdornmentClassName), children: 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,
|
|
5192
|
+
startAdornment: (jsx(StyledInputAdornment, { position: "start", className: cn(startAdornmentClassName), children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "Search", className: cn(searchButtonClassName) }) })),
|
|
5158
5193
|
}, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
|
|
5159
5194
|
/**
|
|
5160
5195
|
* (masoudmanson): This prevents the browser's default auto completion
|
|
@@ -5174,7 +5209,7 @@ var doNotForwardProps$D = [
|
|
|
5174
5209
|
];
|
|
5175
5210
|
var StyledAutocompleteBase = styled$2(Autocomplete$1, {
|
|
5176
5211
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5177
|
-
})(templateObject_1$
|
|
5212
|
+
})(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
5178
5213
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5179
5214
|
var search = props.search, groupBy = props.groupBy;
|
|
5180
5215
|
var spaces = getSpaces(props);
|
|
@@ -5184,7 +5219,7 @@ var StyledAutocompleteBase = styled$2(Autocomplete$1, {
|
|
|
5184
5219
|
});
|
|
5185
5220
|
var InputBaseWrapper$1 = styled$2("div", {
|
|
5186
5221
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5187
|
-
})(templateObject_2$
|
|
5222
|
+
})(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5188
5223
|
var search = props.search;
|
|
5189
5224
|
if (!search) {
|
|
5190
5225
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -5195,11 +5230,11 @@ var InputBaseWrapper$1 = styled$2("div", {
|
|
|
5195
5230
|
});
|
|
5196
5231
|
var StyledMenuInputSearch$1 = styled$2(InputSearch, {
|
|
5197
5232
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
5198
|
-
})(templateObject_3$
|
|
5233
|
+
})(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) {
|
|
5199
5234
|
var search = _a.search;
|
|
5200
5235
|
return (search ? "auto" : "transparent");
|
|
5201
5236
|
});
|
|
5202
|
-
var StyledPaper$3 = styled$2(Paper)(templateObject_4$
|
|
5237
|
+
var StyledPaper$3 = styled$2(Paper)(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5203
5238
|
var _a, _b;
|
|
5204
5239
|
var corners = getCorners(props);
|
|
5205
5240
|
var shadows = getShadows(props);
|
|
@@ -5208,13 +5243,13 @@ var StyledPaper$3 = styled$2(Paper)(templateObject_4$s || (templateObject_4$s =
|
|
|
5208
5243
|
var semanticColors = getSemanticColors(props);
|
|
5209
5244
|
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 ");
|
|
5210
5245
|
});
|
|
5211
|
-
var StyledMenuItemDetails = styled$2("div")(templateObject_5$
|
|
5246
|
+
var StyledMenuItemDetails = styled$2("div")(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5212
5247
|
var _a;
|
|
5213
5248
|
var semanticColors = getSemanticColors(props);
|
|
5214
5249
|
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 ");
|
|
5215
5250
|
});
|
|
5216
|
-
var StyledMenuItemText = styled$2("div")(templateObject_6$
|
|
5217
|
-
var templateObject_1$
|
|
5251
|
+
var StyledMenuItemText = styled$2("div")(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5252
|
+
var templateObject_1$11, templateObject_2$E, templateObject_3$v, templateObject_4$t, templateObject_5$n, templateObject_6$j;
|
|
5218
5253
|
|
|
5219
5254
|
var AutocompleteBase = function (props) {
|
|
5220
5255
|
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;
|
|
@@ -5375,17 +5410,17 @@ var AutocompleteBase = function (props) {
|
|
|
5375
5410
|
}
|
|
5376
5411
|
};
|
|
5377
5412
|
|
|
5378
|
-
var StyledColumn = styled$2("div")(templateObject_1
|
|
5413
|
+
var StyledColumn = styled$2("div")(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5379
5414
|
var _a = props.width, width = _a === void 0 ? 280 : _a;
|
|
5380
5415
|
return "\n position: relative;\n width: ".concat(width, "px;\n ");
|
|
5381
5416
|
});
|
|
5382
|
-
var StyledColumnTitle = styled$2("p")(templateObject_2$
|
|
5417
|
+
var StyledColumnTitle = styled$2("p")(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
5383
5418
|
var _a;
|
|
5384
5419
|
var spaces = getSpaces(props);
|
|
5385
5420
|
var semanticColors = getSemanticColors(props);
|
|
5386
5421
|
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 ");
|
|
5387
5422
|
});
|
|
5388
|
-
var templateObject_1
|
|
5423
|
+
var templateObject_1$10, templateObject_2$D;
|
|
5389
5424
|
|
|
5390
5425
|
var AutocompleteGroup = function (props) {
|
|
5391
5426
|
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"]);
|
|
@@ -5440,7 +5475,7 @@ var StyledPopper$2 = styled$2(Popper, {
|
|
|
5440
5475
|
shouldForwardProp: function (prop) {
|
|
5441
5476
|
return !doNotForwardProps$C.includes(prop) || prop === "anchorEl";
|
|
5442
5477
|
},
|
|
5443
|
-
})(templateObject_1
|
|
5478
|
+
})(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5444
5479
|
var _a;
|
|
5445
5480
|
var corners = getCorners(props);
|
|
5446
5481
|
var shadows = getShadows(props);
|
|
@@ -5451,38 +5486,38 @@ var StyledPopper$2 = styled$2(Popper, {
|
|
|
5451
5486
|
});
|
|
5452
5487
|
var StyledPaper$2 = styled$2(Paper, {
|
|
5453
5488
|
shouldForwardProp: function (prop) { return !doNotForwardProps$C.includes(prop); },
|
|
5454
|
-
})(templateObject_2$
|
|
5489
|
+
})(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5455
5490
|
var _a;
|
|
5456
5491
|
var shadows = getShadows(props);
|
|
5457
5492
|
var semanticColors = getSemanticColors(props);
|
|
5458
5493
|
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 ");
|
|
5459
5494
|
});
|
|
5460
|
-
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$
|
|
5495
|
+
var StyledAutocompleteGroupWrapper = styled$2("div")(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5461
5496
|
var StyledAutocompleteInput = styled$2(InputSearch, {
|
|
5462
5497
|
shouldForwardProp: function (prop) { return !doNotForwardProps$C.includes(prop); },
|
|
5463
|
-
})(templateObject_4$
|
|
5498
|
+
})(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) {
|
|
5464
5499
|
var search = _a.search;
|
|
5465
5500
|
return !search && "height: 0; display: none; margin: 0 !important;";
|
|
5466
5501
|
}, function (_a) {
|
|
5467
5502
|
var search = _a.search;
|
|
5468
5503
|
return (search ? "auto" : "transparent");
|
|
5469
5504
|
});
|
|
5470
|
-
var templateObject_1
|
|
5505
|
+
var templateObject_1$$, templateObject_2$C, templateObject_3$u, templateObject_4$s;
|
|
5471
5506
|
|
|
5472
|
-
var StyledVerticalDivider = styled$3("div")(templateObject_1$
|
|
5507
|
+
var StyledVerticalDivider = styled$3("div")(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5473
5508
|
var _a;
|
|
5474
5509
|
var spaces = getSpaces(props);
|
|
5475
5510
|
var semanticColors = getSemanticColors(props);
|
|
5476
5511
|
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 ");
|
|
5477
5512
|
});
|
|
5478
|
-
var StyledColumnIcon = styled$3("span")(templateObject_2$
|
|
5513
|
+
var StyledColumnIcon = styled$3("span")(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5479
5514
|
var _a, _b;
|
|
5480
5515
|
var spaces = getSpaces(props);
|
|
5481
5516
|
var iconSizes = getIconSizes(props);
|
|
5482
5517
|
var semanticColors = getSemanticColors(props);
|
|
5483
5518
|
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 ");
|
|
5484
5519
|
});
|
|
5485
|
-
var templateObject_1$
|
|
5520
|
+
var templateObject_1$_, templateObject_2$B;
|
|
5486
5521
|
|
|
5487
5522
|
var VerticalDivider = function (_a) {
|
|
5488
5523
|
var icon = _a.icon;
|
|
@@ -5669,13 +5704,13 @@ var Autocomplete = function (props) {
|
|
|
5669
5704
|
}
|
|
5670
5705
|
};
|
|
5671
5706
|
|
|
5672
|
-
var Centered = styled$2("div")(templateObject_1$
|
|
5707
|
+
var Centered = styled$2("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"])));
|
|
5673
5708
|
var doNotForwardPropsIconWrapper = ["bannerType", "intent"];
|
|
5674
5709
|
var IconWrapper$1 = styled$2("div", {
|
|
5675
5710
|
shouldForwardProp: function (prop) {
|
|
5676
5711
|
return !doNotForwardPropsIconWrapper.includes(prop);
|
|
5677
5712
|
},
|
|
5678
|
-
})(templateObject_2$
|
|
5713
|
+
})(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5679
5714
|
var _a, _b;
|
|
5680
5715
|
var bannerType = props.bannerType, _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
5681
5716
|
var spaces = getSpaces(props);
|
|
@@ -5690,7 +5725,7 @@ var StyledButton$1 = styled$2(Button, {
|
|
|
5690
5725
|
shouldForwardProp: function (prop) {
|
|
5691
5726
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
5692
5727
|
},
|
|
5693
|
-
})(templateObject_3$
|
|
5728
|
+
})(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) {
|
|
5694
5729
|
var _a, _b;
|
|
5695
5730
|
var bannerType = props.bannerType;
|
|
5696
5731
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5698,7 +5733,7 @@ var StyledButton$1 = styled$2(Button, {
|
|
|
5698
5733
|
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 ");
|
|
5699
5734
|
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 ");
|
|
5700
5735
|
});
|
|
5701
|
-
styled$2("div")(templateObject_4$
|
|
5736
|
+
styled$2("div")(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
5702
5737
|
var primary$1 = function (props) {
|
|
5703
5738
|
var _a, _b;
|
|
5704
5739
|
var _c = props.intent, intent = _c === void 0 ? "info" : _c;
|
|
@@ -5714,12 +5749,12 @@ var secondary$1 = function (props) {
|
|
|
5714
5749
|
var doNotForwardProps$B = ["sdsType", "textChild", "intent"];
|
|
5715
5750
|
var StyledBanner = styled$2("div", {
|
|
5716
5751
|
shouldForwardProp: function (prop) { return !doNotForwardProps$B.includes(prop); },
|
|
5717
|
-
})(templateObject_5$
|
|
5752
|
+
})(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5718
5753
|
var sdsType = props.sdsType;
|
|
5719
5754
|
var spaces = getSpaces(props);
|
|
5720
5755
|
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 ");
|
|
5721
5756
|
});
|
|
5722
|
-
var templateObject_1$
|
|
5757
|
+
var templateObject_1$Z, templateObject_2$A, templateObject_3$t, templateObject_4$r, templateObject_5$m;
|
|
5723
5758
|
|
|
5724
5759
|
var Banner = forwardRef(function Banner(props, ref) {
|
|
5725
5760
|
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"]);
|
|
@@ -5794,13 +5829,13 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
|
5794
5829
|
var doNotForwardProps$A = ["sdsStage"];
|
|
5795
5830
|
var StyledButtonToggle = styled$2(ButtonIcon, {
|
|
5796
5831
|
shouldForwardProp: function (prop) { return !doNotForwardProps$A.includes(prop); },
|
|
5797
|
-
})(templateObject_1$
|
|
5832
|
+
})(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5798
5833
|
var _a;
|
|
5799
5834
|
var sdsStage = props.sdsStage;
|
|
5800
5835
|
var semanticColors = getSemanticColors(props);
|
|
5801
5836
|
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 ");
|
|
5802
5837
|
});
|
|
5803
|
-
var templateObject_1$
|
|
5838
|
+
var templateObject_1$Y;
|
|
5804
5839
|
|
|
5805
5840
|
/**
|
|
5806
5841
|
* @see https://mui.com/material-ui/react-button/
|
|
@@ -5825,7 +5860,7 @@ var doNotForwardProps$z = [
|
|
|
5825
5860
|
];
|
|
5826
5861
|
var StyledCallout = styled$2(Alert$2, {
|
|
5827
5862
|
shouldForwardProp: function (prop) { return !doNotForwardProps$z.includes(prop); },
|
|
5828
|
-
})(templateObject_1$
|
|
5863
|
+
})(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5829
5864
|
var _a, _b, _c, _d, _e;
|
|
5830
5865
|
var _f = props.intent, intent = _f === void 0 ? "info" : _f, sdsStyle = props.sdsStyle, hideBody = props.hideBody, collapsed = props.collapsed;
|
|
5831
5866
|
var spaces = getSpaces(props);
|
|
@@ -5836,12 +5871,12 @@ var StyledCallout = styled$2(Alert$2, {
|
|
|
5836
5871
|
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";
|
|
5837
5872
|
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(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(alertClasses.message, " {\n width: 100%;\n padding: 0;\n margin: 0;\n\n .").concat(alertTitleClasses.root, " {\n margin: 0;\n }\n }\n\n .").concat(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 ");
|
|
5838
5873
|
});
|
|
5839
|
-
var templateObject_1$
|
|
5874
|
+
var templateObject_1$X;
|
|
5840
5875
|
|
|
5841
5876
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
5842
5877
|
|
|
5843
|
-
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$
|
|
5844
|
-
var templateObject_1$
|
|
5878
|
+
var StyledCalloutTitle = styled$2(AlertTitle)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n ", "\n margin: 0;\n"], ["\n ", "\n margin: 0;\n"])), fontBodySemiboldXs);
|
|
5879
|
+
var templateObject_1$W;
|
|
5845
5880
|
|
|
5846
5881
|
var CalloutTitle = function (_a) {
|
|
5847
5882
|
var children = _a.children;
|
|
@@ -5850,24 +5885,24 @@ var CalloutTitle = function (_a) {
|
|
|
5850
5885
|
// Display name required to ensure Callout expand works correctly.
|
|
5851
5886
|
CalloutTitle.displayName = CALLOUT_TITLE_DISPLAY_NAME;
|
|
5852
5887
|
|
|
5853
|
-
var StyledCalloutBody = styled$2("div")(templateObject_1$
|
|
5888
|
+
var StyledCalloutBody = styled$2("div")(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
5854
5889
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a;
|
|
5855
5890
|
var spaces = getSpaces(props);
|
|
5856
5891
|
return "\n margin: ".concat(!hideTitle ? spaces === null || spaces === void 0 ? void 0 : spaces.xs : 0, "px 0 0 0;\n ");
|
|
5857
5892
|
});
|
|
5858
|
-
var templateObject_1$
|
|
5893
|
+
var templateObject_1$V;
|
|
5859
5894
|
|
|
5860
5895
|
var CalloutBody = function (_a) {
|
|
5861
5896
|
var children = _a.children, hideTitle = _a.hideTitle;
|
|
5862
5897
|
return (jsx(StyledCalloutBody, { hideTitle: hideTitle, children: children }));
|
|
5863
5898
|
};
|
|
5864
5899
|
|
|
5865
|
-
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$
|
|
5900
|
+
var StyledCalloutExtraContent = styled$2("div")(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5866
5901
|
var _a = props.hideTitle, hideTitle = _a === void 0 ? false : _a, _b = props.hideBody, hideBody = _b === void 0 ? false : _b;
|
|
5867
5902
|
var spaces = getSpaces(props);
|
|
5868
5903
|
return "\n margin: ".concat(hideTitle && hideBody ? 0 : spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0 0;\n ");
|
|
5869
5904
|
});
|
|
5870
|
-
var templateObject_1$
|
|
5905
|
+
var templateObject_1$U;
|
|
5871
5906
|
|
|
5872
5907
|
var CalloutExtraContent = function (_a) {
|
|
5873
5908
|
var children = _a.children, hideTitle = _a.hideTitle, hideBody = _a.hideBody;
|
|
@@ -5936,22 +5971,22 @@ var dark$1 = function (props) {
|
|
|
5936
5971
|
var _a, _b;
|
|
5937
5972
|
var spaces = getSpaces(props);
|
|
5938
5973
|
var semanticColors = getSemanticColors(props);
|
|
5939
|
-
return css$1(templateObject_1$
|
|
5974
|
+
return css$1(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);
|
|
5940
5975
|
};
|
|
5941
5976
|
var light$1 = function (props) {
|
|
5942
5977
|
var _a, _b;
|
|
5943
5978
|
var spaces = getSpaces(props);
|
|
5944
5979
|
var semanticColors = getSemanticColors(props);
|
|
5945
|
-
return css$1(templateObject_2$
|
|
5980
|
+
return css$1(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);
|
|
5946
5981
|
};
|
|
5947
5982
|
var tableStyles = function (props) {
|
|
5948
5983
|
var spaces = getSpaces(props);
|
|
5949
|
-
return css$1(templateObject_3$
|
|
5984
|
+
return css$1(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5950
5985
|
};
|
|
5951
5986
|
var doNotForwardProps$y = ["hasInvertedStyle", "textAlign"];
|
|
5952
5987
|
var StyledTitle = styled$2("p", {
|
|
5953
5988
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5954
|
-
})(templateObject_4$
|
|
5989
|
+
})(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
5955
5990
|
var _a, _b;
|
|
5956
5991
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5957
5992
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5959,7 +5994,7 @@ var StyledTitle = styled$2("p", {
|
|
|
5959
5994
|
});
|
|
5960
5995
|
var StyledSubtitle = styled$2("p", {
|
|
5961
5996
|
shouldForwardProp: function (prop) { return !doNotForwardProps$y.includes(prop); },
|
|
5962
|
-
})(templateObject_5$
|
|
5997
|
+
})(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5963
5998
|
var _a, _b;
|
|
5964
5999
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5965
6000
|
var semanticColors = getSemanticColors(props);
|
|
@@ -5971,7 +6006,7 @@ var tooltipCss = function (props) {
|
|
|
5971
6006
|
var shadows = getShadows(props);
|
|
5972
6007
|
var corners = getCorners(props);
|
|
5973
6008
|
var semanticColors = getSemanticColors(props);
|
|
5974
|
-
return css$1(templateObject_6$
|
|
6009
|
+
return css$1(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
|
|
5975
6010
|
? textAlign
|
|
5976
6011
|
: width === "wide"
|
|
5977
6012
|
? "left"
|
|
@@ -5984,7 +6019,7 @@ var arrowCss = function (props) {
|
|
|
5984
6019
|
var _a, _b;
|
|
5985
6020
|
var hasInvertedStyle = props.hasInvertedStyle, inverted = props.inverted, sdsStyle = props.sdsStyle, arrowOffset = props.arrowOffset;
|
|
5986
6021
|
var semanticColors = getSemanticColors(props);
|
|
5987
|
-
return css$1(templateObject_7$
|
|
6022
|
+
return css$1(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"
|
|
5988
6023
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse
|
|
5989
6024
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.surface);
|
|
5990
6025
|
};
|
|
@@ -5992,13 +6027,13 @@ var arrowCss = function (props) {
|
|
|
5992
6027
|
* (masoudmanson): !important is needed to override arrow's
|
|
5993
6028
|
* default placement which is calculated by javascript
|
|
5994
6029
|
*/
|
|
5995
|
-
var StyledPopper$1 = styled$2(Popper)(templateObject_8$
|
|
5996
|
-
var StyledComponentSlotWrapper = styled$2("div")(templateObject_9$
|
|
6030
|
+
var StyledPopper$1 = styled$2(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"])));
|
|
6031
|
+
var StyledComponentSlotWrapper = styled$2("div")(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5997
6032
|
var shouldAddMargin = props.shouldAddMargin;
|
|
5998
6033
|
var spaces = getSpaces(props);
|
|
5999
6034
|
return "\n margin-top: ".concat(shouldAddMargin ? spaces === null || spaces === void 0 ? void 0 : spaces.s : 0, "px;\n ");
|
|
6000
6035
|
});
|
|
6001
|
-
var templateObject_1$
|
|
6036
|
+
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;
|
|
6002
6037
|
|
|
6003
6038
|
/**
|
|
6004
6039
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -6107,7 +6142,7 @@ var verticalAlignToFlexMap = {
|
|
|
6107
6142
|
};
|
|
6108
6143
|
var StyledTableData = styled$2("td", {
|
|
6109
6144
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6110
|
-
})(templateObject_1$
|
|
6145
|
+
})(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6111
6146
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6112
6147
|
var spaces = getSpaces(props);
|
|
6113
6148
|
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 ");
|
|
@@ -6118,22 +6153,22 @@ var ShouldWrap = function (lineCount) {
|
|
|
6118
6153
|
var ShouldTruncate$1 = function () {
|
|
6119
6154
|
return "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n word-break: break-all;\n ";
|
|
6120
6155
|
};
|
|
6121
|
-
var StyledCellContent = styled$2("div")(templateObject_2$
|
|
6122
|
-
var StyledCellContentWrapper = styled$2("div")(templateObject_3$
|
|
6156
|
+
var StyledCellContent = styled$2("div")(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6157
|
+
var StyledCellContentWrapper = styled$2("div")(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
6123
6158
|
var StyledCellIconWrapper = styled$2("div", {
|
|
6124
6159
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6125
|
-
})(templateObject_4$
|
|
6160
|
+
})(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6126
6161
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
6127
6162
|
var spaces = getSpaces(props);
|
|
6128
6163
|
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 ");
|
|
6129
6164
|
});
|
|
6130
|
-
var PrimaryTextWrapper = styled$2("div")(templateObject_5$
|
|
6165
|
+
var PrimaryTextWrapper = styled$2("div")(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6131
6166
|
var horizontalAlign = props.horizontalAlign;
|
|
6132
6167
|
return "\n display: flex;\n justify-content: ".concat(horizontalAlign === "left" ? "flex-start" : "flex-end", ";\n ");
|
|
6133
6168
|
});
|
|
6134
6169
|
var PrimaryText = styled$2("div", {
|
|
6135
6170
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6136
|
-
})(templateObject_6$
|
|
6171
|
+
})(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
6137
6172
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a, _b = props.tabularNums, tabularNums = _b === void 0 ? false : _b;
|
|
6138
6173
|
return "\n display: block;\n font-variant-numeric: ".concat(tabularNums ? TABULAR_NUMS : "normal", ";\n \n ").concat(props.shouldTextWrap
|
|
6139
6174
|
? ShouldWrap(primaryTextWrapLineCount)
|
|
@@ -6141,7 +6176,7 @@ var PrimaryText = styled$2("div", {
|
|
|
6141
6176
|
});
|
|
6142
6177
|
var SecondaryText = styled$2("span", {
|
|
6143
6178
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6144
|
-
})(templateObject_7$
|
|
6179
|
+
})(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6145
6180
|
var _a;
|
|
6146
6181
|
var _b = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6147
6182
|
var spaces = getSpaces(props);
|
|
@@ -6152,7 +6187,7 @@ var SecondaryText = styled$2("span", {
|
|
|
6152
6187
|
});
|
|
6153
6188
|
var TertiaryText = styled$2("span", {
|
|
6154
6189
|
shouldForwardProp: function (prop) { return !doNotForwardProps$x.includes(prop); },
|
|
6155
|
-
})(templateObject_8$
|
|
6190
|
+
})(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
6156
6191
|
var _a;
|
|
6157
6192
|
var _b = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _b === void 0 ? 1 : _b, _c = props.tabularNums, tabularNums = _c === void 0 ? false : _c;
|
|
6158
6193
|
var spaces = getSpaces(props);
|
|
@@ -6161,15 +6196,15 @@ var TertiaryText = styled$2("span", {
|
|
|
6161
6196
|
? ShouldWrap(tertiaryTextWrapLineCount)
|
|
6162
6197
|
: ShouldTruncate$1(), "\n ");
|
|
6163
6198
|
});
|
|
6164
|
-
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$
|
|
6199
|
+
var PrimaryTextComponentSlotBottomWrapper = styled$2("div")(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6165
6200
|
var spaces = getSpaces(props);
|
|
6166
6201
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
6167
6202
|
});
|
|
6168
|
-
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$
|
|
6203
|
+
var PrimaryTextComponentSlotRightWrapper = styled$2("div")(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6169
6204
|
var spaces = getSpaces(props);
|
|
6170
6205
|
return "\n margin-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
6171
6206
|
});
|
|
6172
|
-
var templateObject_1$
|
|
6207
|
+
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;
|
|
6173
6208
|
|
|
6174
6209
|
var CellBasicContent = function (props) {
|
|
6175
6210
|
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;
|
|
@@ -6186,12 +6221,12 @@ var CellBasic = forwardRef(function (props, ref) {
|
|
|
6186
6221
|
var doNotForwardProps$w = ["horizontalAlign", "verticalAlign"];
|
|
6187
6222
|
var StyledCellComponentData = styled$2("td", {
|
|
6188
6223
|
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
6189
|
-
})(templateObject_1$
|
|
6224
|
+
})(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
6190
6225
|
var spaces = getSpaces(props);
|
|
6191
6226
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
6192
6227
|
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 ");
|
|
6193
6228
|
});
|
|
6194
|
-
var templateObject_1$
|
|
6229
|
+
var templateObject_1$R;
|
|
6195
6230
|
|
|
6196
6231
|
var CellComponent = forwardRef(function (props, _) {
|
|
6197
6232
|
var children = props.children, rest = __rest(props, ["children"]);
|
|
@@ -6215,7 +6250,7 @@ var doNotForwardProps$v = [
|
|
|
6215
6250
|
];
|
|
6216
6251
|
var StyledSortingIcon = styled$2(Icon, {
|
|
6217
6252
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6218
|
-
})(templateObject_1$
|
|
6253
|
+
})(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6219
6254
|
var _a;
|
|
6220
6255
|
var _b = props.active, active = _b === void 0 ? false : _b, hideSortIcon = props.hideSortIcon;
|
|
6221
6256
|
var spaces = getSpaces(props);
|
|
@@ -6227,7 +6262,7 @@ var ShouldTruncate = function () {
|
|
|
6227
6262
|
};
|
|
6228
6263
|
var StyledTableHeader$1 = styled$2("th", {
|
|
6229
6264
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6230
|
-
})(templateObject_2$
|
|
6265
|
+
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
6231
6266
|
var _a, _b, _c, _d, _e, _f;
|
|
6232
6267
|
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;
|
|
6233
6268
|
var spaces = getSpaces(props);
|
|
@@ -6242,17 +6277,17 @@ var StyledTableHeader$1 = styled$2("th", {
|
|
|
6242
6277
|
});
|
|
6243
6278
|
var StyledCellHeaderText = styled$2("div", {
|
|
6244
6279
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6245
|
-
})(templateObject_3$
|
|
6280
|
+
})(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
6246
6281
|
var _a = props.shouldTruncate, shouldTruncate = _a === void 0 ? false : _a;
|
|
6247
6282
|
return "\n ".concat(shouldTruncate && ShouldTruncate(), "\n ");
|
|
6248
6283
|
});
|
|
6249
6284
|
var StyledCellHeaderContainer = styled$2("div", {
|
|
6250
6285
|
shouldForwardProp: function (prop) { return !doNotForwardProps$v.includes(prop); },
|
|
6251
|
-
})(templateObject_4$
|
|
6286
|
+
})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6252
6287
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
6253
6288
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
6254
6289
|
});
|
|
6255
|
-
var templateObject_1$
|
|
6290
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$q, templateObject_4$o;
|
|
6256
6291
|
|
|
6257
6292
|
var CellHeaderContent = function (props) {
|
|
6258
6293
|
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;
|
|
@@ -6272,20 +6307,20 @@ var CellHeader = forwardRef(function (props, ref) {
|
|
|
6272
6307
|
|
|
6273
6308
|
var small = function (props) {
|
|
6274
6309
|
var spaces = getSpaces(props);
|
|
6275
|
-
return css(templateObject_1$
|
|
6310
|
+
return 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));
|
|
6276
6311
|
};
|
|
6277
6312
|
var medium = function (props) {
|
|
6278
6313
|
var spaces = getSpaces(props);
|
|
6279
6314
|
var colors = getColors(props);
|
|
6280
|
-
return css(templateObject_2$
|
|
6315
|
+
return 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);
|
|
6281
6316
|
};
|
|
6282
6317
|
var rounded$2 = function (props) {
|
|
6283
6318
|
var corners = getCorners(props);
|
|
6284
|
-
return css(templateObject_3$
|
|
6319
|
+
return 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);
|
|
6285
6320
|
};
|
|
6286
6321
|
var square$2 = function (props) {
|
|
6287
6322
|
var corners = getCorners(props);
|
|
6288
|
-
return css(templateObject_4$
|
|
6323
|
+
return 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);
|
|
6289
6324
|
};
|
|
6290
6325
|
var success = function (props) {
|
|
6291
6326
|
return createStatusCss(props, "success");
|
|
@@ -6338,7 +6373,7 @@ function createStatusCss(props, status) {
|
|
|
6338
6373
|
},
|
|
6339
6374
|
};
|
|
6340
6375
|
var statusColors = statusToColors[status];
|
|
6341
|
-
return css(templateObject_5$
|
|
6376
|
+
return 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);
|
|
6342
6377
|
}
|
|
6343
6378
|
var statusToCss = {
|
|
6344
6379
|
beta: beta,
|
|
@@ -6351,11 +6386,11 @@ var statusToCss = {
|
|
|
6351
6386
|
var doNotForwardProps$u = ["isRounded"];
|
|
6352
6387
|
var StyledChip = styled$2(Chip$1, {
|
|
6353
6388
|
shouldForwardProp: function (prop) { return !doNotForwardProps$u.includes(prop); },
|
|
6354
|
-
})(templateObject_7$
|
|
6389
|
+
})(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
6355
6390
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
6356
|
-
return css(templateObject_6$
|
|
6391
|
+
return 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));
|
|
6357
6392
|
});
|
|
6358
|
-
var templateObject_1$
|
|
6393
|
+
var templateObject_1$P, templateObject_2$w, templateObject_3$p, templateObject_4$n, templateObject_5$j, templateObject_6$g, templateObject_7$c;
|
|
6359
6394
|
|
|
6360
6395
|
/**
|
|
6361
6396
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -6389,7 +6424,7 @@ var doNotForwardProps$t = [
|
|
|
6389
6424
|
];
|
|
6390
6425
|
var StyledHeaderTitle = styled$2("div", {
|
|
6391
6426
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6392
|
-
})(templateObject_1$
|
|
6427
|
+
})(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyMediumXs, function (props) {
|
|
6393
6428
|
var _a;
|
|
6394
6429
|
var spaces = getSpaces(props);
|
|
6395
6430
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6397,7 +6432,7 @@ var StyledHeaderTitle = styled$2("div", {
|
|
|
6397
6432
|
});
|
|
6398
6433
|
var StyledDropdownMenuAutocompleteWrapper = styled$2("div", {
|
|
6399
6434
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6400
|
-
})(templateObject_2$
|
|
6435
|
+
})(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6401
6436
|
var search = props.search, titleValue = props.titleValue;
|
|
6402
6437
|
var spaces = getSpaces(props);
|
|
6403
6438
|
return "\n & .SdsAutocompleteMultiColumn-wrapper {\n padding: 0 ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n }\n\n & .").concat(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(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 ");
|
|
@@ -6406,7 +6441,7 @@ var StyledPopper = styled$2(Popper, {
|
|
|
6406
6441
|
shouldForwardProp: function (prop) {
|
|
6407
6442
|
return !doNotForwardProps$t.includes(prop) || prop === "anchorEl";
|
|
6408
6443
|
},
|
|
6409
|
-
})(templateObject_3$
|
|
6444
|
+
})(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6410
6445
|
var _a;
|
|
6411
6446
|
var borders = getBorders(props);
|
|
6412
6447
|
var corners = getCorners(props);
|
|
@@ -6416,7 +6451,7 @@ var StyledPopper = styled$2(Popper, {
|
|
|
6416
6451
|
});
|
|
6417
6452
|
var StyledPaper$1 = styled$2(Paper, {
|
|
6418
6453
|
shouldForwardProp: function (prop) { return !doNotForwardProps$t.includes(prop); },
|
|
6419
|
-
})(templateObject_4$
|
|
6454
|
+
})(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6420
6455
|
var _a, _b, _c, _d;
|
|
6421
6456
|
var spaces = getSpaces(props);
|
|
6422
6457
|
var shadows = getShadows(props);
|
|
@@ -6424,14 +6459,14 @@ var StyledPaper$1 = styled$2(Paper, {
|
|
|
6424
6459
|
var corners = getCorners(props);
|
|
6425
6460
|
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 ");
|
|
6426
6461
|
});
|
|
6427
|
-
var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$
|
|
6462
|
+
var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6428
6463
|
var _a;
|
|
6429
6464
|
var search = props.search;
|
|
6430
6465
|
var spaces = getSpaces(props);
|
|
6431
6466
|
var semanticColors = getSemanticColors(props);
|
|
6432
6467
|
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 ");
|
|
6433
6468
|
});
|
|
6434
|
-
var templateObject_1$
|
|
6469
|
+
var templateObject_1$O, templateObject_2$v, templateObject_3$o, templateObject_4$m, templateObject_5$i;
|
|
6435
6470
|
|
|
6436
6471
|
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
6437
6472
|
// for the dropdownMenu's popper component
|
|
@@ -6491,27 +6526,27 @@ var inputDropdownStyles = function (props) {
|
|
|
6491
6526
|
var _m = props.width, width = _m === void 0 ? "auto" : _m;
|
|
6492
6527
|
var spaces = getSpaces(props);
|
|
6493
6528
|
var semanticColors = getSemanticColors(props);
|
|
6494
|
-
return css(templateObject_1$
|
|
6529
|
+
return 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);
|
|
6495
6530
|
};
|
|
6496
6531
|
var minimal$1 = function (props) {
|
|
6497
6532
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
6498
6533
|
var spaces = getSpaces(props);
|
|
6499
6534
|
var semanticColors = getSemanticColors(props);
|
|
6500
|
-
return css(templateObject_2$
|
|
6535
|
+
return 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);
|
|
6501
6536
|
};
|
|
6502
6537
|
var square$1 = function (props) {
|
|
6503
6538
|
var corners = getCorners(props);
|
|
6504
|
-
return css(templateObject_3$
|
|
6539
|
+
return 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);
|
|
6505
6540
|
};
|
|
6506
6541
|
var rounded$1 = function (props) {
|
|
6507
6542
|
var corners = getCorners(props);
|
|
6508
|
-
return css(templateObject_4$
|
|
6543
|
+
return 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);
|
|
6509
6544
|
};
|
|
6510
6545
|
var userInput = function (props) {
|
|
6511
6546
|
var _a, _b, _c, _d;
|
|
6512
6547
|
var _e = props.sdsStyle, sdsStyle = _e === void 0 ? "square" : _e;
|
|
6513
6548
|
var semanticColors = getSemanticColors(props);
|
|
6514
|
-
return css(templateObject_5$
|
|
6549
|
+
return 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"
|
|
6515
6550
|
? "\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 ")
|
|
6516
6551
|
: "");
|
|
6517
6552
|
};
|
|
@@ -6520,7 +6555,7 @@ var isOpen = function (props) {
|
|
|
6520
6555
|
var _j = props.sdsStyle, sdsStyle = _j === void 0 ? "square" : _j, _k = props.intent, intent = _k === void 0 ? "default" : _k;
|
|
6521
6556
|
var semanticColors = getSemanticColors(props);
|
|
6522
6557
|
var inputColor = intentToColor$2[intent];
|
|
6523
|
-
return css(templateObject_6$
|
|
6558
|
+
return 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"
|
|
6524
6559
|
? "\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 ")
|
|
6525
6560
|
: "", (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentSecondaryPressed, sdsStyle === "minimal"
|
|
6526
6561
|
? "none"
|
|
@@ -6531,12 +6566,12 @@ var isOpen = function (props) {
|
|
|
6531
6566
|
var applyIntentColor$1 = function (props, intent) {
|
|
6532
6567
|
var _a, _b, _c;
|
|
6533
6568
|
var semanticColors = getSemanticColors(props);
|
|
6534
|
-
return css(templateObject_7$
|
|
6569
|
+
return 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);
|
|
6535
6570
|
};
|
|
6536
6571
|
var isDisabled = function (props) {
|
|
6537
6572
|
var _a, _b, _c, _d, _e, _f;
|
|
6538
6573
|
var semanticColors = getSemanticColors(props);
|
|
6539
|
-
return css(templateObject_8$
|
|
6574
|
+
return 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);
|
|
6540
6575
|
};
|
|
6541
6576
|
/**
|
|
6542
6577
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -6548,9 +6583,9 @@ var isDisabled = function (props) {
|
|
|
6548
6583
|
*/
|
|
6549
6584
|
var StyledInputDropdown = styled$2(Button, {
|
|
6550
6585
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6551
|
-
})(templateObject_10$
|
|
6586
|
+
})(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) {
|
|
6552
6587
|
var disabled = props.disabled, intent = props.intent, state = props.state, value = props.value, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a;
|
|
6553
|
-
return css(templateObject_9$
|
|
6588
|
+
return 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" &&
|
|
6554
6589
|
sdsStyle !== "minimal" &&
|
|
6555
6590
|
applyIntentColor$1(props, "notice"), intent === "negative" &&
|
|
6556
6591
|
sdsStyle !== "minimal" &&
|
|
@@ -6560,7 +6595,7 @@ var StyledInputDropdown = styled$2(Button, {
|
|
|
6560
6595
|
});
|
|
6561
6596
|
var StyledDetail = styled$2("span", {
|
|
6562
6597
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6563
|
-
})(templateObject_11$
|
|
6598
|
+
})(templateObject_11$6 || (templateObject_11$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6564
6599
|
var _a;
|
|
6565
6600
|
var spaces = getSpaces(props);
|
|
6566
6601
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6568,7 +6603,7 @@ var StyledDetail = styled$2("span", {
|
|
|
6568
6603
|
});
|
|
6569
6604
|
var StyledLabel$2 = styled$2("span", {
|
|
6570
6605
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6571
|
-
})(templateObject_12$
|
|
6606
|
+
})(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6572
6607
|
var _a, _b;
|
|
6573
6608
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
6574
6609
|
var fontWeights = getFontWeights(props);
|
|
@@ -6580,7 +6615,7 @@ var StyledLabel$2 = styled$2("span", {
|
|
|
6580
6615
|
});
|
|
6581
6616
|
var StyledCounter = styled$2("span", {
|
|
6582
6617
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6583
|
-
})(templateObject_13$
|
|
6618
|
+
})(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6584
6619
|
var _a, _b;
|
|
6585
6620
|
var corners = getCorners(props);
|
|
6586
6621
|
var spaces = getSpaces(props);
|
|
@@ -6589,7 +6624,7 @@ var StyledCounter = styled$2("span", {
|
|
|
6589
6624
|
});
|
|
6590
6625
|
var MinimalDetails = styled$2("div", {
|
|
6591
6626
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6592
|
-
})(templateObject_14$
|
|
6627
|
+
})(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) {
|
|
6593
6628
|
var _a;
|
|
6594
6629
|
var shouldTruncateMinimalDetails = props.shouldTruncateMinimalDetails;
|
|
6595
6630
|
var semanticColors = getSemanticColors(props);
|
|
@@ -6598,19 +6633,19 @@ var MinimalDetails = styled$2("div", {
|
|
|
6598
6633
|
});
|
|
6599
6634
|
var LabelWrapper = styled$2("span", {
|
|
6600
6635
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6601
|
-
})(templateObject_15$
|
|
6636
|
+
})(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"])));
|
|
6602
6637
|
var IconWrapper = styled$2("span", {
|
|
6603
6638
|
shouldForwardProp: function (prop) { return !doNotForwardProps$s.includes(prop); },
|
|
6604
|
-
})(templateObject_16$
|
|
6639
|
+
})(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"])));
|
|
6605
6640
|
function labelStyle(props) {
|
|
6606
6641
|
var _a, _b;
|
|
6607
6642
|
var semanticColors = getSemanticColors(props);
|
|
6608
6643
|
var labelColor = props.sdsType === "value"
|
|
6609
6644
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimary
|
|
6610
6645
|
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary;
|
|
6611
|
-
return css(templateObject_17$
|
|
6646
|
+
return 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);
|
|
6612
6647
|
}
|
|
6613
|
-
var templateObject_1$
|
|
6648
|
+
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;
|
|
6614
6649
|
|
|
6615
6650
|
var VALID_SDS_STYLES = ["minimal", "square", "rounded"];
|
|
6616
6651
|
var validateSdsStyle = function (sdsStyle) {
|
|
@@ -6624,14 +6659,15 @@ var validateSdsStyle = function (sdsStyle) {
|
|
|
6624
6659
|
* @see https://mui.com/material-ui/react-button/
|
|
6625
6660
|
*/
|
|
6626
6661
|
var InputDropdown = function (props) {
|
|
6627
|
-
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;
|
|
6662
|
+
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;
|
|
6628
6663
|
var sdsStyle = validateSdsStyle(rawSdsStyle);
|
|
6629
6664
|
var isMinimal = sdsStyle === "minimal";
|
|
6630
6665
|
var shouldRenderDetails = !multiple && (details || value) && !isMinimal;
|
|
6631
6666
|
var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple && details;
|
|
6632
6667
|
var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
|
|
6633
6668
|
var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
|
|
6634
|
-
|
|
6669
|
+
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;
|
|
6670
|
+
return (jsxs(StyledInputDropdown, __assign({}, props, { className: cn(rootClassName, className), sdsStyle: sdsStyle, "aria-label": "Dropdown input", children: [jsxs(LabelWrapper, { className: cn(contentWrapperClassName), children: [jsxs("div", { className: cn(labelDetailsWrapperClassName), children: [jsx(StyledLabel$2, { className: cn("styled-label", labelClassName), details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
|
|
6635
6671
|
counter: counter,
|
|
6636
6672
|
details: details,
|
|
6637
6673
|
isMinimal: isMinimal,
|
|
@@ -6640,7 +6676,7 @@ var InputDropdown = function (props) {
|
|
|
6640
6676
|
sdsType: sdsType,
|
|
6641
6677
|
shouldPutAColonAfterLabel: shouldPutAColonAfterLabel,
|
|
6642
6678
|
value: value,
|
|
6643
|
-
}) }), shouldRenderDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && jsx(StyledCounter, { children: counter })] }), jsx(IconWrapper, { children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
|
|
6679
|
+
}) }), shouldRenderDetails && (jsx(StyledDetail, { className: cn(detailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderInlineMinimalDetails && (jsx(StyledDetail, { className: cn(detailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) })), shouldRenderCounter && (jsx(StyledCounter, { className: cn(counterClassName), children: counter }))] }), jsx(IconWrapper, { className: cn(iconWrapperClassName), children: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", className: cn(chevronIconClassName) }) })] }), shouldRenderMinimalDetails && (jsx(MinimalDetails, { shouldTruncateMinimalDetails: shouldTruncateMinimalDetails, className: cn(minimalDetailsClassName), children: renderDetailsText({ details: details, sdsType: sdsType, value: value }) }))] })));
|
|
6644
6680
|
};
|
|
6645
6681
|
function renderLabelText(props) {
|
|
6646
6682
|
var sdsType = props.sdsType;
|
|
@@ -6682,12 +6718,12 @@ function renderDetailsText(_a) {
|
|
|
6682
6718
|
var doNotForwardProps$r = ["buttonPosition"];
|
|
6683
6719
|
var StyledButtonsWrapper = styled$2("div", {
|
|
6684
6720
|
shouldForwardProp: function (prop) { return !doNotForwardProps$r.includes(prop); },
|
|
6685
|
-
})(templateObject_1$
|
|
6721
|
+
})(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6686
6722
|
var buttonPosition = props.buttonPosition;
|
|
6687
6723
|
var spaces = getSpaces(props);
|
|
6688
6724
|
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 ");
|
|
6689
6725
|
});
|
|
6690
|
-
var templateObject_1$
|
|
6726
|
+
var templateObject_1$M;
|
|
6691
6727
|
|
|
6692
6728
|
// Custom hook for managing dropdown state
|
|
6693
6729
|
function useDropdownState(propValue, multiple, options) {
|
|
@@ -6979,33 +7015,33 @@ var tagSizeS = function (props) {
|
|
|
6979
7015
|
var spaces = getSpaces(props);
|
|
6980
7016
|
var iconSizes = getIconSizes(props);
|
|
6981
7017
|
var semanticColors = getSemanticColors(props);
|
|
6982
|
-
return css(templateObject_1$
|
|
7018
|
+
return 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);
|
|
6983
7019
|
};
|
|
6984
7020
|
var tagSizeL = function (props) {
|
|
6985
7021
|
var _a;
|
|
6986
7022
|
var spaces = getSpaces(props);
|
|
6987
7023
|
var iconSizes = getIconSizes(props);
|
|
6988
7024
|
var semanticColors = getSemanticColors(props);
|
|
6989
|
-
return css(templateObject_2$
|
|
7025
|
+
return 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);
|
|
6990
7026
|
};
|
|
6991
7027
|
var rounded = function (props) {
|
|
6992
7028
|
var corners = getCorners(props);
|
|
6993
7029
|
var spaces = getSpaces(props);
|
|
6994
7030
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
6995
7031
|
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;
|
|
6996
|
-
return css(templateObject_3$
|
|
7032
|
+
return 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);
|
|
6997
7033
|
};
|
|
6998
7034
|
var square = function (props) {
|
|
6999
7035
|
var corners = getCorners(props);
|
|
7000
7036
|
var spaces = getSpaces(props);
|
|
7001
7037
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a, icon = props.icon;
|
|
7002
7038
|
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;
|
|
7003
|
-
return css(templateObject_4$
|
|
7039
|
+
return 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);
|
|
7004
7040
|
};
|
|
7005
7041
|
var withHover = function (props) {
|
|
7006
7042
|
var _a;
|
|
7007
7043
|
var semanticColors = getSemanticColors(props);
|
|
7008
|
-
return css(templateObject_5$
|
|
7044
|
+
return 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);
|
|
7009
7045
|
};
|
|
7010
7046
|
var primary = function (props) {
|
|
7011
7047
|
return createTypeCss(props, "primary");
|
|
@@ -7074,7 +7110,7 @@ function createTypeCss(props, type) {
|
|
|
7074
7110
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
7075
7111
|
};
|
|
7076
7112
|
var typeColors = typeToColors[type];
|
|
7077
|
-
return css(templateObject_6$
|
|
7113
|
+
return 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);
|
|
7078
7114
|
}
|
|
7079
7115
|
var typeToCss = {
|
|
7080
7116
|
primary: primary,
|
|
@@ -7089,13 +7125,13 @@ var doNotForwardProps$q = [
|
|
|
7089
7125
|
];
|
|
7090
7126
|
var StyledTag$3 = styled$2(Chip$1, {
|
|
7091
7127
|
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
7092
|
-
})(templateObject_8$
|
|
7128
|
+
})(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
7093
7129
|
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;
|
|
7094
7130
|
var isRounded = sdsStyle === "rounded";
|
|
7095
7131
|
var type = sdsType || "primary";
|
|
7096
|
-
return css(templateObject_7$
|
|
7132
|
+
return 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;");
|
|
7097
7133
|
});
|
|
7098
|
-
var templateObject_1$
|
|
7134
|
+
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;
|
|
7099
7135
|
|
|
7100
7136
|
/**
|
|
7101
7137
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7109,14 +7145,14 @@ var Tag = function (props) {
|
|
|
7109
7145
|
return jsx(StyledTag$3, __assign({ tagColor: color }, props, { color: "primary" }));
|
|
7110
7146
|
};
|
|
7111
7147
|
|
|
7112
|
-
var StyledTag$2 = styled$2(Tag)(templateObject_2$
|
|
7148
|
+
var StyledTag$2 = styled$2(Tag)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7113
7149
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7114
7150
|
var spaces = getSpaces(props);
|
|
7115
7151
|
var iconSizes = getIconSizes(props);
|
|
7116
7152
|
var semanticColors = getSemanticColors(props);
|
|
7117
|
-
return css(templateObject_1$
|
|
7153
|
+
return 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);
|
|
7118
7154
|
});
|
|
7119
|
-
var templateObject_1$
|
|
7155
|
+
var templateObject_1$K, templateObject_2$s;
|
|
7120
7156
|
|
|
7121
7157
|
/**
|
|
7122
7158
|
* @see https://mui.com/material-ui/react-chip/
|
|
@@ -7183,12 +7219,12 @@ var Chips = function (_a) {
|
|
|
7183
7219
|
return (jsx(Fragment, { children: chipLabels.map(function (label) { return (jsx(TagFilter, { label: label, onDelete: function () { return onDelete(label); }, onClick: function () { return onDelete(label); } }, label)); }) }));
|
|
7184
7220
|
};
|
|
7185
7221
|
|
|
7186
|
-
var Wrapper = styled$2("div")(templateObject_1$
|
|
7187
|
-
var StyledChipsWrapper = styled$2("div")(templateObject_2$
|
|
7222
|
+
var Wrapper = styled$2("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n min-width: 150px;\n"], ["\n min-width: 150px;\n"])));
|
|
7223
|
+
var StyledChipsWrapper = styled$2("div")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7188
7224
|
var spaces = getSpaces(props);
|
|
7189
7225
|
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n ");
|
|
7190
7226
|
});
|
|
7191
|
-
var templateObject_1$
|
|
7227
|
+
var templateObject_1$J, templateObject_2$r;
|
|
7192
7228
|
|
|
7193
7229
|
// Helper function to remove item from array
|
|
7194
7230
|
var removeItemFromArray = function (arr, tag) {
|
|
@@ -7343,7 +7379,7 @@ var doNotForwardProps$p = [
|
|
|
7343
7379
|
];
|
|
7344
7380
|
var StyledCard = styled$2(Card, {
|
|
7345
7381
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7346
|
-
})(templateObject_5$
|
|
7382
|
+
})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7347
7383
|
var _a, _b, _c, _d;
|
|
7348
7384
|
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;
|
|
7349
7385
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7359,13 +7395,13 @@ var StyledCard = styled$2(Card, {
|
|
|
7359
7395
|
var showDecorativeBorder = visualElementType === "image"
|
|
7360
7396
|
? boundingBox && decorativeBorder && imagePadding
|
|
7361
7397
|
: boundingBox && decorativeBorder;
|
|
7362
|
-
return css(templateObject_4$
|
|
7363
|
-
showDecorativeBorder && css(templateObject_2$
|
|
7364
|
-
showDecorativeBorder && css(templateObject_3$
|
|
7398
|
+
return 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 && 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" &&
|
|
7399
|
+
showDecorativeBorder && 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" &&
|
|
7400
|
+
showDecorativeBorder && 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));
|
|
7365
7401
|
});
|
|
7366
7402
|
var StyledCardActionArea = styled$2(Button, {
|
|
7367
7403
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7368
|
-
})(templateObject_6$
|
|
7404
|
+
})(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7369
7405
|
var _a, _b;
|
|
7370
7406
|
var _c = props.imagePosition, imagePosition = _c === void 0 ? "left" : _c, _d = props.cardSdsType, cardSdsType = _d === void 0 ? "wide" : _d, visualElementType = props.visualElementType;
|
|
7371
7407
|
var semanticColors = getSemanticColors(props);
|
|
@@ -7380,29 +7416,29 @@ var StyledCardActionArea = styled$2(Button, {
|
|
|
7380
7416
|
});
|
|
7381
7417
|
var StyledIconMediaWrapper = styled$2("div", {
|
|
7382
7418
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7383
|
-
})(templateObject_10$
|
|
7419
|
+
})(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7384
7420
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7385
7421
|
var spaces = getSpaces(props);
|
|
7386
|
-
return css(templateObject_9$
|
|
7387
|
-
? css(templateObject_7$
|
|
7422
|
+
return css(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), boundingBox
|
|
7423
|
+
? 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) : 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));
|
|
7388
7424
|
});
|
|
7389
7425
|
var StyledCardContent = styled$2("div", {
|
|
7390
7426
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7391
|
-
})(templateObject_13$
|
|
7427
|
+
})(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7392
7428
|
var _a = props.boundingBox, boundingBox = _a === void 0 ? true : _a;
|
|
7393
7429
|
var spaces = getSpaces(props);
|
|
7394
|
-
return css(templateObject_12$
|
|
7430
|
+
return 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 && 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));
|
|
7395
7431
|
});
|
|
7396
7432
|
var StyledContentCardBody = styled$2(CardContent, {
|
|
7397
7433
|
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
7398
|
-
})(templateObject_14$
|
|
7434
|
+
})(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyS$1, function (props) {
|
|
7399
7435
|
var _a;
|
|
7400
7436
|
var semanticColors = getSemanticColors(props);
|
|
7401
7437
|
var spaces = getSpaces(props);
|
|
7402
7438
|
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 ");
|
|
7403
7439
|
});
|
|
7404
|
-
var StyledCardContentAligner = styled$2("div")(templateObject_15$
|
|
7405
|
-
var templateObject_1$
|
|
7440
|
+
var StyledCardContentAligner = styled$2("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"])));
|
|
7441
|
+
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;
|
|
7406
7442
|
|
|
7407
7443
|
var doNotForwardProps$o = [
|
|
7408
7444
|
"visualElement",
|
|
@@ -7417,47 +7453,47 @@ var doNotForwardProps$o = [
|
|
|
7417
7453
|
];
|
|
7418
7454
|
var StyledTitleWrapper = styled$3("div", {
|
|
7419
7455
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7420
|
-
})(templateObject_1$
|
|
7456
|
+
})(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7421
7457
|
var spaces = getSpaces(props);
|
|
7422
7458
|
return "\n display: flex;\n flex-direction: column;\n gap: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n ");
|
|
7423
7459
|
});
|
|
7424
7460
|
var StyledOverlineText = styled$3("p", {
|
|
7425
7461
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7426
|
-
})(templateObject_2$
|
|
7462
|
+
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
7427
7463
|
var _a;
|
|
7428
7464
|
var semanticColors = getSemanticColors(props);
|
|
7429
7465
|
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 ");
|
|
7430
7466
|
});
|
|
7431
7467
|
var StyledTitleText = styled$3("p", {
|
|
7432
7468
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7433
|
-
})(templateObject_3$
|
|
7469
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderXl, function (props) {
|
|
7434
7470
|
var _a;
|
|
7435
7471
|
var semanticColors = getSemanticColors(props);
|
|
7436
7472
|
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 ");
|
|
7437
7473
|
});
|
|
7438
7474
|
var StyledSubtitleText = styled$3("p", {
|
|
7439
7475
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7440
|
-
})(templateObject_4$
|
|
7476
|
+
})(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderM$1, function (props) {
|
|
7441
7477
|
var _a;
|
|
7442
7478
|
var semanticColors = getSemanticColors(props);
|
|
7443
7479
|
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 ");
|
|
7444
7480
|
});
|
|
7445
7481
|
var StyledMetadataText = styled$3("p", {
|
|
7446
7482
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
7447
|
-
})(templateObject_5$
|
|
7483
|
+
})(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
7448
7484
|
var _a;
|
|
7449
7485
|
var semanticColors = getSemanticColors(props);
|
|
7450
7486
|
var spaces = getSpaces(props);
|
|
7451
7487
|
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 ");
|
|
7452
7488
|
});
|
|
7453
|
-
var templateObject_1$
|
|
7489
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$k, templateObject_4$i, templateObject_5$e;
|
|
7454
7490
|
|
|
7455
7491
|
var createTextComponent = function (StyledComponent) {
|
|
7456
7492
|
return function (_a) {
|
|
7457
7493
|
var text = _a.text, className = _a.className;
|
|
7458
7494
|
if (!text)
|
|
7459
7495
|
return null;
|
|
7460
|
-
return typeof text === "string" ? (jsx(StyledComponent, { className: className, children: text })) : (text);
|
|
7496
|
+
return typeof text === "string" ? (jsx(StyledComponent, { className: cn(className), children: text })) : (text);
|
|
7461
7497
|
};
|
|
7462
7498
|
};
|
|
7463
7499
|
var OverlineText = createTextComponent(StyledOverlineText);
|
|
@@ -7467,18 +7503,18 @@ var MetadataText = createTextComponent(StyledMetadataText);
|
|
|
7467
7503
|
var ContentCardTitle = forwardRef(function ContentCardTitle(props, ref) {
|
|
7468
7504
|
var overlineText = props.overlineText, titleText = props.titleText, subtitleText = props.subtitleText, metadataText = props.metadataText, _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a;
|
|
7469
7505
|
var cardHeader = classes.cardHeader, cardOverline = classes.cardOverline, cardTitle = classes.cardTitle, cardSubtitle = classes.cardSubtitle, cardMetadata = classes.cardMetadata;
|
|
7470
|
-
return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cardHeader, children: [jsx(OverlineText, { text: overlineText, className: cardOverline }), jsx(TitleText, { text: titleText, className: cardTitle }), jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7506
|
+
return (jsxs("div", { ref: ref, children: [jsxs(StyledTitleWrapper, { className: cn(cardHeader), children: [jsx(OverlineText, { text: overlineText, className: cardOverline }), jsx(TitleText, { text: titleText, className: cardTitle }), jsx(SubtitleText, { text: subtitleText, className: cardSubtitle })] }), jsx(MetadataText, { text: metadataText, className: cardMetadata })] }));
|
|
7471
7507
|
});
|
|
7472
7508
|
|
|
7473
7509
|
var doNotForwardProps$n = ["buttonsPosition"];
|
|
7474
7510
|
var StyledCardActions = styled$2(CardActions, {
|
|
7475
7511
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
7476
|
-
})(templateObject_1$
|
|
7512
|
+
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7477
7513
|
var _a = props.buttonsPosition, buttonsPosition = _a === void 0 ? "left" : _a;
|
|
7478
7514
|
var spaces = getSpaces(props);
|
|
7479
7515
|
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 ");
|
|
7480
7516
|
});
|
|
7481
|
-
var templateObject_1$
|
|
7517
|
+
var templateObject_1$G;
|
|
7482
7518
|
|
|
7483
7519
|
var isButtonElement = function (child) {
|
|
7484
7520
|
if (React__default.isValidElement(child) && child.type === Button) {
|
|
@@ -7522,11 +7558,11 @@ var ContentCardActions = forwardRef(function ContentCardActions(props, ref) {
|
|
|
7522
7558
|
if (!clickableCardButton) {
|
|
7523
7559
|
return null;
|
|
7524
7560
|
}
|
|
7525
|
-
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: [
|
|
7561
|
+
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cn(cardActions), children: [
|
|
7526
7562
|
React__default.cloneElement(clickableCardButton, __assign({ component: "div" }, clickableCardButton === null || clickableCardButton === void 0 ? void 0 : clickableCardButton.props)),
|
|
7527
7563
|
] }));
|
|
7528
7564
|
}
|
|
7529
|
-
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cardActions, children: validChildren }));
|
|
7565
|
+
return (jsx(StyledCardActions, { ref: ref, buttonsPosition: buttonsPosition, className: cn(cardActions), children: validChildren }));
|
|
7530
7566
|
});
|
|
7531
7567
|
|
|
7532
7568
|
var doNotForwardProps$m = [
|
|
@@ -7539,22 +7575,22 @@ var doNotForwardProps$m = [
|
|
|
7539
7575
|
];
|
|
7540
7576
|
var StyledImageMediaWrapper = styled$3("div", {
|
|
7541
7577
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
7542
|
-
})(templateObject_9$
|
|
7578
|
+
})(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7543
7579
|
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;
|
|
7544
7580
|
var spaces = getSpaces(props);
|
|
7545
|
-
return css$2(templateObject_8$
|
|
7581
|
+
return css$2(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
|
|
7546
7582
|
? imagePadding
|
|
7547
|
-
? css$2(templateObject_1$
|
|
7583
|
+
? css$2(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"
|
|
7548
7584
|
? "padding-right: 0;"
|
|
7549
|
-
: "padding-left: 0;") : css$2(templateObject_2$
|
|
7550
|
-
: css$2(templateObject_3$
|
|
7585
|
+
: "padding-left: 0;") : css$2(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7586
|
+
: css$2(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), imagePosition === "left"
|
|
7551
7587
|
? "padding-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")
|
|
7552
|
-
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$
|
|
7588
|
+
: "padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;")), sdsType === "narrow" && css$2(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n ", "\n\n justify-content: center;\n "], ["\n ", "\n\n justify-content: center;\n "])), boundingBox
|
|
7553
7589
|
? imagePadding
|
|
7554
|
-
? css$2(templateObject_4$
|
|
7555
|
-
: css$2(templateObject_6$
|
|
7590
|
+
? css$2(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) : css$2(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n padding: 0;\n "], ["\n padding: 0;\n "])))
|
|
7591
|
+
: css$2(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)));
|
|
7556
7592
|
});
|
|
7557
|
-
var templateObject_1$
|
|
7593
|
+
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;
|
|
7558
7594
|
|
|
7559
7595
|
/**
|
|
7560
7596
|
* @see https://mui.com/material-ui/api/card-media/
|
|
@@ -7647,8 +7683,8 @@ var ContentCard = React__default.forwardRef(function (props, ref) {
|
|
|
7647
7683
|
resizeObserver.disconnect();
|
|
7648
7684
|
};
|
|
7649
7685
|
}, [handleResize]);
|
|
7650
|
-
var visualElement = visualElementType === "image" && image ? (jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cardMedia })) : visualElementType === "icon" && icon ? (jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cardMedia, children: icon })) : null;
|
|
7651
|
-
var cardInnerContent = (jsxs(Fragment, { children: [visualElement, jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cardContent, children: [jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
|
|
7686
|
+
var visualElement = visualElementType === "image" && image ? (jsx(ContentCardImageMedia, { imagePadding: imagePadding, boundingBox: boundingBox, sdsType: dynamicSdsType, imageSize: imageSize, image: image, imagePosition: imagePosition, className: cn(cardMedia) })) : visualElementType === "icon" && icon ? (jsx(StyledIconMediaWrapper, { boundingBox: boundingBox, className: cn(cardMedia), children: icon })) : null;
|
|
7687
|
+
var cardInnerContent = (jsxs(Fragment, { children: [visualElement, jsxs(StyledCardContent, { boundingBox: boundingBox, clickableCard: clickableCard, className: cn(cardContent), children: [jsx(ContentCardTitle, { overlineText: overlineText, titleText: titleText, subtitleText: subtitleText, metadataText: metadataText, classes: {
|
|
7652
7688
|
cardHeader: cardHeader,
|
|
7653
7689
|
cardMetadata: cardMetadata,
|
|
7654
7690
|
cardOverline: cardOverline,
|
|
@@ -7657,20 +7693,18 @@ var ContentCard = React__default.forwardRef(function (props, ref) {
|
|
|
7657
7693
|
} }), jsx(StyledCardContentAligner, { children: enhanceChildrenWithCardActionsProps(children, clickableCard, buttonsPosition, {
|
|
7658
7694
|
cardActions: cardActions,
|
|
7659
7695
|
}) })] })] }));
|
|
7660
|
-
return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cardPaper, children: clickableCard ? (jsx(StyledCardActionArea, __assign({}, clickableCardProps, {
|
|
7696
|
+
return (jsx(StyledCard, __assign({ ref: mergeRefs([ref, cardRef]) }, props, { sdsType: dynamicSdsType, boundingBox: boundingBox, className: cn(cardPaper), children: clickableCard ? (jsx(StyledCardActionArea, __assign({}, clickableCardProps, {
|
|
7661
7697
|
// (masoudmanson): The following props are for internal use only and should not be user editable.
|
|
7662
7698
|
// To prevent users from overriding them, we use the spread operator to pass user provided props
|
|
7663
7699
|
// to the StyledCardActionArea component on top while hardcoding the rest after it.
|
|
7664
|
-
sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: clickableCardButton, children: cardInnerContent }))) : (cardInnerContent) })));
|
|
7700
|
+
sdsStyle: "minimal", cardSdsType: dynamicSdsType, visualElementType: visualElementType, imagePosition: imagePosition, className: cn(clickableCardButton), children: cardInnerContent }))) : (cardInnerContent) })));
|
|
7665
7701
|
});
|
|
7666
7702
|
|
|
7667
|
-
var DialogContext = createContext({ sdsSize: "m" });
|
|
7668
|
-
|
|
7669
7703
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
7670
7704
|
var doNotForwardProps$l = ["sdsSize"];
|
|
7671
7705
|
var StyledPaper = styled$2(Paper, {
|
|
7672
7706
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
7673
|
-
})(templateObject_1$
|
|
7707
|
+
})(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n & {\n ", "\n\n ", "\n }\n"], ["\n & {\n ", "\n\n ", "\n }\n"])), paperDimensions, function (props) {
|
|
7674
7708
|
var _a, _b;
|
|
7675
7709
|
var sdsSize = props.sdsSize;
|
|
7676
7710
|
var spaces = getSpaces(props);
|
|
@@ -7681,7 +7715,7 @@ var StyledPaper = styled$2(Paper, {
|
|
|
7681
7715
|
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 ");
|
|
7682
7716
|
});
|
|
7683
7717
|
function paperDimensions(props) {
|
|
7684
|
-
var
|
|
7718
|
+
var _a = props.sdsSize, sdsSize = _a === void 0 ? "m" : _a;
|
|
7685
7719
|
var sizeToDimensions = {
|
|
7686
7720
|
l: {
|
|
7687
7721
|
minHeight: "600px",
|
|
@@ -7700,82 +7734,27 @@ function paperDimensions(props) {
|
|
|
7700
7734
|
width: "400px",
|
|
7701
7735
|
},
|
|
7702
7736
|
};
|
|
7703
|
-
var
|
|
7737
|
+
var _b = sizeToDimensions[sdsSize], width = _b.width, minHeight = _b.minHeight;
|
|
7704
7738
|
return "\n width: ".concat(width, ";\n min-height: ").concat(minHeight, ";\n max-width: revert;\n box-sizing: border-box;\n ");
|
|
7705
7739
|
}
|
|
7706
|
-
var templateObject_1$
|
|
7740
|
+
var templateObject_1$E;
|
|
7707
7741
|
|
|
7708
7742
|
/**
|
|
7709
7743
|
* @see https://mui.com/material-ui/react-paper/
|
|
7710
7744
|
*/
|
|
7711
7745
|
var DialogPaper = forwardRef(function DialogPaper(props, ref) {
|
|
7712
|
-
|
|
7713
|
-
|
|
7714
|
-
return (jsx(StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, props)));
|
|
7715
|
-
} }));
|
|
7746
|
+
var _a = props.sdsSize, sdsSize = _a === void 0 ? "m" : _a, rest = __rest(props, ["sdsSize"]);
|
|
7747
|
+
return jsx(StyledPaper, __assign({ sdsSize: sdsSize, ref: ref }, rest));
|
|
7716
7748
|
});
|
|
7717
7749
|
|
|
7718
|
-
|
|
7719
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7720
|
-
*/
|
|
7721
|
-
var Dialog = forwardRef(function Dialog(props, ref) {
|
|
7722
|
-
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"]);
|
|
7723
|
-
var contextValue = useMemo(function () { return ({ sdsSize: sdsSize }); }, [sdsSize]);
|
|
7724
|
-
return (jsx(DialogContext.Provider, { value: contextValue, children: jsx(Dialog$1, __assign({ ref: ref, PaperComponent: PaperComponent }, rest, { onClose: function (event, reason) {
|
|
7725
|
-
if (!canClickOutsideClose &&
|
|
7726
|
-
reason &&
|
|
7727
|
-
(reason === "backdropClick" || reason === "escapeKeyDown"))
|
|
7728
|
-
return;
|
|
7729
|
-
if (onClose)
|
|
7730
|
-
onClose(event, reason);
|
|
7731
|
-
} })) }));
|
|
7732
|
-
});
|
|
7733
|
-
|
|
7734
|
-
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
7735
|
-
var doNotForwardProps$k = ["buttonPosition", "sdsSize"];
|
|
7736
|
-
var StyledDialogActions = styled$2(DialogActions$1, {
|
|
7737
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7738
|
-
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7739
|
-
var spaces = getSpaces(props);
|
|
7740
|
-
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a, sdsSize = props.sdsSize;
|
|
7741
|
-
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7742
|
-
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(dialogActionsClasses.spacing, " > :not(:first-of-type) {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
7743
|
-
});
|
|
7744
|
-
var templateObject_1$C;
|
|
7745
|
-
|
|
7746
|
-
/**
|
|
7747
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7748
|
-
*/
|
|
7749
|
-
var DialogActions = forwardRef(function DialogActions(props, ref) {
|
|
7750
|
-
var sdsSize = useContext(DialogContext).sdsSize;
|
|
7751
|
-
return jsx(StyledDialogActions, __assign({ ref: ref }, props, { sdsSize: sdsSize }));
|
|
7752
|
-
});
|
|
7753
|
-
|
|
7754
|
-
var doNotForwardProps$j = ["sdsSize"];
|
|
7755
|
-
var StyledDialogContent = styled$2(DialogContent, {
|
|
7756
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7757
|
-
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7758
|
-
var templateObject_1$B;
|
|
7759
|
-
|
|
7760
|
-
var index = forwardRef(
|
|
7761
|
-
/**
|
|
7762
|
-
* @see https://mui.com/material-ui/react-dialog/
|
|
7763
|
-
*/
|
|
7764
|
-
function DialogContent(props, ref) {
|
|
7765
|
-
return jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
7766
|
-
});
|
|
7767
|
-
|
|
7768
|
-
var doNotForwardProps$i = ["sdsSize"];
|
|
7769
|
-
var StyledButton = styled$2(Button, {
|
|
7770
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7771
|
-
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7750
|
+
var StyledButton = styled$2(Button)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
7772
7751
|
var sdsSize = props.sdsSize;
|
|
7773
7752
|
var isSmall = sdsSize === "small" || sdsSize === "medium";
|
|
7774
7753
|
var spaces = getSpaces(props);
|
|
7775
7754
|
var right = isSmall ? spaces === null || spaces === void 0 ? void 0 : spaces.xl : spaces === null || spaces === void 0 ? void 0 : spaces.xxl;
|
|
7776
7755
|
return "\n right: ".concat(right, "px;\n ");
|
|
7777
7756
|
});
|
|
7778
|
-
var templateObject_1$
|
|
7757
|
+
var templateObject_1$D;
|
|
7779
7758
|
|
|
7780
7759
|
var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
7781
7760
|
l: "large",
|
|
@@ -7784,25 +7763,24 @@ var SDS_SIZE_TO_COMPONENT_SIZE = {
|
|
|
7784
7763
|
xs: "small",
|
|
7785
7764
|
};
|
|
7786
7765
|
var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
7787
|
-
|
|
7788
|
-
|
|
7789
|
-
|
|
7790
|
-
|
|
7791
|
-
} }));
|
|
7766
|
+
var _a;
|
|
7767
|
+
var _b = props.dialogSize, dialogSize = _b === void 0 ? "m" : _b, onClick = props.onClick, className = props.className, rest = __rest(props, ["dialogSize", "onClick", "className"]);
|
|
7768
|
+
var size = (_a = SDS_SIZE_TO_COMPONENT_SIZE[dialogSize]) !== null && _a !== void 0 ? _a : "large";
|
|
7769
|
+
return (jsx(StyledButton, __assign({ "aria-label": "Close", ref: ref, onClick: onClick, sdsSize: size, icon: "XMark", sdsStyle: "icon", sdsType: "tertiary", className: className }, rest)));
|
|
7792
7770
|
});
|
|
7793
7771
|
|
|
7794
|
-
var doNotForwardProps$
|
|
7772
|
+
var doNotForwardProps$k = ["sdsSize"];
|
|
7795
7773
|
var StyledDialogTitle = styled$2(DialogTitle$1, {
|
|
7796
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7797
|
-
})(templateObject_1$
|
|
7774
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7775
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0;\n ", "\n"], ["\n padding: 0;\n ", "\n"])), function (props) {
|
|
7798
7776
|
var sdsSize = props.sdsSize;
|
|
7799
7777
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7800
7778
|
var spaces = getSpaces(props);
|
|
7801
7779
|
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 ");
|
|
7802
7780
|
});
|
|
7803
7781
|
var Title = styled$2(Typography, {
|
|
7804
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7805
|
-
})(templateObject_2$
|
|
7782
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7783
|
+
})(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7806
7784
|
var _a;
|
|
7807
7785
|
var sdsSize = props.sdsSize;
|
|
7808
7786
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7813,8 +7791,8 @@ var Title = styled$2(Typography, {
|
|
|
7813
7791
|
];
|
|
7814
7792
|
});
|
|
7815
7793
|
var Subtitle = styled$2(Typography, {
|
|
7816
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7817
|
-
})(templateObject_3$
|
|
7794
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7795
|
+
})(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7818
7796
|
var _a;
|
|
7819
7797
|
var sdsSize = props.sdsSize;
|
|
7820
7798
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7825,8 +7803,8 @@ var Subtitle = styled$2(Typography, {
|
|
|
7825
7803
|
];
|
|
7826
7804
|
});
|
|
7827
7805
|
var Overline = styled$2(Typography, {
|
|
7828
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
7829
|
-
})(templateObject_4$
|
|
7806
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
7807
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7830
7808
|
var _a;
|
|
7831
7809
|
var sdsSize = props.sdsSize;
|
|
7832
7810
|
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
@@ -7837,16 +7815,218 @@ var Overline = styled$2(Typography, {
|
|
|
7837
7815
|
"\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 "),
|
|
7838
7816
|
];
|
|
7839
7817
|
});
|
|
7840
|
-
var templateObject_1$
|
|
7818
|
+
var templateObject_1$C, templateObject_2$n, templateObject_3$i, templateObject_4$g;
|
|
7819
|
+
|
|
7820
|
+
var DialogTitle = forwardRef(function DialogTitle(props, ref) {
|
|
7821
|
+
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"]);
|
|
7822
|
+
var rootClassName = classes.root, titleClassName = classes.title, subtitleClassName = classes.subtitle, overlineClassName = classes.overline, closeButtonClassName = classes.closeButton;
|
|
7823
|
+
return (jsx(StyledDialogTitle, __assign({ ref: ref, sdsSize: sdsSize, className: cn(rootClassName) }, rest, { children: children || (jsxs(Fragment, { children: [onClose && (jsx(CloseButton, { onClick: onClose, dialogSize: sdsSize, className: cn(closeButtonClassName) })), jsx(Overline, { sdsSize: sdsSize, className: cn(overlineClassName), children: overline }), jsx(Title, { sdsSize: sdsSize, className: cn(titleClassName), children: title }), jsx(Subtitle, { sdsSize: sdsSize, className: cn(subtitleClassName), children: subtitle })] })) })));
|
|
7824
|
+
});
|
|
7825
|
+
|
|
7826
|
+
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
7827
|
+
var doNotForwardProps$j = ["buttonPosition", "sdsSize"];
|
|
7828
|
+
var StyledDialogActions = styled$2(DialogActions$1, {
|
|
7829
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
7830
|
+
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
7831
|
+
var spaces = getSpaces(props);
|
|
7832
|
+
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a, sdsSize = props.sdsSize;
|
|
7833
|
+
var isSmall = sdsSize === "xs" || sdsSize === "s";
|
|
7834
|
+
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(dialogActionsClasses.spacing, " > :not(:first-of-type) {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
7835
|
+
});
|
|
7836
|
+
var templateObject_1$B;
|
|
7837
|
+
|
|
7838
|
+
/**
|
|
7839
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
7840
|
+
*/
|
|
7841
|
+
var DialogActions = forwardRef(function DialogActions(props, ref) {
|
|
7842
|
+
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"]);
|
|
7843
|
+
var rootClassName = classes.root;
|
|
7844
|
+
return (jsx(StyledDialogActions, __assign({ ref: ref, sdsSize: sdsSize, className: cn(rootClassName) }, rest)));
|
|
7845
|
+
});
|
|
7841
7846
|
|
|
7842
7847
|
/**
|
|
7843
7848
|
* @see https://mui.com/material-ui/react-dialog/
|
|
7844
7849
|
*/
|
|
7845
|
-
var
|
|
7846
|
-
var
|
|
7847
|
-
var
|
|
7848
|
-
|
|
7850
|
+
var Dialog = forwardRef(function Dialog(props, ref) {
|
|
7851
|
+
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"]);
|
|
7852
|
+
var rootClassName = classes.root, paperClassName = classes.paper;
|
|
7853
|
+
// Create a wrapper for PaperComponent that injects sdsSize
|
|
7854
|
+
var PaperWithSize = React__default.useCallback(function (paperProps) { return (jsx(PaperComponent, __assign({}, paperProps, { sdsSize: sdsSize, className: cn(paperClassName, paperProps.className) }))); }, [PaperComponent, paperClassName, sdsSize]);
|
|
7855
|
+
return (jsx(Dialog$1, __assign({ ref: ref, className: cn(rootClassName), PaperComponent: PaperWithSize, onClose: function (event, reason) {
|
|
7856
|
+
if (!canClickOutsideClose &&
|
|
7857
|
+
reason &&
|
|
7858
|
+
(reason === "backdropClick" || reason === "escapeKeyDown"))
|
|
7859
|
+
return;
|
|
7860
|
+
if (onClose)
|
|
7861
|
+
onClose(event, reason);
|
|
7862
|
+
} }, rest, { children: React__default.Children.map(children, function (child) {
|
|
7863
|
+
if (!React__default.isValidElement(child))
|
|
7864
|
+
return child;
|
|
7865
|
+
// Only pass sdsSize to DialogTitle and DialogActions components
|
|
7866
|
+
if (child.type === DialogTitle || child.type === DialogActions) {
|
|
7867
|
+
return React__default.cloneElement(child, { sdsSize: sdsSize });
|
|
7868
|
+
}
|
|
7869
|
+
return child;
|
|
7870
|
+
}) })));
|
|
7871
|
+
});
|
|
7872
|
+
|
|
7873
|
+
var doNotForwardProps$i = ["sdsSize"];
|
|
7874
|
+
var StyledDialogContent = styled$2(DialogContent, {
|
|
7875
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
7876
|
+
})(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n padding: 0;\n"], ["\n ", "\n padding: 0;\n"])), fontBodyS$1);
|
|
7877
|
+
var templateObject_1$A;
|
|
7878
|
+
|
|
7879
|
+
var index = forwardRef(
|
|
7880
|
+
/**
|
|
7881
|
+
* @see https://mui.com/material-ui/react-dialog/
|
|
7882
|
+
*/
|
|
7883
|
+
function DialogContent(props, ref) {
|
|
7884
|
+
var _a = props.classes, classes = _a === void 0 ? EMPTY_OBJECT : _a, rest = __rest(props, ["classes"]);
|
|
7885
|
+
var rootClassName = classes.root;
|
|
7886
|
+
return (jsx(StyledDialogContent, __assign({ ref: ref, className: cn(rootClassName) }, rest)));
|
|
7887
|
+
});
|
|
7888
|
+
|
|
7889
|
+
var HeroMargins = {
|
|
7890
|
+
SMALL: "24px",
|
|
7891
|
+
MEDIUM: "40px",
|
|
7892
|
+
LARGE: "120px",
|
|
7893
|
+
};
|
|
7894
|
+
var textAlignmentMapping = {
|
|
7895
|
+
left: "flex-start",
|
|
7896
|
+
center: "center",
|
|
7897
|
+
right: "flex-end",
|
|
7898
|
+
};
|
|
7899
|
+
var overlayContentPositionAlignMapping = {
|
|
7900
|
+
"top-left": "flex-start",
|
|
7901
|
+
top: "center",
|
|
7902
|
+
"top-right": "flex-end",
|
|
7903
|
+
left: "flex-start",
|
|
7904
|
+
center: "center",
|
|
7905
|
+
right: "flex-end",
|
|
7906
|
+
"bottom-left": "flex-start",
|
|
7907
|
+
bottom: "center",
|
|
7908
|
+
"bottom-right": "flex-end",
|
|
7909
|
+
};
|
|
7910
|
+
var overlayContentPositionJustifyMapping = {
|
|
7911
|
+
"top-left": "flex-start",
|
|
7912
|
+
top: "flex-start",
|
|
7913
|
+
"top-right": "flex-start",
|
|
7914
|
+
left: "center",
|
|
7915
|
+
center: "center",
|
|
7916
|
+
right: "center",
|
|
7917
|
+
"bottom-left": "flex-end",
|
|
7918
|
+
bottom: "flex-end",
|
|
7919
|
+
"bottom-right": "flex-end",
|
|
7920
|
+
};
|
|
7921
|
+
|
|
7922
|
+
var doNotForwardProps$h = [
|
|
7923
|
+
"heroHeight",
|
|
7924
|
+
"overlayContainerMinMargin",
|
|
7925
|
+
"backgroundFillColor",
|
|
7926
|
+
"overlayContentPosition",
|
|
7927
|
+
];
|
|
7928
|
+
var getResponsivePadding = function (props) {
|
|
7929
|
+
var overlayContainerMinMargin = props.overlayContainerMinMargin;
|
|
7930
|
+
var spaces = getSpaces(props);
|
|
7931
|
+
var breakpoints = getBreakpoints(props);
|
|
7932
|
+
return 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);
|
|
7933
|
+
};
|
|
7934
|
+
// Main Hero Container
|
|
7935
|
+
var StyledHeroContainer = styled$2("section", {
|
|
7936
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
7937
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7938
|
+
var _a = props.heroHeight, heroHeight = _a === void 0 ? "fit-content" : _a, overlayContentPosition = props.overlayContentPosition, backgroundFillColor = props.backgroundFillColor;
|
|
7939
|
+
var breakpoints = getBreakpoints(props);
|
|
7940
|
+
return 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
|
|
7941
|
+
? overlayContentPositionAlignMapping[overlayContentPosition]
|
|
7942
|
+
: "center", overlayContentPosition
|
|
7943
|
+
? overlayContentPositionJustifyMapping[overlayContentPosition]
|
|
7944
|
+
: "center", backgroundFillColor ? "background-color: ".concat(backgroundFillColor, ";") : "", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("md"));
|
|
7945
|
+
});
|
|
7946
|
+
var BackgroundFillContainer = styled$2("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"])));
|
|
7947
|
+
var OverlayContent = styled$2("div")(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7948
|
+
var textAlignment = props.textAlignment, _a = props.overlayContentWidth, overlayContentWidth = _a === void 0 ? "100%" : _a;
|
|
7949
|
+
return 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
|
|
7950
|
+
? textAlignmentMapping[textAlignment]
|
|
7951
|
+
: "start", textAlignment, overlayContentWidth);
|
|
7952
|
+
});
|
|
7953
|
+
var HeroTitle = styled$2("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) {
|
|
7954
|
+
var _a = props.headerFontSize, headerFontSize = _a === void 0 ? "m" : _a;
|
|
7955
|
+
if (headerFontSize === "s") {
|
|
7956
|
+
return fontHeaderS(props);
|
|
7957
|
+
}
|
|
7958
|
+
else if (headerFontSize === "m") {
|
|
7959
|
+
return fontHeaderM$1(props);
|
|
7960
|
+
}
|
|
7961
|
+
else if (headerFontSize === "l") {
|
|
7962
|
+
return fontHeaderL(props);
|
|
7963
|
+
}
|
|
7964
|
+
}, function (props) {
|
|
7965
|
+
var _a, _b;
|
|
7966
|
+
var hasInvertTextColor = props.hasInvertTextColor;
|
|
7967
|
+
var semanticColors = getSemanticColors(props);
|
|
7968
|
+
return css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), hasInvertTextColor
|
|
7969
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
7970
|
+
: (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary);
|
|
7971
|
+
});
|
|
7972
|
+
var HeroCaption = styled$2("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) {
|
|
7973
|
+
var _a, _b;
|
|
7974
|
+
var hasInvertTextColor = props.hasInvertTextColor;
|
|
7975
|
+
var semanticColors = getSemanticColors(props);
|
|
7976
|
+
var spaces = getSpaces(props);
|
|
7977
|
+
return 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
|
|
7978
|
+
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse
|
|
7979
|
+
: (_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);
|
|
7980
|
+
});
|
|
7981
|
+
var ContentSlot = styled$2("div")(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7982
|
+
var spaces = getSpaces(props);
|
|
7983
|
+
return 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);
|
|
7849
7984
|
});
|
|
7985
|
+
var DarkeningMask = styled$2("div")(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7986
|
+
var _a = props.darkeningMaskColor, darkeningMaskColor = _a === void 0 ? "#000000" : _a, _b = props.darkeningMaskOpacity, darkeningMaskOpacity = _b === void 0 ? 0 : _b;
|
|
7987
|
+
return 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);
|
|
7988
|
+
});
|
|
7989
|
+
styled$2("div")(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7990
|
+
var _a, _b;
|
|
7991
|
+
var semanticColors = getSemanticColors(props);
|
|
7992
|
+
return 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);
|
|
7993
|
+
});
|
|
7994
|
+
var DarkeningVignette = styled$2("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"])));
|
|
7995
|
+
var OverlayMediaWrapper = styled$2("div")(templateObject_19$2 || (templateObject_19$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
7996
|
+
var overlayMediaPosition = props.overlayMediaPosition;
|
|
7997
|
+
return 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
|
|
7998
|
+
? overlayContentPositionAlignMapping[overlayMediaPosition]
|
|
7999
|
+
: "center", overlayMediaPosition
|
|
8000
|
+
? overlayContentPositionJustifyMapping[overlayMediaPosition]
|
|
8001
|
+
: "center");
|
|
8002
|
+
});
|
|
8003
|
+
var OverlayMedia = styled$2("div")(templateObject_21$2 || (templateObject_21$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
8004
|
+
var overlayMediaMaxHeight = props.overlayMediaMaxHeight, overlayMediaMaxWidth = props.overlayMediaMaxWidth, overlayMediaMargin = props.overlayMediaMargin;
|
|
8005
|
+
var breakpoints = getBreakpoints(props);
|
|
8006
|
+
return 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
|
|
8007
|
+
? typeof overlayMediaMargin === "string"
|
|
8008
|
+
? overlayMediaMargin
|
|
8009
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.large
|
|
8010
|
+
: "0", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("lg"), overlayMediaMargin
|
|
8011
|
+
? typeof overlayMediaMargin === "string"
|
|
8012
|
+
? overlayMediaMargin
|
|
8013
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.medium
|
|
8014
|
+
: "0", breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints.down("md"), overlayMediaMargin
|
|
8015
|
+
? typeof overlayMediaMargin === "string"
|
|
8016
|
+
? overlayMediaMargin
|
|
8017
|
+
: overlayMediaMargin === null || overlayMediaMargin === void 0 ? void 0 : overlayMediaMargin.small
|
|
8018
|
+
: "0");
|
|
8019
|
+
});
|
|
8020
|
+
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;
|
|
8021
|
+
|
|
8022
|
+
var Hero = React__default.forwardRef(function (props, ref) {
|
|
8023
|
+
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"]);
|
|
8024
|
+
// Determine if backgroundFill is a color string or a React node
|
|
8025
|
+
var isBackgroundFillColorString = typeof backgroundFill === "string" && !isValidElement(backgroundFill);
|
|
8026
|
+
var isBackgroundFillReactNode = isValidElement(backgroundFill);
|
|
8027
|
+
return (jsxs(StyledHeroContainer, __assign({ ref: ref, heroHeight: heroHeight, backgroundFillColor: isBackgroundFillColorString ? backgroundFill : undefined }, rest, { children: [isBackgroundFillReactNode && (jsx(BackgroundFillContainer, { children: backgroundFill })), darkeningMask && (jsx(DarkeningMask, { darkeningMaskColor: darkeningMaskColor, darkeningMaskOpacity: darkeningMaskOpacity })), overlayMedia && (jsx(OverlayMediaWrapper, { overlayMediaPosition: overlayMediaPosition, children: jsx(OverlayMedia, { overlayMediaPosition: overlayMediaPosition, overlayMediaMaxHeight: overlayMediaMaxHeight, overlayMediaMaxWidth: overlayMediaMaxWidth, overlayMediaMargin: overlayMediaMargin, children: overlayMedia }) })), jsxs(OverlayContent, { overlayContentWidth: overlayContentWidth, textAlignment: textAlignment, children: [headerText && (jsx(HeroTitle, { headerFontSize: headerFontSize, hasInvertTextColor: hasInvertTextColor, children: headerText })), captionText && (jsx(HeroCaption, { hasInvertTextColor: hasInvertTextColor, children: captionText })), children && jsx(ContentSlot, { children: children })] }), darkeningVignette && jsx(DarkeningVignette, {})] })));
|
|
8028
|
+
});
|
|
8029
|
+
Hero.displayName = "Hero";
|
|
7850
8030
|
|
|
7851
8031
|
var intentToColor$1 = {
|
|
7852
8032
|
default: "base",
|
|
@@ -7906,7 +8086,8 @@ var templateObject_1$y, templateObject_2$l, templateObject_3$g, templateObject_4
|
|
|
7906
8086
|
* @see https://mui.com/material-ui/react-checkbox/
|
|
7907
8087
|
*/
|
|
7908
8088
|
var InputCheckbox = function (props) {
|
|
7909
|
-
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"]);
|
|
8089
|
+
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"]);
|
|
8090
|
+
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;
|
|
7910
8091
|
var newProps;
|
|
7911
8092
|
switch (stage) {
|
|
7912
8093
|
case "checked":
|
|
@@ -7921,12 +8102,8 @@ var InputCheckbox = function (props) {
|
|
|
7921
8102
|
default:
|
|
7922
8103
|
newProps = rest;
|
|
7923
8104
|
}
|
|
7924
|
-
var finalLabel = caption ? (jsxs(StyledLabelContainer$1, { children: [jsx(StyledCheckboxLabel, { children: label }), jsx(StyledCheckboxCaption, { children: caption })] })) : (jsx(StyledLabelContainer$1, { children: jsx(StyledCheckboxLabel, { children: label }) }));
|
|
7925
|
-
return (jsx(StyledFormControlLabel$1, { control: jsx(StyledCheckbox
|
|
7926
|
-
// disabled={disabled}
|
|
7927
|
-
, __assign({
|
|
7928
|
-
// disabled={disabled}
|
|
7929
|
-
checkedIcon: jsx(StyledCheckboxCheckedIcon, { children: jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsx(StyledCheckboxDefaultIcon, { intent: intent }), indeterminateIcon: jsx(StyledCheckboxCheckedIcon, { children: jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
|
|
8105
|
+
var finalLabel = caption ? (jsxs(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: [jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }), jsx(StyledCheckboxCaption, { className: cn(captionClassName), children: caption })] })) : (jsx(StyledLabelContainer$1, { className: cn(labelCaptionContainerClassName), children: jsx(StyledCheckboxLabel, { className: cn(labelClassName), children: label }) }));
|
|
8106
|
+
return (jsx(StyledFormControlLabel$1, { control: jsx(StyledCheckbox, __assign({ className: cn(checkboxClassName), checkedIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxCheckedIconClassName), children: jsx(StyledIcon, { sdsIcon: "Check", sdsSize: "xs" }) }), icon: jsx(StyledCheckboxDefaultIcon, { intent: intent, className: cn(checkboxDefaultIconClassName) }), indeterminateIcon: jsx(StyledCheckboxCheckedIcon, { className: cn(checkboxIndeterminateIconClassName), children: jsx(StyledIcon, { sdsIcon: "Minus", sdsSize: "xs" }) }), intent: intent }, checkboxProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(rootClassName, className) }));
|
|
7930
8107
|
};
|
|
7931
8108
|
|
|
7932
8109
|
var intentToColor = {
|
|
@@ -7986,7 +8163,7 @@ var templateObject_1$x, templateObject_2$k, templateObject_3$f, templateObject_4
|
|
|
7986
8163
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
7987
8164
|
*/
|
|
7988
8165
|
var InputRadio = function (props) {
|
|
7989
|
-
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;
|
|
8166
|
+
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;
|
|
7990
8167
|
// (masoudmanson): We don't need to pass the label prop to the radio component
|
|
7991
8168
|
// so we are destructuring it here.
|
|
7992
8169
|
var label = props.label, restProps = __rest(props, ["label"]);
|
|
@@ -8006,8 +8183,8 @@ var InputRadio = function (props) {
|
|
|
8006
8183
|
// Otherwise, the screen reader will read the label twice!
|
|
8007
8184
|
var labelId = "".concat(value, "-label");
|
|
8008
8185
|
var captionId = caption ? "".concat(value, "-caption") : undefined;
|
|
8009
|
-
var finalLabel = caption ? (jsxs(StyledLabelContainer, { className: labelCaptionContainer, children: [jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }), jsx(StyledRadioCaption, { id: captionId, className: captionClassName, children: caption })] })) : (jsx(StyledLabelContainer, { className: labelCaptionContainer, children: jsx(StyledRadioLabel, { id: labelId, className: labelClassName, children: label }) }));
|
|
8010
|
-
return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ className: radioButtonClassName, checkedIcon: jsx(StyledRadioCheckedIcon, { className: radioCheckedIconClassName, children: jsx(StyledRadioDot, { className: radioCheckedIconDotClassName }) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent, className: radioDefaultIconClassName }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: root }));
|
|
8186
|
+
var finalLabel = caption ? (jsxs(StyledLabelContainer, { className: cn(labelCaptionContainer), children: [jsx(StyledRadioLabel, { id: labelId, className: cn(labelClassName), children: label }), jsx(StyledRadioCaption, { id: captionId, className: cn(captionClassName), children: caption })] })) : (jsx(StyledLabelContainer, { className: cn(labelCaptionContainer), children: jsx(StyledRadioLabel, { id: labelId, className: cn(labelClassName), children: label }) }));
|
|
8187
|
+
return (jsx(StyledFormControlLabel, { control: jsx(StyledRadioButton, __assign({ className: cn(radioButtonClassName), checkedIcon: jsx(StyledRadioCheckedIcon, { className: cn(radioCheckedIconClassName), children: jsx(StyledRadioDot, { className: cn(radioCheckedIconDotClassName) }) }), icon: jsx(StyledRadioDefaultIcon, { intent: intent, className: cn(radioDefaultIconClassName) }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value, className: cn(root, className) }));
|
|
8011
8188
|
};
|
|
8012
8189
|
|
|
8013
8190
|
var inputSlider = function (props) {
|
|
@@ -8093,7 +8270,8 @@ var templateObject_1$v, templateObject_2$j, templateObject_3$e, templateObject_4
|
|
|
8093
8270
|
* @see https://mui.com/material-ui/react-text-field/
|
|
8094
8271
|
*/
|
|
8095
8272
|
var InputText = forwardRef(function InputText(props, ref) {
|
|
8096
|
-
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"]);
|
|
8273
|
+
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"]);
|
|
8274
|
+
var rootClassName = classes.root, labelClassName = classes.label, inputClassName = classes.input;
|
|
8097
8275
|
/**
|
|
8098
8276
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
8099
8277
|
*/
|
|
@@ -8115,8 +8293,8 @@ var InputText = forwardRef(function InputText(props, ref) {
|
|
|
8115
8293
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
8116
8294
|
return jsx(Fragment, {});
|
|
8117
8295
|
}
|
|
8118
|
-
var finalLabel = typeof label === "string" ? (jsx(StyledLabel$1, { htmlFor: id, children: label })) : (label);
|
|
8119
|
-
return (jsxs(
|
|
8296
|
+
var finalLabel = typeof label === "string" ? (jsx(StyledLabel$1, { htmlFor: id, className: cn(labelClassName), children: label })) : (label);
|
|
8297
|
+
return (jsxs("div", { className: cn(rootClassName), children: [!hideLabel && finalLabel, 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))] }));
|
|
8120
8298
|
});
|
|
8121
8299
|
|
|
8122
8300
|
var toggle = function (props) {
|
|
@@ -8189,7 +8367,7 @@ var StyledLink = styled$2(Link$1, {
|
|
|
8189
8367
|
return !doNotForwardProps$g.includes(prop.toString());
|
|
8190
8368
|
},
|
|
8191
8369
|
})(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) {
|
|
8192
|
-
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a,
|
|
8370
|
+
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;
|
|
8193
8371
|
return 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");
|
|
8194
8372
|
});
|
|
8195
8373
|
var templateObject_1$t, templateObject_2$i, templateObject_3$d, templateObject_4$b;
|
|
@@ -8198,12 +8376,8 @@ var templateObject_1$t, templateObject_2$i, templateObject_3$d, templateObject_4
|
|
|
8198
8376
|
* @see https://mui.com/material-ui/react-link/
|
|
8199
8377
|
*/
|
|
8200
8378
|
var Link = forwardRef(function (props, ref) {
|
|
8201
|
-
var
|
|
8202
|
-
|
|
8203
|
-
if (sdsStyle === "default") {
|
|
8204
|
-
underline = "none";
|
|
8205
|
-
}
|
|
8206
|
-
return jsx(StyledLink, __assign({}, props, { underline: underline, ref: ref }));
|
|
8379
|
+
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "default" : _a, rest = __rest(props, ["sdsStyle"]);
|
|
8380
|
+
return (jsx(StyledLink, __assign({}, rest, { sdsStyle: sdsStyle, underline: sdsStyle === "default" ? "hover" : "always", ref: ref })));
|
|
8207
8381
|
});
|
|
8208
8382
|
|
|
8209
8383
|
// (thuang): Please keep this in sync with the props used in `ListExtraProps`
|
|
@@ -16353,4 +16527,4 @@ var TooltipTableContent = function (props) {
|
|
|
16353
16527
|
return (jsxs(StyledTableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [showSectionHeader && (jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label })), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
|
|
16354
16528
|
};
|
|
16355
16529
|
|
|
16356
|
-
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index as DialogContent,
|
|
16530
|
+
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, ButtonToggle, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, ContentCard, ContentCardActions, StyledContentCardBody as ContentCardBody, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, StyledSubtitleText as ContentCardSubtitle, StyledTitleText as ContentCardTitle, Dialog, DialogActions, index as DialogContent, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Hero, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationFooter, NavigationHeader, NavigationJumpTo, Notification, Pagination, Panel, SDSChooseTheme, SDSDarkAppTheme, SDSDarkThemeColors, SDSLightAppTheme, SDSLightThemeColors, SDSPaletteDark, SDSPaletteLight, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Theme, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme$4 as defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeMediumS, fontCodeMediumXs, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontLink, fontLinkL, fontLinkM, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkS, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontTabular, fontTabularMediumS, fontTabularMediumXs, fontTabularMediumXxs, fontTabularMediumXxxs, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularSemiboldXxs, fontTabularSemiboldXxxs, fontTabularXs, fontTabularXxs, fontTabularXxxs, fontTitle, fontTitleBoldL, fontTitleBoldM, fontTitleBoldS, getBorders, getBreakpoints, getColors, getCorners, getFontWeights, getIconSizes, getMode, getPalette, getSemanticColors, getShadows, getSpaces, getSpacings, getTypography, makeSdsSemanticAppTheme, makeThemeOptions };
|