@innovaccer/design-system 4.0.0-4 → 4.0.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/CHANGELOG.md +36 -0
- package/css/dist/index.css +2 -28
- package/css/dist/index.css.map +1 -1
- package/css/src/components/dropdown.module.css +1 -0
- package/css/src/components/grid.module.css +0 -17
- package/css/src/components/pagination.module.css +1 -1
- package/css/src/components/tabs.module.css +0 -10
- package/dist/brotli/index.js +1 -1
- package/dist/brotli/index.js.br +0 -0
- package/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +511 -501
- package/dist/gzip/index.js +1 -1
- package/dist/gzip/index.js.gz +0 -0
- package/dist/index.js +752 -740
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +3092 -3118
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
/**
|
|
3
|
-
* Generated on: 2024-12-
|
|
3
|
+
* Generated on: 2024-12-24T22:51:11.340Z
|
|
4
4
|
* Package: @innovaccer/design-system
|
|
5
|
-
* Version: v4.0.0
|
|
5
|
+
* Version: v4.0.0
|
|
6
6
|
* License: MIT
|
|
7
7
|
* Docs: https://mds.innovaccer.com
|
|
8
8
|
*/
|
|
@@ -982,8 +982,8 @@ function styleInject(css, ref) {
|
|
|
982
982
|
}
|
|
983
983
|
}
|
|
984
984
|
|
|
985
|
-
var css_248z$1f = "/* Avatar */\n\n.
|
|
986
|
-
var avatarStyles = {"Avatar":"
|
|
985
|
+
var css_248z$1f = "/* Avatar */\n\n.Avatar-v4-0-0bvyht {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n text-transform: uppercase;\n border-radius: 50%;\n cursor: default;\n position: relative;\n}\n\n.Avatar--default-v4-0-0qxv5q:focus,\n.Avatar--default-v4-0-0qxv5q:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.Avatar-wrapper--square-v4-0-0ax5pz {\n padding: var(--spacing-xs);\n box-sizing: border-box;\n}\n\n.Avatar--square-v4-0-0f1adt {\n width: 100%;\n height: 100%;\n border-radius: var(--spacing-m);\n}\n\n.Avatar--regular-v4-0-0jczcb {\n height: var(--spacing-3);\n width: var(--spacing-3);\n}\n\n.Avatar--tiny-v4-0-0rby9r {\n height: var(--spacing-xl);\n width: var(--spacing-xl);\n}\n\n.Avatar--noInitials-v4-0-0ouxp3 {\n cursor: default;\n}\n\n.Avatar--disabled-v4-0-0ndsoo {\n cursor: not-allowed;\n}\n\n.Avatar--disabled-v4-0-0ndsoo::after {\n opacity: var(--opacity-20);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n position: absolute;\n pointer-events: none;\n content: '';\n background-color: var(--white);\n}\n\n.Avatar--primary-v4-0-03t9vf {\n background: var(--primary);\n}\n\n.Avatar--secondary-v4-0-0oxrt4 {\n background: var(--secondary-light);\n}\n\n.Avatar--success-v4-0-0thja0 {\n background: var(--success);\n}\n\n.Avatar--alert-v4-0-04sfvv {\n background: var(--alert);\n}\n\n.Avatar--warning-v4-0-0jzlfl {\n background: var(--warning);\n}\n\n.Avatar--accent1-v4-0-0i2zwl {\n background: var(--accent1);\n}\n\n.Avatar--accent2-v4-0-0i2zwl {\n background: var(--accent2);\n}\n\n.Avatar--accent3-v4-0-0i2zwl {\n background: var(--accent3);\n}\n\n.Avatar--accent4-v4-0-0i2zwl {\n background: var(--accent4);\n}\n\n.Avatar-content--tiny-v4-0-0xko1f {\n line-height: var(--font-height-s) !important;\n font-size: 10px !important;\n}\n\n.Avatar-content-v4-0-0ocmon {\n color: var(--inverse) !important;\n opacity: var(--opacity-20);\n mix-blend-mode: multiply;\n}\n\n.Avatar-presence-v4-0-0wu2yx {\n position: absolute;\n border-radius: 50%;\n width: var(--spacing);\n height: var(--spacing);\n right: 0;\n bottom: 0;\n}\n\n.Avatar-presence--active-v4-0-0bgiad {\n background: var(--success);\n}\n\n.Avatar-presence--away-v4-0-0tp9b1 {\n background: var(--secondary-dark);\n}\n\n.Avatar-status-v4-0-0wt98v {\n top: calc(-1 * var(--spacing-s));\n right: calc(-1 * var(--spacing-s));\n width: var(--spacing-l);\n height: var(--spacing-l);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n cursor: pointer;\n overflow: hidden;\n}\n";
|
|
986
|
+
var avatarStyles = {"Avatar":"Avatar-v4-0-0bvyht","Avatar--default":"Avatar--default-v4-0-0qxv5q","Avatar-wrapper--square":"Avatar-wrapper--square-v4-0-0ax5pz","Avatar--square":"Avatar--square-v4-0-0f1adt","Avatar--regular":"Avatar--regular-v4-0-0jczcb","Avatar--tiny":"Avatar--tiny-v4-0-0rby9r","Avatar--noInitials":"Avatar--noInitials-v4-0-0ouxp3","Avatar--disabled":"Avatar--disabled-v4-0-0ndsoo","Avatar--primary":"Avatar--primary-v4-0-03t9vf","Avatar--secondary":"Avatar--secondary-v4-0-0oxrt4","Avatar--success":"Avatar--success-v4-0-0thja0","Avatar--alert":"Avatar--alert-v4-0-04sfvv","Avatar--warning":"Avatar--warning-v4-0-0jzlfl","Avatar--accent1":"Avatar--accent1-v4-0-0i2zwl","Avatar--accent2":"Avatar--accent2-v4-0-0i2zwl","Avatar--accent3":"Avatar--accent3-v4-0-0i2zwl","Avatar--accent4":"Avatar--accent4-v4-0-0i2zwl","Avatar-content--tiny":"Avatar-content--tiny-v4-0-0xko1f","Avatar-content":"Avatar-content-v4-0-0ocmon","Avatar-presence":"Avatar-presence-v4-0-0wu2yx","Avatar-presence--active":"Avatar-presence--active-v4-0-0bgiad","Avatar-presence--away":"Avatar-presence--away-v4-0-0tp9b1","Avatar-status":"Avatar-status-v4-0-0wt98v"};
|
|
987
987
|
styleInject(css_248z$1f);
|
|
988
988
|
|
|
989
989
|
var appearanceMapper = {
|
|
@@ -1182,8 +1182,8 @@ Avatar.defaultProps = {
|
|
|
1182
1182
|
strokeColor: 'var(--white)'
|
|
1183
1183
|
};
|
|
1184
1184
|
|
|
1185
|
-
var css_248z$1e = ".AvatarGroup-
|
|
1186
|
-
var styles$13 = {"AvatarGroup-item":"AvatarGroup-
|
|
1185
|
+
var css_248z$1e = ".AvatarGroup-item-v4-0-0rffxd {\n border-radius: 50%;\n position: relative;\n}\n\n.AvatarGroup-item--regular-v4-0-0krzh7 {\n margin-right: calc(var(--spacing-m) * -1);\n height: var(--spacing-3);\n}\n\n.AvatarGroup-item--tiny-v4-0-0s0hls {\n margin-right: calc(var(--spacing-s) * -1);\n height: var(--spacing-xl);\n}\n\n.AvatarGroup-Popper-v4-0-0io22y {\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.AvatarGroup-TextWrapper-v4-0-0mw20f {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n overflow-y: auto;\n}\n\n.AvatarCount-wrapper-v4-0-0gwlo8 {\n border-radius: 50%;\n position: relative;\n}\n\n.AvatarCount-wrapper-v4-0-0gwlo8:focus,\n.AvatarCount-wrapper-v4-0-0gwlo8:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n";
|
|
1186
|
+
var styles$13 = {"AvatarGroup-item":"AvatarGroup-item-v4-0-0rffxd","AvatarGroup-item--regular":"AvatarGroup-item--regular-v4-0-0krzh7","AvatarGroup-item--tiny":"AvatarGroup-item--tiny-v4-0-0s0hls","AvatarGroup-Popper":"AvatarGroup-Popper-v4-0-0io22y","AvatarGroup-TextWrapper":"AvatarGroup-TextWrapper-v4-0-0mw20f","AvatarCount-wrapper":"AvatarCount-wrapper-v4-0-0gwlo8"};
|
|
1187
1187
|
styleInject(css_248z$1e);
|
|
1188
1188
|
|
|
1189
1189
|
var AvatarCount = function AvatarCount(props) {
|
|
@@ -1365,8 +1365,8 @@ AvatarGroup.defaultProps = {
|
|
|
1365
1365
|
size: 'regular'
|
|
1366
1366
|
};
|
|
1367
1367
|
|
|
1368
|
-
var css_248z$1d = "@keyframes backdrop-
|
|
1369
|
-
var styles$12 = {"Backdrop":"
|
|
1368
|
+
var css_248z$1d = "@keyframes backdrop-open-v4-0-0tlyz6 {\n from {\n opacity: 0;\n }\n to {\n opacity: var(--opacity-16);\n }\n}\n\n@keyframes backdrop-close-v4-0-05aojo {\n from {\n opacity: var(--opacity-16);\n }\n to {\n opacity: 0;\n }\n}\n\n.Backdrop-v4-0-0xjnw2 {\n background-color: rgba(31, 31, 31, 0.64);\n height: 100vh;\n width: 100vw;\n position: fixed;\n left: 0;\n top: 0;\n display: none;\n align-items: center;\n z-index: 1000;\n overflow: auto;\n flex-direction: column;\n justify-content: center;\n touch-action: none;\n visibility: hidden;\n}\n\n.Backdrop--open-v4-0-0c3ilv {\n display: flex;\n visibility: visible;\n}\n\n.Backdrop-animation--open-v4-0-02hmou {\n animation: backdrop-open-v4-0-0tlyz6 var(--duration--fast-02) var(--entrance-expressive-curve);\n}\n\n.Backdrop-animation--close-v4-0-06c37v {\n animation: backdrop-close-v4-0-05aojo var(--duration--fast-02) var(--exit-expressive-curve);\n}\n";
|
|
1369
|
+
var styles$12 = {"Backdrop":"Backdrop-v4-0-0xjnw2","Backdrop--open":"Backdrop--open-v4-0-0c3ilv","Backdrop-animation--open":"Backdrop-animation--open-v4-0-02hmou","backdrop-open":"backdrop-open-v4-0-0tlyz6","Backdrop-animation--close":"Backdrop-animation--close-v4-0-06c37v","backdrop-close":"backdrop-close-v4-0-05aojo"};
|
|
1370
1370
|
styleInject(css_248z$1d);
|
|
1371
1371
|
|
|
1372
1372
|
var useEffect$1 = React.useEffect,
|
|
@@ -1433,17 +1433,21 @@ var Backdrop = function Backdrop(props) {
|
|
|
1433
1433
|
};
|
|
1434
1434
|
Backdrop.displayName = 'Backdrop';
|
|
1435
1435
|
|
|
1436
|
-
var css_248z$1c = "/* badge */\n\n.
|
|
1437
|
-
var badgeStyles = {"Badge":"
|
|
1436
|
+
var css_248z$1c = "/* badge */\n\n.Badge-v4-0-0jdf4m {\n /* 160px */\n max-width: calc(var(--spacing-2) * 10);\n /* truncate */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n text-transform: uppercase;\n padding-right: var(--spacing-m);\n padding-left: var(--spacing-m);\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n border-radius: var(--spacing-m);\n display: inline-block;\n box-sizing: border-box;\n font-weight: var(--font-weight-bold);\n cursor: default;\n}\n\n.Badge--primary-v4-0-0q6y3j {\n background: var(--primary);\n color: var(--white);\n}\n\n.Badge--secondary-v4-0-0rkp9w {\n background: var(--secondary-light);\n color: var(--inverse);\n}\n\n.Badge--success-v4-0-0iooz0 {\n background: var(--success);\n color: var(--white);\n}\n\n.Badge--alert-v4-0-0mlmgh {\n background: var(--alert);\n color: var(--white);\n}\n\n.Badge--warning-v4-0-0l1ane {\n background: var(--warning);\n color: var(--warning-darker);\n}\n\n.Badge--accent1-v4-0-0bx82d {\n background: var(--accent1);\n color: var(--white);\n}\n\n.Badge--accent2-v4-0-0bx82d {\n background: var(--accent2);\n color: var(--white);\n}\n\n.Badge--accent3-v4-0-0bx82d {\n background: var(--accent3);\n color: var(--white);\n}\n\n.Badge--accent4-v4-0-0bx82d {\n background: var(--accent4);\n color: var(--accent4-darker);\n}\n\n.Badge--subtle-primary-v4-0-09of7h {\n color: var(--primary-darker);\n background: var(--primary-lightest);\n}\n\n.Badge--subtle-secondary-v4-0-0l1u1v {\n color: var(--text);\n background: var(--secondary-light);\n}\n\n.Badge--subtle-success-v4-0-0zcom1 {\n color: var(--success-darker);\n background: var(--success-lightest);\n}\n\n.Badge--subtle-alert-v4-0-04mwe4 {\n color: var(--alert-darker);\n background: var(--alert-lightest);\n}\n\n.Badge--subtle-warning-v4-0-0e4g3j {\n color: var(--warning-darker);\n background: var(--warning-lightest);\n}\n\n.Badge--subtle-accent1-v4-0-0ny58n {\n color: var(--accent1-darker);\n background: var(--accent1-lightest);\n}\n\n.Badge--subtle-accent2-v4-0-0ny58n {\n color: var(--accent2-darker);\n background: var(--accent2-lightest);\n}\n\n.Badge--subtle-accent3-v4-0-0ny58n {\n color: var(--accent3-darker);\n background: var(--accent3-lightest);\n}\n\n.Badge--subtle-accent4-v4-0-0ny58n {\n color: var(--accent4-darker);\n background: var(--accent4-lightest);\n}\n";
|
|
1437
|
+
var badgeStyles = {"Badge":"Badge-v4-0-0jdf4m","Badge--primary":"Badge--primary-v4-0-0q6y3j","Badge--secondary":"Badge--secondary-v4-0-0rkp9w","Badge--success":"Badge--success-v4-0-0iooz0","Badge--alert":"Badge--alert-v4-0-0mlmgh","Badge--warning":"Badge--warning-v4-0-0l1ane","Badge--accent1":"Badge--accent1-v4-0-0bx82d","Badge--accent2":"Badge--accent2-v4-0-0bx82d","Badge--accent3":"Badge--accent3-v4-0-0bx82d","Badge--accent4":"Badge--accent4-v4-0-0bx82d","Badge--subtle-primary":"Badge--subtle-primary-v4-0-09of7h","Badge--subtle-secondary":"Badge--subtle-secondary-v4-0-0l1u1v","Badge--subtle-success":"Badge--subtle-success-v4-0-0zcom1","Badge--subtle-alert":"Badge--subtle-alert-v4-0-04mwe4","Badge--subtle-warning":"Badge--subtle-warning-v4-0-0e4g3j","Badge--subtle-accent1":"Badge--subtle-accent1-v4-0-0ny58n","Badge--subtle-accent2":"Badge--subtle-accent2-v4-0-0ny58n","Badge--subtle-accent3":"Badge--subtle-accent3-v4-0-0ny58n","Badge--subtle-accent4":"Badge--subtle-accent4-v4-0-0ny58n"};
|
|
1438
1438
|
styleInject(css_248z$1c);
|
|
1439
1439
|
|
|
1440
|
+
var css_248z$1b = ".PageHeader-v4-0-0fv2rg {\n width: 100%;\n}\n\n.PageHeader-wrapper-v4-0-0utwe5 {\n padding: var(--spacing) var(--spacing-2) var(--spacing) 0;\n}\n\n.PageHeader-wrapper--withTabs-v4-0-0xlc5j {\n padding-bottom: 0;\n}\n\n.PageHeader-wrapper--withTabs-v4-0-0xlc5j .TabsWrapper-header-v4-0-05q3li {\n border-bottom: none;\n}\n\n.PageHeader-v4-0-0fv2rg .Row-v4-0-02h9ci {\n width: 100%;\n}\n\n.PageHeader-titleWrapper-v4-0-0k9hqj {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-right: var(--spacing);\n}\n\n.PageHeader-titleWrapper-v4-0-0k9hqj .Badge-v4-0-0wkcij {\n margin-left: var(--spacing-l);\n flex-shrink: 0;\n}\n\n.PageHeader-statusWrapper-v4-0-011n7g {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n\n.PageHeader-statusWrapper-v4-0-011n7g .StatusHint-v4-0-0448i7 {\n margin-right: var(--spacing);\n}\n\n.PageHeader-navigationWrapper-v4-0-0s3b4r {\n margin-top: var(--spacing-m);\n}\n\n.PageHeader-v4-0-0fv2rg .PageHeader-navigationWrapper-v4-0-0s3b4r {\n justify-content: center;\n align-items: center;\n margin-top: 0 !important;\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n display: flex;\n}\n\n.PageHeader-title-v4-0-0jw2k4 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.PageHeader-actionsWrapper-v4-0-0j29vx {\n display: flex;\n justify-content: flex-end;\n padding-left: var(--spacing);\n}\n";
|
|
1441
|
+
var styles$11 = {"PageHeader":"PageHeader-v4-0-0fv2rg","PageHeader-wrapper":"PageHeader-wrapper-v4-0-0utwe5","PageHeader-wrapper--withTabs":"PageHeader-wrapper--withTabs-v4-0-0xlc5j","TabsWrapper-header":"TabsWrapper-header-v4-0-05q3li","Row":"Row-v4-0-02h9ci","PageHeader-titleWrapper":"PageHeader-titleWrapper-v4-0-0k9hqj","Badge":"Badge-v4-0-0wkcij","PageHeader-statusWrapper":"PageHeader-statusWrapper-v4-0-011n7g","StatusHint":"StatusHint-v4-0-0448i7","PageHeader-navigationWrapper":"PageHeader-navigationWrapper-v4-0-0s3b4r","PageHeader-title":"PageHeader-title-v4-0-0jw2k4","PageHeader-actionsWrapper":"PageHeader-actionsWrapper-v4-0-0j29vx"};
|
|
1442
|
+
styleInject(css_248z$1b);
|
|
1443
|
+
|
|
1440
1444
|
var Badge = function Badge(props) {
|
|
1441
1445
|
var appearance = props.appearance,
|
|
1442
1446
|
children = props.children,
|
|
1443
1447
|
subtle = props.subtle,
|
|
1444
1448
|
className = props.className;
|
|
1445
1449
|
var baseProps = extractBaseProps(props);
|
|
1446
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, badgeStyles.Badge, true), badgeStyles["Badge--".concat(appearance)], appearance && !subtle), badgeStyles["Badge--subtle-".concat(appearance)], subtle), className);
|
|
1450
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, badgeStyles.Badge, true), styles$11.Badge, true), badgeStyles["Badge--".concat(appearance)], appearance && !subtle), badgeStyles["Badge--subtle-".concat(appearance)], subtle), className);
|
|
1447
1451
|
return /*#__PURE__*/React.createElement("span", _extends$2({
|
|
1448
1452
|
"data-test": "DesignSystem-Badge"
|
|
1449
1453
|
}, baseProps, {
|
|
@@ -1455,9 +1459,9 @@ Badge.defaultProps = {
|
|
|
1455
1459
|
appearance: 'secondary'
|
|
1456
1460
|
};
|
|
1457
1461
|
|
|
1458
|
-
var css_248z$
|
|
1459
|
-
var styles$
|
|
1460
|
-
styleInject(css_248z$
|
|
1462
|
+
var css_248z$1a = "/* breadcrumbs */\n\n.Breadcrumbs-v4-0-01th66 {\n display: flex;\n align-items: center;\n}\n\n.Breadcrumbs-item-v4-0-0dqw3y {\n display: flex;\n align-items: center;\n}\n\n.Breadcrumbs-link-v4-0-0dquey {\n /* 160px */\n max-width: calc(var(--spacing-2) * 10);\n margin: var(--spacing-m) 0;\n}\n\n.Breadcrumbs-link-v4-0-0dquey:active {\n color: var(--inverse);\n}\n\n.Breadcrumbs-item-v4-0-0dqw3y:first-child .Breadcrumbs-link-v4-0-0dquey {\n margin-left: 0;\n}\n\n.Breadcrumbs-itemSeparator-v4-0-0l2pzk {\n color: var(--secondary);\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n width: var(--spacing-m);\n margin: 0 var(--spacing-m);\n}\n\n.Breadcrumbs-dropdown-v4-0-0ud31g {\n height: var(--font-height-m);\n}\n\n.Breadcrumbs-Button-v4-0-0hk59s:focus {\n background: var(--secondary) !important;\n}\n";
|
|
1463
|
+
var styles$10 = {"Breadcrumbs":"Breadcrumbs-v4-0-01th66","Breadcrumbs-item":"Breadcrumbs-item-v4-0-0dqw3y","Breadcrumbs-link":"Breadcrumbs-link-v4-0-0dquey","Breadcrumbs-itemSeparator":"Breadcrumbs-itemSeparator-v4-0-0l2pzk","Breadcrumbs-dropdown":"Breadcrumbs-dropdown-v4-0-0ud31g","Breadcrumbs-Button":"Breadcrumbs-Button-v4-0-0hk59s"};
|
|
1464
|
+
styleInject(css_248z$1a);
|
|
1461
1465
|
|
|
1462
1466
|
var RenderLink = function RenderLink(_ref) {
|
|
1463
1467
|
var item = _ref.item,
|
|
@@ -1468,7 +1472,7 @@ var RenderLink = function RenderLink(_ref) {
|
|
|
1468
1472
|
onClick(item.link);
|
|
1469
1473
|
}
|
|
1470
1474
|
};
|
|
1471
|
-
var linkClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
1475
|
+
var linkClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$10['Breadcrumbs-link'], true), 'ellipsis--noWrap', true));
|
|
1472
1476
|
return /*#__PURE__*/React.createElement(Link, {
|
|
1473
1477
|
className: linkClassName,
|
|
1474
1478
|
"data-test": "DesignSystem-Breadcrumbs-link",
|
|
@@ -1485,7 +1489,7 @@ var RenderItem = function RenderItem(_ref2) {
|
|
|
1485
1489
|
showTooltip = _ref2.showTooltip;
|
|
1486
1490
|
return /*#__PURE__*/React.createElement("div", {
|
|
1487
1491
|
key: index,
|
|
1488
|
-
className: styles$
|
|
1492
|
+
className: styles$10['Breadcrumbs-item'],
|
|
1489
1493
|
"data-test": "DesignSystem-Breadcrumbs-item"
|
|
1490
1494
|
}, showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
1491
1495
|
tooltip: item.label,
|
|
@@ -1497,7 +1501,7 @@ var RenderItem = function RenderItem(_ref2) {
|
|
|
1497
1501
|
item: item,
|
|
1498
1502
|
onClick: onClick
|
|
1499
1503
|
}), /*#__PURE__*/React.createElement("span", {
|
|
1500
|
-
className: styles$
|
|
1504
|
+
className: styles$10['Breadcrumbs-itemSeparator']
|
|
1501
1505
|
}, "/"));
|
|
1502
1506
|
};
|
|
1503
1507
|
var renderDropdown = function renderDropdown(list, onClick) {
|
|
@@ -1514,12 +1518,12 @@ var renderDropdown = function renderDropdown(list, onClick) {
|
|
|
1514
1518
|
appearance: "transparent",
|
|
1515
1519
|
icon: "more_horiz_filled",
|
|
1516
1520
|
largeIcon: true,
|
|
1517
|
-
className: styles$
|
|
1521
|
+
className: styles$10['Breadcrumbs-Button'],
|
|
1518
1522
|
"data-test": "DesignSystem-Breadcrumbs--Button"
|
|
1519
1523
|
});
|
|
1520
1524
|
};
|
|
1521
1525
|
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
1522
|
-
className: styles$
|
|
1526
|
+
className: styles$10['Breadcrumbs-dropdown'],
|
|
1523
1527
|
triggerSize: 'tiny',
|
|
1524
1528
|
triggerOptions: {
|
|
1525
1529
|
customTrigger: customTrigger
|
|
@@ -1539,7 +1543,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
|
|
|
1539
1543
|
className = props.className,
|
|
1540
1544
|
showTooltip = props.showTooltip;
|
|
1541
1545
|
var baseProps = extractBaseProps(props);
|
|
1542
|
-
var BreadcrumbClass = classnames(_defineProperty$1({}, styles$
|
|
1546
|
+
var BreadcrumbClass = classnames(_defineProperty$1({}, styles$10.Breadcrumbs, true), className);
|
|
1543
1547
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
1544
1548
|
"data-test": "DesignSystem-Breadcrumbs"
|
|
1545
1549
|
}, baseProps, {
|
|
@@ -1558,7 +1562,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
|
|
|
1558
1562
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1559
1563
|
className: "d-flex align-items-center"
|
|
1560
1564
|
}, renderDropdown(list.slice(1, list.length - 1), onClick), /*#__PURE__*/React.createElement("span", {
|
|
1561
|
-
className: styles$
|
|
1565
|
+
className: styles$10['Breadcrumbs-itemSeparator']
|
|
1562
1566
|
}, "/")), /*#__PURE__*/React.createElement(RenderItem, {
|
|
1563
1567
|
item: list[list.length - 1],
|
|
1564
1568
|
onClick: onClick,
|
|
@@ -1566,9 +1570,9 @@ var Breadcrumbs = function Breadcrumbs(props) {
|
|
|
1566
1570
|
})));
|
|
1567
1571
|
};
|
|
1568
1572
|
|
|
1569
|
-
var css_248z$
|
|
1570
|
-
var buttonStyles = {"Button":"
|
|
1571
|
-
styleInject(css_248z$
|
|
1573
|
+
var css_248z$19 = ".Button-v4-0-03hrsn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: 0;\n border-radius: var(--spacing-m);\n\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n\n text-align: center;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--text-white);\n\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Button-v4-0-03hrsn:disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.Button-v4-0-03hrsn:focus {\n outline: 0;\n}\n\n.Button--iconAlign-right-v4-0-0cxzdz {\n flex-direction: row-reverse;\n}\n\n.Button-regularIcon--left-v4-0-0nw0ax {\n margin-left: calc(-1 * var(--spacing-s));\n}\n\n.Button-regularIcon--right-v4-0-0u5rjb {\n margin-right: calc(-1 * var(--spacing-s));\n}\n\n.Button--tiny-v4-0-0d5jx7 {\n height: var(--spacing-xl);\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Button--tinySquare-v4-0-0dvvub {\n width: var(--spacing-xl);\n}\n\n.Button--regular-v4-0-0wfkoh {\n height: var(--spacing-3);\n padding-right: var(--spacing-l);\n padding-left: var(--spacing-l);\n}\n\n.Button--regularSquare-v4-0-0ctuh6 {\n width: var(--spacing-3);\n}\n\n.Button--large-v4-0-0i9zco {\n height: 40px;\n padding-right: var(--spacing-2);\n padding-left: var(--spacing-2);\n\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.Button--largeSquare-v4-0-0ln2xb {\n width: 40px;\n}\n\n.Button--tinySquare-v4-0-0dvvub .Button-icon-v4-0-0nb3gw,\n.Button--largeSquare-v4-0-0ln2xb .Button-icon-v4-0-0nb3gw,\n.Button--tinySquare-v4-0-0dvvub .Spinner-v4-0-04qivw,\n.Button--largeSquare-v4-0-0ln2xb .Spinner-v4-0-04qivw {\n padding-left: var(--spacing-s);\n padding-right: var(--spacing-s);\n}\n\n.Button--expanded-v4-0-0vt8za {\n width: 100%;\n}\n\n.Button-icon-v4-0-0nb3gw {\n line-height: inherit;\n display: flex;\n align-items: center;\n}\n\n.Button-icon--left-v4-0-0f5jx0 {\n margin-right: var(--spacing-0-75);\n}\n\n.Button-icon--right-v4-0-0rj0ag {\n margin-left: var(--spacing-0-75);\n}\n\n.Button--tiny-v4-0-0d5jx7 .Button-icon--left-v4-0-0f5jx0 {\n margin-right: var(--spacing-m);\n}\n.Button--tiny-v4-0-0d5jx7 .Button-icon--right-v4-0-0rj0ag {\n margin-left: var(--spacing-m);\n}\n\n.Button--basic-v4-0-0i4hfj {\n background: var(--secondary-light);\n color: var(--inverse);\n}\n\n.Button--basic-v4-0-0i4hfj:hover {\n background: var(--secondary);\n}\n\n.Button--basic-v4-0-0i4hfj:active {\n background: var(--secondary-dark);\n}\n\n.Button--basic-v4-0-0i4hfj:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.Button--basic-v4-0-0i4hfj:disabled {\n background: var(--secondary-lighter);\n color: var(--inverse-lightest);\n}\n\n.Button--primary-v4-0-0ffa5p {\n background: var(--primary);\n}\n\n.Button--primary-v4-0-0ffa5p:hover {\n background: var(--primary-dark);\n}\n\n.Button--primary-v4-0-0ffa5p:active {\n background: var(--primary-darker);\n}\n\n.Button--primary-v4-0-0ffa5p:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Button--primary-v4-0-0ffa5p:disabled {\n background: var(--primary-lighter);\n}\n\n.Button--success-v4-0-0a8z8u {\n background: var(--primary);\n}\n\n.Button--success-v4-0-0a8z8u:hover {\n background: var(--primary-dark);\n}\n\n.Button--success-v4-0-0a8z8u:active {\n background: var(--primary-darker);\n}\n\n.Button--success-v4-0-0a8z8u:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Button--success-v4-0-0a8z8u:disabled {\n background: var(--primary-lighter);\n}\n\n.Button--alert-v4-0-0i44dn {\n background: var(--alert);\n}\n\n.Button--alert-v4-0-0i44dn:hover {\n background: var(--alert-dark);\n}\n\n.Button--alert-v4-0-0i44dn:active {\n background: var(--alert-darker);\n}\n\n.Button--alert-v4-0-0i44dn:focus {\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.Button--alert-v4-0-0i44dn:disabled {\n background: var(--alert-lighter);\n}\n\n.Button--transparent-v4-0-0i9hxk {\n background: transparent;\n color: var(--inverse);\n}\n\n.Button--transparent-v4-0-0i9hxk:hover {\n background: var(--secondary);\n}\n\n.Button--transparent-v4-0-0i9hxk:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.Button--transparent-v4-0-0i9hxk:active {\n background: var(--secondary-dark);\n}\n\n.Button--transparent-v4-0-0i9hxk:focus:active {\n background: var(--secondary-dark);\n}\n\n.Button--transparent-v4-0-0i9hxk:disabled {\n background: transparent;\n color: var(--inverse-lightest);\n}\n\n.Button-spinner-v4-0-0xd90r {\n display: flex;\n position: absolute;\n z-index: 1;\n}\n\n.Button--selected-v4-0-0jyo76 {\n background: var(--primary-lightest);\n color: var(--primary-dark);\n}\n\n.Button--selected-v4-0-0jyo76:hover {\n background: var(--primary-lighter);\n}\n\n.Button--selected-v4-0-0jyo76:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.Button--selected-v4-0-0jyo76:focus {\n background: var(--primary-lightest);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Button--selected-v4-0-0jyo76:focus:active {\n background: var(--primary-lighter);\n}\n\n.Button--selected-v4-0-0jyo76:disabled {\n background: var(--primary-lightest);\n color: var(--primary-lighter);\n}\n\n.Button-text--hidden-v4-0-0z79rg {\n visibility: hidden;\n}\n\n.Button-text-v4-0-0nawec {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n";
|
|
1574
|
+
var buttonStyles = {"Button":"Button-v4-0-03hrsn","Button--iconAlign-right":"Button--iconAlign-right-v4-0-0cxzdz","Button-regularIcon--left":"Button-regularIcon--left-v4-0-0nw0ax","Button-regularIcon--right":"Button-regularIcon--right-v4-0-0u5rjb","Button--tiny":"Button--tiny-v4-0-0d5jx7","Button--tinySquare":"Button--tinySquare-v4-0-0dvvub","Button--regular":"Button--regular-v4-0-0wfkoh","Button--regularSquare":"Button--regularSquare-v4-0-0ctuh6","Button--large":"Button--large-v4-0-0i9zco","Button--largeSquare":"Button--largeSquare-v4-0-0ln2xb","Button-icon":"Button-icon-v4-0-0nb3gw","Spinner":"Spinner-v4-0-04qivw","Button--expanded":"Button--expanded-v4-0-0vt8za","Button-icon--left":"Button-icon--left-v4-0-0f5jx0","Button-icon--right":"Button-icon--right-v4-0-0rj0ag","Button--basic":"Button--basic-v4-0-0i4hfj","Button--primary":"Button--primary-v4-0-0ffa5p","Button--success":"Button--success-v4-0-0a8z8u","Button--alert":"Button--alert-v4-0-0i44dn","Button--transparent":"Button--transparent-v4-0-0i9hxk","Button-spinner":"Button-spinner-v4-0-0xd90r","Button--selected":"Button--selected-v4-0-0jyo76","Button-text--hidden":"Button-text--hidden-v4-0-0z79rg","Button-text":"Button-text-v4-0-0nawec"};
|
|
1575
|
+
styleInject(css_248z$19);
|
|
1572
1576
|
|
|
1573
1577
|
var _excluded$16 = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
|
|
1574
1578
|
var sizeMapping$3 = {
|
|
@@ -1643,9 +1647,9 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
1643
1647
|
});
|
|
1644
1648
|
Button.displayName = 'Button';
|
|
1645
1649
|
|
|
1646
|
-
var css_248z$
|
|
1647
|
-
var styles
|
|
1648
|
-
styleInject(css_248z$
|
|
1650
|
+
var css_248z$18 = "/* calendar */\n\n.Calendar-wrapper-v4-0-0a0n9d {\n display: flex;\n flex-wrap: wrap;\n}\n\n.Calendar-v4-0-0uzgct {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n}\n\n.Calendar--small-v4-0-01bl3l {\n padding: var(--spacing-l);\n padding-bottom: var(--spacing);\n width: 212px;\n}\n\n.Calendar-date--small-v4-0-05vb6i {\n height: 248px;\n}\n\n.Calendar-month--small-v4-0-0kjijf {\n height: 200px;\n}\n\n.Calendar-year--small-v4-0-0fkgbt {\n height: 200px;\n}\n\n.Calendar--large-v4-0-017j83 {\n padding-top: var(--spacing-2);\n padding-left: var(--spacing-2);\n padding-right: var(--spacing-2);\n padding-bottom: var(--spacing-l);\n width: 316px;\n}\n\n.Calendar-date--large-v4-0-05zd21 {\n height: 324px;\n}\n\n.Calendar-month--large-v4-0-0kfgnx {\n height: 276px;\n}\n\n.Calendar-year--large-v4-0-0fgega {\n height: 272px;\n}\n\n.Calendar-header--large-v4-0-0208lh {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-bottom: var(--spacing-l);\n}\n\n.Calendar-header--small-v4-0-01w6pz {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-bottom: var(--spacing);\n}\n\n.Calendar-headerIcon-v4-0-0qxwws {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.Calendar-headerIcon--prev-v4-0-0cex4a {\n left: 0;\n}\n\n.Calendar-headerIcon--next-v4-0-0ceyng {\n right: 0;\n}\n\n.Calendar-headerContent-v4-0-02yo3y {\n display: flex;\n white-space: nowrap;\n cursor: pointer;\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.Calendar-body-v4-0-0gid50 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: space-between;\n}\n\n.Calendar-valueRow-v4-0-0fdgj1 {\n display: flex;\n justify-content: space-between;\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n}\n\n.Calendar-valueWrapper-v4-0-0dkwkg {\n display: inline-flex;\n flex: 1 0 0;\n justify-content: center;\n position: relative;\n}\n\n.Calendar-valueWrapper--inRange-v4-0-0m7ee8 {\n background: var(--primary-lightest);\n}\n\n.Calendar-valueWrapper--inRange-v4-0-0m7ee8 .Calendar-inRangeValue-v4-0-0osmj0:hover {\n background: var(--primary-lighter);\n}\n\n.Calendar-valueWrapper--inRange-v4-0-0m7ee8 .Calendar-inRangeValue-v4-0-0osmj0:active {\n background: var(--primary-light);\n}\n\n.Calendar-valueWrapper--inRangeError-v4-0-09ujgs {\n background: var(--alert-lightest);\n}\n\n.Calendar-valueWrapper--start-v4-0-0c39f6 {\n background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);\n border-radius: var(--spacing-m) 0 0 var(--spacing-m);\n}\n\n.Calendar-valueWrapper--startError-v4-0-0a3p6m {\n background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);\n}\n\n.Calendar-valueWrapper--end-v4-0-09rp4t {\n background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);\n border-radius: 0 var(--spacing-m) var(--spacing-m) 0;\n}\n\n.Calendar-valueWrapper--hoverDate-v4-0-0jyqru {\n background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);\n border-radius: 0 var(--spacing-m) var(--spacing-m) 0;\n}\n\n.Calendar-valueWrapper--hoverEndDate-v4-0-0i10pb {\n background: linear-gradient(90deg, white 50%, var(--primary-lightest) 10%);\n}\n\n.Calendar-valueWrapper--endError-v4-0-0cxhob {\n background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);\n}\n\n.Calendar-valueWrapper--startEnd-v4-0-06kfus {\n background: transparent;\n}\n\n.Calendar-value-v4-0-0ewa1i {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border-radius: var(--spacing-m);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Calendar-value-v4-0-0ewa1i:hover {\n background: var(--secondary-light);\n}\n\n.Calendar-value-v4-0-0ewa1i:active {\n background: var(--secondary);\n}\n\n.Calendar-value-v4-0-0ewa1i:active .Calendar-value--currDate-v4-0-02p23v {\n color: var(--primary-dark);\n}\n\n.Calendar-value--start-v4-0-0977we:hover,\n.Calendar-value--end-v4-0-0gbg9k:hover {\n background: var(--primary-lightest);\n}\n\n.Calendar-value--startError-v4-0-0tsv8p:hover,\n.Calendar-value--endError-v4-0-0lc3e2:hover {\n background: var(--alert-lightest);\n}\n\n.Calendar-value--start-v4-0-0977we,\n.Calendar-value--end-v4-0-0gbg9k {\n background: var(--primary-lightest);\n}\n\n.Calendar-value--startError-v4-0-0tsv8p,\n.Calendar-value--endError-v4-0-0lc3e2 {\n background: var(--alert-lightest);\n}\n\n.Calendar-value--currDateMonthYear-v4-0-0i774s {\n background: var(--primary-lightest);\n}\n\n.Calendar-value--currDateMonthYear-v4-0-0i774s:hover {\n background: var(--primary-lighter);\n}\n\n.Calendar-value--currDateMonthYear-v4-0-0i774s:active {\n background: var(--primary-lighter);\n}\n\n.Calendar-value--currDate-v4-0-02p23v:active {\n color: var(--primary-dark);\n}\n\n.Calendar-value--active-v4-0-09v6fq {\n background: var(--primary);\n font-weight: var(--font-weight-bold);\n}\n\n.Calendar-value--active-v4-0-09v6fq:hover {\n background: var(--primary-dark);\n}\n\n.Calendar-value--active-v4-0-09v6fq:active {\n background: var(--primary-darker);\n}\n\n.Calendar-yearValue--small-v4-0-09zzs5,\n.Calendar-monthValue--small-v4-0-01y6a4 {\n height: var(--spacing-xl);\n width: var(--spacing-4);\n}\n\n.Calendar-yearValue--large-v4-0-0a41no,\n.Calendar-monthValue--large-v4-0-02285n {\n height: var(--spacing-3);\n width: var(--spacing-5);\n}\n\n.Calendar-dateValue--small-v4-0-0s74eo {\n height: var(--spacing-xl);\n width: var(--spacing-xl);\n}\n\n.Calendar-dateValue--large-v4-0-0sb6a7 {\n height: var(--spacing-3);\n width: var(--spacing-3);\n}\n\n.Calendar-valueWrapper--dummy-v4-0-0cbhgb {\n opacity: var(--opacity-20);\n}\n\n.Calendar-valueWrapper--disabled-v4-0-0aq7xt {\n opacity: var(--opacity-10);\n}\n\n.Calendar-valueWrapper--active-dummy-v4-0-0gj8db {\n opacity: var(--opacity-16);\n}\n\n.Calendar-value--disabled-v4-0-02bm83 {\n pointer-events: none;\n}\n\n.Calendar-dayValues-v4-0-0oggsd {\n display: flex;\n justify-content: center;\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Calendar-dateValues-v4-0-0nircb {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: space-around;\n}\n\n.Calendar-dayValues-v4-0-0oggsd .Calendar-value-v4-0-0ewa1i {\n padding: 0;\n}\n\n.Calendar-eventsIndicator-v4-0-0yzsso {\n position: absolute;\n bottom: var(--spacing-s);\n width: var(--spacing-m);\n height: var(--spacing-m);\n background-color: var(--alert);\n border-radius: 50%;\n}\n.Calendar-eventsIndicator--small-v4-0-0ywmaj {\n width: 3px;\n height: 3px;\n}\n.Calendar-eventsIndicator--active-v4-0-0pahb1 {\n background-color: var(--white);\n}\n\n.Calendar-valueWrapper--inStartRange-v4-0-05nnkh {\n background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);\n}\n\n.Calendar-valueWrapper--inEndRange-v4-0-0w3yvb {\n background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);\n}\n\n.Calendar-valueWrapper--inEdgeRange-v4-0-0nbs6g .Calendar-inRangeValue-v4-0-0osmj0 {\n background: var(--primary-lightest);\n}\n\n.Calendar-valueWrapper--inEdgeRange-v4-0-0nbs6g .Calendar-inRangeValue-v4-0-0osmj0:hover {\n background: var(--primary-lighter);\n}\n\n.Calendar-valueWrapper--inEdgeRange-v4-0-0nbs6g .Calendar-inRangeValue-v4-0-0osmj0:active {\n background: var(--primary-light);\n}\n";
|
|
1651
|
+
var styles$$ = {"Calendar-wrapper":"Calendar-wrapper-v4-0-0a0n9d","Calendar":"Calendar-v4-0-0uzgct","Calendar--small":"Calendar--small-v4-0-01bl3l","Calendar-date--small":"Calendar-date--small-v4-0-05vb6i","Calendar-month--small":"Calendar-month--small-v4-0-0kjijf","Calendar-year--small":"Calendar-year--small-v4-0-0fkgbt","Calendar--large":"Calendar--large-v4-0-017j83","Calendar-date--large":"Calendar-date--large-v4-0-05zd21","Calendar-month--large":"Calendar-month--large-v4-0-0kfgnx","Calendar-year--large":"Calendar-year--large-v4-0-0fgega","Calendar-header--large":"Calendar-header--large-v4-0-0208lh","Calendar-header--small":"Calendar-header--small-v4-0-01w6pz","Calendar-headerIcon":"Calendar-headerIcon-v4-0-0qxwws","Calendar-headerIcon--prev":"Calendar-headerIcon--prev-v4-0-0cex4a","Calendar-headerIcon--next":"Calendar-headerIcon--next-v4-0-0ceyng","Calendar-headerContent":"Calendar-headerContent-v4-0-02yo3y","Calendar-body":"Calendar-body-v4-0-0gid50","Calendar-valueRow":"Calendar-valueRow-v4-0-0fdgj1","Calendar-valueWrapper":"Calendar-valueWrapper-v4-0-0dkwkg","Calendar-valueWrapper--inRange":"Calendar-valueWrapper--inRange-v4-0-0m7ee8","Calendar-inRangeValue":"Calendar-inRangeValue-v4-0-0osmj0","Calendar-valueWrapper--inRangeError":"Calendar-valueWrapper--inRangeError-v4-0-09ujgs","Calendar-valueWrapper--start":"Calendar-valueWrapper--start-v4-0-0c39f6","Calendar-valueWrapper--startError":"Calendar-valueWrapper--startError-v4-0-0a3p6m","Calendar-valueWrapper--end":"Calendar-valueWrapper--end-v4-0-09rp4t","Calendar-valueWrapper--hoverDate":"Calendar-valueWrapper--hoverDate-v4-0-0jyqru","Calendar-valueWrapper--hoverEndDate":"Calendar-valueWrapper--hoverEndDate-v4-0-0i10pb","Calendar-valueWrapper--endError":"Calendar-valueWrapper--endError-v4-0-0cxhob","Calendar-valueWrapper--startEnd":"Calendar-valueWrapper--startEnd-v4-0-06kfus","Calendar-value":"Calendar-value-v4-0-0ewa1i","Calendar-value--currDate":"Calendar-value--currDate-v4-0-02p23v","Calendar-value--start":"Calendar-value--start-v4-0-0977we","Calendar-value--end":"Calendar-value--end-v4-0-0gbg9k","Calendar-value--startError":"Calendar-value--startError-v4-0-0tsv8p","Calendar-value--endError":"Calendar-value--endError-v4-0-0lc3e2","Calendar-value--currDateMonthYear":"Calendar-value--currDateMonthYear-v4-0-0i774s","Calendar-value--active":"Calendar-value--active-v4-0-09v6fq","Calendar-yearValue--small":"Calendar-yearValue--small-v4-0-09zzs5","Calendar-monthValue--small":"Calendar-monthValue--small-v4-0-01y6a4","Calendar-yearValue--large":"Calendar-yearValue--large-v4-0-0a41no","Calendar-monthValue--large":"Calendar-monthValue--large-v4-0-02285n","Calendar-dateValue--small":"Calendar-dateValue--small-v4-0-0s74eo","Calendar-dateValue--large":"Calendar-dateValue--large-v4-0-0sb6a7","Calendar-valueWrapper--dummy":"Calendar-valueWrapper--dummy-v4-0-0cbhgb","Calendar-valueWrapper--disabled":"Calendar-valueWrapper--disabled-v4-0-0aq7xt","Calendar-valueWrapper--active-dummy":"Calendar-valueWrapper--active-dummy-v4-0-0gj8db","Calendar-value--disabled":"Calendar-value--disabled-v4-0-02bm83","Calendar-dayValues":"Calendar-dayValues-v4-0-0oggsd","Calendar-dateValues":"Calendar-dateValues-v4-0-0nircb","Calendar-eventsIndicator":"Calendar-eventsIndicator-v4-0-0yzsso","Calendar-eventsIndicator--small":"Calendar-eventsIndicator--small-v4-0-0ywmaj","Calendar-eventsIndicator--active":"Calendar-eventsIndicator--active-v4-0-0pahb1","Calendar-valueWrapper--inStartRange":"Calendar-valueWrapper--inStartRange-v4-0-05nnkh","Calendar-valueWrapper--inEndRange":"Calendar-valueWrapper--inEndRange-v4-0-0w3yvb","Calendar-valueWrapper--inEdgeRange":"Calendar-valueWrapper--inEdgeRange-v4-0-0nbs6g"};
|
|
1652
|
+
styleInject(css_248z$18);
|
|
1649
1653
|
|
|
1650
1654
|
var config = {
|
|
1651
1655
|
yearBlockRange: 12,
|
|
@@ -2067,7 +2071,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2067
2071
|
}
|
|
2068
2072
|
break;
|
|
2069
2073
|
}
|
|
2070
|
-
var headerIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles
|
|
2074
|
+
var headerIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-headerIcon'], true), styles$$["Calendar-headerIcon--".concat(type)], type));
|
|
2071
2075
|
return /*#__PURE__*/React.createElement(Button, {
|
|
2072
2076
|
type: "button",
|
|
2073
2077
|
className: headerIconClass,
|
|
@@ -2111,7 +2115,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2111
2115
|
var _this$getNavDateInfo2 = _this.getNavDateInfo(index),
|
|
2112
2116
|
yearNavVal = _this$getNavDateInfo2.year,
|
|
2113
2117
|
monthNavVal = _this$getNavDateInfo2.month;
|
|
2114
|
-
var headerContentClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles
|
|
2118
|
+
var headerContentClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-headerContent'], true), styles$$['Calendar-headerContent--noIcon-left'], index === monthsInView - 1), styles$$['Calendar-headerContent--noIcon-right'], index === 0));
|
|
2115
2119
|
var headerContent = '';
|
|
2116
2120
|
if (view === 'year') headerContent = "".concat(yearBlockNav, " - ").concat(yearBlockNav + (yearBlockRange - 1));
|
|
2117
2121
|
if (view === 'month') headerContent = "".concat(yearNavVal);
|
|
@@ -2167,7 +2171,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2167
2171
|
}, function (_y, row) {
|
|
2168
2172
|
return /*#__PURE__*/React.createElement("div", {
|
|
2169
2173
|
key: row,
|
|
2170
|
-
className: styles
|
|
2174
|
+
className: styles$$['Calendar-valueRow']
|
|
2171
2175
|
}, Array.from({
|
|
2172
2176
|
length: yearsInRow
|
|
2173
2177
|
}, function (_x, col) {
|
|
@@ -2179,8 +2183,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2179
2183
|
var isCurrentYear = function isCurrentYear() {
|
|
2180
2184
|
return year === currYear;
|
|
2181
2185
|
};
|
|
2182
|
-
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles
|
|
2183
|
-
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles
|
|
2186
|
+
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-value'], true), styles$$['Calendar-value--active'], active), styles$$['Calendar-value--disabled'], disabled), styles$$['Calendar-yearValue'], true), styles$$["Calendar-yearValue--".concat(size)], size), styles$$['Calendar-value--currDateMonthYear'], isCurrentYear()));
|
|
2187
|
+
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-value--currDate'], isCurrentYear() && !active), styles$$['Calendar-text'], true));
|
|
2184
2188
|
var getTextColor = classnames({
|
|
2185
2189
|
inverse: !active && !isCurrentYear() && !disabled,
|
|
2186
2190
|
white: active,
|
|
@@ -2229,7 +2233,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2229
2233
|
}, function (_y, row) {
|
|
2230
2234
|
return /*#__PURE__*/React.createElement("div", {
|
|
2231
2235
|
key: row,
|
|
2232
|
-
className: styles
|
|
2236
|
+
className: styles$$['Calendar-valueRow']
|
|
2233
2237
|
}, Array.from({
|
|
2234
2238
|
length: monthsInRow
|
|
2235
2239
|
}, function (_x, col) {
|
|
@@ -2239,7 +2243,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2239
2243
|
var isCurrentMonth = function isCurrentMonth() {
|
|
2240
2244
|
return currYear === yearNav && currMonth === month;
|
|
2241
2245
|
};
|
|
2242
|
-
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles
|
|
2246
|
+
var valueClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-value'], true), styles$$['Calendar-value--active'], active), styles$$['Calendar-value--disabled'], disabled), styles$$['Calendar-monthValue'], true), styles$$["Calendar-monthValue--".concat(size)], size), styles$$['Calendar-value--currDateMonthYear'], isCurrentMonth()));
|
|
2243
2247
|
var getTextColor = classnames({
|
|
2244
2248
|
inverse: !active && !isCurrentMonth() && !disabled,
|
|
2245
2249
|
white: active,
|
|
@@ -2247,7 +2251,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2247
2251
|
primary: isCurrentMonth(),
|
|
2248
2252
|
'inverse-lightest': disabled
|
|
2249
2253
|
});
|
|
2250
|
-
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles
|
|
2254
|
+
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-value--currDate'], isCurrentMonth() && !active), styles$$['Calendar-text'], true));
|
|
2251
2255
|
return (
|
|
2252
2256
|
/*#__PURE__*/
|
|
2253
2257
|
//TODO(a11y)
|
|
@@ -2285,11 +2289,11 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2285
2289
|
firstDayOfWeek = _this$props6.firstDayOfWeek;
|
|
2286
2290
|
var textSize = size === 'large' ? 'regular' : 'small';
|
|
2287
2291
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
2288
|
-
className: styles
|
|
2292
|
+
className: styles$$['Calendar-dayValues']
|
|
2289
2293
|
}, Array.from({
|
|
2290
2294
|
length: 7
|
|
2291
2295
|
}, function (_x, day) {
|
|
2292
|
-
var valueClass = classnames(_defineProperty$1({}, styles
|
|
2296
|
+
var valueClass = classnames(_defineProperty$1({}, styles$$['Calendar-valueWrapper'], true));
|
|
2293
2297
|
var dayValue = (day + daysInRow + getIndexOfDay(firstDayOfWeek)) % daysInRow;
|
|
2294
2298
|
return /*#__PURE__*/React.createElement(Text, {
|
|
2295
2299
|
key: day,
|
|
@@ -2299,7 +2303,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2299
2303
|
size: textSize
|
|
2300
2304
|
}, days[size][dayValue]);
|
|
2301
2305
|
})), /*#__PURE__*/React.createElement("div", {
|
|
2302
|
-
className: styles
|
|
2306
|
+
className: styles$$['Calendar-dateValues'],
|
|
2303
2307
|
onMouseLeave: _this.onDateRowMouseLeaveHandler
|
|
2304
2308
|
}, _this.renderDateValues(index)));
|
|
2305
2309
|
});
|
|
@@ -2391,7 +2395,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2391
2395
|
}, function (_y, row) {
|
|
2392
2396
|
return /*#__PURE__*/React.createElement("div", {
|
|
2393
2397
|
key: row,
|
|
2394
|
-
className: styles
|
|
2398
|
+
className: styles$$['Calendar-valueRow']
|
|
2395
2399
|
}, Array.from({
|
|
2396
2400
|
length: daysInRow
|
|
2397
2401
|
}, function (_x, col) {
|
|
@@ -2451,8 +2455,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2451
2455
|
var isHoverForwardLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
|
|
2452
2456
|
var isEdgeElement = col === 0 || col === 6;
|
|
2453
2457
|
var isValueRange = inRange || rangePicker && (active || activeDate);
|
|
2454
|
-
var wrapperClass = classnames((_classNames8 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames8, styles
|
|
2455
|
-
var valueClass = classnames((_classNames9 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames9, styles
|
|
2458
|
+
var wrapperClass = classnames((_classNames8 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames8, styles$$['Calendar-valueWrapper'], true), styles$$['Calendar-valueWrapper--disabled'], disabled), styles$$['Calendar-valueWrapper--inRange'], !isEdgeElement && isValueRange), styles$$['Calendar-valueWrapper--inEdgeRange'], isValueRange && isEdgeElement), styles$$['Calendar-valueWrapper--inRangeError'], isRangeError), styles$$['Calendar-valueWrapper--start'], isStart && !isEnd && col !== 6 || rangePicker && isStartActive && col !== 6), styles$$['Calendar-valueWrapper--end'], isEnd && !isStart && col !== 0 || rangePicker && isEndActive && col !== 0), styles$$['Calendar-valueWrapper--startEnd'], isStart && isEnd), styles$$['Calendar-valueWrapper--startError'], isStart && isRangeError || rangePicker && isRangeError && isStartActive), styles$$['Calendar-valueWrapper--endError'], isEnd && isRangeError || rangePicker && isRangeError && isEndActive), _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames8, styles$$['Calendar-valueWrapper--dummy'], dummy && !disabled && !activeDate), styles$$['Calendar-valueWrapper--active-dummy'], dummy && !disabled && activeDate), styles$$['Calendar-valueWrapper--hoverDate'], rangePicker && isHoverForwardLast), styles$$['Calendar-valueWrapper--hoverEndDate'], rangePicker && isHoverBackwardLast), styles$$['Calendar-valueWrapper--inStartRange'], isValueRange && col === 0 && !active && !activeDate), styles$$['Calendar-valueWrapper--inEndRange'], isValueRange && col === 6 && !active && !activeDate)));
|
|
2459
|
+
var valueClass = classnames((_classNames9 = {}, _defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_classNames9, styles$$['Calendar-value'], true), styles$$['Calendar-inRangeValue'], !isStart && !isEnd && !active && !activeDate), styles$$['Calendar-value--start'], isStart && !isEnd), styles$$['Calendar-value--end'], isEnd && !isStart), styles$$['Calendar-value--startError'], isStart && isRangeError), styles$$['Calendar-value--endError'], isEnd && isRangeError), styles$$['Calendar-value--active'], active || activeDate), styles$$['Calendar-value--disabled'], disabled), styles$$['Calendar-dateValue'], true), styles$$["Calendar-dateValue--".concat(size)], size), _defineProperty$1(_defineProperty$1(_classNames9, styles$$['Calendar-value--currDateMonthYear'], today()), styles$$['Calendar-value--currDate'], today() && !active && !activeDate)));
|
|
2456
2460
|
var getTextColor = classnames({
|
|
2457
2461
|
inverse: !active && !today() && !disabled && !activeDate,
|
|
2458
2462
|
white: active || activeDate,
|
|
@@ -2488,9 +2492,9 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2488
2492
|
size = _this$props8.size,
|
|
2489
2493
|
monthsInView = _this$props8.monthsInView;
|
|
2490
2494
|
var view = _this.state.view;
|
|
2491
|
-
var containerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles
|
|
2492
|
-
var headerClass = classnames(_defineProperty$1({}, styles
|
|
2493
|
-
var bodyClass = classnames(_defineProperty$1({}, styles
|
|
2495
|
+
var containerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar'], true), styles$$["Calendar-".concat(view, "--").concat(size)], view), styles$$["Calendar--".concat(size)], size));
|
|
2496
|
+
var headerClass = classnames(_defineProperty$1({}, styles$$["Calendar-header--".concat(size)], size));
|
|
2497
|
+
var bodyClass = classnames(_defineProperty$1({}, styles$$['Calendar-body'], true));
|
|
2494
2498
|
return /*#__PURE__*/React.createElement("div", {
|
|
2495
2499
|
key: index,
|
|
2496
2500
|
"data-test": "DesignSystem-Calendar",
|
|
@@ -2700,7 +2704,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2700
2704
|
}, {
|
|
2701
2705
|
key: "renderEventsIndicator",
|
|
2702
2706
|
value: function renderEventsIndicator(size, active) {
|
|
2703
|
-
var eventsIndicatorClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles
|
|
2707
|
+
var eventsIndicatorClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$$['Calendar-eventsIndicator'], true), styles$$["Calendar-eventsIndicator--".concat(size)], true), styles$$['Calendar-eventsIndicator--active'], active));
|
|
2704
2708
|
return /*#__PURE__*/React.createElement("span", {
|
|
2705
2709
|
"data-test": "DesignSystem-Calendar-Event-Indicator",
|
|
2706
2710
|
className: eventsIndicatorClass
|
|
@@ -2714,7 +2718,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
|
|
|
2714
2718
|
monthsInView = _this$props11.monthsInView,
|
|
2715
2719
|
className = _this$props11.className;
|
|
2716
2720
|
var baseProps = extractBaseProps(this.props);
|
|
2717
|
-
var classes = classnames(_defineProperty$1({}, styles
|
|
2721
|
+
var classes = classnames(_defineProperty$1({}, styles$$['Calendar-wrapper'], true), className);
|
|
2718
2722
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
2719
2723
|
className: classes,
|
|
2720
2724
|
"data-test": "DesignSystem-Calendar-Wrapper"
|
|
@@ -2734,9 +2738,9 @@ _defineProperty$1(Calendar, "defaultProps", {
|
|
|
2734
2738
|
jumpView: true
|
|
2735
2739
|
});
|
|
2736
2740
|
|
|
2737
|
-
var css_248z$
|
|
2738
|
-
var styles
|
|
2739
|
-
styleInject(css_248z$
|
|
2741
|
+
var css_248z$17 = "/* badge */\n\n.Card-v4-0-0ufpvf {\n border-radius: var(--spacing-m);\n border: var(--spacing-xs) solid var(--secondary-light);\n position: relative;\n background-color: var(--white);\n}\n\n.Card--default-v4-0-062cye,\n.Card--light-v4-0-0o42n5,\n.Card--medium-v4-0-0y8r7t,\n.Card--dark-v4-0-0lejav {\n border: none;\n box-shadow: var(--shadow-s);\n}\n\n.Card--shadow10-v4-0-0mt0py {\n border: none;\n box-shadow: var(--shadow-s);\n}\n\n.Card--shadow20-v4-0-0mt0pz {\n border: none;\n box-shadow: var(--shadow-m);\n}\n\n.Card--shadow30-v4-0-0mt0q0 {\n border: none;\n box-shadow: var(--shadow-l);\n}\n\n.Card-header-v4-0-03plbr {\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-l) var(--spacing-2);\n}\n\n.Card-body-v4-0-0ug8wb {\n padding-left: var(--spacing-2);\n padding-right: var(--spacing-2);\n}\n\n.Card-footer-v4-0-02x9al {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: var(--spacing-2);\n}\n\n.Card-footer--withSeperator-v4-0-0q4xgg {\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n";
|
|
2742
|
+
var styles$_ = {"Card":"Card-v4-0-0ufpvf","Card--default":"Card--default-v4-0-062cye","Card--light":"Card--light-v4-0-0o42n5","Card--medium":"Card--medium-v4-0-0y8r7t","Card--dark":"Card--dark-v4-0-0lejav","Card--shadow10":"Card--shadow10-v4-0-0mt0py","Card--shadow20":"Card--shadow20-v4-0-0mt0pz","Card--shadow30":"Card--shadow30-v4-0-0mt0q0","Card-header":"Card-header-v4-0-03plbr","Card-body":"Card-body-v4-0-0ug8wb","Card-footer":"Card-footer-v4-0-02x9al","Card-footer--withSeperator":"Card-footer--withSeperator-v4-0-0q4xgg"};
|
|
2743
|
+
styleInject(css_248z$17);
|
|
2740
2744
|
|
|
2741
2745
|
var _excluded$15 = ["shadow", "children", "className"];
|
|
2742
2746
|
var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -2745,7 +2749,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2745
2749
|
children = props.children,
|
|
2746
2750
|
className = props.className,
|
|
2747
2751
|
rest = _objectWithoutProperties(props, _excluded$15);
|
|
2748
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles
|
|
2752
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$_.Card, true), styles$_["Card--".concat(shadow)], shadow), className);
|
|
2749
2753
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
2750
2754
|
"data-test": "DesignSystem-Card",
|
|
2751
2755
|
ref: ref
|
|
@@ -2758,9 +2762,9 @@ Card.defaultProps = {
|
|
|
2758
2762
|
shadow: 'shadow10'
|
|
2759
2763
|
};
|
|
2760
2764
|
|
|
2761
|
-
var css_248z$
|
|
2762
|
-
var styles$
|
|
2763
|
-
styleInject(css_248z$
|
|
2765
|
+
var css_248z$16 = ".CardSubdued-v4-0-0tzoh5 {\n background: var(--card-subdued-bg);\n padding: var(--spacing-2);\n}\n\n.CardSubdued--top-v4-0-04g4tj {\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.CardSubdued--left-v4-0-0467zu {\n border-left: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.CardSubdued--right-v4-0-0cspke {\n border-right: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.CardSubdued--bottom-v4-0-0y39nk {\n border-bottom: var(--spacing-xs) solid var(--secondary-light);\n}\n";
|
|
2766
|
+
var styles$Z = {"CardSubdued":"CardSubdued-v4-0-0tzoh5","CardSubdued--top":"CardSubdued--top-v4-0-04g4tj","CardSubdued--left":"CardSubdued--left-v4-0-0467zu","CardSubdued--right":"CardSubdued--right-v4-0-0cspke","CardSubdued--bottom":"CardSubdued--bottom-v4-0-0y39nk"};
|
|
2767
|
+
styleInject(css_248z$16);
|
|
2764
2768
|
|
|
2765
2769
|
var _excluded$14 = ["border", "children", "className"];
|
|
2766
2770
|
var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -2768,7 +2772,7 @@ var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2768
2772
|
children = props.children,
|
|
2769
2773
|
className = props.className,
|
|
2770
2774
|
rest = _objectWithoutProperties(props, _excluded$14);
|
|
2771
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
2775
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$Z.CardSubdued, true), styles$Z["CardSubdued--".concat(border)], border), className);
|
|
2772
2776
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
2773
2777
|
"data-test": "DesignSystem-CardSubdued",
|
|
2774
2778
|
ref: ref
|
|
@@ -2782,7 +2786,7 @@ var CardHeader = function CardHeader(props) {
|
|
|
2782
2786
|
var className = props.className,
|
|
2783
2787
|
children = props.children;
|
|
2784
2788
|
var baseProps = extractBaseProps(props);
|
|
2785
|
-
var classes = classnames(_defineProperty$1({}, styles
|
|
2789
|
+
var classes = classnames(_defineProperty$1({}, styles$_['Card-header'], true), className);
|
|
2786
2790
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
2787
2791
|
"data-test": "DesignSystem-CardHeader"
|
|
2788
2792
|
}, baseProps, {
|
|
@@ -2795,7 +2799,7 @@ var CardBody = function CardBody(props) {
|
|
|
2795
2799
|
var className = props.className,
|
|
2796
2800
|
children = props.children;
|
|
2797
2801
|
var baseProps = extractBaseProps(props);
|
|
2798
|
-
var classes = classnames(_defineProperty$1({}, styles
|
|
2802
|
+
var classes = classnames(_defineProperty$1({}, styles$_['Card-body'], true), className);
|
|
2799
2803
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
2800
2804
|
"data-test": "DesignSystem-CardBody"
|
|
2801
2805
|
}, baseProps, {
|
|
@@ -2809,7 +2813,7 @@ var CardFooter = function CardFooter(props) {
|
|
|
2809
2813
|
children = props.children,
|
|
2810
2814
|
withSeperator = props.withSeperator;
|
|
2811
2815
|
var baseProps = extractBaseProps(props);
|
|
2812
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles
|
|
2816
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$_['Card-footer'], true), styles$_['Card-footer--withSeperator'], withSeperator), className);
|
|
2813
2817
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
2814
2818
|
"data-test": "DesignSystem-CardFooter"
|
|
2815
2819
|
}, baseProps, {
|
|
@@ -2874,9 +2878,9 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
|
|
|
2874
2878
|
});
|
|
2875
2879
|
};
|
|
2876
2880
|
|
|
2877
|
-
var css_248z$
|
|
2878
|
-
var iconStyles = {"Icon":"
|
|
2879
|
-
styleInject(css_248z$
|
|
2881
|
+
var css_248z$15 = "/* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, \n * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px. \n * https://google.github.io/material-design-icons/\n */\n\n/* Rules for sizing the icon. */\n\n/* .material-icons.md-18 { font-size: 18px; }\n.material-icons.md-24 { font-size: 24px; }\n.material-icons.md-36 { font-size: 36px; }\n.material-icons.md-48 { font-size: 48px; } */\n\n/* Rules for using icons as black on a light background. */\n\n/* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }\n.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */\n\n/* Rules for using icons as white on a dark background. */\n\n/* .material-icons.md-light { color: rgba(255, 255, 255, 1); }\n.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */\n.Icon-v4-0-0otivg {\n flex-shrink: 0;\n overflow: hidden;\n flex-shrink: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.Icon--subtle-v4-0-0w0kcj {\n color: var(--text-subtle);\n}\n\n.Icon--disabled-v4-0-0lrnrs {\n color: var(--text-disabled);\n}\n\n.Icon--destructive-v4-0-0tuxy4 {\n color: var(--text-destructive);\n}\n\n.Icon--white-v4-0-0sl032 {\n color: var(--text-white);\n}\n\n.Icon--default-v4-0-0gjis3 {\n color: var(--text);\n}\n\n.Icon--info-v4-0-08901q {\n color: var(--primary);\n}\n\n.Icon--success-v4-0-01xt5v {\n color: var(--success);\n}\n\n.Icon--warning-v4-0-0nhsi8 {\n color: var(--warning);\n}\n\n.Icon--alert-v4-0-0s8z2y {\n color: var(--alert);\n}\n\n.Icon--primary-v4-0-0nqg8p {\n color: var(--primary);\n}\n\n.Icon--primaryLighter-v4-0-0r0yht {\n color: var(--primary-lighter);\n}\n\n.Icon--primaryDark-v4-0-0p9g7o {\n color: var(--primary-dark);\n}\n\n.Icon--primaryDarker-v4-0-0faq17 {\n color: var(--primary-darker);\n}\n\n.Icon--alertLighter-v4-0-094hm3 {\n color: var(--alert-lighter);\n}\n\n.Icon--alertDark-v4-0-0eg9dx {\n color: var(--alert-dark);\n}\n\n.Icon--alertDarker-v4-0-0xzhvm {\n color: var(--alert-darker);\n}\n\n.Icon--successLighter-v4-0-0f3kyg {\n color: var(--success-lighter);\n}\n\n.Icon--successDark-v4-0-0vw1bv {\n color: var(--success-dark);\n}\n\n.Icon--successDarker-v4-0-0vvy42 {\n color: var(--success-darker);\n}\n\n.Icon--warningLighter-v4-0-0tls9i {\n color: var(--warning-lighter);\n}\n\n.Icon--warningDark-v4-0-0ivb4n {\n color: var(--warning-dark);\n}\n\n.Icon--warningDarker-v4-0-0kwcsi {\n color: var(--warning-darker);\n}\n\n.Icon--accent1-v4-0-09gq7j {\n color: var(--accent1);\n}\n\n.Icon--accent1Lighter-v4-0-0mdj0r {\n color: var(--accent1-lighter);\n}\n\n.Icon--accent1Dark-v4-0-0ul9k8 {\n color: var(--accent1-dark);\n}\n\n.Icon--accent1Darker-v4-0-094dld {\n color: var(--accent1-darker);\n}\n\n.Icon--accent2-v4-0-09gq7j {\n color: var(--accent2);\n}\n\n.Icon--accent2Lighter-v4-0-06g3ga {\n color: var(--accent2-lighter);\n}\n\n.Icon--accent2Dark-v4-0-0ukprn {\n color: var(--accent2-dark);\n}\n\n.Icon--accent2Darker-v4-0-0nsrvl {\n color: var(--accent2-darker);\n}\n\n.Icon--accent3-v4-0-09gq7j {\n color: var(--accent3);\n}\n\n.Icon--accent3Lighter-v4-0-0z9pxd {\n color: var(--accent3-lighter);\n}\n\n.Icon--accent3Dark-v4-0-0uk5z1 {\n color: var(--accent3-dark);\n}\n\n.Icon--accent3Darker-v4-0-0wjxw5 {\n color: var(--accent3-darker);\n}\n\n.Icon--accent4-v4-0-09gq7j {\n color: var(--accent4);\n}\n\n.Icon--accent4Lighter-v4-0-06xrnj {\n color: var(--accent4-lighter);\n}\n\n.Icon--accent4Dark-v4-0-0ujm6g {\n color: var(--accent4-dark);\n}\n\n.Icon--accent4Darker-v4-0-0hvjlx {\n color: var(--accent4-darker);\n}\n\n.Icon--inverse-v4-0-09odm0 {\n color: var(--inverse);\n}\n";
|
|
2882
|
+
var iconStyles = {"Icon":"Icon-v4-0-0otivg","Icon--subtle":"Icon--subtle-v4-0-0w0kcj","Icon--disabled":"Icon--disabled-v4-0-0lrnrs","Icon--destructive":"Icon--destructive-v4-0-0tuxy4","Icon--white":"Icon--white-v4-0-0sl032","Icon--default":"Icon--default-v4-0-0gjis3","Icon--info":"Icon--info-v4-0-08901q","Icon--success":"Icon--success-v4-0-01xt5v","Icon--warning":"Icon--warning-v4-0-0nhsi8","Icon--alert":"Icon--alert-v4-0-0s8z2y","Icon--primary":"Icon--primary-v4-0-0nqg8p","Icon--primaryLighter":"Icon--primaryLighter-v4-0-0r0yht","Icon--primaryDark":"Icon--primaryDark-v4-0-0p9g7o","Icon--primaryDarker":"Icon--primaryDarker-v4-0-0faq17","Icon--alertLighter":"Icon--alertLighter-v4-0-094hm3","Icon--alertDark":"Icon--alertDark-v4-0-0eg9dx","Icon--alertDarker":"Icon--alertDarker-v4-0-0xzhvm","Icon--successLighter":"Icon--successLighter-v4-0-0f3kyg","Icon--successDark":"Icon--successDark-v4-0-0vw1bv","Icon--successDarker":"Icon--successDarker-v4-0-0vvy42","Icon--warningLighter":"Icon--warningLighter-v4-0-0tls9i","Icon--warningDark":"Icon--warningDark-v4-0-0ivb4n","Icon--warningDarker":"Icon--warningDarker-v4-0-0kwcsi","Icon--accent1":"Icon--accent1-v4-0-09gq7j","Icon--accent1Lighter":"Icon--accent1Lighter-v4-0-0mdj0r","Icon--accent1Dark":"Icon--accent1Dark-v4-0-0ul9k8","Icon--accent1Darker":"Icon--accent1Darker-v4-0-094dld","Icon--accent2":"Icon--accent2-v4-0-09gq7j","Icon--accent2Lighter":"Icon--accent2Lighter-v4-0-06g3ga","Icon--accent2Dark":"Icon--accent2Dark-v4-0-0ukprn","Icon--accent2Darker":"Icon--accent2Darker-v4-0-0nsrvl","Icon--accent3":"Icon--accent3-v4-0-09gq7j","Icon--accent3Lighter":"Icon--accent3Lighter-v4-0-0z9pxd","Icon--accent3Dark":"Icon--accent3Dark-v4-0-0uk5z1","Icon--accent3Darker":"Icon--accent3Darker-v4-0-0wjxw5","Icon--accent4":"Icon--accent4-v4-0-09gq7j","Icon--accent4Lighter":"Icon--accent4Lighter-v4-0-06xrnj","Icon--accent4Dark":"Icon--accent4Dark-v4-0-0ujm6g","Icon--accent4Darker":"Icon--accent4Darker-v4-0-0hvjlx","Icon--inverse":"Icon--inverse-v4-0-09odm0"};
|
|
2883
|
+
styleInject(css_248z$15);
|
|
2880
2884
|
|
|
2881
2885
|
// 'outline', 'rounded' to be deprecated soon.
|
|
2882
2886
|
|
|
@@ -2979,9 +2983,9 @@ var GenericText = function GenericText(_ref, ref) {
|
|
|
2979
2983
|
};
|
|
2980
2984
|
var Link$1 = /*#__PURE__*/React.forwardRef(GenericText);
|
|
2981
2985
|
|
|
2982
|
-
var css_248z$
|
|
2983
|
-
var textStyles = {"Text":"
|
|
2984
|
-
styleInject(css_248z$
|
|
2986
|
+
var css_248z$14 = "/* Text */\n.Text-v4-0-0adr7o {\n margin: 0;\n line-height: var(--font-height);\n}\n\n.Text--small-v4-0-04o0wd {\n font-size: var(--font-size-s);\n line-height: var(--font-height-normal);\n}\n\n.Text--regular-v4-0-07ze6z {\n font-size: var(--font-size);\n line-height: var(--font-height);\n}\n\n.Text--large-v4-0-04jz0u {\n font-size: var(--font-size-m);\n line-height: var(--font-height-m);\n}\n\n.Text--default-v4-0-0eidke {\n color: var(--text);\n}\n\n.Text--subtle-v4-0-02qyx3 {\n color: var(--text-subtle);\n}\n\n.Text--disabled-v4-0-0io3nj {\n color: var(--text-disabled);\n}\n\n.Text--destructive-v4-0-07pp21 {\n color: var(--text-destructive);\n}\n\n.Text--white-v4-0-04q51x {\n color: var(--text-white);\n}\n\n.Text--success-v4-0-0e778n {\n color: var(--text-success);\n}\n\n.Text--link-v4-0-0bb562 {\n color: var(--text-link);\n}\n\n.Text--medium-v4-0-0c2gqk {\n font-weight: var(--font-weight-medium);\n}\n\n.Text--strong-v4-0-02qp8m {\n font-weight: var(--font-weight-bold);\n}\n";
|
|
2987
|
+
var textStyles = {"Text":"Text-v4-0-0adr7o","Text--small":"Text--small-v4-0-04o0wd","Text--regular":"Text--regular-v4-0-07ze6z","Text--large":"Text--large-v4-0-04jz0u","Text--default":"Text--default-v4-0-0eidke","Text--subtle":"Text--subtle-v4-0-02qyx3","Text--disabled":"Text--disabled-v4-0-0io3nj","Text--destructive":"Text--destructive-v4-0-07pp21","Text--white":"Text--white-v4-0-04q51x","Text--success":"Text--success-v4-0-0e778n","Text--link":"Text--link-v4-0-0bb562","Text--medium":"Text--medium-v4-0-0c2gqk","Text--strong":"Text--strong-v4-0-02qp8m"};
|
|
2988
|
+
styleInject(css_248z$14);
|
|
2985
2989
|
|
|
2986
2990
|
var _excluded$11 = ["appearance", "size", "children", "weight", "small", "className", "color"];
|
|
2987
2991
|
var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -3010,9 +3014,9 @@ Text.defaultProps = {
|
|
|
3010
3014
|
size: 'regular'
|
|
3011
3015
|
};
|
|
3012
3016
|
|
|
3013
|
-
var css_248z$
|
|
3014
|
-
var styles$
|
|
3015
|
-
styleInject(css_248z$
|
|
3017
|
+
var css_248z$13 = ".Chip-v4-0-0wl63o {\n display: flex;\n box-sizing: border-box;\n border-radius: var(--spacing-l);\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n width: -moz-fit-content;\n width: fit-content;\n justify-content: space-between;\n border-style: solid;\n border-width: var(--spacing-xs);\n align-items: center;\n flex-direction: row;\n cursor: default;\n height: var(--spacing-xl);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Chip-wrapper-v4-0-0wbnfy {\n display: inline-flex;\n align-items: center;\n}\n\n.Chip-icon--left-v4-0-0t7fg8 {\n margin-right: var(--spacing-m);\n display: flex;\n align-items: center;\n}\n\n.Chip-icon--right-v4-0-0i3j2s {\n display: flex;\n align-items: center;\n border-radius: 10px;\n margin-left: var(--spacing-s);\n}\n\n.Chip--action-v4-0-03mdok {\n background: var(--secondary-light);\n border: 0px;\n cursor: pointer;\n}\n\n.Chip--action-v4-0-03mdok:hover {\n background: var(--secondary);\n}\n\n.Chip--action-v4-0-03mdok:focus-visible {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.Chip--action-v4-0-03mdok:active {\n background: var(--secondary-dark);\n}\n\n.Chip-action--disabled-v4-0-0ca7qx {\n background: var(--secondary-light);\n opacity: var(--opacity-12);\n border: 0px;\n outline: none;\n cursor: not-allowed;\n}\n\n.Chip--selection-v4-0-0yh1rg {\n background: var(--shadow-0);\n border-color: var(--stone);\n cursor: pointer;\n}\n\n.Chip--selection-v4-0-0yh1rg:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n}\n\n.Chip--selection-v4-0-0yh1rg:focus-visible {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.Chip--selection-v4-0-0yh1rg:active {\n background: var(--secondary-light);\n border-color: var(--inverse-lightest);\n}\n\n.Chip-selection--disabled-v4-0-0uxehj {\n background: var(--white);\n border-color: var(--secondary);\n opacity: var(--opacity-12);\n cursor: not-allowed;\n}\n\n.Chip-selection--selected-v4-0-0fpa5v {\n background: rgba(220, 236, 249, 0.48);\n border-color: var(--primary-lighter);\n}\n\n.Chip-selection--selected-v4-0-0fpa5v:hover {\n background: rgba(151, 197, 240, 0.48);\n border-color: var(--primary-light);\n}\n\n.Chip-selection--selected-v4-0-0fpa5v:focus-visible {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n outline: none;\n}\n\n.Chip-selection--selected-v4-0-0fpa5v:active {\n background: var(--primary-lighter);\n border-color: var(--primary-dark);\n}\n\n.Chip-selection--selected-v4-0-0fpa5v:active .Chip-icon-v4-0-0xyc56,\n.Chip-selection--selected-v4-0-0fpa5v:active .Chip-text-v4-0-0xy52m {\n color: var(--primary-darker);\n}\n\n.Chip-text--truncate-v4-0-0tryam {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: inline;\n max-width: 100%;\n}\n\n.Chip-selection--selectedDisabled-v4-0-0geyr2 {\n background: rgba(220, 236, 249, 0.48);\n border-color: var(--primary-lighter);\n}\n\n.Chip--input-v4-0-0ga7ka {\n background: var(--secondary-light);\n font-weight: var(--font-weight-normal);\n border: 0px;\n}\n\n.Chip--input-v4-0-0ga7ka:hover {\n background: var(--secondary);\n}\n\n.Chip--input-v4-0-0ga7ka:focus-visible,\n.Chip--input-v4-0-0ga7ka:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.Chip--input-v4-0-0ga7ka:active {\n background: var(--secondary-dark);\n}\n\n.Chip-input--disabled-v4-0-0ktv82 {\n background: var(--secondary-lighter);\n opacity: var(--opacity-12);\n cursor: not-allowed;\n border: 0px;\n}\n\n.Chip-icon--right-v4-0-0i3j2s:focus-visible {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n\n.Chip-icon--right-v4-0-0i3j2s:hover {\n background-color: var(--secondary);\n}\n\n.Chip-icon--right-v4-0-0i3j2s:active {\n background-color: var(--secondary-dark);\n}\n\n.Chip-icon-disabled--right-v4-0-0dfebv {\n pointer-events: none;\n}\n\n.Chip-icon--selected-v4-0-06yqb0 {\n border-radius: 10px;\n}\n\n.Chip-icon--selected-v4-0-06yqb0:focus-visible {\n outline: var(--spacing-s) solid var(--primary-shadow);\n}\n\n.Chip-icon--selected-v4-0-06yqb0:hover {\n background-color: var(--primary-lighter);\n}\n\n.Chip-icon--selected-v4-0-06yqb0:active {\n background-color: var(--primary-light);\n}\n\n.Chip-selection--disabled-v4-0-0uxehj:focus-visible,\n.Chip-icon-disabled--right-v4-0-0dfebv:focus-visible,\n.Chip-selection--selectedDisabled-v4-0-0geyr2:focus-visible,\n.Chip-input--disabled-v4-0-0ktv82:focus-visible {\n outline: none;\n}\n\n.Chip-icon--clear-v4-0-0hvc17 {\n padding-right: var(--spacing-s);\n}\n";
|
|
3018
|
+
var styles$Y = {"Chip":"Chip-v4-0-0wl63o","Chip-wrapper":"Chip-wrapper-v4-0-0wbnfy","Chip-icon--left":"Chip-icon--left-v4-0-0t7fg8","Chip-icon--right":"Chip-icon--right-v4-0-0i3j2s","Chip--action":"Chip--action-v4-0-03mdok","Chip-action--disabled":"Chip-action--disabled-v4-0-0ca7qx","Chip--selection":"Chip--selection-v4-0-0yh1rg","Chip-selection--disabled":"Chip-selection--disabled-v4-0-0uxehj","Chip-selection--selected":"Chip-selection--selected-v4-0-0fpa5v","Chip-icon":"Chip-icon-v4-0-0xyc56","Chip-text":"Chip-text-v4-0-0xy52m","Chip-text--truncate":"Chip-text--truncate-v4-0-0tryam","Chip-selection--selectedDisabled":"Chip-selection--selectedDisabled-v4-0-0geyr2","Chip--input":"Chip--input-v4-0-0ga7ka","Chip-input--disabled":"Chip-input--disabled-v4-0-0ktv82","Chip-icon-disabled--right":"Chip-icon-disabled--right-v4-0-0dfebv","Chip-icon--selected":"Chip-icon--selected-v4-0-06yqb0","Chip-icon--clear":"Chip-icon--clear-v4-0-0hvc17"};
|
|
3019
|
+
styleInject(css_248z$13);
|
|
3016
3020
|
|
|
3017
3021
|
var GenericChip = function GenericChip(props) {
|
|
3018
3022
|
var label = props.label,
|
|
@@ -3042,7 +3046,7 @@ var GenericChip = function GenericChip(props) {
|
|
|
3042
3046
|
}, [contentRef]);
|
|
3043
3047
|
var baseProps = extractBaseProps(props);
|
|
3044
3048
|
var iconClass = function iconClass(align) {
|
|
3045
|
-
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
3049
|
+
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$Y['Chip-icon'], true), styles$Y["Chip-icon--".concat(align)], align), styles$Y["Chip-icon-disabled--right"], align === 'right' && disabled), 'cursor-pointer', align === 'right' && !disabled), styles$Y['Chip-icon--selected'], align === 'right' && selected));
|
|
3046
3050
|
};
|
|
3047
3051
|
var onCloseHandler = function onCloseHandler(e) {
|
|
3048
3052
|
e.stopPropagation();
|
|
@@ -3064,13 +3068,13 @@ var GenericChip = function GenericChip(props) {
|
|
|
3064
3068
|
var iconAppearance = function iconAppearance(align) {
|
|
3065
3069
|
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'primary_dark', selected), 'subtle', !selected && align === 'right'), 'inverse', !selected && align === 'left'));
|
|
3066
3070
|
};
|
|
3067
|
-
var chipTextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
3071
|
+
var chipTextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Y['Chip-text'], true), 'mr-3', true));
|
|
3068
3072
|
var textColor = classnames(_defineProperty$1(_defineProperty$1({}, 'primary-dark', selected), 'inverse', !disabled && !selected));
|
|
3069
|
-
var chipWrapperClass = classnames(_defineProperty$1({}, styles$
|
|
3073
|
+
var chipWrapperClass = classnames(_defineProperty$1({}, styles$Y['Chip-wrapper'], true), className);
|
|
3070
3074
|
var renderLabel = function renderLabel() {
|
|
3071
3075
|
if (typeof label === 'string') {
|
|
3072
3076
|
return /*#__PURE__*/React.createElement("div", {
|
|
3073
|
-
className: styles$
|
|
3077
|
+
className: styles$Y['Chip-text--truncate'],
|
|
3074
3078
|
ref: contentRef
|
|
3075
3079
|
}, labelPrefix && /*#__PURE__*/React.createElement(Text, {
|
|
3076
3080
|
"data-test": "DesignSystem-GenericChip--LabelPrefix",
|
|
@@ -3080,7 +3084,7 @@ var GenericChip = function GenericChip(props) {
|
|
|
3080
3084
|
}, labelPrefix), /*#__PURE__*/React.createElement(Text, {
|
|
3081
3085
|
"data-test": "DesignSystem-GenericChip--Text",
|
|
3082
3086
|
color: textColor,
|
|
3083
|
-
className: styles$
|
|
3087
|
+
className: styles$Y['Chip-text']
|
|
3084
3088
|
}, label));
|
|
3085
3089
|
}
|
|
3086
3090
|
return label;
|
|
@@ -3153,7 +3157,7 @@ var Chip = function Chip(props) {
|
|
|
3153
3157
|
};
|
|
3154
3158
|
var clearbutton = type === 'action' ? false : clearButton;
|
|
3155
3159
|
var select = type === 'selection' && selected ? true : false;
|
|
3156
|
-
var chipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
3160
|
+
var chipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$Y.Chip, true), styles$Y["Chip-".concat(type, "--disabled")], disabled), styles$Y["Chip--".concat(type)], type && !disabled), styles$Y["Chip-".concat(type, "--selected")], selected && !disabled), styles$Y["Chip-selection--selectedDisabled"], type === 'selection' && selected && disabled), styles$Y['Chip-icon--clear'], clearbutton), className);
|
|
3157
3161
|
return /*#__PURE__*/React.createElement(GenericChip, _extends$2({
|
|
3158
3162
|
"data-test": "DesignSystem-Chip--GenericChip"
|
|
3159
3163
|
}, baseProps, {
|
|
@@ -3177,9 +3181,9 @@ Chip.defaultProps = {
|
|
|
3177
3181
|
maxWidth: 'var(--spacing-9)'
|
|
3178
3182
|
};
|
|
3179
3183
|
|
|
3180
|
-
var css_248z$
|
|
3181
|
-
var styles$
|
|
3182
|
-
styleInject(css_248z$
|
|
3184
|
+
var css_248z$12 = ".ChipGroup-v4-0-0yikq7 {\n display: inline-flex;\n}\n\n.ChipGroup-item-v4-0-0top0m {\n margin: 0 var(--spacing-m);\n}\n\n.ChipGroup-item-v4-0-0top0m:first-child {\n margin-left: 0;\n}\n\n.ChipGroup-item-v4-0-0top0m:last-child {\n margin-right: 0;\n}\n";
|
|
3185
|
+
var styles$X = {"ChipGroup":"ChipGroup-v4-0-0yikq7","ChipGroup-item":"ChipGroup-item-v4-0-0top0m"};
|
|
3186
|
+
styleInject(css_248z$12);
|
|
3183
3187
|
|
|
3184
3188
|
var ChipGroup = function ChipGroup(props) {
|
|
3185
3189
|
var list = props.list,
|
|
@@ -3193,7 +3197,7 @@ var ChipGroup = function ChipGroup(props) {
|
|
|
3193
3197
|
var onCloseHandler = function onCloseHandler(item) {
|
|
3194
3198
|
if (onClose) onClose(item);
|
|
3195
3199
|
};
|
|
3196
|
-
var ChipGroupClass = classnames(_defineProperty$1({}, styles$
|
|
3200
|
+
var ChipGroupClass = classnames(_defineProperty$1({}, styles$X.ChipGroup, true), className);
|
|
3197
3201
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
3198
3202
|
"data-test": "DesignSystem-ChipGroup"
|
|
3199
3203
|
}, baseProps, {
|
|
@@ -3210,7 +3214,7 @@ var ChipGroup = function ChipGroup(props) {
|
|
|
3210
3214
|
iconType = item.iconType;
|
|
3211
3215
|
return /*#__PURE__*/React.createElement("span", {
|
|
3212
3216
|
key: ind,
|
|
3213
|
-
className: styles$
|
|
3217
|
+
className: styles$X['ChipGroup-item']
|
|
3214
3218
|
}, /*#__PURE__*/React.createElement(Chip, {
|
|
3215
3219
|
"data-test": "DesignSystem-ChipGroup--Chip",
|
|
3216
3220
|
name: name,
|
|
@@ -3298,9 +3302,17 @@ var CheckboxIcon = function CheckboxIcon(props) {
|
|
|
3298
3302
|
}
|
|
3299
3303
|
};
|
|
3300
3304
|
|
|
3301
|
-
var css_248z$
|
|
3302
|
-
var checkboxStyles = {"Checkbox":"
|
|
3303
|
-
styleInject(css_248z$
|
|
3305
|
+
var css_248z$11 = ".Checkbox-v4-0-0qfvh8 {\n display: flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: initial;\n box-sizing: border-box;\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n}\n\n.Checkbox-input-v4-0-0f7i83 {\n position: absolute;\n z-index: 2;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n margin: 0;\n}\n\n.Checkbox-labelWrapper-v4-0-0fis1e {\n padding-left: var(--spacing);\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.Checkbox-label-v4-0-0f8x09 {\n display: flex;\n cursor: pointer;\n}\n\n.Checkbox-label--tiny-v4-0-023kmy {\n font-weight: var(--font-weight-bold);\n}\n\n.Checkbox-outerWrapper-v4-0-0vte6v {\n position: relative;\n margin-top: var(--spacing-s);\n}\n\n.Checkbox-outerWrapper--regular-v4-0-02ixcz {\n height: var(--spacing-2);\n min-width: var(--spacing-2);\n}\n\n.Checkbox-outerWrapper--tiny-v4-0-0qfvjf {\n height: var(--spacing-l);\n min-width: var(--spacing-l);\n}\n\n/* Type: Unchecked */\n\n.Checkbox-wrapper-v4-0-0mxncc {\n top: 0;\n left: 0;\n border-radius: var(--spacing-s);\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n justify-content: center;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Checkbox-input-v4-0-0f7i83:focus {\n outline: 0;\n}\n\n.Checkbox-input-v4-0-0f7i83 ~ .Checkbox-wrapper--default-v4-0-0dj01v {\n border: var(--spacing-xs) solid var(--secondary-dark);\n background-color: var(--shadow-0);\n}\n\n.Checkbox-input-v4-0-0f7i83:focus ~ .Checkbox-wrapper--default-v4-0-0dj01v {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.Checkbox-input-v4-0-0f7i83:hover ~ .Checkbox-wrapper--default-v4-0-0dj01v {\n border: var(--spacing-xs) solid var(--inverse-lightest);\n background-color: var(--shadow-0);\n}\n\n.Checkbox-input-v4-0-0f7i83:active ~ .Checkbox-wrapper--default-v4-0-0dj01v {\n border: var(--spacing-xs) solid var(--inverse-lightest);\n background-color: var(--secondary-light);\n}\n\n.Checkbox--disabled-v4-0-0bdq0m {\n pointer-events: none;\n}\n\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-wrapper--default-v4-0-0dj01v {\n border: var(--spacing-xs) solid var(--secondary-light);\n background-color: var(--secondary-lightest);\n}\n\n/* Type: checked && Type: indeterminate */\n\n.Checkbox-input--checked-v4-0-0a6zmx ~ .Checkbox-wrapper-v4-0-0mxncc,\n.Checkbox-input--indeterminate-v4-0-0bi0nv ~ .Checkbox-wrapper-v4-0-0mxncc {\n background-color: var(--primary);\n border: 0;\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:focus ~ .Checkbox-wrapper-v4-0-0mxncc,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:focus ~ .Checkbox-wrapper-v4-0-0mxncc {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n background-color: var(--primary);\n border: 0;\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:hover ~ .Checkbox-wrapper-v4-0-0mxncc,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:hover ~ .Checkbox-wrapper-v4-0-0mxncc {\n background-color: var(--primary-dark);\n border: 0;\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:active ~ .Checkbox-wrapper-v4-0-0mxncc,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:active ~ .Checkbox-wrapper-v4-0-0mxncc {\n background-color: var(--primary-darker);\n border: 0;\n}\n\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-input--checked-v4-0-0a6zmx ~ .Checkbox-wrapper-v4-0-0mxncc,\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-input--indeterminate-v4-0-0bi0nv ~ .Checkbox-wrapper-v4-0-0mxncc {\n background-color: var(--primary-lighter);\n border: 0;\n}\n\n/* Error State -> Default */\n\n.Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert);\n}\n\n.Checkbox-input-v4-0-0f7i83:focus ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.Checkbox-input-v4-0-0f7i83:hover ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert-dark);\n}\n\n.Checkbox-input-v4-0-0f7i83:active ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert-darker);\n background-color: var(--secondary-light);\n}\n\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n/* Error State -> Checked & Indeterminate */\n\n.Checkbox-input--checked-v4-0-0a6zmx ~ .Checkbox-wrapper--error-v4-0-0pkdwj,\n.Checkbox-input--indeterminate-v4-0-0bi0nv ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert);\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:focus ~ .Checkbox-wrapper--error-v4-0-0pkdwj,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:focus ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:hover ~ .Checkbox-wrapper--error-v4-0-0pkdwj,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:hover ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert-dark);\n}\n\n.Checkbox-input--checked-v4-0-0a6zmx:active ~ .Checkbox-wrapper--error-v4-0-0pkdwj,\n.Checkbox-input--indeterminate-v4-0-0bi0nv:active ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n background-color: var(--primary-darker);\n border: var(--spacing-xs) solid var(--alert-darker);\n}\n\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-input--checked-v4-0-0a6zmx ~ .Checkbox-wrapper--error-v4-0-0pkdwj,\n.Checkbox--disabled-v4-0-0bdq0m .Checkbox-input--indeterminate-v4-0-0bi0nv ~ .Checkbox-wrapper--error-v4-0-0pkdwj {\n border: var(--spacing-xs) solid var(--alert-lighter);\n}\n";
|
|
3306
|
+
var checkboxStyles = {"Checkbox":"Checkbox-v4-0-0qfvh8","Checkbox-input":"Checkbox-input-v4-0-0f7i83","Checkbox-labelWrapper":"Checkbox-labelWrapper-v4-0-0fis1e","Checkbox-label":"Checkbox-label-v4-0-0f8x09","Checkbox-label--tiny":"Checkbox-label--tiny-v4-0-023kmy","Checkbox-outerWrapper":"Checkbox-outerWrapper-v4-0-0vte6v","Checkbox-outerWrapper--regular":"Checkbox-outerWrapper--regular-v4-0-02ixcz","Checkbox-outerWrapper--tiny":"Checkbox-outerWrapper--tiny-v4-0-0qfvjf","Checkbox-wrapper":"Checkbox-wrapper-v4-0-0mxncc","Checkbox-wrapper--default":"Checkbox-wrapper--default-v4-0-0dj01v","Checkbox--disabled":"Checkbox--disabled-v4-0-0bdq0m","Checkbox-input--checked":"Checkbox-input--checked-v4-0-0a6zmx","Checkbox-input--indeterminate":"Checkbox-input--indeterminate-v4-0-0bi0nv","Checkbox-wrapper--error":"Checkbox-wrapper--error-v4-0-0pkdwj"};
|
|
3307
|
+
styleInject(css_248z$11);
|
|
3308
|
+
|
|
3309
|
+
var css_248z$10 = ".Dropdown-v4-0-0u8ns9 {\n width: 100%;\n position: relative;\n}\n\n.Dropdown-wrapper-v4-0-0bmaub {\n margin-top: var(--spacing-m);\n margin-bottom: var(--spacing-m);\n}\n\n.Dropdown-inputWrapper-v4-0-04axjg {\n border-bottom: var(--spacing-xs) solid var(--secondary-dark);\n}\n\n.Dropdown-inputWrapper-v4-0-04axjg:focus-within {\n border-bottom: var(--spacing-xs) solid var(--primary);\n}\n\n.Dropdown-input-v4-0-0fa58w {\n min-width: unset !important;\n}\n\n.Dropdown-input-v4-0-0fa58w,\n.Dropdown-input-v4-0-0fa58w:focus-within {\n border: unset !important;\n box-shadow: none !important;\n}\n\n.Dropdown-section-v4-0-0hteog {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-left: var(--spacing-l);\n margin-top: var(--spacing-l);\n margin-bottom: var(--spacing-0-75);\n}\n\n.Dropdown-section--withClear-v4-0-0f0otg {\n margin-top: var(--spacing);\n margin-bottom: var(--spacing-s);\n}\n\n.Dropdown-buttonWrapper-v4-0-0aou09 {\n display: flex;\n justify-content: flex-end;\n padding-top: var(--spacing);\n padding-right: var(--spacing);\n padding-bottom: var(--spacing);\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.Dropdown-footer-v4-0-0m2nz7 {\n padding-left: var(--spacing-l);\n padding-bottom: var(--spacing-m);\n padding-top: var(--spacing);\n box-sizing: border-box;\n}\n\n.Option-v4-0-06r1z3 {\n display: flex;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Option-v4-0-06r1z3,\n.Option-loading-v4-0-0qyscq {\n padding-top: var(--spacing-0-75);\n padding-bottom: var(--spacing-0-75);\n padding-left: var(--spacing-l);\n padding-right: var(--spacing);\n}\n\n.Option-checkbox-v4-0-0barfw .Checkbox-outerWrapper-v4-0-0to04j {\n background-color: var(--shadow-0);\n}\n\n.Option-checkboxWrapper-v4-0-0hduq9 {\n display: block;\n}\n\n.OptionCheckbox-v4-0-0oirt3 {\n width: 100%;\n padding-left: var(--spacing-l);\n padding-top: var(--spacing-0-75);\n padding-bottom: var(--spacing-0-75);\n}\n\n.Option--active-v4-0-0yukfg,\n.Option-checkbox--active-v4-0-07r9ck {\n background-color: var(--secondary-lightest);\n cursor: pointer;\n}\n\n.Option--active-v4-0-0yukfg:hover,\n.Option-checkbox--active-v4-0-07r9ck:hover {\n background-color: var(--secondary-lighter);\n}\n\n.Option--active-v4-0-0yukfg:active,\n.Option-checkbox--active-v4-0-07r9ck:active {\n background-color: var(--secondary-light);\n cursor: pointer;\n}\n\n.Option--active-v4-0-0yukfg {\n transition: var(--standard-productive-curve);\n}\n\n.Option-loading-v4-0-0qyscq {\n pointer-events: none;\n}\n\n.Option--selected-v4-0-0co1w9 {\n background-color: var(--primary-lightest);\n}\n\n.Option--selected-v4-0-0co1w9:hover {\n background-color: var(--primary-lighter);\n}\n\n.Option--selected-v4-0-0co1w9:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.Option--selected-v4-0-0co1w9:active .Option-text-v4-0-0qizdq,\n.Option--selected-v4-0-0co1w9:active .Option-subInfo-v4-0-07l7yo {\n color: var(--primary-darker);\n}\n\n.Option--disabled-v4-0-02k2ff,\n.OptionWrapper--disabled-v4-0-0wwtkb {\n pointer-events: auto;\n cursor: default;\n}\n\n.Option-label-v4-0-0tweg8 {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.OptionCheckbox-v4-0-0oirt3 .Checkbox-label-v4-0-0lmy9y {\n padding-right: var(--spacing-l);\n width: 100%;\n display: flex;\n overflow: hidden;\n cursor: pointer;\n}\n\n.Option-text-v4-0-0qizdq,\n.OptionCheckbox-v4-0-0oirt3 .Text-v4-0-03zuwf {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.Option-text--wrap-v4-0-0an89q,\n.Dropdown-wrapper--wrap-v4-0-0eoac4 .OptionCheckbox-v4-0-0oirt3 .Text-v4-0-03zuwf {\n white-space: unset;\n}\n\n.Option--icon-v4-0-0sxwjq {\n padding-left: var(--spacing);\n}\n\n.Option-icon-v4-0-0qj6gb {\n display: flex;\n}\n\n.Option-icon-v4-0-0qj6gb {\n height: -moz-fit-content;\n height: fit-content;\n line-height: var(--font-height);\n}\n";
|
|
3310
|
+
var dropdownStyles = {"Dropdown":"Dropdown-v4-0-0u8ns9","Dropdown-wrapper":"Dropdown-wrapper-v4-0-0bmaub","Dropdown-inputWrapper":"Dropdown-inputWrapper-v4-0-04axjg","Dropdown-input":"Dropdown-input-v4-0-0fa58w","Dropdown-section":"Dropdown-section-v4-0-0hteog","Dropdown-section--withClear":"Dropdown-section--withClear-v4-0-0f0otg","Dropdown-buttonWrapper":"Dropdown-buttonWrapper-v4-0-0aou09","Dropdown-footer":"Dropdown-footer-v4-0-0m2nz7","Option":"Option-v4-0-06r1z3","Option-loading":"Option-loading-v4-0-0qyscq","Option-checkbox":"Option-checkbox-v4-0-0barfw","Checkbox-outerWrapper":"Checkbox-outerWrapper-v4-0-0to04j","Option-checkboxWrapper":"Option-checkboxWrapper-v4-0-0hduq9","OptionCheckbox":"OptionCheckbox-v4-0-0oirt3","Option--active":"Option--active-v4-0-0yukfg","Option-checkbox--active":"Option-checkbox--active-v4-0-07r9ck","Option--selected":"Option--selected-v4-0-0co1w9","Option-text":"Option-text-v4-0-0qizdq","Option-subInfo":"Option-subInfo-v4-0-07l7yo","Option--disabled":"Option--disabled-v4-0-02k2ff","OptionWrapper--disabled":"OptionWrapper--disabled-v4-0-0wwtkb","Option-label":"Option-label-v4-0-0tweg8","Checkbox-label":"Checkbox-label-v4-0-0lmy9y","Text":"Text-v4-0-03zuwf","Option-text--wrap":"Option-text--wrap-v4-0-0an89q","Dropdown-wrapper--wrap":"Dropdown-wrapper--wrap-v4-0-0eoac4","Option--icon":"Option--icon-v4-0-0sxwjq","Option-icon":"Option-icon-v4-0-0qj6gb"};
|
|
3311
|
+
styleInject(css_248z$10);
|
|
3312
|
+
|
|
3313
|
+
var css_248z$$ = "/** Grid **/\n\n.Grid-wrapper-v4-0-0so0yp {\n display: flex;\n position: relative;\n overflow: hidden;\n height: 100%;\n}\n\n.Grid-v4-0-09ys29 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n height: 100%;\n overflow: hidden;\n background: var(--white);\n}\n\n.Grid--resource-v4-0-09r3cs .Grid-row--body-v4-0-08lwus:hover,\n.Grid--resource-v4-0-09r3cs .Grid-row--body-v4-0-08lwus:hover .Grid-cellGroup-v4-0-0xhpny {\n cursor: pointer;\n background: var(--secondary-lightest);\n}\n\n.Grid--resource-v4-0-09r3cs .Grid-row--body-v4-0-08lwus:active,\n.Grid--resource-v4-0-09r3cs .Grid-row--body-v4-0-08lwus:active .Grid-cellGroup-v4-0-0xhpny {\n background: var(--secondary-lighter);\n}\n\n.Grid--resource-v4-0-09r3cs .Grid-row--body-v4-0-08lwus:focus {\n box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);\n outline: none;\n}\n\n.Grid--pinned-v4-0-0kuoow {\n position: absolute;\n height: 100%;\n z-index: 5;\n overflow-x: hidden;\n -ms-overflow-style: none;\n border-right: 3px solid var(--secondary);\n}\n\n.Grid-pinned-v4-0-0rphyv::-webkit-scrollbar {\n display: none;\n}\n\n.Grid--main-v4-0-070272 {\n flex-grow: 1;\n}\n\n.Grid--comfortable-v4-0-0fqp9r .Grid-cell--head-v4-0-0ducew {\n min-height: 40px;\n}\n\n.Grid--comfortable-v4-0-0fqp9r .Grid-cell--body-v4-0-0du8sg {\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n.Grid--standard-v4-0-0xxgbf .Grid-cell--head-v4-0-0ducew {\n min-height: 40px;\n}\n\n.Grid--standard-v4-0-0xxgbf .Grid-cell--body-v4-0-0du8sg {\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n.Grid--compressed-v4-0-0cawjs .Grid-cell--head-v4-0-0ducew {\n min-height: 40px;\n}\n\n.Grid--compressed-v4-0-0cawjs .Grid-cell--body-v4-0-0du8sg {\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Grid--tight-v4-0-03ukb1 .Grid-cell--head-v4-0-0ducew {\n min-height: var(--spacing-3);\n}\n\n.Grid--tight-v4-0-03ukb1 .Grid-cell--body-v4-0-0du8sg {\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Grid-head-v4-0-04dvw4 {\n display: flex;\n flex: 0 0 auto;\n overflow-x: auto;\n border-bottom: var(--border);\n}\n\n.Grid-head-v4-0-04dvw4::-webkit-scrollbar {\n display: none;\n}\n\n.Grid-headCell-v4-0-0kedsm {\n display: flex;\n height: 100%;\n flex-direction: row;\n align-items: center;\n}\n\n.Grid-headCell--draggable-v4-0-0p9hed {\n cursor: grab;\n}\n\n.Grid-headCell--draggable-v4-0-0p9hed:active {\n cursor: grabbing;\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.Grid-body-v4-0-04ds9p {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow-x: auto;\n overflow-y: overlay;\n}\n\n.Grid-rowWrapper-v4-0-07ex9r {\n display: inline-flex;\n flex-direction: column;\n min-width: -moz-fit-content;\n min-width: fit-content;\n flex-shrink: 0;\n border-bottom: var(--border);\n}\n\n.Grid-row-v4-0-053kbg {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n box-sizing: border-box;\n background: var(--white);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n transition-delay: var(--duration--fast-01);\n}\n\n.Grid-row--body-v4-0-08lwus {\n border-color: var(--secondary-light);\n}\n\n.Grid-row--selected-v4-0-0gbmvh,\n.Grid-row--selected-v4-0-0gbmvh .Grid-cellGroup-v4-0-0xhpny {\n background: rgba(220, 236, 249, 0.48);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.Grid-row--selected-v4-0-0gbmvh:hover,\n.Grid-row--selected-v4-0-0gbmvh .Grid-cellGroup-v4-0-0xhpny:hover {\n background: rgba(151, 197, 240, 0.48) !important;\n}\n\n.Grid-row--selected-v4-0-0gbmvh:active,\n.Grid-row--selected-v4-0-0gbmvh .Grid-cellGroup-v4-0-0xhpny:active {\n background: var(--primary-lighter) !important;\n}\n\n.Grid-row--selected-v4-0-0gbmvh:focus,\n.Grid-row--selected-v4-0-0gbmvh .Grid-cellGroup-v4-0-0xhpny:focus {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);\n}\n\n.Grid-rowWrapper-v4-0-07ex9r:last-child .Grid-row--body-v4-0-08lwus {\n border-bottom: 0;\n}\n\n.GridBody-padding-v4-0-0af356 {\n flex-shrink: 0;\n}\n\n.Grid-nestedRow-v4-0-0ssvkb {\n width: 100%;\n overflow: hidden;\n}\n\n.Grid-nestedRowTrigger-v4-0-0vfz68 {\n margin-right: var(--spacing-l);\n cursor: pointer;\n}\n\n.Grid-nestedRow-v4-0-0ssvkb .Grid-rowWrapper-v4-0-07ex9r {\n border-bottom: 0;\n}\n\n.Grid-nestedRow-v4-0-0ssvkb .Grid-cell-v4-0-04dspg:first-child {\n padding-left: calc(var(--spacing-3) + var(--spacing));\n}\n\n.Grid-nestedRowPlaceholder-v4-0-0vgqg6 {\n width: var(--spacing-xl);\n margin-right: var(--spacing-l);\n}\n\n.Grid-cell-v4-0-04dspg {\n position: relative;\n box-sizing: border-box;\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n}\n\n.Grid-cell--body-v4-0-0du8sg {\n padding-right: var(--spacing-l);\n}\n\n.Grid-cell--head-v4-0-0ducew {\n overflow: hidden;\n padding-right: var(--spacing-m);\n}\n\n.Grid-cell--dragged-v4-0-077uia {\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.Grid-cell--separator-v4-0-0958v3 {\n border-left: var(--border);\n border-color: var(--secondary-light);\n}\n\n.Grid-cell--selected-v4-0-0qqz7j {\n background: var(--primary-lightest);\n}\n\n.Grid-cell--nestedRow-v4-0-01nlmo {\n padding-left: var(--spacing);\n}\n\n.Grid-cell--head-v4-0-0ducew.Grid-cell-v4-0-04dspg:first-of-type {\n border-left: none;\n}\n\n/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {\n border-right: var(--border);\n} */\n\n.Grid-row--disabled-v4-0-013ijs {\n opacity: var(--opacity-10);\n pointer-events: none;\n}\n\n.Grid-cell--head-v4-0-0ducew.Grid-cell--selected-v4-0-0qqz7j {\n background: var(--primary-light);\n}\n\n.Grid-cell--checkbox-v4-0-0l1dt4 {\n width: unset;\n min-width: unset;\n display: flex;\n align-items: center;\n z-index: 1;\n padding-right: 0 !important;\n overflow: visible !important;\n}\n\n.Grid-sortingIcons-v4-0-0ku5v2 {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-m);\n}\n\n.Grid-cellReorder-v4-0-04eebj {\n display: flex;\n align-items: center;\n cursor: grab;\n}\n\n.Grid-cellReorder-v4-0-04eebj:active {\n cursor: grabbing;\n}\n\n.Grid-cellContent-v4-0-021pye {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n box-sizing: border-box;\n z-index: inherit;\n}\n\n.Grid-cell--head-v4-0-0ducew .Grid-cellContent-v4-0-021pye {\n overflow: hidden;\n}\n\n.Grid-cellResize-v4-0-0w8014 {\n position: absolute;\n right: 0;\n width: var(--spacing-m);\n cursor: ew-resize;\n height: 100%;\n}\n\n.Grid-cellSortIcon-v4-0-0tb87q {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.Grid-cellSortIcon-v4-0-0tb87q:hover {\n background: var(--secondary);\n}\n\n.Grid-cellResize-v4-0-0w8014:hover {\n background: var(--primary);\n}\n\n.Grid-reorderHighlighter-v4-0-0dqe0m {\n position: absolute;\n height: 100%;\n border: 3px solid var(--primary-light);\n z-index: 10;\n}\n\n.Grid-cellGroup-v4-0-0xhpny {\n display: flex;\n box-sizing: border-box;\n background: var(--white);\n}\n\n.Grid-cellGroup--pinned-v4-0-0kca8z {\n position: sticky;\n z-index: 4;\n}\n\n.Grid-cellGroup--pinned-left-v4-0-05uowf {\n left: 0;\n border-style: inset;\n border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));\n border-right-width: 4px;\n -o-border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n}\n\n.Grid-cellGroup--pinned-right-v4-0-0vkiwx {\n right: 0;\n border-style: inset;\n border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));\n border-left-width: 4px;\n -o-border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n}\n\n.Grid-v4-0-09ys29 .Checkbox-wrapper-v4-0-0z3hh9 {\n margin-right: 0;\n}\n\n/** Grid Cell **/\n\n.GridCell-v4-0-05hcb5 {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n}\n\n.GridCell--align-left-v4-0-073dm6 {\n /* flex-direction: row; */\n justify-content: flex-start;\n text-align: left;\n}\n\n.GridCell--align-right-v4-0-06q0ld {\n /* flex-direction: row-reverse; */\n justify-content: flex-end;\n text-align: right;\n}\n\n.GridCell--align-center-v4-0-02gx1m {\n justify-content: center;\n text-align: center;\n}\n\n.GridCell--metaList-v4-0-0oam57 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n}\n\n.GridCell--statusHint-v4-0-0f0n1h .StatusHint-v4-0-04n9wd {\n overflow: hidden;\n}\n\n.GridCell--statusHint-v4-0-0f0n1h .StatusHint-v4-0-04n9wd .Text-v4-0-09yk0p {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.GridCell--avatar-v4-0-0nimzk .Avatar-v4-0-08yvt5 {\n margin: 0;\n}\n\n.GridCell-metaListWrapper-v4-0-086gfo {\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n}\n\n.GridCell-metaList-v4-0-03bdfy {\n display: flex;\n}\n\n.GridCell-metaList-v4-0-03bdfy .Text-v4-0-09yk0p {\n display: flex;\n align-items: center;\n}\n\n.GridCell-metaList-v4-0-03bdfy .Text-v4-0-09yk0p::before {\n content: '';\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-m);\n height: var(--spacing-m);\n border-radius: 50%;\n background: var(--secondary);\n margin: 0 var(--spacing);\n}\n\n.GridCell-metaList-v4-0-03bdfy .Text-v4-0-09yk0p:first-child::before {\n display: none;\n}\n\n.GridCell--metaList-v4-0-0oam57 ul li:first-child {\n margin-left: 0;\n}\n\n/** Header **/\n\n/** Table-header **/\n\n.Header-v4-0-0c0uc2 {\n background: var(--white);\n padding: var(--spacing-l);\n border-bottom: var(--border);\n}\n\n.Header-content-v4-0-0qdgib {\n display: flex;\n}\n\n.Header-content--bottom-v4-0-0paj5e {\n align-items: center;\n justify-content: space-between;\n}\n\n.Header-search-v4-0-0pigmr {\n width: var(--spacing-9);\n margin-bottom: var(--spacing-2);\n}\n\n.Header-label-v4-0-0nuf7c {\n display: flex;\n flex-grow: 1;\n align-items: center;\n}\n\n.Header-label-v4-0-0nuf7c .Checkbox-v4-0-0kbg0w {\n margin-right: var(--spacing);\n}\n\n.Header-dropdown-v4-0-0y0g2h {\n display: flex;\n margin-left: var(--spacing-m);\n margin-bottom: var(--spacing-2);\n}\n\n.Header-dropdown-v4-0-0y0g2h .Dropdown-v4-0-0c8th5 {\n margin: 0 var(--spacing-m);\n}\n\n.Header-draggableDropdown-v4-0-05xpgz .Dropdown-wrapper-v4-0-01rdhn {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.Header-filters-v4-0-0esd0w {\n display: flex;\n}\n\n.Header-sorting-v4-0-04k8vc {\n display: flex;\n}\n\n.Header-actions-v4-0-09pfgl {\n margin-bottom: var(--spacing-2);\n}\n\n.Header-global-actions-v4-0-03huep {\n justify-content: flex-end;\n margin-left: auto;\n margin-bottom: var(--spacing-2);\n}\n";
|
|
3314
|
+
var gridStyles = {"Grid-wrapper":"Grid-wrapper-v4-0-0so0yp","Grid":"Grid-v4-0-09ys29","Grid--resource":"Grid--resource-v4-0-09r3cs","Grid-row--body":"Grid-row--body-v4-0-08lwus","Grid-cellGroup":"Grid-cellGroup-v4-0-0xhpny","Grid--pinned":"Grid--pinned-v4-0-0kuoow","Grid-pinned":"Grid-pinned-v4-0-0rphyv","Grid--main":"Grid--main-v4-0-070272","Grid--comfortable":"Grid--comfortable-v4-0-0fqp9r","Grid-cell--head":"Grid-cell--head-v4-0-0ducew","Grid-cell--body":"Grid-cell--body-v4-0-0du8sg","Grid--standard":"Grid--standard-v4-0-0xxgbf","Grid--compressed":"Grid--compressed-v4-0-0cawjs","Grid--tight":"Grid--tight-v4-0-03ukb1","Grid-head":"Grid-head-v4-0-04dvw4","Grid-headCell":"Grid-headCell-v4-0-0kedsm","Grid-headCell--draggable":"Grid-headCell--draggable-v4-0-0p9hed","Grid-body":"Grid-body-v4-0-04ds9p","Grid-rowWrapper":"Grid-rowWrapper-v4-0-07ex9r","Grid-row":"Grid-row-v4-0-053kbg","Grid-row--selected":"Grid-row--selected-v4-0-0gbmvh","GridBody-padding":"GridBody-padding-v4-0-0af356","Grid-nestedRow":"Grid-nestedRow-v4-0-0ssvkb","Grid-nestedRowTrigger":"Grid-nestedRowTrigger-v4-0-0vfz68","Grid-cell":"Grid-cell-v4-0-04dspg","Grid-nestedRowPlaceholder":"Grid-nestedRowPlaceholder-v4-0-0vgqg6","Grid-cell--dragged":"Grid-cell--dragged-v4-0-077uia","Grid-cell--separator":"Grid-cell--separator-v4-0-0958v3","Grid-cell--selected":"Grid-cell--selected-v4-0-0qqz7j","Grid-cell--nestedRow":"Grid-cell--nestedRow-v4-0-01nlmo","Grid-row--disabled":"Grid-row--disabled-v4-0-013ijs","Grid-cell--checkbox":"Grid-cell--checkbox-v4-0-0l1dt4","Grid-sortingIcons":"Grid-sortingIcons-v4-0-0ku5v2","Grid-cellReorder":"Grid-cellReorder-v4-0-04eebj","Grid-cellContent":"Grid-cellContent-v4-0-021pye","Grid-cellResize":"Grid-cellResize-v4-0-0w8014","Grid-cellSortIcon":"Grid-cellSortIcon-v4-0-0tb87q","Grid-reorderHighlighter":"Grid-reorderHighlighter-v4-0-0dqe0m","Grid-cellGroup--pinned":"Grid-cellGroup--pinned-v4-0-0kca8z","Grid-cellGroup--pinned-left":"Grid-cellGroup--pinned-left-v4-0-05uowf","Grid-cellGroup--pinned-right":"Grid-cellGroup--pinned-right-v4-0-0vkiwx","Checkbox-wrapper":"Checkbox-wrapper-v4-0-0z3hh9","GridCell":"GridCell-v4-0-05hcb5","GridCell--align-left":"GridCell--align-left-v4-0-073dm6","GridCell--align-right":"GridCell--align-right-v4-0-06q0ld","GridCell--align-center":"GridCell--align-center-v4-0-02gx1m","GridCell--metaList":"GridCell--metaList-v4-0-0oam57","GridCell--statusHint":"GridCell--statusHint-v4-0-0f0n1h","StatusHint":"StatusHint-v4-0-04n9wd","Text":"Text-v4-0-09yk0p","GridCell--avatar":"GridCell--avatar-v4-0-0nimzk","Avatar":"Avatar-v4-0-08yvt5","GridCell-metaListWrapper":"GridCell-metaListWrapper-v4-0-086gfo","GridCell-metaList":"GridCell-metaList-v4-0-03bdfy","Header":"Header-v4-0-0c0uc2","Header-content":"Header-content-v4-0-0qdgib","Header-content--bottom":"Header-content--bottom-v4-0-0paj5e","Header-search":"Header-search-v4-0-0pigmr","Header-label":"Header-label-v4-0-0nuf7c","Checkbox":"Checkbox-v4-0-0kbg0w","Header-dropdown":"Header-dropdown-v4-0-0y0g2h","Dropdown":"Dropdown-v4-0-0c8th5","Header-draggableDropdown":"Header-draggableDropdown-v4-0-05xpgz","Dropdown-wrapper":"Dropdown-wrapper-v4-0-01rdhn","Header-filters":"Header-filters-v4-0-0esd0w","Header-sorting":"Header-sorting-v4-0-04k8vc","Header-actions":"Header-actions-v4-0-09pfgl","Header-global-actions":"Header-global-actions-v4-0-03huep"};
|
|
3315
|
+
styleInject(css_248z$$);
|
|
3304
3316
|
|
|
3305
3317
|
var _excluded$10 = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id", "labelRef"];
|
|
3306
3318
|
var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
@@ -3340,10 +3352,10 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
3340
3352
|
}
|
|
3341
3353
|
}, [checkedProp]);
|
|
3342
3354
|
var CheckboxClass = classnames(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox'], true), checkboxStyles['Checkbox--disabled'], disabled), className);
|
|
3343
|
-
var CheckboxOuterWrapper = classnames(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-outerWrapper'], true), checkboxStyles["Checkbox-outerWrapper--".concat(size)], size));
|
|
3355
|
+
var CheckboxOuterWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-outerWrapper'], true), dropdownStyles['Checkbox-outerWrapper'], true), checkboxStyles["Checkbox-outerWrapper--".concat(size)], size));
|
|
3344
3356
|
var CheckboxInputWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-input'], true), checkboxStyles['Checkbox-input--checked'], checked), checkboxStyles['Checkbox-input--indeterminate'], props.indeterminate));
|
|
3345
|
-
var CheckboxWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-wrapper'], true), checkboxStyles['Checkbox-wrapper--default'], !error), checkboxStyles['Checkbox-wrapper--error'], error));
|
|
3346
|
-
var CheckboxLabelClass = classnames(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-label'], true), checkboxStyles['Checkbox-label--tiny'], size === 'tiny'));
|
|
3357
|
+
var CheckboxWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-wrapper'], true), gridStyles['Checkbox-wrapper'], true), checkboxStyles['Checkbox-wrapper--default'], !error), checkboxStyles['Checkbox-wrapper--error'], error));
|
|
3358
|
+
var CheckboxLabelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, checkboxStyles['Checkbox-label'], true), dropdownStyles['Checkbox-label'], true), checkboxStyles['Checkbox-label--tiny'], size === 'tiny'));
|
|
3347
3359
|
var setIndeterminate = function setIndeterminate(indeterminateValue) {
|
|
3348
3360
|
ref.current.indeterminate = indeterminateValue;
|
|
3349
3361
|
};
|
|
@@ -3398,9 +3410,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
3398
3410
|
});
|
|
3399
3411
|
Checkbox.displayName = 'Checkbox';
|
|
3400
3412
|
|
|
3401
|
-
var css_248z$
|
|
3402
|
-
var rowStyles = {"Row":"
|
|
3403
|
-
styleInject(css_248z$
|
|
3413
|
+
var css_248z$_ = ".Row-v4-0-01grs7 {\n display: flex;\n flex-wrap: wrap;\n flex: 1 100%;\n}\n\n.Col-v4-0-01gs3b {\n position: relative;\n box-sizing: border-box;\n flex: 1 0 0%;\n}\n\n.Col--auto-v4-0-0vqy9c {\n flex: 0 0 auto;\n width: auto;\n}\n\n.Col--1-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n}\n\n.Col--2-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n}\n\n.Col--3-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n}\n\n.Col--4-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n}\n\n.Col--5-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n}\n\n.Col--6-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n}\n\n.Col--7-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n}\n\n.Col--8-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n}\n\n.Col--9-v4-0-06t0qv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n}\n\n.Col--10-v4-0-023p0u {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n}\n\n.Col--11-v4-0-023p0u {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n}\n\n.Col--12-v4-0-023p0u {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n}\n\n/* if the viewport is between 0 to 575 pixels wide. */\n\n@media (max-width: 575px) {\n .Col--xs-auto-v4-0-03pfu5 {\n flex: 0 0 auto;\n width: auto;\n }\n .Col--xs-1-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .Col--xs-2-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .Col--xs-3-v4-0-0vqjnv {\n flex: 0 0 auto;\n }\n .Col--xs-4-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .Col--xs-5-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .Col--xs-6-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .Col--xs-7-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .Col--xs-8-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .Col--xs-9-v4-0-0vqjnv {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .Col--xs-10-v4-0-0akn7n {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .Col--xs-11-v4-0-0akn7n {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .Col--xs-12-v4-0-0akn7n {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 576 and 767 pixels wide. */\n\n@media (min-width: 576px) and (max-width: 767px) {\n .Col--s-auto-v4-0-0usbqe {\n flex: 0 0 auto;\n width: auto;\n }\n .Col--s-1-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .Col--s-2-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .Col--s-3-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .Col--s-4-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .Col--s-5-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .Col--s-6-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .Col--s-7-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .Col--s-8-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .Col--s-9-v4-0-05ulo8 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .Col--s-10-v4-0-0vqoam {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .Col--s-11-v4-0-0vqoam {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .Col--s-12-v4-0-0vqoam {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 768 and 991 pixels wide. */\n\n@media (min-width: 768px) and (max-width: 991px) {\n .Col--m-auto-v4-0-0xmlgr {\n flex: 0 0 auto;\n width: auto;\n }\n .Col--m-1-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .Col--m-2-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .Col--m-3-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .Col--m-4-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .Col--m-5-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .Col--m-6-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .Col--m-7-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .Col--m-8-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .Col--m-9-v4-0-05uljs {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .Col--m-10-v4-0-0vqs4j {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .Col--m-11-v4-0-0vqs4j {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .Col--m-12-v4-0-0vqs4j {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is between 992 and 1199 pixels wide. */\n\n@media (min-width: 992px) and (max-width: 1199px) {\n .Col--l-auto-v4-0-0y3n36 {\n flex: 0 0 auto;\n width: auto;\n }\n .Col--l-1-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .Col--l-2-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .Col--l-3-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .Col--l-4-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .Col--l-5-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .Col--l-6-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .Col--l-7-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .Col--l-8-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .Col--l-9-v4-0-05ulj1 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .Col--l-10-v4-0-0vqsri {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .Col--l-11-v4-0-0vqsri {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .Col--l-12-v4-0-0vqsri {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n\n/* if the viewport is 1200 pixels wide or wider. */\n\n@media (min-width: 1200px) {\n .Col--xl-auto-v4-0-0e4hdt {\n flex: 0 0 auto;\n width: auto;\n }\n .Col--xl-1-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 1);\n }\n .Col--xl-2-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 2);\n }\n .Col--xl-3-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 3);\n }\n .Col--xl-4-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 4);\n }\n .Col--xl-5-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 5);\n }\n .Col--xl-6-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 6);\n }\n .Col--xl-7-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 7);\n }\n .Col--xl-8-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 8);\n }\n .Col--xl-9-v4-0-0vqjt2 {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 9);\n }\n .Col--xl-10-v4-0-0akiqr {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 10);\n }\n .Col--xl-11-v4-0-0akiqr {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 11);\n }\n .Col--xl-12-v4-0-0akiqr {\n flex: 0 0 auto;\n width: calc(100% / var(--grid-columns) * 12);\n }\n}\n";
|
|
3414
|
+
var rowStyles = {"Row":"Row-v4-0-01grs7","Col":"Col-v4-0-01gs3b","Col--auto":"Col--auto-v4-0-0vqy9c","Col--1":"Col--1-v4-0-06t0qv","Col--2":"Col--2-v4-0-06t0qv","Col--3":"Col--3-v4-0-06t0qv","Col--4":"Col--4-v4-0-06t0qv","Col--5":"Col--5-v4-0-06t0qv","Col--6":"Col--6-v4-0-06t0qv","Col--7":"Col--7-v4-0-06t0qv","Col--8":"Col--8-v4-0-06t0qv","Col--9":"Col--9-v4-0-06t0qv","Col--10":"Col--10-v4-0-023p0u","Col--11":"Col--11-v4-0-023p0u","Col--12":"Col--12-v4-0-023p0u","Col--xs-auto":"Col--xs-auto-v4-0-03pfu5","Col--xs-1":"Col--xs-1-v4-0-0vqjnv","Col--xs-2":"Col--xs-2-v4-0-0vqjnv","Col--xs-3":"Col--xs-3-v4-0-0vqjnv","Col--xs-4":"Col--xs-4-v4-0-0vqjnv","Col--xs-5":"Col--xs-5-v4-0-0vqjnv","Col--xs-6":"Col--xs-6-v4-0-0vqjnv","Col--xs-7":"Col--xs-7-v4-0-0vqjnv","Col--xs-8":"Col--xs-8-v4-0-0vqjnv","Col--xs-9":"Col--xs-9-v4-0-0vqjnv","Col--xs-10":"Col--xs-10-v4-0-0akn7n","Col--xs-11":"Col--xs-11-v4-0-0akn7n","Col--xs-12":"Col--xs-12-v4-0-0akn7n","Col--s-auto":"Col--s-auto-v4-0-0usbqe","Col--s-1":"Col--s-1-v4-0-05ulo8","Col--s-2":"Col--s-2-v4-0-05ulo8","Col--s-3":"Col--s-3-v4-0-05ulo8","Col--s-4":"Col--s-4-v4-0-05ulo8","Col--s-5":"Col--s-5-v4-0-05ulo8","Col--s-6":"Col--s-6-v4-0-05ulo8","Col--s-7":"Col--s-7-v4-0-05ulo8","Col--s-8":"Col--s-8-v4-0-05ulo8","Col--s-9":"Col--s-9-v4-0-05ulo8","Col--s-10":"Col--s-10-v4-0-0vqoam","Col--s-11":"Col--s-11-v4-0-0vqoam","Col--s-12":"Col--s-12-v4-0-0vqoam","Col--m-auto":"Col--m-auto-v4-0-0xmlgr","Col--m-1":"Col--m-1-v4-0-05uljs","Col--m-2":"Col--m-2-v4-0-05uljs","Col--m-3":"Col--m-3-v4-0-05uljs","Col--m-4":"Col--m-4-v4-0-05uljs","Col--m-5":"Col--m-5-v4-0-05uljs","Col--m-6":"Col--m-6-v4-0-05uljs","Col--m-7":"Col--m-7-v4-0-05uljs","Col--m-8":"Col--m-8-v4-0-05uljs","Col--m-9":"Col--m-9-v4-0-05uljs","Col--m-10":"Col--m-10-v4-0-0vqs4j","Col--m-11":"Col--m-11-v4-0-0vqs4j","Col--m-12":"Col--m-12-v4-0-0vqs4j","Col--l-auto":"Col--l-auto-v4-0-0y3n36","Col--l-1":"Col--l-1-v4-0-05ulj1","Col--l-2":"Col--l-2-v4-0-05ulj1","Col--l-3":"Col--l-3-v4-0-05ulj1","Col--l-4":"Col--l-4-v4-0-05ulj1","Col--l-5":"Col--l-5-v4-0-05ulj1","Col--l-6":"Col--l-6-v4-0-05ulj1","Col--l-7":"Col--l-7-v4-0-05ulj1","Col--l-8":"Col--l-8-v4-0-05ulj1","Col--l-9":"Col--l-9-v4-0-05ulj1","Col--l-10":"Col--l-10-v4-0-0vqsri","Col--l-11":"Col--l-11-v4-0-0vqsri","Col--l-12":"Col--l-12-v4-0-0vqsri","Col--xl-auto":"Col--xl-auto-v4-0-0e4hdt","Col--xl-1":"Col--xl-1-v4-0-0vqjt2","Col--xl-2":"Col--xl-2-v4-0-0vqjt2","Col--xl-3":"Col--xl-3-v4-0-0vqjt2","Col--xl-4":"Col--xl-4-v4-0-0vqjt2","Col--xl-5":"Col--xl-5-v4-0-0vqjt2","Col--xl-6":"Col--xl-6-v4-0-0vqjt2","Col--xl-7":"Col--xl-7-v4-0-0vqjt2","Col--xl-8":"Col--xl-8-v4-0-0vqjt2","Col--xl-9":"Col--xl-9-v4-0-0vqjt2","Col--xl-10":"Col--xl-10-v4-0-0akiqr","Col--xl-11":"Col--xl-11-v4-0-0akiqr","Col--xl-12":"Col--xl-12-v4-0-0akiqr"};
|
|
3415
|
+
styleInject(css_248z$_);
|
|
3404
3416
|
|
|
3405
3417
|
var _excluded$$ = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
|
|
3406
3418
|
var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -4595,9 +4607,9 @@ function debounce$1 (delay, atBegin, callback) {
|
|
|
4595
4607
|
return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
|
|
4596
4608
|
}
|
|
4597
4609
|
|
|
4598
|
-
var css_248z$
|
|
4599
|
-
var dropdownButtonStyles = {"DropdownButton":"
|
|
4600
|
-
styleInject(css_248z$
|
|
4610
|
+
var css_248z$Z = ".DropdownButton-v4-0-0abikf {\n width: 100%;\n justify-content: space-between;\n padding-top: unset;\n padding-bottom: unset;\n background: var(--secondary-light);\n color: var(--text);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.DropdownButton-wrapper-v4-0-0nr17l {\n width: 100%;\n display: flex;\n flex-direction: row;\n overflow: hidden;\n align-items: center;\n}\n\n.DropdownButton-text-v4-0-0x3c43 {\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.DropdownButton--tiny-v4-0-0wimvn {\n height: var(--spacing-xl);\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n}\n\n.DropdownButton--regular-v4-0-0prf8j {\n height: var(--spacing-3);\n padding-right: var(--spacing);\n padding-left: var(--spacing-l);\n}\n\n.DropdownButton--tinySquare-v4-0-0vc49q {\n padding-left: var(--spacing-m);\n padding-right: var(--spacing-m);\n}\n\n.DropdownButton--regularSquare-v4-0-0itfdk {\n padding-left: var(--spacing);\n padding-right: var(--spacing);\n}\n\n.DropdownButton--placeholder-v4-0-0tfrmf {\n color: var(--text-subtle);\n}\n\n.DropdownButton-v4-0-0abikf:hover {\n background: var(--secondary);\n color: var(--text);\n}\n\n.DropdownButton-v4-0-0abikf:focus {\n background-color: var(--secondary-light);\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.DropdownButton-v4-0-0abikf:active,\n.DropdownButton--open-v4-0-0wipxl {\n background-color: var(--secondary-dark) !important;\n color: var(--text) !important;\n animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n animation-duration: 120ms;\n}\n\n.DropdownButton-v4-0-0abikf:disabled {\n background: var(--secondary-lighter);\n color: var(--text-disabled);\n pointer-events: none;\n}\n\n.DropdownButton--icon-v4-0-0wiu0x {\n padding-left: var(--spacing);\n}\n\n.DropdownButton--error-v4-0-0du7kh {\n border: var(--spacing-xs) solid var(--alert);\n}\n";
|
|
4611
|
+
var dropdownButtonStyles = {"DropdownButton":"DropdownButton-v4-0-0abikf","DropdownButton-wrapper":"DropdownButton-wrapper-v4-0-0nr17l","DropdownButton-text":"DropdownButton-text-v4-0-0x3c43","DropdownButton--tiny":"DropdownButton--tiny-v4-0-0wimvn","DropdownButton--regular":"DropdownButton--regular-v4-0-0prf8j","DropdownButton--tinySquare":"DropdownButton--tinySquare-v4-0-0vc49q","DropdownButton--regularSquare":"DropdownButton--regularSquare-v4-0-0itfdk","DropdownButton--placeholder":"DropdownButton--placeholder-v4-0-0tfrmf","DropdownButton--open":"DropdownButton--open-v4-0-0wipxl","DropdownButton--icon":"DropdownButton--icon-v4-0-0wiu0x","DropdownButton--error":"DropdownButton--error-v4-0-0du7kh"};
|
|
4612
|
+
styleInject(css_248z$Z);
|
|
4601
4613
|
|
|
4602
4614
|
var _excluded$Z = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
|
|
4603
4615
|
var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -4649,10 +4661,6 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4649
4661
|
});
|
|
4650
4662
|
DropdownButton.displayName = 'DropdownButton';
|
|
4651
4663
|
|
|
4652
|
-
var css_248z$$ = ".Dropdown_v4-0-0-4_-u8ns {\n width: 100%;\n position: relative;\n}\n\n.Dropdown-wrapper_v4-0-0-4_bmaub {\n margin-top: var(--spacing-m);\n margin-bottom: var(--spacing-m);\n}\n\n.Dropdown-inputWrapper_v4-0-0-4_-4axj {\n border-bottom: var(--spacing-xs) solid var(--secondary-dark);\n}\n\n.Dropdown-inputWrapper_v4-0-0-4_-4axj:focus-within {\n border-bottom: var(--spacing-xs) solid var(--primary);\n}\n\n.Dropdown-input_v4-0-0-4_-fa58 {\n min-width: unset !important;\n}\n\n.Dropdown-input_v4-0-0-4_-fa58,\n.Dropdown-input_v4-0-0-4_-fa58:focus-within {\n border: unset !important;\n box-shadow: none !important;\n}\n\n.Dropdown-section_v4-0-0-4_hteog {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-left: var(--spacing-l);\n margin-top: var(--spacing-l);\n margin-bottom: var(--spacing-0-75);\n}\n\n.Dropdown-section--withClear_v4-0-0-4_-f0ot {\n margin-top: var(--spacing);\n margin-bottom: var(--spacing-s);\n}\n\n.Dropdown-buttonWrapper_v4-0-0-4_aou09 {\n display: flex;\n justify-content: flex-end;\n padding-top: var(--spacing);\n padding-right: var(--spacing);\n padding-bottom: var(--spacing);\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.Dropdown-footer_v4-0-0-4_m2nz7 {\n padding-left: var(--spacing-l);\n padding-bottom: var(--spacing-m);\n padding-top: var(--spacing);\n box-sizing: border-box;\n}\n\n.Option_v4-0-0-4_-6r1z {\n display: flex;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Option_v4-0-0-4_-6r1z,\n.Option-loading_v4-0-0-4_-qysc {\n padding-top: var(--spacing-0-75);\n padding-bottom: var(--spacing-0-75);\n padding-left: var(--spacing-l);\n padding-right: var(--spacing);\n}\n\n.Option-checkbox_v4-0-0-4_barfw .Checkbox-outerWrapper_v4-0-0-4_-to04 {\n background-color: var(--shadow-0);\n}\n\n.Option-checkboxWrapper_v4-0-0-4_-hduq {\n display: block;\n}\n\n.OptionCheckbox_v4-0-0-4_-oirt {\n width: 100%;\n padding-left: var(--spacing-l);\n padding-top: var(--spacing-0-75);\n padding-bottom: var(--spacing-0-75);\n}\n\n.Option--active_v4-0-0-4_-yukf,\n.Option-checkbox--active_v4-0-0-4_7r9ck {\n background-color: var(--secondary-lightest);\n cursor: pointer;\n}\n\n.Option--active_v4-0-0-4_-yukf:hover,\n.Option-checkbox--active_v4-0-0-4_7r9ck:hover {\n background-color: var(--secondary-lighter);\n}\n\n.Option--active_v4-0-0-4_-yukf:active,\n.Option-checkbox--active_v4-0-0-4_7r9ck:active {\n background-color: var(--secondary-light);\n cursor: pointer;\n}\n\n.Option--active_v4-0-0-4_-yukf {\n transition: var(--standard-productive-curve);\n}\n\n.Option-loading_v4-0-0-4_-qysc {\n pointer-events: none;\n}\n\n.Option--selected_v4-0-0-4_co1w9 {\n background-color: var(--primary-lightest);\n}\n\n.Option--selected_v4-0-0-4_co1w9:hover {\n background-color: var(--primary-lighter);\n}\n\n.Option--selected_v4-0-0-4_co1w9:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.Option--selected_v4-0-0-4_co1w9:active .Option-text_v4-0-0-4_-qizd,\n.Option--selected_v4-0-0-4_co1w9:active .Option-subInfo_v4-0-0-4_7l7yo {\n color: var(--primary-darker);\n}\n\n.Option--disabled_v4-0-0-4_-2k2f,\n.OptionWrapper--disabled_v4-0-0-4_wwtkb {\n pointer-events: auto;\n cursor: default;\n}\n\n.Option-label_v4-0-0-4_tweg8 {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.OptionCheckbox_v4-0-0-4_-oirt .Checkbox-label_v4-0-0-4_-lmy9 {\n padding-right: var(--spacing-l);\n width: 100%;\n display: flex;\n overflow: hidden;\n}\n\n.Option-text_v4-0-0-4_-qizd,\n.OptionCheckbox_v4-0-0-4_-oirt .Text_v4-0-0-4_-3zuw {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.Option-text--wrap_v4-0-0-4_an89q,\n.Dropdown-wrapper--wrap_v4-0-0-4_-eoac .OptionCheckbox_v4-0-0-4_-oirt .Text_v4-0-0-4_-3zuw {\n white-space: unset;\n}\n\n.Option--icon_v4-0-0-4_sxwjq {\n padding-left: var(--spacing);\n}\n\n.Option-icon_v4-0-0-4_-qj6g {\n display: flex;\n}\n\n.Option-icon_v4-0-0-4_-qj6g {\n height: -moz-fit-content;\n height: fit-content;\n line-height: var(--font-height);\n}\n";
|
|
4653
|
-
var dropdownStyles = {"Dropdown":"Dropdown_v4-0-0-4_-u8ns","Dropdown-wrapper":"Dropdown-wrapper_v4-0-0-4_bmaub","Dropdown-inputWrapper":"Dropdown-inputWrapper_v4-0-0-4_-4axj","Dropdown-input":"Dropdown-input_v4-0-0-4_-fa58","Dropdown-section":"Dropdown-section_v4-0-0-4_hteog","Dropdown-section--withClear":"Dropdown-section--withClear_v4-0-0-4_-f0ot","Dropdown-buttonWrapper":"Dropdown-buttonWrapper_v4-0-0-4_aou09","Dropdown-footer":"Dropdown-footer_v4-0-0-4_m2nz7","Option":"Option_v4-0-0-4_-6r1z","Option-loading":"Option-loading_v4-0-0-4_-qysc","Option-checkbox":"Option-checkbox_v4-0-0-4_barfw","Checkbox-outerWrapper":"Checkbox-outerWrapper_v4-0-0-4_-to04","Option-checkboxWrapper":"Option-checkboxWrapper_v4-0-0-4_-hduq","OptionCheckbox":"OptionCheckbox_v4-0-0-4_-oirt","Option--active":"Option--active_v4-0-0-4_-yukf","Option-checkbox--active":"Option-checkbox--active_v4-0-0-4_7r9ck","Option--selected":"Option--selected_v4-0-0-4_co1w9","Option-text":"Option-text_v4-0-0-4_-qizd","Option-subInfo":"Option-subInfo_v4-0-0-4_7l7yo","Option--disabled":"Option--disabled_v4-0-0-4_-2k2f","OptionWrapper--disabled":"OptionWrapper--disabled_v4-0-0-4_wwtkb","Option-label":"Option-label_v4-0-0-4_tweg8","Checkbox-label":"Checkbox-label_v4-0-0-4_-lmy9","Text":"Text_v4-0-0-4_-3zuw","Option-text--wrap":"Option-text--wrap_v4-0-0-4_an89q","Dropdown-wrapper--wrap":"Dropdown-wrapper--wrap_v4-0-0-4_-eoac","Option--icon":"Option--icon_v4-0-0-4_sxwjq","Option-icon":"Option-icon_v4-0-0-4_-qj6g"};
|
|
4654
|
-
styleInject(css_248z$$);
|
|
4655
|
-
|
|
4656
4664
|
var CheckboxOption = function CheckboxOption(props) {
|
|
4657
4665
|
var className = props.className,
|
|
4658
4666
|
selected = props.selected,
|
|
@@ -4944,17 +4952,17 @@ var Option = function Option(props) {
|
|
|
4944
4952
|
});
|
|
4945
4953
|
};
|
|
4946
4954
|
|
|
4947
|
-
var css_248z$
|
|
4948
|
-
var styles$
|
|
4949
|
-
styleInject(css_248z$
|
|
4955
|
+
var css_248z$Y = "@keyframes shimmer-v4-0-0g4ao1 {\n 0% {\n background-position: -500px 0;\n }\n 100% {\n background-position: 500px 0;\n }\n}\n\n.Placeholder--animation-v4-0-05fzua {\n border-radius: var(--spacing-s);\n animation-duration: 1.5s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: shimmer-v4-0-0g4ao1;\n animation-timing-function: linear;\n background: var(--secondary-lightest);\n background: linear-gradient(\n to right,\n var(--secondary-lighter) 8%,\n var(--secondary-dark) 18%,\n var(--secondary-lighter) 33%\n );\n background-size: 1000px 104px;\n}\n\n.Placeholder-v4-0-0po5mk {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n align-items: center;\n}\n\n.Placeholder--withImage-v4-0-01p8sl {\n display: flex;\n justify-content: flex-start;\n}\n\n.Placeholder-paragraph-v4-0-0twwin {\n display: flex;\n flex-direction: column;\n flex: 1 0;\n}\n\n.Placeholder-paragraph--withImage-v4-0-0z3dc7 {\n margin-left: var(--spacing);\n}\n\n.PlaceholderParagraph-v4-0-02xs8j {\n display: flex;\n flex-grow: 1;\n height: var(--font-size);\n}\n\n.PlaceholderParagraph-wrapper-v4-0-0y8m73 {\n display: flex;\n align-items: center;\n height: var(--font-height);\n}\n\n.PlaceholderParagraph-wrapper--length-small-v4-0-099960 {\n width: 33%;\n}\n\n.PlaceholderParagraph-wrapper--length-medium-v4-0-0469a9 {\n width: 66%;\n}\n\n.PlaceholderParagraph-wrapper--length-large-v4-0-0957ai {\n width: 100%;\n}\n\n.PlaceholderParagraph-wrapper--size-xxs-v4-0-07x5oj {\n height: var(--font-height-s);\n}\n\n.PlaceholderParagraph-wrapper--size-xs-v4-0-074nsu {\n height: var(--font-height-m);\n}\n\n.PlaceholderParagraph-wrapper--size-s-v4-0-0u0m7k {\n height: var(--font-height-s);\n}\n\n.PlaceholderParagraph-wrapper--size-m-v4-0-0u0m7j {\n height: var(--font-height-m);\n}\n\n.PlaceholderParagraph-wrapper--size-l-v4-0-0u0m7j {\n height: var(--font-height-l);\n}\n\n.PlaceholderParagraph-wrapper--size-xl-v4-0-074nsu {\n height: var(--font-height-xl);\n}\n\n.PlaceholderParagraph-wrapper--size-xxl-v4-0-07x5oj {\n height: var(--font-height-xxl);\n}\n\n.PlaceholderParagraph-wrapper--size-xxxl-v4-0-0wgjz7 {\n height: var(--font-height-xxl);\n}\n\n.PlaceholderParagraph--xxs-v4-0-0d5j5a {\n height: var(--font-size-s);\n}\n\n.PlaceholderParagraph--xs-v4-0-0b15uc {\n height: var(--font-size-s);\n}\n\n.PlaceholderParagraph--s-v4-0-0tfixj {\n height: var(--font-size);\n}\n\n.PlaceholderParagraph--m-v4-0-0tfixj {\n height: var(--font-size-m);\n}\n\n.PlaceholderParagraph--l-v4-0-0tfixj {\n height: var(--font-size-l);\n}\n\n.PlaceholderParagraph--xl-v4-0-0b15ub {\n height: var(--font-size-xl);\n}\n\n.PlaceholderParagraph--xxl-v4-0-0d5j5a {\n height: var(--font-size-xxl);\n}\n\n.PlaceholderParagraph--xxxl-v4-0-0if6s5 {\n height: var(--font-size-xxxl);\n}\n\n.PlaceholderImage-v4-0-04mw1r {\n display: flex;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n}\n\n.PlaceholderImage--small-v4-0-0dmwqt {\n width: 16px;\n height: 16px;\n}\n\n.PlaceholderImage--medium-v4-0-06f3gl {\n width: 32px;\n height: 32px;\n}\n\n.PlaceholderImage--large-v4-0-0diuva {\n width: 48px;\n height: 48px;\n}\n\n.PlaceholderImage--round-v4-0-0dmen2 {\n border-radius: 50%;\n}\n";
|
|
4956
|
+
var styles$W = {"Placeholder--animation":"Placeholder--animation-v4-0-05fzua","shimmer":"shimmer-v4-0-0g4ao1","Placeholder":"Placeholder-v4-0-0po5mk","Placeholder--withImage":"Placeholder--withImage-v4-0-01p8sl","Placeholder-paragraph":"Placeholder-paragraph-v4-0-0twwin","Placeholder-paragraph--withImage":"Placeholder-paragraph--withImage-v4-0-0z3dc7","PlaceholderParagraph":"PlaceholderParagraph-v4-0-02xs8j","PlaceholderParagraph-wrapper":"PlaceholderParagraph-wrapper-v4-0-0y8m73","PlaceholderParagraph-wrapper--length-small":"PlaceholderParagraph-wrapper--length-small-v4-0-099960","PlaceholderParagraph-wrapper--length-medium":"PlaceholderParagraph-wrapper--length-medium-v4-0-0469a9","PlaceholderParagraph-wrapper--length-large":"PlaceholderParagraph-wrapper--length-large-v4-0-0957ai","PlaceholderParagraph-wrapper--size-xxs":"PlaceholderParagraph-wrapper--size-xxs-v4-0-07x5oj","PlaceholderParagraph-wrapper--size-xs":"PlaceholderParagraph-wrapper--size-xs-v4-0-074nsu","PlaceholderParagraph-wrapper--size-s":"PlaceholderParagraph-wrapper--size-s-v4-0-0u0m7k","PlaceholderParagraph-wrapper--size-m":"PlaceholderParagraph-wrapper--size-m-v4-0-0u0m7j","PlaceholderParagraph-wrapper--size-l":"PlaceholderParagraph-wrapper--size-l-v4-0-0u0m7j","PlaceholderParagraph-wrapper--size-xl":"PlaceholderParagraph-wrapper--size-xl-v4-0-074nsu","PlaceholderParagraph-wrapper--size-xxl":"PlaceholderParagraph-wrapper--size-xxl-v4-0-07x5oj","PlaceholderParagraph-wrapper--size-xxxl":"PlaceholderParagraph-wrapper--size-xxxl-v4-0-0wgjz7","PlaceholderParagraph--xxs":"PlaceholderParagraph--xxs-v4-0-0d5j5a","PlaceholderParagraph--xs":"PlaceholderParagraph--xs-v4-0-0b15uc","PlaceholderParagraph--s":"PlaceholderParagraph--s-v4-0-0tfixj","PlaceholderParagraph--m":"PlaceholderParagraph--m-v4-0-0tfixj","PlaceholderParagraph--l":"PlaceholderParagraph--l-v4-0-0tfixj","PlaceholderParagraph--xl":"PlaceholderParagraph--xl-v4-0-0b15ub","PlaceholderParagraph--xxl":"PlaceholderParagraph--xxl-v4-0-0d5j5a","PlaceholderParagraph--xxxl":"PlaceholderParagraph--xxxl-v4-0-0if6s5","PlaceholderImage":"PlaceholderImage-v4-0-04mw1r","PlaceholderImage--small":"PlaceholderImage--small-v4-0-0dmwqt","PlaceholderImage--medium":"PlaceholderImage--medium-v4-0-06f3gl","PlaceholderImage--large":"PlaceholderImage--large-v4-0-0diuva","PlaceholderImage--round":"PlaceholderImage--round-v4-0-0dmen2"};
|
|
4957
|
+
styleInject(css_248z$Y);
|
|
4950
4958
|
|
|
4951
4959
|
var PlaceholderParagraph = function PlaceholderParagraph(props) {
|
|
4952
4960
|
var length = props.length,
|
|
4953
4961
|
size = props.size,
|
|
4954
4962
|
className = props.className;
|
|
4955
4963
|
var baseProps = extractBaseProps(props);
|
|
4956
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
4957
|
-
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
4964
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$W['Placeholder--animation'], true), styles$W.PlaceholderParagraph, true), styles$W["PlaceholderParagraph--".concat(size)], size));
|
|
4965
|
+
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$W['PlaceholderParagraph-wrapper'], true), styles$W["PlaceholderParagraph-wrapper--length-".concat(length)], length), styles$W["PlaceholderParagraph-wrapper--size-".concat(size)], size), className);
|
|
4958
4966
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
4959
4967
|
className: wrapperClass
|
|
4960
4968
|
}), /*#__PURE__*/React.createElement("span", {
|
|
@@ -4972,7 +4980,7 @@ var PlaceholderImage = function PlaceholderImage(props) {
|
|
|
4972
4980
|
round = props.round,
|
|
4973
4981
|
className = props.className;
|
|
4974
4982
|
var baseProps = extractBaseProps(props);
|
|
4975
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
4983
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$W.PlaceholderImage, true), styles$W['Placeholder--animation'], true), styles$W['PlaceholderImage--round'], round), styles$W["PlaceholderImage--".concat(size)], size), className);
|
|
4976
4984
|
return /*#__PURE__*/React.createElement("span", _extends$2({}, baseProps, {
|
|
4977
4985
|
className: classes
|
|
4978
4986
|
}));
|
|
@@ -4989,8 +4997,8 @@ var Placeholder = function Placeholder(props) {
|
|
|
4989
4997
|
children = props.children,
|
|
4990
4998
|
className = props.className;
|
|
4991
4999
|
var baseProps = extractBaseProps(props);
|
|
4992
|
-
var paragraphClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
4993
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
5000
|
+
var paragraphClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$W['Placeholder-paragraph'], true), styles$W['Placeholder-paragraph--withImage'], withImage));
|
|
5001
|
+
var classes = classnames(_defineProperty$1({}, styles$W['Placeholder'], true), className);
|
|
4994
5002
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
4995
5003
|
"data-test": "DesignSystem-Placeholder"
|
|
4996
5004
|
}, baseProps, {
|
|
@@ -5396,7 +5404,7 @@ var DropdownList = function DropdownList(props) {
|
|
|
5396
5404
|
}
|
|
5397
5405
|
}, /*#__PURE__*/React.createElement("label", {
|
|
5398
5406
|
htmlFor: id,
|
|
5399
|
-
className:
|
|
5407
|
+
className: dropdownStyles['Checkbox-label']
|
|
5400
5408
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
5401
5409
|
label: label,
|
|
5402
5410
|
onChange: onSelectAll,
|
|
@@ -6225,9 +6233,9 @@ _defineProperty$1(Dropdown, "defaultProps", {
|
|
|
6225
6233
|
searchDebounceDuration: 300
|
|
6226
6234
|
});
|
|
6227
6235
|
|
|
6228
|
-
var css_248z$
|
|
6229
|
-
var styles$
|
|
6230
|
-
styleInject(css_248z$
|
|
6236
|
+
var css_248z$X = "/* Heading */\n.Heading-v4-0-0tw6h1 {\n margin: 0;\n}\n\n.Heading--s-v4-0-0gt0ys {\n font-weight: var(--font-weight-bold);\n font-size: var(--font-size-m);\n line-height: var(--font-height-m);\n}\n\n.Heading--m-v4-0-0gt0ys {\n font-weight: var(--font-weight-medium);\n font-size: var(--font-size-l);\n line-height: var(--font-height-l);\n}\n\n.Heading--l-v4-0-0gt0ys {\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size-xl);\n line-height: var(--font-height-xl);\n}\n\n.Heading--xl-v4-0-0ns1ki {\n font-weight: var(--font-weight-medium);\n font-size: var(--font-size-xxl);\n line-height: var(--font-height-xxl);\n}\n\n.Heading--xxl-v4-0-0qu83q {\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size-xxxl);\n line-height: var(--font-height-xxl);\n}\n\n.Heading--default-v4-0-055oor {\n color: var(--text);\n}\n\n.Heading--subtle-v4-0-0edv5l {\n color: var(--text-subtle);\n}\n\n.Heading--disabled-v4-0-0bnr92 {\n color: var(--text-disabled);\n}\n\n.Heading--white-v4-0-08n9sd {\n color: var(--text-white);\n}\n";
|
|
6237
|
+
var styles$V = {"Heading":"Heading-v4-0-0tw6h1","Heading--s":"Heading--s-v4-0-0gt0ys","Heading--m":"Heading--m-v4-0-0gt0ys","Heading--l":"Heading--l-v4-0-0gt0ys","Heading--xl":"Heading--xl-v4-0-0ns1ki","Heading--xxl":"Heading--xxl-v4-0-0qu83q","Heading--default":"Heading--default-v4-0-055oor","Heading--subtle":"Heading--subtle-v4-0-0edv5l","Heading--disabled":"Heading--disabled-v4-0-0bnr92","Heading--white":"Heading--white-v4-0-08n9sd"};
|
|
6238
|
+
styleInject(css_248z$X);
|
|
6231
6239
|
|
|
6232
6240
|
var _excluded$X = ["appearance", "size", "children", "className", "color"];
|
|
6233
6241
|
var sizeMap = {
|
|
@@ -6244,7 +6252,7 @@ var Heading = function Heading(props) {
|
|
|
6244
6252
|
className = props.className,
|
|
6245
6253
|
color = props.color,
|
|
6246
6254
|
rest = _objectWithoutProperties(props, _excluded$X);
|
|
6247
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6255
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$V.Heading, true), styles$V["Heading--".concat(size)], size), styles$V["Heading--".concat(appearance)], !color && appearance), "color-".concat(color), color), className);
|
|
6248
6256
|
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
|
|
6249
6257
|
"data-test": "DesignSystem-Heading"
|
|
6250
6258
|
}, rest, {
|
|
@@ -6258,16 +6266,16 @@ Heading.defaultProps = {
|
|
|
6258
6266
|
size: 'm'
|
|
6259
6267
|
};
|
|
6260
6268
|
|
|
6261
|
-
var css_248z$
|
|
6262
|
-
var styles$
|
|
6263
|
-
styleInject(css_248z$
|
|
6269
|
+
var css_248z$W = ".ActionButton-v4-0-051nnm {\n display: flex;\n flex-shrink: 0;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n color: var(--inverse-lighter);\n border-radius: 50%;\n padding: var(--spacing-s);\n}\n\n.ActionButton-v4-0-051nnm:focus-visible,\n.ActionButton-v4-0-051nnm:focus {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n\n.ActionButton-v4-0-051nnm:hover {\n background-color: var(--secondary);\n}\n\n.ActionButton-v4-0-051nnm:active {\n background-color: var(--secondary-dark);\n}\n";
|
|
6270
|
+
var styles$U = {"ActionButton":"ActionButton-v4-0-051nnm"};
|
|
6271
|
+
styleInject(css_248z$W);
|
|
6264
6272
|
|
|
6265
6273
|
var _excluded$W = ["className", "iconType"];
|
|
6266
6274
|
var ActionButton$1 = function ActionButton(props) {
|
|
6267
6275
|
var className = props.className,
|
|
6268
6276
|
iconType = props.iconType,
|
|
6269
6277
|
rest = _objectWithoutProperties(props, _excluded$W);
|
|
6270
|
-
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6278
|
+
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$U['ActionButton'], true), "".concat(className), className));
|
|
6271
6279
|
return /*#__PURE__*/React.createElement(Icon, _extends$2({
|
|
6272
6280
|
className: iconClass,
|
|
6273
6281
|
type: iconType,
|
|
@@ -6280,9 +6288,13 @@ ActionButton$1.defaultProps = {
|
|
|
6280
6288
|
type: 'rounded'
|
|
6281
6289
|
};
|
|
6282
6290
|
|
|
6283
|
-
var css_248z$
|
|
6284
|
-
var styles$
|
|
6285
|
-
styleInject(css_248z$
|
|
6291
|
+
var css_248z$V = "/* input */\n\n.Input-input-v4-0-04eg4b::-ms-clear {\n display: none;\n}\n\n.Input-v4-0-03csli {\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--spacing-m);\n border: var(--border);\n padding-right: var(--spacing-l);\n padding-left: var(--spacing-l);\n background: var(--white);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Input--tiny-v4-0-05bc3c {\n height: var(--font-height-m);\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Input--regular-v4-0-0vrwtb {\n height: var(--font-height-l);\n padding-top: var(--spacing-0-75);\n padding-bottom: var(--spacing-0-75);\n}\n\n.Input--large-v4-0-0mtq62 {\n height: 40px;\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Input-v4-0-03csli:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n cursor: text;\n}\n\n.Input-v4-0-03csli:focus-within {\n background: var(--white);\n border-color: var(--primary);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Input-v4-0-03csli:focus-within .Input-icon--left-v4-0-0xuow0 {\n color: var(--primary);\n}\n\n.Input--error-v4-0-0mx9v8:focus-within {\n border-color: var(--alert);\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.Input--error-v4-0-0mx9v8:focus-within .Input-icon--left-v4-0-0xuow0 {\n color: var(--alert);\n}\n\n.Input--disabled-v4-0-06bgoa {\n background: var(--secondary-lightest);\n border-color: var(--secondary-lighter);\n pointer-events: none;\n}\n\n.Input--readOnly-v4-0-0cig00 {\n background: var(--secondary-lightest);\n border-color: var(--secondary);\n pointer-events: none;\n}\n\n.Input--disabled-v4-0-06bgoa .Input-icon--left-v4-0-0xuow0 {\n color: var(--inverse-lightest);\n}\n\n.Input--error-v4-0-0mx9v8,\n.Input--error-v4-0-0mx9v8:hover {\n background: var(--white);\n border-color: var(--alert);\n}\n\n.Input-input-v4-0-04eg4b {\n display: flex;\n width: 100%;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--night);\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.Input-input-v4-0-04eg4b::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.Input-input-v4-0-04eg4b::placeholder {\n color: var(--inverse-lighter);\n}\n\n.Input-input-v4-0-04eg4b:focus {\n outline: 0;\n}\n\n.Input-input-v4-0-04eg4b:disabled .Input-input-v4-0-04eg4b::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.Input-input-v4-0-04eg4b:disabled .Input-input-v4-0-04eg4b::placeholder {\n color: var(--inverse-lighter);\n}\n\n.Input-input--regular-v4-0-01oar6 {\n line-height: var(--font-height);\n}\n\n.Input-input--large-v4-0-0e7j3r {\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.Input-icon-v4-0-0txgds {\n display: flex;\n align-content: center;\n font-size: var(--font-size-m);\n}\n\n.Input-icon--left-v4-0-0xuow0 {\n margin-right: var(--spacing);\n color: var(--inverse);\n}\n\n.Input-icon--inputBlank-v4-0-0wli2o {\n color: var(--inverse-lighter);\n}\n\n.Input-icon--error-v4-0-0g4v9w {\n color: var(--alert);\n}\n\n.Input-icon--right-v4-0-0fxvxd {\n cursor: pointer;\n color: var(--inverse-lighter);\n border-radius: 10px;\n}\n\n.Input-iconWrapper--right-v4-0-0tab2m:focus-visible .Input-icon--right-v4-0-0fxvxd {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n\n.Input-icon--right-v4-0-0fxvxd:focus-visible {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n border-radius: 10px;\n}\n\n.Input-iconWrapper--right-v4-0-0tab2m:hover .Input-icon--right-v4-0-0fxvxd {\n background-color: var(--secondary);\n}\n\n.Input-iconWrapper--right-v4-0-0tab2m:active .Input-icon--right-v4-0-0fxvxd {\n background-color: var(--secondary-dark);\n}\n\n.Input-inlineLabel-v4-0-0lh9dm {\n margin-right: var(--spacing);\n}\n\n.Input-iconWrapper--right-v4-0-0tab2m:focus-visible {\n outline: none;\n}\n";
|
|
6292
|
+
var styles$T = {"Input-input":"Input-input-v4-0-04eg4b","Input":"Input-v4-0-03csli","Input--tiny":"Input--tiny-v4-0-05bc3c","Input--regular":"Input--regular-v4-0-0vrwtb","Input--large":"Input--large-v4-0-0mtq62","Input-icon--left":"Input-icon--left-v4-0-0xuow0","Input--error":"Input--error-v4-0-0mx9v8","Input--disabled":"Input--disabled-v4-0-06bgoa","Input--readOnly":"Input--readOnly-v4-0-0cig00","Input-input--regular":"Input-input--regular-v4-0-01oar6","Input-input--large":"Input-input--large-v4-0-0e7j3r","Input-icon":"Input-icon-v4-0-0txgds","Input-icon--inputBlank":"Input-icon--inputBlank-v4-0-0wli2o","Input-icon--error":"Input-icon--error-v4-0-0g4v9w","Input-icon--right":"Input-icon--right-v4-0-0fxvxd","Input-iconWrapper--right":"Input-iconWrapper--right-v4-0-0tab2m","Input-inlineLabel":"Input-inlineLabel-v4-0-0lh9dm"};
|
|
6293
|
+
styleInject(css_248z$V);
|
|
6294
|
+
|
|
6295
|
+
var css_248z$U = ".VerificationCodeInput-Input-v4-0-0og8u4 {\n display: inline-flex;\n width: 40px;\n}\n\n.VerificationCodeInput-Input-v4-0-0og8u4 .Input-input-v4-0-0amj1d {\n text-align: center;\n}\n\n.VerificationCodeInput-Input-v4-0-0og8u4 .Input-input-v4-0-0amj1d::-webkit-inner-spin-button,\n.VerificationCodeInput-Input-v4-0-0og8u4 .Input-input-v4-0-0amj1d::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n";
|
|
6296
|
+
var styles$S = {"VerificationCodeInput-Input":"VerificationCodeInput-Input-v4-0-0og8u4","Input-input":"Input-input-v4-0-0amj1d"};
|
|
6297
|
+
styleInject(css_248z$U);
|
|
6286
6298
|
|
|
6287
6299
|
var _excluded$V = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType"];
|
|
6288
6300
|
var sizeMapping$2 = {
|
|
@@ -6351,10 +6363,10 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6351
6363
|
}
|
|
6352
6364
|
}, [type]);
|
|
6353
6365
|
var baseProps = extractBaseProps(props);
|
|
6354
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6355
|
-
var inputClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6356
|
-
var leftIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6357
|
-
var rightIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6366
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$T['Input'], true), styles$T["Input--".concat(size)], size), styles$T['Input--disabled'], disabled), styles$T['Input--error'], error), styles$T['Input--readOnly'], readOnly), className);
|
|
6367
|
+
var inputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$T['Input-input'], true), styles$S['Input-input'], true), styles$T["Input-input--".concat(size)], size));
|
|
6368
|
+
var leftIconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$T['Input-icon'], true), styles$T['Input-icon--left'], true), styles$T['Input-icon--inputBlank'], isInputBlank), styles$T['Input-icon--error'], error));
|
|
6369
|
+
var rightIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$T['Input-icon'], true), styles$T['Input-iconWrapper--right'], true));
|
|
6358
6370
|
var trigger = /*#__PURE__*/React.createElement("div", {
|
|
6359
6371
|
className: rightIconClass // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
6360
6372
|
,
|
|
@@ -6362,7 +6374,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6362
6374
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
6363
6375
|
name: 'info',
|
|
6364
6376
|
size: sizeMapping$2[size],
|
|
6365
|
-
className: styles$
|
|
6377
|
+
className: styles$T['Input-icon--right']
|
|
6366
6378
|
}));
|
|
6367
6379
|
return /*#__PURE__*/React.createElement("div", {
|
|
6368
6380
|
"data-test": "DesignSystem-InputWrapper",
|
|
@@ -6380,7 +6392,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6380
6392
|
return setIsInputBlank(!((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.value));
|
|
6381
6393
|
}
|
|
6382
6394
|
}, inlineLabel && /*#__PURE__*/React.createElement("div", {
|
|
6383
|
-
className: styles$
|
|
6395
|
+
className: styles$T['Input-inlineLabel']
|
|
6384
6396
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
6385
6397
|
appearance: "subtle"
|
|
6386
6398
|
}, inlineLabel)), size !== 'tiny' && icon && /*#__PURE__*/React.createElement("div", {
|
|
@@ -6428,7 +6440,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6428
6440
|
},
|
|
6429
6441
|
name: 'close',
|
|
6430
6442
|
size: sizeMapping$2[size],
|
|
6431
|
-
className: styles$
|
|
6443
|
+
className: styles$T['Input-icon--right']
|
|
6432
6444
|
})));
|
|
6433
6445
|
});
|
|
6434
6446
|
Input.displayName = 'Input';
|
|
@@ -6436,13 +6448,13 @@ Object.assign(Input, {
|
|
|
6436
6448
|
ActionButton: ActionButton$1
|
|
6437
6449
|
});
|
|
6438
6450
|
|
|
6439
|
-
var css_248z$
|
|
6440
|
-
var styles$
|
|
6441
|
-
styleInject(css_248z$
|
|
6451
|
+
var css_248z$T = ".MetricInput-input-v4-0-0f9efr::-ms-clear {\n display: none;\n}\n\n.MetricInput-v4-0-0wid45 {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border-radius: var(--spacing-m);\n border: var(--border);\n padding-right: var(--spacing-m);\n background: var(--white);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.MetricInput--regular-v4-0-04ga5p {\n height: var(--spacing-3);\n padding-left: var(--spacing-l);\n}\n\n.MetricInput--large-v4-0-0igoof {\n height: 40px;\n padding-left: var(--spacing-2);\n}\n\n.MetricInput-v4-0-0wid45:hover {\n background: var(--secondary-lightest);\n cursor: text;\n}\n\n.MetricInput-v4-0-0wid45:focus-within {\n background: var(--white);\n border-color: var(--primary);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.MetricInput-v4-0-0wid45:focus-within .MetricInput-icon-v4-0-0fjp2b {\n color: var(--primary);\n}\n\n.MetricInput--disabled-v4-0-0boazh {\n background: var(--secondary-lightest);\n border-color: var(--secondary-light);\n pointer-events: none;\n}\n\n.MetricInput--readOnly-v4-0-075lou {\n background: var(--secondary-lightest);\n border-color: var(--secondary);\n pointer-events: none;\n}\n\n.MetricInput--disabled-v4-0-0boazh .MetricInput-icon-v4-0-0fjp2b {\n color: var(--inverse-lightest);\n}\n\n.MetricInput--error-v4-0-0id4z9,\n.MetricInput--error-v4-0-0id4z9:hover {\n background: var(--white);\n border-color: var(--alert);\n}\n\n.MetricInput--error-v4-0-0id4z9:focus-within {\n border-color: var(--alert);\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.MetricInput--error-v4-0-0id4z9:focus-within .MetricInput-icon-v4-0-0fjp2b {\n color: var(--alert);\n}\n\n.MetricInput-input-v4-0-0f9efr {\n display: flex;\n width: 100%;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n color: var(--night);\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.MetricInput-input--large-v4-0-0wgfpj {\n line-height: var(--font-height-m);\n font-size: var(--font-size-m);\n}\n\n.MetricInput-input-v4-0-0f9efr::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.MetricInput-input-v4-0-0f9efr::placeholder {\n color: var(--inverse-lighter);\n}\n\n.MetricInput-input-v4-0-0f9efr:focus {\n outline: 0;\n}\n\n.MetricInput-input-v4-0-0f9efr:disabled .MetricInput-input-v4-0-0f9efr::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.MetricInput-input-v4-0-0f9efr:disabled .MetricInput-input-v4-0-0f9efr::placeholder {\n color: var(--inverse-lighter);\n}\n\n.MetricInput-icon--regular-v4-0-0ntal0 {\n margin-right: var(--spacing);\n line-height: var(--font-height-s);\n}\n\n.MetricInput-icon--large-v4-0-0hjp20 {\n margin-right: var(--spacing-l);\n line-height: var(--font-height-m);\n}\n\n.MetricInput-input-v4-0-0f9efr::-webkit-inner-spin-button,\n.MetricInput-input-v4-0-0f9efr::-webkit-outer-spin-button {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n margin: 0;\n}\n\n.MetricInput-arrowIcon--large-v4-0-0pq6gq {\n height: var(--spacing-2);\n width: var(--spacing-2);\n border-radius: var(--spacing-s);\n}\n\n.MetricInput-arrowIcon--regular-v4-0-0do9s4 {\n height: var(--spacing-l);\n width: var(--spacing-l);\n border-radius: var(--spacing-s);\n}\n";
|
|
6452
|
+
var styles$R = {"MetricInput-input":"MetricInput-input-v4-0-0f9efr","MetricInput":"MetricInput-v4-0-0wid45","MetricInput--regular":"MetricInput--regular-v4-0-04ga5p","MetricInput--large":"MetricInput--large-v4-0-0igoof","MetricInput-icon":"MetricInput-icon-v4-0-0fjp2b","MetricInput--disabled":"MetricInput--disabled-v4-0-0boazh","MetricInput--readOnly":"MetricInput--readOnly-v4-0-075lou","MetricInput--error":"MetricInput--error-v4-0-0id4z9","MetricInput-input--large":"MetricInput-input--large-v4-0-0wgfpj","MetricInput-icon--regular":"MetricInput-icon--regular-v4-0-0ntal0","MetricInput-icon--large":"MetricInput-icon--large-v4-0-0hjp20","MetricInput-arrowIcon--large":"MetricInput-arrowIcon--large-v4-0-0pq6gq","MetricInput-arrowIcon--regular":"MetricInput-arrowIcon--regular-v4-0-0do9s4"};
|
|
6453
|
+
styleInject(css_248z$T);
|
|
6442
6454
|
|
|
6443
|
-
var css_248z$
|
|
6444
|
-
var styles$
|
|
6445
|
-
styleInject(css_248z$
|
|
6455
|
+
var css_248z$S = "/* pagination */\n\n.Pagination-v4-0-057qde {\n display: flex;\n vertical-align: middle;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.Pagination-button-v4-0-0ra4x3 {\n padding-left: var(--spacing);\n padding-right: var(--spacing);\n}\n\n.Pagination-buttonWrapper-v4-0-04aup6 {\n display: flex;\n flex-direction: row;\n}\n\n.Pagination-pageIndex-v4-0-04d0qr {\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n}\n\n.Pagination-MetricInput-v4-0-0dkxor {\n width: var(--spacing-4);\n margin-right: var(--spacing);\n padding-left: var(--spacing);\n padding-right: var(--spacing);\n}\n\n.Pagination-MetricInput-v4-0-0dkxor .MetricInput-input-v4-0-0slnpr {\n text-align: center;\n}\n.Pagination-MetricInput-v4-0-0dkxor .MetricInput-arrowIcons-v4-0-0sntfg {\n display: none;\n}\n\n@media (max-width: 575px) {\n .Pagination-pageIndex-v4-0-04d0qr {\n order: -1;\n flex-basis: 100%;\n }\n .Pagination-buttonWrapper-v4-0-04aup6 {\n margin-top: var(--spacing);\n width: 50%;\n }\n .Pagination-buttonWrapper--next-v4-0-0af6es {\n justify-content: flex-start;\n }\n .Pagination-buttonWrapper--previous-v4-0-0brpp2 {\n justify-content: flex-end;\n }\n}\n";
|
|
6456
|
+
var styles$Q = {"Pagination":"Pagination-v4-0-057qde","Pagination-button":"Pagination-button-v4-0-0ra4x3","Pagination-buttonWrapper":"Pagination-buttonWrapper-v4-0-04aup6","Pagination-pageIndex":"Pagination-pageIndex-v4-0-04d0qr","Pagination-MetricInput":"Pagination-MetricInput-v4-0-0dkxor","MetricInput-input":"MetricInput-input-v4-0-0slnpr","MetricInput-arrowIcons":"MetricInput-arrowIcons-v4-0-0sntfg","Pagination-buttonWrapper--next":"Pagination-buttonWrapper--next-v4-0-0af6es","Pagination-buttonWrapper--previous":"Pagination-buttonWrapper--previous-v4-0-0brpp2"};
|
|
6457
|
+
styleInject(css_248z$S);
|
|
6446
6458
|
|
|
6447
6459
|
var _excluded$U = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
|
|
6448
6460
|
var sizeMapping$1 = {
|
|
@@ -6512,12 +6524,12 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6512
6524
|
}
|
|
6513
6525
|
}, [valueProp]);
|
|
6514
6526
|
var baseProps = extractBaseProps(props);
|
|
6515
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6516
|
-
var inputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6517
|
-
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6527
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$R['MetricInput'], true), styles$R["MetricInput--".concat(size)], size), styles$R['MetricInput--disabled'], disabled), styles$R['MetricInput--readOnly'], readOnly), styles$R['MetricInput--error'], error), className);
|
|
6528
|
+
var inputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$R['MetricInput-input'], true), styles$Q['MetricInput-input'], true), styles$R["MetricInput-input--".concat(size)], size), "mr-4", !suffix && !showActionButton && size === 'regular'), "mr-6", !suffix && !showActionButton && size === 'large'));
|
|
6529
|
+
var iconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$R['MetricInput-icon'], true), styles$R["MetricInput-icon--".concat(size)], size));
|
|
6518
6530
|
var prefixClass = classnames(_defineProperty$1(_defineProperty$1({}, 'mr-4', size === 'regular'), 'mr-5', size !== 'regular'));
|
|
6519
6531
|
var suffixClass = classnames(_defineProperty$1(_defineProperty$1({}, 'ml-4 mr-3', size === 'regular'), 'mx-5', size !== 'regular'));
|
|
6520
|
-
var actionButton = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'p-0', true), styles$
|
|
6532
|
+
var actionButton = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'p-0', true), styles$R["MetricInput-arrowIcon--".concat(size)], size), 'ml-3', true));
|
|
6521
6533
|
var onChangeHandler = function onChangeHandler(e) {
|
|
6522
6534
|
if (isUncontrolled) {
|
|
6523
6535
|
setValue(e.target.value);
|
|
@@ -6606,7 +6618,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
6606
6618
|
size: size,
|
|
6607
6619
|
appearance: "subtle"
|
|
6608
6620
|
}, suffix), showActionButton && /*#__PURE__*/React.createElement("div", {
|
|
6609
|
-
className: styles$
|
|
6621
|
+
className: styles$Q['MetricInput-arrowIcons']
|
|
6610
6622
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
6611
6623
|
type: "button",
|
|
6612
6624
|
icon: "keyboard_arrow_up",
|
|
@@ -6940,9 +6952,9 @@ InputMask.utils = {
|
|
|
6940
6952
|
};
|
|
6941
6953
|
var X = InputMask;
|
|
6942
6954
|
|
|
6943
|
-
var css_248z$
|
|
6944
|
-
var styles$
|
|
6945
|
-
styleInject(css_248z$
|
|
6955
|
+
var css_248z$R = "/* Label */\n.Label-v4-0-0k7yoa {\n display: inline-flex;\n}\n\n.Label--withInput-v4-0-01edb1 {\n margin-bottom: var(--spacing-m);\n}\n\n.Label--optional-v4-0-0xwmox {\n align-items: center;\n}\n\n.Label-text-v4-0-0vdliw {\n line-height: var(--font-height-s);\n font-weight: var(--font-weight-medium);\n word-break: break-all;\n}\n\n.Label-optionalText-v4-0-0z14o7 {\n line-height: var(--font-height-s);\n margin-left: var(--spacing-m);\n}\n\n.Label--disabled-v4-0-0s49vo {\n color: var(--text-disabled);\n}\n\n.Label-requiredIndicator-v4-0-0d21jh {\n height: var(--spacing-0-75);\n width: var(--spacing-0-75);\n border-radius: 50%;\n background: var(--alert);\n margin-left: var(--spacing-m);\n margin-bottom: var(--spacing-0-75);\n display: inline-flex;\n}\n";
|
|
6956
|
+
var styles$P = {"Label":"Label-v4-0-0k7yoa","Label--withInput":"Label--withInput-v4-0-01edb1","Label--optional":"Label--optional-v4-0-0xwmox","Label-text":"Label-text-v4-0-0vdliw","Label-optionalText":"Label-optionalText-v4-0-0z14o7","Label--disabled":"Label--disabled-v4-0-0s49vo","Label-requiredIndicator":"Label-requiredIndicator-v4-0-0d21jh"};
|
|
6957
|
+
styleInject(css_248z$R);
|
|
6946
6958
|
|
|
6947
6959
|
var _excluded$S = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
|
|
6948
6960
|
/**
|
|
@@ -6958,14 +6970,14 @@ var Label = function Label(props) {
|
|
|
6958
6970
|
info = props.info,
|
|
6959
6971
|
rest = _objectWithoutProperties(props, _excluded$S);
|
|
6960
6972
|
var baseProps = extractBaseProps(props);
|
|
6961
|
-
var LabelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6962
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
6973
|
+
var LabelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$P.Label, true), styles$P['Label--withInput'], withInput), styles$P['Label--optional'], optional), className);
|
|
6974
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$P['Label-text'], true), styles$P['Label--disabled'], disabled));
|
|
6963
6975
|
var renderInfo = function renderInfo() {
|
|
6964
6976
|
var isRequired = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
6965
6977
|
var isOptional = arguments.length > 1 ? arguments[1] : undefined;
|
|
6966
6978
|
if (isRequired) {
|
|
6967
6979
|
return /*#__PURE__*/React.createElement("span", {
|
|
6968
|
-
className: styles$
|
|
6980
|
+
className: styles$P['Label-requiredIndicator'],
|
|
6969
6981
|
"data-test": "DesignSystem-Label--RequiredIndicator"
|
|
6970
6982
|
});
|
|
6971
6983
|
}
|
|
@@ -6973,7 +6985,7 @@ var Label = function Label(props) {
|
|
|
6973
6985
|
return /*#__PURE__*/React.createElement(Text, {
|
|
6974
6986
|
"data-test": "DesignSystem-Label--OptionalText",
|
|
6975
6987
|
appearance: "subtle",
|
|
6976
|
-
className: styles$
|
|
6988
|
+
className: styles$P['Label-optionalText']
|
|
6977
6989
|
}, "(optional)");
|
|
6978
6990
|
}
|
|
6979
6991
|
return null;
|
|
@@ -7001,9 +7013,9 @@ var Label = function Label(props) {
|
|
|
7001
7013
|
};
|
|
7002
7014
|
Label.displayName = 'Label';
|
|
7003
7015
|
|
|
7004
|
-
var css_248z$
|
|
7005
|
-
var styles$
|
|
7006
|
-
styleInject(css_248z$
|
|
7016
|
+
var css_248z$Q = "/* Caption */\n.Caption-v4-0-0947t0 {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n}\n\n.Caption--withInput-v4-0-0846yt {\n margin-top: var(--spacing-m);\n}\n\n.Caption-icon-v4-0-0tvl5e {\n display: flex;\n align-content: center;\n margin-right: var(--spacing-m);\n}\n\n.Caption--hidden-v4-0-0z9kpu {\n display: none;\n}\n";
|
|
7017
|
+
var styles$O = {"Caption":"Caption-v4-0-0947t0","Caption--withInput":"Caption--withInput-v4-0-0846yt","Caption-icon":"Caption-icon-v4-0-0tvl5e","Caption--hidden":"Caption--hidden-v4-0-0z9kpu"};
|
|
7018
|
+
styleInject(css_248z$Q);
|
|
7007
7019
|
|
|
7008
7020
|
var Caption = function Caption(props) {
|
|
7009
7021
|
var error = props.error,
|
|
@@ -7012,8 +7024,8 @@ var Caption = function Caption(props) {
|
|
|
7012
7024
|
children = props.children,
|
|
7013
7025
|
className = props.className;
|
|
7014
7026
|
var baseProps = extractBaseProps(props);
|
|
7015
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7016
|
-
var errorIconClass = classnames(_defineProperty$1({}, styles$
|
|
7027
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$O.Caption, true), styles$O['Caption--hidden'], hide), styles$O['Caption--withInput'], withInput), className);
|
|
7028
|
+
var errorIconClass = classnames(_defineProperty$1({}, styles$O['Caption-icon'], true));
|
|
7017
7029
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
7018
7030
|
className: classes,
|
|
7019
7031
|
"data-test": "DesignSystem-Caption"
|
|
@@ -7031,9 +7043,9 @@ var Caption = function Caption(props) {
|
|
|
7031
7043
|
};
|
|
7032
7044
|
Caption.displayName = 'Caption';
|
|
7033
7045
|
|
|
7034
|
-
var css_248z$
|
|
7035
|
-
var legendStyles = {"Legend":"
|
|
7036
|
-
styleInject(css_248z$
|
|
7046
|
+
var css_248z$P = ".Legend-v4-0-06gkpu {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.Legend-icon-v4-0-0usp8i {\n border-radius: var(--spacing-s);\n margin-right: var(--spacing);\n}\n";
|
|
7047
|
+
var legendStyles = {"Legend":"Legend-v4-0-06gkpu","Legend-icon":"Legend-icon-v4-0-0usp8i"};
|
|
7048
|
+
styleInject(css_248z$P);
|
|
7037
7049
|
|
|
7038
7050
|
var Legend = function Legend(props) {
|
|
7039
7051
|
var iconAppearance = props.iconAppearance,
|
|
@@ -7106,9 +7118,9 @@ var Editable = function Editable(props) {
|
|
|
7106
7118
|
};
|
|
7107
7119
|
Editable.displayName = 'Editable';
|
|
7108
7120
|
|
|
7109
|
-
var css_248z$
|
|
7110
|
-
var styles$
|
|
7111
|
-
styleInject(css_248z$
|
|
7121
|
+
var css_248z$O = ".EditableDropdown-v4-0-0w2ma8 {\n width: 100%;\n}\n\n.EditableDropdown-default-v4-0-0jtx3x {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n height: var(--spacing-3);\n padding-left: var(--spacing-l);\n}\n";
|
|
7122
|
+
var styles$N = {"EditableDropdown":"EditableDropdown-v4-0-0w2ma8","EditableDropdown-default":"EditableDropdown-default-v4-0-0jtx3x"};
|
|
7123
|
+
styleInject(css_248z$O);
|
|
7112
7124
|
|
|
7113
7125
|
var _excluded$R = ["onChange", "onClose"];
|
|
7114
7126
|
var EditableDropdown = function EditableDropdown(props) {
|
|
@@ -7131,8 +7143,8 @@ var EditableDropdown = function EditableDropdown(props) {
|
|
|
7131
7143
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
7132
7144
|
showComponent = _React$useState6[0],
|
|
7133
7145
|
setShowComponent = _React$useState6[1];
|
|
7134
|
-
var CompClass = classnames(_defineProperty$1({}, styles$
|
|
7135
|
-
var DefaultCompClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7146
|
+
var CompClass = classnames(_defineProperty$1({}, styles$N['EditableDropdown'], true), className);
|
|
7147
|
+
var DefaultCompClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$N['EditableDropdown-default'], true), 'd-none', showComponent));
|
|
7136
7148
|
var EditableDropdownClass = classnames(_defineProperty$1({}, 'd-none', !showComponent));
|
|
7137
7149
|
var baseProps = extractBaseProps(props);
|
|
7138
7150
|
var getLabel = function getLabel(updatedLabel) {
|
|
@@ -7189,9 +7201,9 @@ EditableDropdown.defaultProps = {
|
|
|
7189
7201
|
dropdownOptions: {}
|
|
7190
7202
|
};
|
|
7191
7203
|
|
|
7192
|
-
var css_248z$
|
|
7193
|
-
var styles$
|
|
7194
|
-
styleInject(css_248z$
|
|
7204
|
+
var css_248z$N = ".Link-v4-0-0kn7i7 {\n text-decoration: none;\n font-weight: var(--font-weight-medium);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n.Link-v4-0-0kn7i7:focus-visible {\n outline: none;\n}\n\n.Link--regular-v4-0-0e60i7 {\n font-size: var(--font-size);\n height: var(--font-height);\n}\n\n.Link--tiny-v4-0-0f98k9 {\n font-size: var(--font-size-s);\n height: var(--font-height-s);\n line-height: var(--font-height-s);\n}\n\n.Link--default-v4-0-06l4os {\n color: var(--text-link);\n}\n\n.Link--subtle-v4-0-0tj1b5 {\n color: var(--inverse-lighter);\n}\n\n.Link--default-v4-0-06l4os:hover {\n border-bottom: var(--spacing-xs) solid var(--primary-dark);\n color: var(--primary-dark);\n}\n\n.Link--subtle-v4-0-0tj1b5:hover {\n border-bottom: var(--spacing-xs) solid var(--inverse-light);\n color: var(--inverse-light);\n}\n\n.Link--default-v4-0-06l4os:active {\n color: var(--primary-darker);\n border: none;\n}\n\n.Link--subtle-v4-0-0tj1b5:active {\n color: var(--inverse);\n border: none;\n}\n\n.Link--default-v4-0-06l4os:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n border-radius: var(--spacing-m);\n}\n\n.Link--subtle-v4-0-0tj1b5:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n border-radius: var(--spacing-m);\n}\n\n.Link--default-disabled-v4-0-05lop6 {\n color: var(--primary-lighter);\n pointer-events: none;\n}\n\n.Link--subtle-disabled-v4-0-0z51v7 {\n color: var(--inverse-lightest);\n pointer-events: none;\n}\n";
|
|
7205
|
+
var styles$M = {"Link":"Link-v4-0-0kn7i7","Link--regular":"Link--regular-v4-0-0e60i7","Link--tiny":"Link--tiny-v4-0-0f98k9","Link--default":"Link--default-v4-0-06l4os","Link--subtle":"Link--subtle-v4-0-0tj1b5","Link--default-disabled":"Link--default-disabled-v4-0-05lop6","Link--subtle-disabled":"Link--subtle-disabled-v4-0-0z51v7"};
|
|
7206
|
+
styleInject(css_248z$N);
|
|
7195
7207
|
|
|
7196
7208
|
var _excluded$Q = ["children", "className", "appearance", "size", "disabled"];
|
|
7197
7209
|
/**
|
|
@@ -7208,7 +7220,7 @@ var Link = function Link(props) {
|
|
|
7208
7220
|
size = props.size,
|
|
7209
7221
|
disabled = props.disabled,
|
|
7210
7222
|
rest = _objectWithoutProperties(props, _excluded$Q);
|
|
7211
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7223
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$M.Link, true), styles$M["Link--".concat(size)], size), styles$M["Link--".concat(appearance)], appearance), styles$M["Link--".concat(appearance, "-disabled")], disabled), className);
|
|
7212
7224
|
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
|
|
7213
7225
|
"data-test": "DesignSystem-Link",
|
|
7214
7226
|
className: classes,
|
|
@@ -7223,9 +7235,9 @@ Link.defaultProps = {
|
|
|
7223
7235
|
disabled: false
|
|
7224
7236
|
};
|
|
7225
7237
|
|
|
7226
|
-
var css_248z$
|
|
7227
|
-
var styles$
|
|
7228
|
-
styleInject(css_248z$
|
|
7238
|
+
var css_248z$M = ".Message-v4-0-0dvlop {\n display: flex;\n flex-direction: row;\n overflow: hidden;\n padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);\n border: var(--spacing-xs) solid;\n width: 100%;\n border-radius: var(--spacing-m);\n box-sizing: border-box;\n}\n\n.Message--alert-v4-0-052a4a {\n border-color: var(--alert);\n background-color: rgba(217, 55, 55, 0.04);\n}\n\n.Message--success-v4-0-0k36zl {\n border-color: var(--success);\n background-color: rgba(46, 168, 67, 0.04);\n}\n\n.Message--info-v4-0-0rnvfl {\n border-color: var(--primary);\n background-color: rgba(0, 112, 221, 0.04);\n}\n\n.Message--warning-v4-0-01gscs {\n border-color: var(--accent1);\n background-color: rgba(240, 125, 0, 0.04);\n}\n\n.Message-icon-v4-0-0sv5gr {\n margin-right: var(--spacing-2);\n padding-top: var(--spacing-s);\n}\n\n.Message-icon--withTitle-v4-0-0f8xdu {\n padding-top: var(--spacing-m);\n}\n\n.Message-icon--warning-v4-0-0f183y {\n color: var(--accent1);\n}\n\n.Message-heading-v4-0-0u8nlx {\n margin-bottom: var(--spacing-m);\n}\n\n.Message-heading--alert-v4-0-0r802u,\n.Message-text--alert-v4-0-0ucieg {\n color: var(--alert-darker) !important;\n}\n\n.Message-heading--info-v4-0-0m14a8,\n.Message-text--info-v4-0-0f20z8 {\n color: var(--primary-darker) !important;\n}\n\n.Message-heading--success-v4-0-05jdv6,\n.Message-text--success-v4-0-0plrv3 {\n color: var(--success-darker) !important;\n}\n\n.Message-heading--warning-v4-0-0g0lh7,\n.Message-text--warning-v4-0-041sip {\n color: var(--accent1-darker) !important;\n}\n\n.Message-actions-v4-0-024k5r {\n display: flex;\n align-items: center;\n margin-top: var(--spacing-l);\n}\n";
|
|
7239
|
+
var styles$L = {"Message":"Message-v4-0-0dvlop","Message--alert":"Message--alert-v4-0-052a4a","Message--success":"Message--success-v4-0-0k36zl","Message--info":"Message--info-v4-0-0rnvfl","Message--warning":"Message--warning-v4-0-01gscs","Message-icon":"Message-icon-v4-0-0sv5gr","Message-icon--withTitle":"Message-icon--withTitle-v4-0-0f8xdu","Message-icon--warning":"Message-icon--warning-v4-0-0f183y","Message-heading":"Message-heading-v4-0-0u8nlx","Message-heading--alert":"Message-heading--alert-v4-0-0r802u","Message-text--alert":"Message-text--alert-v4-0-0ucieg","Message-heading--info":"Message-heading--info-v4-0-0m14a8","Message-text--info":"Message-text--info-v4-0-0f20z8","Message-heading--success":"Message-heading--success-v4-0-05jdv6","Message-text--success":"Message-text--success-v4-0-0plrv3","Message-heading--warning":"Message-heading--warning-v4-0-0g0lh7","Message-text--warning":"Message-text--warning-v4-0-041sip","Message-actions":"Message-actions-v4-0-024k5r"};
|
|
7240
|
+
styleInject(css_248z$M);
|
|
7229
7241
|
|
|
7230
7242
|
var IconMapping$2 = {
|
|
7231
7243
|
success: 'check_circle',
|
|
@@ -7240,10 +7252,10 @@ var Message = function Message(props) {
|
|
|
7240
7252
|
var appearance = props.appearance;
|
|
7241
7253
|
appearance = appearance === 'default' ? 'info' : appearance;
|
|
7242
7254
|
var baseProps = extractBaseProps(props);
|
|
7243
|
-
var MessageClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7244
|
-
var IconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7245
|
-
var TitleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7246
|
-
var DescriptionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7255
|
+
var MessageClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$L['Message'], true), styles$L["Message--".concat(appearance)], appearance), className);
|
|
7256
|
+
var IconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$L['Message-icon'], true), styles$L["Message-icon--".concat(appearance)], appearance), styles$L['Message-icon--withTitle'], title));
|
|
7257
|
+
var TitleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$L['Message-heading'], true), styles$L["Message-heading--".concat(appearance)], appearance));
|
|
7258
|
+
var DescriptionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$L['Message-text'], true), styles$L["Message-text--".concat(appearance)], appearance));
|
|
7247
7259
|
var renderDescription = function renderDescription(description, children) {
|
|
7248
7260
|
if (description || typeof children === 'string') {
|
|
7249
7261
|
return /*#__PURE__*/React.createElement(Text, {
|
|
@@ -7254,7 +7266,7 @@ var Message = function Message(props) {
|
|
|
7254
7266
|
if (children) {
|
|
7255
7267
|
return /*#__PURE__*/React.createElement("div", {
|
|
7256
7268
|
"data-test": "DesignSystem-Message--Description",
|
|
7257
|
-
className: styles$
|
|
7269
|
+
className: styles$L['Message-description']
|
|
7258
7270
|
}, children);
|
|
7259
7271
|
}
|
|
7260
7272
|
return null;
|
|
@@ -7274,7 +7286,7 @@ var Message = function Message(props) {
|
|
|
7274
7286
|
className: TitleClass
|
|
7275
7287
|
}, title), renderDescription(props.description, props.children), actions && /*#__PURE__*/React.createElement("div", {
|
|
7276
7288
|
"data-test": "DesignSystem-Message--actions",
|
|
7277
|
-
className: styles$
|
|
7289
|
+
className: styles$L['Message-actions']
|
|
7278
7290
|
}, actions)));
|
|
7279
7291
|
};
|
|
7280
7292
|
Message.displayName = 'Message';
|
|
@@ -7283,9 +7295,9 @@ Message.defaultProps = {
|
|
|
7283
7295
|
description: ''
|
|
7284
7296
|
};
|
|
7285
7297
|
|
|
7286
|
-
var css_248z$
|
|
7287
|
-
var styles$
|
|
7288
|
-
styleInject(css_248z$
|
|
7298
|
+
var css_248z$L = ".Meta-v4-0-0x6hyr {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n\n.MetaList-seperator-v4-0-07zi87 {\n margin-left: var(--spacing);\n}\n.MetaList-seperator--left-v4-0-0at299 {\n margin-right: var(--spacing-m);\n}\n.Meta-icon-v4-0-0nv3i1 {\n padding-right: var(--spacing-m);\n display: flex;\n align-items: center;\n}\n.MetaList-v4-0-0uklm9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n.MetaList-item-v4-0-07d0f6 {\n margin: 0 var(--spacing-m);\n display: flex;\n flex-direction: row;\n align-items: center;\n width: -moz-fit-content;\n width: fit-content;\n font-size: var(--font-size);\n}\n\n.MetaList-item-v4-0-07d0f6:first-child {\n margin-left: 0;\n}\n\n.MetaList-item-v4-0-07d0f6:last-child {\n margin-right: 0;\n}\n";
|
|
7299
|
+
var styles$K = {"Meta":"Meta-v4-0-0x6hyr","MetaList-seperator":"MetaList-seperator-v4-0-07zi87","MetaList-seperator--left":"MetaList-seperator--left-v4-0-0at299","Meta-icon":"Meta-icon-v4-0-0nv3i1","MetaList":"MetaList-v4-0-0uklm9","MetaList-item":"MetaList-item-v4-0-07d0f6"};
|
|
7300
|
+
styleInject(css_248z$L);
|
|
7289
7301
|
|
|
7290
7302
|
var Meta = function Meta(props) {
|
|
7291
7303
|
var label = props.label,
|
|
@@ -7294,12 +7306,12 @@ var Meta = function Meta(props) {
|
|
|
7294
7306
|
iconType = props.iconType;
|
|
7295
7307
|
return /*#__PURE__*/React.createElement("span", {
|
|
7296
7308
|
"data-test": "DesignSystem-MetaList--Meta",
|
|
7297
|
-
className: styles$
|
|
7309
|
+
className: styles$K['Meta']
|
|
7298
7310
|
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
7299
7311
|
"data-test": "DesignSystem-MetaList--MetaIcon",
|
|
7300
7312
|
name: icon,
|
|
7301
7313
|
appearance: "subtle",
|
|
7302
|
-
className: styles$
|
|
7314
|
+
className: styles$K['Meta-icon'],
|
|
7303
7315
|
type: iconType,
|
|
7304
7316
|
size: size === 'regular' ? 16 : 12
|
|
7305
7317
|
}), /*#__PURE__*/React.createElement(Text, {
|
|
@@ -7316,9 +7328,9 @@ var MetaList = function MetaList(props) {
|
|
|
7316
7328
|
className = props.className,
|
|
7317
7329
|
size = props.size;
|
|
7318
7330
|
var baseProps = extractBaseProps(props);
|
|
7319
|
-
var MetaClass = classnames(_defineProperty$1({}, styles$
|
|
7320
|
-
var SeperatorClass = classnames(_defineProperty$1({}, styles$
|
|
7321
|
-
var LeftSeperatorClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7331
|
+
var MetaClass = classnames(_defineProperty$1({}, styles$K['MetaList'], true), className);
|
|
7332
|
+
var SeperatorClass = classnames(_defineProperty$1({}, styles$K['MetaList-seperator'], true));
|
|
7333
|
+
var LeftSeperatorClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$K['MetaList-seperator'], true), styles$K['MetaList-seperator--left'], true));
|
|
7322
7334
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
7323
7335
|
"data-test": "DesignSystem-MetaList"
|
|
7324
7336
|
}, baseProps, {
|
|
@@ -7337,7 +7349,7 @@ var MetaList = function MetaList(props) {
|
|
|
7337
7349
|
var rightSeperator = ind !== list.length - 1;
|
|
7338
7350
|
return /*#__PURE__*/React.createElement("span", {
|
|
7339
7351
|
key: ind,
|
|
7340
|
-
className: styles$
|
|
7352
|
+
className: styles$K['MetaList-item']
|
|
7341
7353
|
}, /*#__PURE__*/React.createElement(Meta, {
|
|
7342
7354
|
size: size,
|
|
7343
7355
|
label: label,
|
|
@@ -7419,13 +7431,13 @@ function isElementOfType(element) {
|
|
|
7419
7431
|
return element != null && element.type != null;
|
|
7420
7432
|
}
|
|
7421
7433
|
|
|
7422
|
-
var css_248z$
|
|
7423
|
-
var styles$
|
|
7424
|
-
styleInject(css_248z$
|
|
7434
|
+
var css_248z$K = ".Slider-v4-0-0qt1p6 {\n width: 100%;\n}\n\n.Slider-wrapper-v4-0-0rkdd2 {\n position: relative;\n outline: none;\n cursor: pointer;\n}\n\n.Slider-wrapper--disabled-v4-0-0o3dmc {\n cursor: not-allowed;\n}\n\n.Slider-track-v4-0-0tib78 {\n border-radius: var(--spacing-m);\n height: var(--spacing-2);\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n\n.Slider-progress-v4-0-0jzuah {\n background: var(--secondary-lighter);\n height: var(--spacing-s);\n box-sizing: border-box;\n border-radius: var(--spacing-s);\n}\n\n.Slider-progress--inRange-v4-0-0dfqnn {\n background: var(--primary);\n}\n\n.Slider-progress--inRangeDisabled-v4-0-0mekoo {\n border: var(--border);\n}\n\n.Slider-label-v4-0-0tn0dy {\n margin-top: var(--spacing-m);\n transform: translate(-50%, 0px);\n display: flex;\n align-items: center;\n flex-direction: column;\n position: absolute;\n -webkit-user-select: none;\n user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n.Slider-ticks-v4-0-0tigwf {\n width: var(--spacing-s);\n height: var(--spacing-m);\n border-radius: var(--spacing-xs);\n background-color: var(--secondary-dark);\n}\n\n.Slider-tooltip--visible-v4-0-0im7cl {\n visibility: visible;\n}\n\n.Slider-tooltip--hidden-v4-0-0m2oxq {\n visibility: hidden;\n}\n\n.Slider-tooltip-v4-0-0hobpc {\n position: absolute;\n color: var(--white);\n outline: none;\n bottom: calc(100% + 4px);\n transform: translateX(calc(-50% + 8px));\n}\n\n.Slider-handle-v4-0-02p5uk {\n height: var(--spacing-2);\n width: var(--spacing-2);\n position: absolute;\n left: 0;\n top: 0;\n border-radius: 50%;\n background-color: var(--white);\n border: var(--spacing-s) solid var(--primary);\n box-shadow: var(--shadow-s);\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n transition: border var(--duration--fast-01) var(--standard-productive-curve),\n background-color var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Slider-handle-v4-0-02p5uk:hover {\n background-color: var(--primary-lightest);\n}\n\n.Slider-handle-v4-0-02p5uk:active {\n background-color: var(--primary);\n}\n\n.Slider-handle-v4-0-02p5uk:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n outline: none;\n}\n\n.Slider-handle--disabled-v4-0-0q5xnx {\n pointer-events: none;\n background-color: var(--secondary-lighter);\n box-shadow: none;\n}\n\n.Slider-handle--disabled-v4-0-0q5xnx:focus {\n box-shadow: none;\n}\n";
|
|
7435
|
+
var styles$J = {"Slider":"Slider-v4-0-0qt1p6","Slider-wrapper":"Slider-wrapper-v4-0-0rkdd2","Slider-wrapper--disabled":"Slider-wrapper--disabled-v4-0-0o3dmc","Slider-track":"Slider-track-v4-0-0tib78","Slider-progress":"Slider-progress-v4-0-0jzuah","Slider-progress--inRange":"Slider-progress--inRange-v4-0-0dfqnn","Slider-progress--inRangeDisabled":"Slider-progress--inRangeDisabled-v4-0-0mekoo","Slider-label":"Slider-label-v4-0-0tn0dy","Slider-ticks":"Slider-ticks-v4-0-0tigwf","Slider-tooltip--visible":"Slider-tooltip--visible-v4-0-0im7cl","Slider-tooltip--hidden":"Slider-tooltip--hidden-v4-0-0m2oxq","Slider-tooltip":"Slider-tooltip-v4-0-0hobpc","Slider-handle":"Slider-handle-v4-0-02p5uk","Slider-handle--disabled":"Slider-handle--disabled-v4-0-0q5xnx"};
|
|
7436
|
+
styleInject(css_248z$K);
|
|
7425
7437
|
|
|
7426
|
-
var css_248z$
|
|
7427
|
-
var styles$
|
|
7428
|
-
styleInject(css_248z$
|
|
7438
|
+
var css_248z$J = ".Tooltip-v4-0-0y4mag {\n max-width: var(--spacing-9);\n padding: var(--spacing-m) var(--spacing);\n border-radius: var(--spacing-m);\n z-index: 500;\n background: var(--inverse);\n overflow: hidden;\n box-sizing: border-box;\n transition: opacity 120ms;\n transition-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n}\n\n.Tooltip-text-v4-0-0hh18r {\n word-break: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n}\n\n@keyframes tooltip-open-top-v4-0-04bstk {\n from {\n top: 0px;\n opacity: 0;\n }\n to {\n top: -4px;\n opacity: 1;\n }\n}\n@keyframes tooltip-close-top-v4-0-0t2xy1 {\n from {\n top: -4px;\n opacity: 1;\n }\n to {\n top: 0px;\n opacity: 0;\n }\n}\n\n.Tooltip-animation-open-top-v4-0-0b1ftd {\n animation: tooltip-open-top-v4-0-04bstk 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.Tooltip-animation-close-top-v4-0-0pb2b4 {\n animation: tooltip-close-top-v4-0-0t2xy1 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n@keyframes tooltip-open-bottom-v4-0-0lb08v {\n from {\n top: -4px;\n opacity: 0;\n }\n to {\n top: 0px;\n opacity: 1;\n }\n}\n@keyframes tooltip-close-bottom-v4-0-0iwscu {\n from {\n top: 0px;\n opacity: 1;\n }\n to {\n top: -4px;\n opacity: 0;\n }\n}\n\n.Tooltip-animation-open-bottom-v4-0-0agw7m {\n animation: tooltip-open-bottom-v4-0-0lb08v 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.Tooltip-animation-close-bottom-v4-0-0batrz {\n animation: tooltip-close-bottom-v4-0-0iwscu 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n@keyframes tooltip-open-left-v4-0-03q0hz {\n from {\n left: 1px;\n opacity: 0;\n }\n to {\n left: -3px;\n opacity: 1;\n }\n}\n@keyframes tooltip-close-left-v4-0-0lv32x {\n from {\n left: -3px;\n opacity: 1;\n }\n to {\n left: 1px;\n opacity: 0;\n }\n}\n\n.Tooltip-animation-open-left-v4-0-0cx3at {\n animation: tooltip-open-left-v4-0-03q0hz 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.Tooltip-animation-close-left-v4-0-036lna {\n animation: tooltip-close-left-v4-0-0lv32x 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n@keyframes tooltip-open-right-v4-0-0qkfa6 {\n from {\n left: -3px;\n opacity: 0;\n }\n to {\n left: 1px;\n opacity: 1;\n }\n}\n@keyframes tooltip-close-right-v4-0-0wg3oy {\n from {\n left: 1px;\n opacity: 1;\n }\n to {\n left: -3px;\n opacity: 0;\n }\n}\n\n.Tooltip-animation-open-right-v4-0-0ps7c5 {\n animation: tooltip-open-right-v4-0-0qkfa6 120ms cubic-bezier(0, 0, 0.3, 1);\n animation-fill-mode: forwards;\n}\n.Tooltip-animation-close-right-v4-0-0rqwbr {\n animation: tooltip-close-right-v4-0-0wg3oy 80ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n.Tooltip-container-v4-0-0xrrn0 {\n transition-delay: 400ms;\n animation-delay: 400ms;\n}\n";
|
|
7439
|
+
var styles$I = {"Tooltip":"Tooltip-v4-0-0y4mag","Tooltip-text":"Tooltip-text-v4-0-0hh18r","Tooltip-animation-open-top":"Tooltip-animation-open-top-v4-0-0b1ftd","tooltip-open-top":"tooltip-open-top-v4-0-04bstk","Tooltip-animation-close-top":"Tooltip-animation-close-top-v4-0-0pb2b4","tooltip-close-top":"tooltip-close-top-v4-0-0t2xy1","Tooltip-animation-open-bottom":"Tooltip-animation-open-bottom-v4-0-0agw7m","tooltip-open-bottom":"tooltip-open-bottom-v4-0-0lb08v","Tooltip-animation-close-bottom":"Tooltip-animation-close-bottom-v4-0-0batrz","tooltip-close-bottom":"tooltip-close-bottom-v4-0-0iwscu","Tooltip-animation-open-left":"Tooltip-animation-open-left-v4-0-0cx3at","tooltip-open-left":"tooltip-open-left-v4-0-03q0hz","Tooltip-animation-close-left":"Tooltip-animation-close-left-v4-0-036lna","tooltip-close-left":"tooltip-close-left-v4-0-0lv32x","Tooltip-animation-open-right":"Tooltip-animation-open-right-v4-0-0ps7c5","tooltip-open-right":"tooltip-open-right-v4-0-0qkfa6","Tooltip-animation-close-right":"Tooltip-animation-close-right-v4-0-0rqwbr","tooltip-close-right":"tooltip-close-right-v4-0-0wg3oy","Tooltip-container":"Tooltip-container-v4-0-0xrrn0"};
|
|
7440
|
+
styleInject(css_248z$J);
|
|
7429
7441
|
|
|
7430
7442
|
var Handle = /*#__PURE__*/function (_React$Component) {
|
|
7431
7443
|
function Handle() {
|
|
@@ -7591,8 +7603,8 @@ var Handle = /*#__PURE__*/function (_React$Component) {
|
|
|
7591
7603
|
var style = {
|
|
7592
7604
|
left: offsetCalc
|
|
7593
7605
|
};
|
|
7594
|
-
var className = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7595
|
-
var TooltipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7606
|
+
var className = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$J['Slider-handle'], true), styles$J['Slider-handle--disabled'], disabled), styles$J['Slider-handle--active'], isHandleMoving), 'border-0', disabled));
|
|
7607
|
+
var TooltipClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$J['Slider-tooltip'], true), styles$I['Tooltip'], true), 'd-none', !showTootlip));
|
|
7596
7608
|
return (
|
|
7597
7609
|
/*#__PURE__*/
|
|
7598
7610
|
// TODO(a11y): fix accessibility
|
|
@@ -7820,13 +7832,13 @@ var MultiSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
7820
7832
|
}
|
|
7821
7833
|
}
|
|
7822
7834
|
};
|
|
7823
|
-
var SliderTicksClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7835
|
+
var SliderTicksClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$J['Slider-ticks'], true), 'bg-dark', active));
|
|
7824
7836
|
|
|
7825
7837
|
// TODO(a11y): fix accessibility
|
|
7826
7838
|
/* eslint-disable */
|
|
7827
7839
|
labels.push(/*#__PURE__*/React.createElement("div", {
|
|
7828
7840
|
onClick: onClickHandler,
|
|
7829
|
-
className: styles$
|
|
7841
|
+
className: styles$J['Slider-label'],
|
|
7830
7842
|
key: i,
|
|
7831
7843
|
style: style,
|
|
7832
7844
|
onMouseOver: function onMouseOver() {
|
|
@@ -7861,7 +7873,7 @@ var MultiSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
7861
7873
|
};
|
|
7862
7874
|
var style = _objectSpread2({}, orientationStyle);
|
|
7863
7875
|
var fillTrack = _this.getTrackFill(start, end);
|
|
7864
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7876
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$J['Slider-progress'], true), styles$J['Slider-progress--disabled'], _this.props.disabled), styles$J['Slider-progress--inRange'], fillTrack), styles$J['Slider-progress--inRangeDisabled'], fillTrack && _this.props.disabled));
|
|
7865
7877
|
return /*#__PURE__*/React.createElement("div", {
|
|
7866
7878
|
key: "track-".concat(index),
|
|
7867
7879
|
className: classes,
|
|
@@ -7942,8 +7954,8 @@ var MultiSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
7942
7954
|
label = _this$props3.label,
|
|
7943
7955
|
className = _this$props3.className;
|
|
7944
7956
|
var baseProps = extractBaseProps(this.props);
|
|
7945
|
-
var SliderClass = classnames(_defineProperty$1({}, styles$
|
|
7946
|
-
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
7957
|
+
var SliderClass = classnames(_defineProperty$1({}, styles$J['Slider'], true), className);
|
|
7958
|
+
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$J['Slider-wrapper'], true), styles$J['Slider-wrapper--disabled'], this.props.disabled));
|
|
7947
7959
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
7948
7960
|
className: SliderClass,
|
|
7949
7961
|
"data-test": "DesignSystem-MultiSlider"
|
|
@@ -7952,14 +7964,14 @@ var MultiSlider = /*#__PURE__*/function (_React$Component) {
|
|
|
7952
7964
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
7953
7965
|
className: WrapperClass
|
|
7954
7966
|
}, /*#__PURE__*/React.createElement("div", {
|
|
7955
|
-
className: styles$
|
|
7967
|
+
className: styles$J['Slider-track'],
|
|
7956
7968
|
ref: function ref(_ref3) {
|
|
7957
7969
|
return _this2.trackElement = _ref3;
|
|
7958
7970
|
},
|
|
7959
7971
|
onMouseDown: this.maybeHandleTrackClick,
|
|
7960
7972
|
"data-test": "DesignSystem-MultiSlider-Slider-Track"
|
|
7961
7973
|
}, this.renderTracks()), /*#__PURE__*/React.createElement("div", {
|
|
7962
|
-
className: styles$
|
|
7974
|
+
className: styles$J['Slider-axis']
|
|
7963
7975
|
}, this.renderLabels()), this.renderHandles()));
|
|
7964
7976
|
}
|
|
7965
7977
|
}]);
|
|
@@ -7998,11 +8010,10 @@ var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
7998
8010
|
onOutsideClick(event);
|
|
7999
8011
|
}
|
|
8000
8012
|
}, []);
|
|
8001
|
-
var classes = classnames(_defineProperty$1({}, 'OutsideClick', true), className);
|
|
8002
8013
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
8003
8014
|
ref: innerRef
|
|
8004
8015
|
}, rest, {
|
|
8005
|
-
className:
|
|
8016
|
+
className: className
|
|
8006
8017
|
}), children);
|
|
8007
8018
|
});
|
|
8008
8019
|
OutsideClick.displayName = 'OutsideClick';
|
|
@@ -8027,9 +8038,9 @@ Paragraph.defaultProps = {
|
|
|
8027
8038
|
appearance: 'default'
|
|
8028
8039
|
};
|
|
8029
8040
|
|
|
8030
|
-
var css_248z$
|
|
8031
|
-
var styles$
|
|
8032
|
-
styleInject(css_248z$
|
|
8041
|
+
var css_248z$I = ".ProgressBar-v4-0-0blijc {\n width: 100%;\n border-radius: var(--spacing-m);\n background: var(--secondary-lighter);\n}\n\n.ProgressBar-indicator-v4-0-07h0vk {\n background-color: var(--primary);\n border-radius: var(--spacing-m);\n transition: var(--duration--slow-01) var(--standard-expressive-curve);\n}\n\n.ProgressBar-indicator--small-v4-0-063lmx {\n height: var(--spacing-m);\n}\n\n.ProgressBar-indicator--regular-v4-0-0f2gpo {\n height: var(--spacing);\n}\n";
|
|
8042
|
+
var styles$H = {"ProgressBar":"ProgressBar-v4-0-0blijc","ProgressBar-indicator":"ProgressBar-indicator-v4-0-07h0vk","ProgressBar-indicator--small":"ProgressBar-indicator--small-v4-0-063lmx","ProgressBar-indicator--regular":"ProgressBar-indicator--regular-v4-0-0f2gpo"};
|
|
8043
|
+
styleInject(css_248z$I);
|
|
8033
8044
|
|
|
8034
8045
|
var ProgressBar = function ProgressBar(props) {
|
|
8035
8046
|
var max = props.max,
|
|
@@ -8040,8 +8051,8 @@ var ProgressBar = function ProgressBar(props) {
|
|
|
8040
8051
|
var style = {
|
|
8041
8052
|
width: value > 0 ? "".concat(Math.min(value, max) * 100 / max, "%") : '0'
|
|
8042
8053
|
};
|
|
8043
|
-
var ProgressBarClass = classnames(_defineProperty$1({}, styles$
|
|
8044
|
-
var ProgressIndicatorClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8054
|
+
var ProgressBarClass = classnames(_defineProperty$1({}, styles$H.ProgressBar, true), className);
|
|
8055
|
+
var ProgressIndicatorClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$H['ProgressBar-indicator'], true), styles$H['ProgressBar-indicator--small'], size === 'small'), styles$H['ProgressBar-indicator--regular'], size === 'regular'));
|
|
8045
8056
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
8046
8057
|
"data-test": "DesignSystem-ProgressBar"
|
|
8047
8058
|
}, baseProps, {
|
|
@@ -8058,9 +8069,9 @@ ProgressBar.defaultProps = {
|
|
|
8058
8069
|
size: 'regular'
|
|
8059
8070
|
};
|
|
8060
8071
|
|
|
8061
|
-
var css_248z$
|
|
8062
|
-
var styles$
|
|
8063
|
-
styleInject(css_248z$
|
|
8072
|
+
var css_248z$H = "/* Radio */\n\n.Radio-v4-0-0ejcy2 {\n display: flex;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.Radio-outerWrapper-v4-0-05alln {\n position: relative;\n flex-shrink: 0;\n margin-top: var(--spacing-s);\n}\n\n.Radio-defaultWrapper-v4-0-0eugs8 {\n border: var(--border);\n}\n\n.Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--border);\n border-color: var(--alert);\n}\n\n.Radio-outerWrapper--regular-v4-0-06dvyq {\n height: var(--spacing-2);\n width: var(--spacing-2);\n}\n\n.Radio-outerWrapper--tiny-v4-0-0zawwx {\n height: var(--spacing-l);\n width: var(--spacing-l);\n}\n\n.Radio-input-v4-0-0qtvh1 {\n opacity: 0;\n position: absolute;\n height: 100%;\n width: 100%;\n z-index: 2;\n margin: 0;\n cursor: pointer;\n}\n\n.Radio-labelWrapper-v4-0-0szjfc {\n padding-left: var(--spacing);\n display: flex;\n flex-direction: column;\n}\n\n.Radio-Label-v4-0-0qdou8 {\n display: flex;\n cursor: pointer;\n}\n\n.Radio-wrapper-v4-0-06onv0 {\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n z-index: 1;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Radio--disabled-v4-0-0mbbw2 {\n pointer-events: none;\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-wrapper-v4-0-06onv0 {\n border: var(--spacing-xs) solid var(--secondary-dark);\n background-color: var(--secondary-lighter);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-wrapper-v4-0-06onv0 {\n background-color: var(--secondary-light);\n border: var(--spacing-xs) solid var(--inverse-lightest);\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--border);\n background-color: var(--secondary-lighter);\n border-color: var(--alert-dark);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--border);\n background-color: var(--secondary-light);\n border-color: var(--alert-darker);\n}\n\n.Radio-v4-0-0ejcy2:focus-within .Radio-wrapper-v4-0-06onv0 {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n border-radius: 50%;\n}\n\n.Radio-v4-0-0ejcy2:focus-within .Radio-errorWrapper-v4-0-0gtbx1 {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n border-radius: 50%;\n}\n\n.Radio-v4-0-0ejcy2:focus-within .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0 {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Radio-v4-0-0ejcy2:focus-within .Radio-input-v4-0-0qtvh1:checked ~ .Radio-errorWrapper-v4-0-0gtbx1 {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-wrapper-v4-0-06onv0 {\n border: var(--spacing-xs) solid var(--secondary-light);\n background-color: var(--secondary-lightest);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--spacing-xs) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0 {\n border: var(--spacing-xs) solid var(--primary);\n}\n\n.Radio-input-v4-0-0qtvh1:checked ~ .Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--spacing-xs) solid var(--alert);\n}\n\n.Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0:after {\n display: block;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Radio-wrapper-v4-0-06onv0:after {\n content: '';\n display: none;\n border-radius: 50%;\n background: var(--primary);\n}\n\n.Radio-wrapper--regular-v4-0-0khnsh:after {\n width: var(--spacing);\n height: var(--spacing);\n}\n\n.Radio-wrapper--tiny-v4-0-0o4p6m:after {\n width: var(--spacing-m);\n height: var(--spacing-m);\n border: var(--spacing-xs) solid var(--primary);\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0 {\n border: var(--spacing-xs) solid var(--primary-dark);\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0:after {\n background: var(--primary-dark);\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper--tiny-v4-0-0o4p6m:after {\n border: var(--spacing-xs) solid var(--primary-dark);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0 {\n background-color: var(--secondary-light);\n border: var(--spacing-xs) solid var(--primary-darker);\n}\n\n.Radio-v4-0-0ejcy2:hover .Radio-input-v4-0-0qtvh1:checked ~ .Radio-errorWrapper-v4-0-0gtbx1 {\n background-color: var(--secondary-lighter);\n border: var(--spacing-xs) solid var(--alert-dark);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-input-v4-0-0qtvh1:checked ~ .Radio-errorWrapper-v4-0-0gtbx1 {\n background-color: var(--secondary-light);\n border: var(--spacing-xs) solid var(--alert-darker);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0:after {\n background: var(--primary-darker);\n}\n\n.Radio-v4-0-0ejcy2:active .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper--tiny-v4-0-0o4p6m:after {\n border: var(--spacing-xs) solid var(--primary-darker);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0 {\n border: var(--spacing-xs) solid var(--primary-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-input-v4-0-0qtvh1:checked ~ .Radio-errorWrapper-v4-0-0gtbx1 {\n border: var(--spacing-xs) solid var(--alert-lighter);\n background-color: var(--secondary-lightest);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-input-v4-0-0qtvh1:checked ~ .Radio-wrapper-v4-0-06onv0:after {\n background: var(--primary-lighter);\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-input-v4-0-0qtvh1 ~ .Radio-wrapper-v4-0-06onv0:focus {\n box-shadow: none;\n}\n\n.Radio--disabled-v4-0-0mbbw2 .Radio-input-v4-0-0qtvh1 ~ .Radio-errorWrapper-v4-0-0gtbx1:focus {\n box-shadow: none;\n}\n";
|
|
8073
|
+
var styles$G = {"Radio":"Radio-v4-0-0ejcy2","Radio-outerWrapper":"Radio-outerWrapper-v4-0-05alln","Radio-defaultWrapper":"Radio-defaultWrapper-v4-0-0eugs8","Radio-errorWrapper":"Radio-errorWrapper-v4-0-0gtbx1","Radio-outerWrapper--regular":"Radio-outerWrapper--regular-v4-0-06dvyq","Radio-outerWrapper--tiny":"Radio-outerWrapper--tiny-v4-0-0zawwx","Radio-input":"Radio-input-v4-0-0qtvh1","Radio-labelWrapper":"Radio-labelWrapper-v4-0-0szjfc","Radio-Label":"Radio-Label-v4-0-0qdou8","Radio-wrapper":"Radio-wrapper-v4-0-06onv0","Radio--disabled":"Radio--disabled-v4-0-0mbbw2","Radio-wrapper--regular":"Radio-wrapper--regular-v4-0-0khnsh","Radio-wrapper--tiny":"Radio-wrapper--tiny-v4-0-0o4p6m"};
|
|
8074
|
+
styleInject(css_248z$H);
|
|
8064
8075
|
|
|
8065
8076
|
var _excluded$N = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
|
|
8066
8077
|
var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
@@ -8081,10 +8092,10 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
8081
8092
|
React.useImperativeHandle(forwardedRef, function () {
|
|
8082
8093
|
return ref.current;
|
|
8083
8094
|
});
|
|
8084
|
-
var RadioClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8085
|
-
var RadioWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8086
|
-
var RadioOuterWrapper = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8087
|
-
var RadioLabelClass = classnames(_defineProperty$1({}, styles$
|
|
8095
|
+
var RadioClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$G['Radio'], true), styles$G['Radio--disabled'], disabled), className);
|
|
8096
|
+
var RadioWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$G['Radio-wrapper'], true), styles$G["Radio-defaultWrapper"], !error), styles$G["Radio-errorWrapper"], error), styles$G["Radio-wrapper--".concat(size)], size));
|
|
8097
|
+
var RadioOuterWrapper = classnames(_defineProperty$1(_defineProperty$1({}, styles$G['Radio-outerWrapper'], true), styles$G["Radio-outerWrapper--".concat(size)], size));
|
|
8098
|
+
var RadioLabelClass = classnames(_defineProperty$1({}, styles$G['Radio-Label'], true));
|
|
8088
8099
|
var id = "".concat(name, "-").concat(label, "-").concat(uidGenerator());
|
|
8089
8100
|
return /*#__PURE__*/React.createElement("div", {
|
|
8090
8101
|
className: RadioClass,
|
|
@@ -8103,14 +8114,14 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
|
|
|
8103
8114
|
name: name,
|
|
8104
8115
|
value: value,
|
|
8105
8116
|
onChange: onChange,
|
|
8106
|
-
className: styles$
|
|
8117
|
+
className: styles$G['Radio-input'],
|
|
8107
8118
|
id: id,
|
|
8108
8119
|
"data-test": "DesignSystem-Radio-Input"
|
|
8109
8120
|
})), /*#__PURE__*/React.createElement("span", {
|
|
8110
8121
|
"data-test": "DesignSystem-Radio-wrapper",
|
|
8111
8122
|
className: RadioWrapper
|
|
8112
8123
|
})), /*#__PURE__*/React.createElement("div", {
|
|
8113
|
-
className: styles$
|
|
8124
|
+
className: styles$G['Radio-labelWrapper']
|
|
8114
8125
|
}, label && /*#__PURE__*/React.createElement("label", {
|
|
8115
8126
|
className: RadioLabelClass,
|
|
8116
8127
|
htmlFor: id,
|
|
@@ -8141,9 +8152,9 @@ var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8141
8152
|
});
|
|
8142
8153
|
Row.displayName = 'Row';
|
|
8143
8154
|
|
|
8144
|
-
var css_248z$
|
|
8145
|
-
var styles$
|
|
8146
|
-
styleInject(css_248z$
|
|
8155
|
+
var css_248z$G = ".StatusHint-v4-0-0oeyq3 {\n display: flex;\n flex-direction: row;\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.StatusHint-icon-v4-0-0r066n {\n flex-shrink: 0;\n border-radius: 50%;\n height: var(--spacing);\n width: var(--spacing);\n margin-right: var(--spacing);\n margin-top: var(--spacing-0-75);\n}\n\n.StatusHint--alert-v4-0-0ha9no {\n background: var(--alert);\n}\n\n.StatusHint--success-v4-0-0pttdn {\n background: var(--success);\n}\n\n.StatusHint--warning-v4-0-0nnbbx {\n background: var(--warning);\n}\n\n.StatusHint--info-v4-0-0eb532 {\n background: var(--primary);\n}\n\n.StatusHint--default-v4-0-0ull23 {\n background: var(--secondary-light);\n}\n";
|
|
8156
|
+
var styles$F = {"StatusHint":"StatusHint-v4-0-0oeyq3","StatusHint-icon":"StatusHint-icon-v4-0-0r066n","StatusHint--alert":"StatusHint--alert-v4-0-0ha9no","StatusHint--success":"StatusHint--success-v4-0-0pttdn","StatusHint--warning":"StatusHint--warning-v4-0-0nnbbx","StatusHint--info":"StatusHint--info-v4-0-0eb532","StatusHint--default":"StatusHint--default-v4-0-0ull23"};
|
|
8157
|
+
styleInject(css_248z$G);
|
|
8147
8158
|
|
|
8148
8159
|
var StatusHint = function StatusHint(props) {
|
|
8149
8160
|
var appearance = props.appearance,
|
|
@@ -8154,8 +8165,8 @@ var StatusHint = function StatusHint(props) {
|
|
|
8154
8165
|
truncateLabel = props.truncateLabel,
|
|
8155
8166
|
className = props.className;
|
|
8156
8167
|
var baseProps = extractBaseProps(props);
|
|
8157
|
-
var StatusHintClass = classnames(_defineProperty$1({}, styles$
|
|
8158
|
-
var StatusHintIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8168
|
+
var StatusHintClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$F.StatusHint, true), styles$11.StatusHint, true), className);
|
|
8169
|
+
var StatusHintIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$F['StatusHint-icon'], true), styles$F["StatusHint--".concat(appearance)], appearance));
|
|
8159
8170
|
var StatusHintTextClass = classnames(_defineProperty$1({}, 'ellipsis--noWrap', truncateLabel));
|
|
8160
8171
|
return (
|
|
8161
8172
|
/*#__PURE__*/
|
|
@@ -8189,9 +8200,9 @@ StatusHint.defaultProps = {
|
|
|
8189
8200
|
appearance: 'default'
|
|
8190
8201
|
};
|
|
8191
8202
|
|
|
8192
|
-
var css_248z$
|
|
8193
|
-
var styles$
|
|
8194
|
-
styleInject(css_248z$
|
|
8203
|
+
var css_248z$F = ".Pills-v4-0-0ntj87 {\n /* 160px */\n max-width: calc(var(--spacing-2) * 10);\n /* truncate */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: var(--font-size-s);\n line-height: var(--font-height-s);\n text-transform: uppercase;\n padding-right: var(--spacing-0-75);\n padding-left: var(--spacing-0-75);\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n border-radius: 20px;\n display: inline-block;\n box-sizing: border-box;\n font-weight: var(--font-weight-bold);\n cursor: default;\n}\n";
|
|
8204
|
+
var styles$E = {"Pills":"Pills-v4-0-0ntj87"};
|
|
8205
|
+
styleInject(css_248z$F);
|
|
8195
8206
|
|
|
8196
8207
|
var Pills = function Pills(props) {
|
|
8197
8208
|
var appearance = props.appearance,
|
|
@@ -8199,7 +8210,7 @@ var Pills = function Pills(props) {
|
|
|
8199
8210
|
subtle = props.subtle,
|
|
8200
8211
|
className = props.className;
|
|
8201
8212
|
var baseProps = extractBaseProps(props);
|
|
8202
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8213
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$E.Pills, true), badgeStyles["Badge--".concat(appearance)], appearance && !subtle), badgeStyles["Badge--subtle-".concat(appearance)], subtle), className);
|
|
8203
8214
|
return /*#__PURE__*/React.createElement("span", _extends$2({
|
|
8204
8215
|
"data-test": "DesignSystem-Pills"
|
|
8205
8216
|
}, baseProps, {
|
|
@@ -8211,17 +8222,17 @@ Pills.defaultProps = {
|
|
|
8211
8222
|
appearance: 'secondary'
|
|
8212
8223
|
};
|
|
8213
8224
|
|
|
8214
|
-
var css_248z$
|
|
8215
|
-
var styles$
|
|
8216
|
-
styleInject(css_248z$
|
|
8225
|
+
var css_248z$E = "@keyframes rotate-v4-0-06fmhp {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n@keyframes spin-v4-0-02ynpa {\n 0% {\n stroke-dasharray: 1, 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -35px;\n }\n 100% {\n stroke-dasharray: 89, 200;\n stroke-dashoffset: -124px;\n }\n}\n\n.Spinner-v4-0-0evfhz {\n animation: rotate-v4-0-06fmhp 2s linear infinite;\n}\n\n.Spinner--xsmall-v4-0-0sd7ym {\n height: var(--spacing-l);\n width: var(--spacing-l);\n}\n\n.Spinner--small-v4-0-04h745 {\n height: var(--spacing-2);\n width: var(--spacing-2);\n}\n\n.Spinner--medium-v4-0-067prc {\n height: var(--spacing-3);\n width: var(--spacing-3);\n}\n\n.Spinner--large-v4-0-04d58m {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.Circle-v4-0-0ss2qh {\n stroke-linecap: round;\n stroke-dasharray: 1 200;\n stroke-dashoffset: 0;\n animation: spin-v4-0-02ynpa 1.5s ease-in-out infinite;\n}\n\n.Circle--primary-v4-0-053vz2 {\n stroke: var(--primary);\n}\n\n.Circle--secondary-v4-0-09aah0 {\n stroke: var(--secondary-dark);\n}\n\n.Circle--white-v4-0-0b6m2x {\n stroke: var(--white);\n}\n";
|
|
8226
|
+
var styles$D = {"Spinner":"Spinner-v4-0-0evfhz","rotate":"rotate-v4-0-06fmhp","Spinner--xsmall":"Spinner--xsmall-v4-0-0sd7ym","Spinner--small":"Spinner--small-v4-0-04h745","Spinner--medium":"Spinner--medium-v4-0-067prc","Spinner--large":"Spinner--large-v4-0-04d58m","Circle":"Circle-v4-0-0ss2qh","spin":"spin-v4-0-02ynpa","Circle--primary":"Circle--primary-v4-0-053vz2","Circle--secondary":"Circle--secondary-v4-0-09aah0","Circle--white":"Circle--white-v4-0-0b6m2x"};
|
|
8227
|
+
styleInject(css_248z$E);
|
|
8217
8228
|
|
|
8218
8229
|
var Spinner = function Spinner(props) {
|
|
8219
8230
|
var appearance = props.appearance,
|
|
8220
8231
|
size = props.size,
|
|
8221
8232
|
className = props.className;
|
|
8222
8233
|
var baseProps = extractBaseProps(props);
|
|
8223
|
-
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8224
|
-
var circleClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8234
|
+
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$D.Spinner, true), styles$D["Spinner--".concat(size)], size), className);
|
|
8235
|
+
var circleClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$D.Circle, true), styles$D["Circle--".concat(appearance)], appearance));
|
|
8225
8236
|
var svgProps = {
|
|
8226
8237
|
viewBox: '0 0 50 50'
|
|
8227
8238
|
};
|
|
@@ -8327,9 +8338,9 @@ RangeSlider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.default
|
|
|
8327
8338
|
defaultValue: [0, 10]
|
|
8328
8339
|
});
|
|
8329
8340
|
|
|
8330
|
-
var css_248z$
|
|
8331
|
-
var styles$
|
|
8332
|
-
styleInject(css_248z$
|
|
8341
|
+
var css_248z$D = "/* Subheading */\n.Subheading-v4-0-0xg8sd {\n margin: 0;\n font-weight: var(--font-weight-bolder);\n font-size: var(--spacing-l);\n line-height: var(--font-height-m);\n letter-spacing: var(--letter-spacing);\n text-transform: uppercase;\n}\n\n.Subheading--default-v4-0-0z7ib0 {\n color: var(--text);\n}\n\n.Subheading--subtle-v4-0-066t9j {\n color: var(--text-subtle);\n}\n\n.Subheading--disabled-v4-0-0jtsof {\n color: var(--text-disabled);\n}\n\n.Subheading--white-v4-0-0kvjpz {\n color: var(--text-white);\n}\n";
|
|
8342
|
+
var styles$C = {"Subheading":"Subheading-v4-0-0xg8sd","Subheading--default":"Subheading--default-v4-0-0z7ib0","Subheading--subtle":"Subheading--subtle-v4-0-066t9j","Subheading--disabled":"Subheading--disabled-v4-0-0jtsof","Subheading--white":"Subheading--white-v4-0-0kvjpz"};
|
|
8343
|
+
styleInject(css_248z$D);
|
|
8333
8344
|
|
|
8334
8345
|
var _excluded$J = ["appearance", "children", "className", "color"];
|
|
8335
8346
|
var Subheading = function Subheading(props) {
|
|
@@ -8338,7 +8349,7 @@ var Subheading = function Subheading(props) {
|
|
|
8338
8349
|
className = props.className,
|
|
8339
8350
|
color = props.color,
|
|
8340
8351
|
rest = _objectWithoutProperties(props, _excluded$J);
|
|
8341
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8352
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$C.Subheading, true), styles$C["Subheading--".concat(appearance)], !color && appearance), "color-".concat(color), color), className);
|
|
8342
8353
|
return /*#__PURE__*/React.createElement(Link$1, _extends$2({
|
|
8343
8354
|
"data-test": "DesignSystem-Subheading"
|
|
8344
8355
|
}, rest, {
|
|
@@ -8351,9 +8362,9 @@ Subheading.defaultProps = {
|
|
|
8351
8362
|
appearance: 'default'
|
|
8352
8363
|
};
|
|
8353
8364
|
|
|
8354
|
-
var css_248z$
|
|
8355
|
-
var styles$
|
|
8356
|
-
styleInject(css_248z$
|
|
8365
|
+
var css_248z$C = ".Switch-v4-0-0ozhyb {\n display: inline-flex;\n position: relative;\n}\n\n.Switch--tiny-v4-0-043ly8 {\n height: var(--spacing-2);\n width: var(--spacing-3);\n}\n\n.Switch--regular-v4-0-09d573 {\n height: var(--spacing-xl);\n width: var(--spacing-4);\n}\n\n.Switch--large-v4-0-0ets8m {\n height: var(--spacing-xl);\n width: var(--spacing-4);\n}\n\n.Switch-input-v4-0-036pz7 {\n position: absolute;\n cursor: pointer;\n z-index: 10;\n opacity: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n}\n\n.Switch-wrapper-v4-0-0e1k4d {\n display: flex;\n align-items: center;\n line-height: 100%;\n padding: var(--spacing-s);\n top: 0;\n left: 0;\n width: 100%;\n background-color: var(--secondary-light);\n transition: background 120ms ease;\n padding-right: var(--spacing-0-75);\n}\n\n.Switch-input-v4-0-036pz7:focus ~ .Switch-wrapper-v4-0-0e1k4d {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n background-color: var(--secondary-light);\n}\n\n.Switch-input-v4-0-036pz7:focus ~ .Switch-wrapper--checked-v4-0-0g9vjn {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n background-color: var(--primary);\n}\n\n.Switch-input-v4-0-036pz7:hover ~ .Switch-wrapper-v4-0-0e1k4d {\n background-color: var(--secondary);\n}\n\n.Switch-input-v4-0-036pz7:hover ~ .Switch-wrapper--checked-v4-0-0g9vjn {\n background-color: var(--primary-dark);\n}\n\n.Switch-input-v4-0-036pz7:active ~ .Switch-wrapper-v4-0-0e1k4d {\n background-color: var(--secondary-dark);\n}\n\n.Switch-input-v4-0-036pz7:active ~ .Switch-wrapper--checked-v4-0-0g9vjn {\n background-color: var(--primary-darker);\n}\n\n.Switch-wrapper--tiny-v4-0-0qsn0z {\n border-radius: 10px;\n}\n\n.Switch-wrapper--regular-v4-0-0akz7s {\n border-radius: 34px;\n}\n\n.Switch-wrapper--large-v4-0-0lu27d {\n border-radius: 34px;\n}\n\n.Switch-wrapper-v4-0-0e1k4d:before {\n content: '';\n height: 100%;\n width: 50%;\n background-color: var(--shadow-0);\n box-shadow: var(--shadow-m);\n border-radius: 50%;\n box-sizing: border-box;\n transition-duration: 80ms;\n}\n\n.Switch-wrapper--checked-v4-0-0g9vjn {\n background-color: var(--primary);\n transition: background 120ms ease;\n padding-left: var(--spacing-0-75);\n padding-right: 2px !important;\n}\n\n.Switch-wrapper--checked-v4-0-0g9vjn:before {\n transform: translateX(100%);\n transition-duration: 80ms;\n}\n\n.Switch--disabled-v4-0-09iral {\n pointer-events: none;\n}\n\n.Switch-wrapper--disabled-v4-0-0s83az {\n background-color: var(--secondary-lighter);\n}\n\n.Switch-wrapper--checkedDisabled-v4-0-0ni3pg {\n background-color: var(--primary-lighter);\n}\n";
|
|
8366
|
+
var styles$B = {"Switch":"Switch-v4-0-0ozhyb","Switch--tiny":"Switch--tiny-v4-0-043ly8","Switch--regular":"Switch--regular-v4-0-09d573","Switch--large":"Switch--large-v4-0-0ets8m","Switch-input":"Switch-input-v4-0-036pz7","Switch-wrapper":"Switch-wrapper-v4-0-0e1k4d","Switch-wrapper--checked":"Switch-wrapper--checked-v4-0-0g9vjn","Switch-wrapper--tiny":"Switch-wrapper--tiny-v4-0-0qsn0z","Switch-wrapper--regular":"Switch-wrapper--regular-v4-0-0akz7s","Switch-wrapper--large":"Switch-wrapper--large-v4-0-0lu27d","Switch--disabled":"Switch--disabled-v4-0-09iral","Switch-wrapper--disabled":"Switch-wrapper--disabled-v4-0-0s83az","Switch-wrapper--checkedDisabled":"Switch-wrapper--checkedDisabled-v4-0-0ni3pg"};
|
|
8367
|
+
styleInject(css_248z$C);
|
|
8357
8368
|
|
|
8358
8369
|
var _excluded$I = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
|
|
8359
8370
|
/**
|
|
@@ -8380,8 +8391,8 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8380
8391
|
React.useEffect(function () {
|
|
8381
8392
|
if (checkedProp !== undefined) setChecked(checkedProp);
|
|
8382
8393
|
}, [checkedProp]);
|
|
8383
|
-
var SwitchClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8384
|
-
var SwitchWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8394
|
+
var SwitchClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$B.Switch, true), styles$B['Switch--disabled'], disabled), styles$B["Switch--".concat(size)], size), className);
|
|
8395
|
+
var SwitchWrapper = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$B['Switch-wrapper'], true), styles$B['Switch-wrapper--disabled'], disabled), styles$B["Switch-wrapper--".concat(size)], size), styles$B['Switch-wrapper--checked'], checked), styles$B['Switch-wrapper--checkedDisabled'], checked && disabled));
|
|
8385
8396
|
var onChangeHandler = function onChangeHandler(event) {
|
|
8386
8397
|
if (event.type == 'change' || isSpaceKey(event)) {
|
|
8387
8398
|
if (checkedProp === undefined) setChecked(!checked);
|
|
@@ -8399,7 +8410,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8399
8410
|
ref: ref,
|
|
8400
8411
|
name: name,
|
|
8401
8412
|
value: value,
|
|
8402
|
-
className: styles$
|
|
8413
|
+
className: styles$B['Switch-input'],
|
|
8403
8414
|
onKeyUp: onChangeHandler
|
|
8404
8415
|
})), /*#__PURE__*/React.createElement("span", {
|
|
8405
8416
|
className: SwitchWrapper
|
|
@@ -8407,9 +8418,9 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8407
8418
|
});
|
|
8408
8419
|
Switch.displayName = 'Switch';
|
|
8409
8420
|
|
|
8410
|
-
var css_248z$
|
|
8411
|
-
var styles$
|
|
8412
|
-
styleInject(css_248z$
|
|
8421
|
+
var css_248z$B = "/* Textarea */\n\n.Textarea-v4-0-0ubg9y {\n min-height: var(--spacing-3);\n width: 100%;\n display: block;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n line-height: var(--font-height);\n font-size: var(--font-size);\n box-sizing: border-box;\n border-radius: var(--spacing-m);\n border: var(--border);\n color: var(--inverse);\n padding: var(--spacing) var(--spacing-l);\n resize: none;\n cursor: auto; /* this ensures text cursor over text, and pointer cursor over scroll*/\n}\n\n.Textarea-v4-0-0ubg9y::-moz-placeholder {\n color: var(--inverse-lighter);\n}\n\n.Textarea-v4-0-0ubg9y::placeholder {\n color: var(--inverse-lighter);\n}\n\n.Textarea-v4-0-0ubg9y::-ms-clear {\n display: none;\n}\n\n.Textarea-v4-0-0ubg9y:focus-within {\n outline: none;\n border: var(--spacing-xs) solid var(--primary);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Textarea-v4-0-0ubg9y:disabled {\n color: var(--inverse-lightest);\n background: var(--secondary-lightest);\n border-color: var(--secondary-light);\n}\n\n.Textarea--readOnly-v4-0-0aruny {\n pointer-events: none;\n background: var(--secondary-lightest);\n border-color: var(--secondary);\n}\n\n.Textarea--error-v4-0-0ch8e7 {\n border: var(--spacing-xs) solid var(--alert);\n}\n\n.Textarea--error-v4-0-0ch8e7:focus-within {\n border: var(--spacing-xs) solid var(--alert);\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.Textarea--resize-v4-0-0xdzsw {\n resize: both;\n}\n";
|
|
8422
|
+
var styles$A = {"Textarea":"Textarea-v4-0-0ubg9y","Textarea--readOnly":"Textarea--readOnly-v4-0-0aruny","Textarea--error":"Textarea--error-v4-0-0ch8e7","Textarea--resize":"Textarea--resize-v4-0-0xdzsw"};
|
|
8423
|
+
styleInject(css_248z$B);
|
|
8413
8424
|
|
|
8414
8425
|
var _excluded$H = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className", "readOnly"];
|
|
8415
8426
|
var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -8431,7 +8442,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8431
8442
|
className = props.className,
|
|
8432
8443
|
readOnly = props.readOnly,
|
|
8433
8444
|
rest = _objectWithoutProperties(props, _excluded$H);
|
|
8434
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8445
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$A.Textarea, true), styles$A['Textarea--resize'], resize), styles$A['Textarea--error'], error), styles$A['Textarea--readOnly'], readOnly), className);
|
|
8435
8446
|
return /*#__PURE__*/React.createElement("textarea", _extends$2({
|
|
8436
8447
|
"data-test": "DesignSystem-Textarea"
|
|
8437
8448
|
}, rest, {
|
|
@@ -8452,15 +8463,15 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
8452
8463
|
});
|
|
8453
8464
|
Textarea.displayName = 'Textarea';
|
|
8454
8465
|
|
|
8455
|
-
var css_248z$
|
|
8456
|
-
var styles$
|
|
8457
|
-
styleInject(css_248z$
|
|
8466
|
+
var css_248z$A = "/* toast */\n\n.Toast-v4-0-0d5ikg {\n display: flex;\n flex-direction: row;\n box-sizing: border-box;\n word-break: break-word;\n width: 360px;\n border-radius: var(--spacing-m);\n padding-left: var(--spacing-2);\n padding-right: var(--spacing-l);\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n.Toast--withMessage-v4-0-06k7z5 {\n padding-bottom: var(--spacing-2);\n}\n\n.Toast--info-v4-0-0x41us {\n background-color: var(--primary);\n}\n\n.Toast--alert-v4-0-0w6gdt {\n background-color: var(--alert);\n}\n\n.Toast--success-v4-0-0tgguh {\n background-color: var(--success);\n}\n\n.Toast--warning-v4-0-07whi4 {\n background-color: var(--warning);\n}\n\n.Toast--warning-v4-0-07whi4 {\n color: var(--text);\n}\n\n.Toast-icon-v4-0-0sqy0t {\n line-height: var(--font-height-m);\n}\n\n.Toast-icon--left-v4-0-0gg2k2 {\n margin-right: var(--spacing-2);\n}\n\n.Toast-icon--right-v4-0-0e2gv7 {\n cursor: pointer;\n margin-left: var(--spacing-l);\n border-radius: 50%;\n display: flex;\n align-items: center;\n padding-right: var(--spacing-m);\n padding-left: var(--spacing-m);\n height: var(--spacing-xl);\n box-sizing: initial;\n}\n\n.Toast-icon--info-v4-0-0ghsuj,\n.Toast-icon--success-v4-0-03q7s6,\n.Toast-icon--alert-v4-0-0ebrhl,\n.Toast-icon--default-v4-0-0ibxee {\n color: var(--text-white);\n}\n\n.Toast-icon--warning-v4-0-0pa74j {\n color: var(--warning-darker);\n}\n\n.Toast-close-icon--warning-v4-0-0kiqag:focus,\n.Toast-close-icon--warning-v4-0-0kiqag:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(183, 135, 7, 0.16);\n}\n\n.Toast-close-icon--warning-v4-0-0kiqag:hover,\n.Toast-close-icon--warning-v4-0-0kiqag:active {\n background: var(--warning-dark);\n}\n\n.Toast-close-icon--success-v4-0-01191x:focus,\n.Toast-close-icon--success-v4-0-01191x:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);\n}\n\n.Toast-close-icon--success-v4-0-01191x:hover,\n.Toast-close-icon--success-v4-0-01191x:active {\n background: var(--success-dark);\n}\n\n.Toast-close-icon--info-v4-0-0oqcx0:focus,\n.Toast-close-icon--info-v4-0-0oqcx0:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);\n}\n\n.Toast-close-icon--info-v4-0-0oqcx0:hover,\n.Toast-close-icon--info-v4-0-0oqcx0:active {\n background: var(--primary-dark);\n}\n\n.Toast-close-icon--alert-v4-0-0erjte:focus,\n.Toast-close-icon--alert-v4-0-0erjte:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(156, 40, 40, 0.16);\n}\n\n.Toast-close-icon--alert-v4-0-0erjte:hover,\n.Toast-close-icon--alert-v4-0-0erjte:active {\n background: var(--alert-dark);\n}\n\n.Toast-body-v4-0-0sqtsk {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Toast-title-v4-0-0w10c2 {\n display: flex;\n}\n\n.Toast-heading-v4-0-0c7mvp {\n flex-grow: 1;\n}\n\n.Toast-text-v4-0-0sr53d {\n padding-top: var(--spacing);\n}\n\n.Toast-text--warning-v4-0-0676hv,\n.Toast-heading--warning-v4-0-0apj0q {\n color: var(--warning-darker) !important;\n}\n\n.Toast-actions-v4-0-0k5kvz {\n display: flex;\n padding-top: var(--spacing-l);\n}\n\n.Toast-actionButton-v4-0-0rqxwl {\n color: var(--text-white);\n border-radius: var(--spacing-m);\n margin-right: var(--spacing);\n}\n\n.Toast-actionButton-v4-0-0rqxwl:last-child {\n margin-right: 0;\n}\n\n.Toast-actionButton--default-v4-0-0u9yhw {\n background: var(--inverse-light);\n}\n\n.Toast-actionButton--default-v4-0-0u9yhw:hover,\n.Toast-actionButton--default-v4-0-0u9yhw:active {\n background: var(--inverse);\n}\n\n.Toast-actionButton--default-v4-0-0u9yhw:focus {\n box-shadow: var(--shadow-spread) rgba(112, 112, 112, 0.16);\n}\n\n.Toast-actionButton--info-v4-0-0a1ktt {\n background: var(--primary-dark);\n}\n\n.Toast-actionButton--info-v4-0-0a1ktt:hover,\n.Toast-actionButton--info-v4-0-0a1ktt:active {\n background: var(--primary-darker);\n}\n\n.Toast-actionButton--info-v4-0-0a1ktt:focus {\n box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);\n}\n\n.Toast-actionButton--success-v4-0-0q5fxu {\n background: var(--success-dark);\n}\n\n.Toast-actionButton--success-v4-0-0q5fxu:hover,\n.Toast-actionButton--success-v4-0-0q5fxu:active {\n background: var(--success-darker);\n}\n\n.Toast-actionButton--success-v4-0-0q5fxu:focus {\n box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);\n}\n\n.Toast-actionButton--alert-v4-0-0rcx3y {\n background: var(--alert-dark);\n}\n\n.Toast-actionButton--alert-v4-0-0rcx3y:hover,\n.Toast-actionButton--alert-v4-0-0rcx3y:active {\n background: var(--alert-darker);\n}\n\n.Toast-actionButton--alert-v4-0-0rcx3y:focus {\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.Toast-actionButton--warning-v4-0-0nborr {\n background: var(--warning-dark);\n}\n\n.Toast-actionButton--warning-v4-0-0nborr:hover,\n.Toast-actionButton--warning-v4-0-0nborr:active {\n background: var(--warning-darker);\n}\n\n.Toast-actionButton--warning-v4-0-0nborr:focus {\n box-shadow: var(--shadow-spread) var(--warning-shadow);\n}\n";
|
|
8467
|
+
var styles$z = {"Toast":"Toast-v4-0-0d5ikg","Toast--withMessage":"Toast--withMessage-v4-0-06k7z5","Toast--info":"Toast--info-v4-0-0x41us","Toast--alert":"Toast--alert-v4-0-0w6gdt","Toast--success":"Toast--success-v4-0-0tgguh","Toast--warning":"Toast--warning-v4-0-07whi4","Toast-icon":"Toast-icon-v4-0-0sqy0t","Toast-icon--left":"Toast-icon--left-v4-0-0gg2k2","Toast-icon--right":"Toast-icon--right-v4-0-0e2gv7","Toast-icon--info":"Toast-icon--info-v4-0-0ghsuj","Toast-icon--success":"Toast-icon--success-v4-0-03q7s6","Toast-icon--alert":"Toast-icon--alert-v4-0-0ebrhl","Toast-icon--default":"Toast-icon--default-v4-0-0ibxee","Toast-icon--warning":"Toast-icon--warning-v4-0-0pa74j","Toast-close-icon--warning":"Toast-close-icon--warning-v4-0-0kiqag","Toast-close-icon--success":"Toast-close-icon--success-v4-0-01191x","Toast-close-icon--info":"Toast-close-icon--info-v4-0-0oqcx0","Toast-close-icon--alert":"Toast-close-icon--alert-v4-0-0erjte","Toast-body":"Toast-body-v4-0-0sqtsk","Toast-title":"Toast-title-v4-0-0w10c2","Toast-heading":"Toast-heading-v4-0-0c7mvp","Toast-text":"Toast-text-v4-0-0sr53d","Toast-text--warning":"Toast-text--warning-v4-0-0676hv","Toast-heading--warning":"Toast-heading--warning-v4-0-0apj0q","Toast-actions":"Toast-actions-v4-0-0k5kvz","Toast-actionButton":"Toast-actionButton-v4-0-0rqxwl","Toast-actionButton--default":"Toast-actionButton--default-v4-0-0u9yhw","Toast-actionButton--info":"Toast-actionButton--info-v4-0-0a1ktt","Toast-actionButton--success":"Toast-actionButton--success-v4-0-0q5fxu","Toast-actionButton--alert":"Toast-actionButton--alert-v4-0-0rcx3y","Toast-actionButton--warning":"Toast-actionButton--warning-v4-0-0nborr"};
|
|
8468
|
+
styleInject(css_248z$A);
|
|
8458
8469
|
|
|
8459
8470
|
var ActionButton = function ActionButton(props) {
|
|
8460
8471
|
var appearance = props.appearance,
|
|
8461
8472
|
label = props.label,
|
|
8462
8473
|
onClick = props.onClick;
|
|
8463
|
-
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button'], true), buttonStyles['Button--tiny'], true), styles$
|
|
8474
|
+
var buttonClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, buttonStyles['Button'], true), buttonStyles['Button--tiny'], true), styles$z['Toast-actionButton'], true), styles$z["Toast-actionButton--".concat(appearance)], appearance));
|
|
8464
8475
|
var onClickHandler = function onClickHandler(e) {
|
|
8465
8476
|
e.preventDefault();
|
|
8466
8477
|
if (onClick) onClick(e);
|
|
@@ -8486,7 +8497,7 @@ var Toast = function Toast(props) {
|
|
|
8486
8497
|
var appearance = props.appearance;
|
|
8487
8498
|
appearance = appearance === 'default' ? 'info' : appearance;
|
|
8488
8499
|
var baseProps = extractBaseProps(props);
|
|
8489
|
-
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8500
|
+
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$z.Toast, true), styles$z['Toast--withMessage'], message), styles$z["Toast--".concat(appearance)], appearance), className);
|
|
8490
8501
|
var IconMapping = {
|
|
8491
8502
|
info: 'info',
|
|
8492
8503
|
success: 'check_circle',
|
|
@@ -8494,12 +8505,12 @@ var Toast = function Toast(props) {
|
|
|
8494
8505
|
warning: 'warning'
|
|
8495
8506
|
};
|
|
8496
8507
|
var icon = IconMapping[appearance];
|
|
8497
|
-
var titleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8508
|
+
var titleClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$z['Toast-title'], true), styles$z['Toast-title--withMessage'], message));
|
|
8498
8509
|
var iconClass = function iconClass(align) {
|
|
8499
|
-
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8510
|
+
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$z['Toast-icon'], true), styles$z["Toast-icon--".concat(align)], align), styles$z["Toast-icon--".concat(appearance)], appearance), styles$z["Toast-close-icon--".concat(appearance)], appearance && align === 'right'));
|
|
8500
8511
|
};
|
|
8501
|
-
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8502
|
-
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
8512
|
+
var textClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$z['Toast-text'], true), styles$z["Toast-text--".concat(appearance)], appearance));
|
|
8513
|
+
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$z['Toast-heading'], true), styles$z["Toast-heading--".concat(appearance)], appearance));
|
|
8503
8514
|
var onCloseHandler = function onCloseHandler() {
|
|
8504
8515
|
if (onClose) onClose();
|
|
8505
8516
|
};
|
|
@@ -8509,7 +8520,7 @@ var Toast = function Toast(props) {
|
|
|
8509
8520
|
name: icon,
|
|
8510
8521
|
className: iconClass('left')
|
|
8511
8522
|
}), /*#__PURE__*/React.createElement("div", {
|
|
8512
|
-
className: styles$
|
|
8523
|
+
className: styles$z['Toast-body']
|
|
8513
8524
|
}, /*#__PURE__*/React.createElement("div", {
|
|
8514
8525
|
className: titleClass
|
|
8515
8526
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
@@ -8525,7 +8536,7 @@ var Toast = function Toast(props) {
|
|
|
8525
8536
|
appearance: appearance !== 'warning' ? 'white' : 'default',
|
|
8526
8537
|
className: textClass
|
|
8527
8538
|
}, message), !!(actions !== null && actions !== void 0 && actions.length) && /*#__PURE__*/React.createElement("div", {
|
|
8528
|
-
className: styles$
|
|
8539
|
+
className: styles$z['Toast-actions']
|
|
8529
8540
|
}, actions.slice(0, 2).map(function (action, index) {
|
|
8530
8541
|
return /*#__PURE__*/React.createElement(ActionButton, {
|
|
8531
8542
|
key: index,
|
|
@@ -13896,9 +13907,9 @@ _defineProperty$1(PopperWrapper, "defaultProps", {
|
|
|
13896
13907
|
disabled: false
|
|
13897
13908
|
});
|
|
13898
13909
|
|
|
13899
|
-
var css_248z$
|
|
13900
|
-
var styles$
|
|
13901
|
-
styleInject(css_248z$
|
|
13910
|
+
var css_248z$z = ".Popover-v4-0-0tu4k9 {\n border-radius: var(--spacing-m);\n position: absolute;\n z-index: 500;\n background: var(--white);\n box-shadow: var(--shadow-l);\n}\n\n.Popover--dark-v4-0-0rch3c {\n background: var(--inverse);\n color: var(--white);\n}\n\n.Popover-v4-0-0tu4k9[data-hide='true'] {\n visibility: hidden;\n pointer-events: none;\n}\n\n@keyframes popper-fade-in-v4-0-0czvrv {\n 0% {\n opacity: 0;\n }\n 80% {\n opacity: var(--opacity-6);\n }\n 100% {\n opacity: 1;\n }\n}\n";
|
|
13911
|
+
var styles$y = {"Popover":"Popover-v4-0-0tu4k9","Popover--dark":"Popover--dark-v4-0-0rch3c","popper-fade-in":"popper-fade-in-v4-0-0czvrv"};
|
|
13912
|
+
styleInject(css_248z$z);
|
|
13902
13913
|
|
|
13903
13914
|
var _excluded$G = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement", "name"];
|
|
13904
13915
|
var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
|
|
@@ -13935,7 +13946,7 @@ var Popover = function Popover(props) {
|
|
|
13935
13946
|
}
|
|
13936
13947
|
}
|
|
13937
13948
|
}, [boundaryElement]);
|
|
13938
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
13949
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$y.Popover, true), styles$y['Popover--dark'], dark), className);
|
|
13939
13950
|
var PopoverWrapper = /*#__PURE__*/React.createElement("div", {
|
|
13940
13951
|
"data-test": "DesignSystem-Popover",
|
|
13941
13952
|
className: classes,
|
|
@@ -13961,9 +13972,9 @@ Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps,
|
|
|
13961
13972
|
customStyle: {}
|
|
13962
13973
|
});
|
|
13963
13974
|
|
|
13964
|
-
var css_248z$
|
|
13965
|
-
var styles$
|
|
13966
|
-
styleInject(css_248z$
|
|
13975
|
+
var css_248z$y = ".ChipInput-v4-0-04u6h8 {\n display: flex;\n border-radius: var(--spacing-m);\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary);\n padding-left: 10px;\n padding-right: 10px;\n background: var(--white);\n cursor: text;\n flex: 100%;\n}\n\n.ChipInput-v4-0-04u6h8:focus,\n.ChipInput-v4-0-04u6h8:focus-visible {\n outline: var(--spacing-xs) var(--primary);\n}\n\n.ChipInput-v4-0-04u6h8:hover {\n background: var(--secondary-lighter);\n border-color: var(--secondary-dark);\n}\n\n.ChipInput-v4-0-04u6h8:focus-within {\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);\n background: var(--white);\n}\n\n.ChipInput--disabled-v4-0-0hxq7q {\n background: var(--secondary-lightest);\n border-color: var(--secondary-light);\n pointer-events: none;\n}\n\n.ChipInput--withChips-v4-0-05m1ss {\n padding-right: var(--spacing);\n}\n\n.ChipInput--error-v4-0-02yh9m,\n.ChipInput--error-v4-0-02yh9m:focus-within {\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--alert);\n}\n\n.ChipInput-wrapper-v4-0-0nshb3 {\n display: flex;\n flex: 100%;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.ChipInput-border-v4-0-0s7cvu:focus-within {\n border-radius: var(--spacing-m);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.ChipInput-border--error-v4-0-0fqfb5:focus-within {\n box-shadow: var(--shadow-spread) var(--alert-shadow);\n}\n\n.ChipInput-input-v4-0-05uvmt {\n border: none;\n outline: none;\n display: flex;\n width: 100%;\n min-width: 15%;\n flex: 0px;\n box-sizing: border-box;\n height: var(--spacing-xl);\n margin-top: var(--spacing-m);\n margin-bottom: var(--spacing-m);\n font-family: var(--font-family);\n font-size: var(--font-size);\n}\n\n.ChipInput-v4-0-04u6h8:hover .ChipInput-input-v4-0-05uvmt {\n background: var(--secondary-lighter);\n}\n\n.ChipInput-v4-0-04u6h8:focus-within .ChipInput-input-v4-0-05uvmt {\n background: var(--white);\n}\n\n.ChipInput-icon-v4-0-0g87yx {\n height: var(--spacing-2);\n padding: var(--spacing-s);\n margin-left: var(--spacing);\n margin-top: var(--spacing-0-75);\n cursor: pointer;\n border-radius: 10px;\n}\n\n.ChipInput-icon-v4-0-0g87yx:hover {\n background-color: var(--secondary);\n}\n\n.ChipInput-icon-v4-0-0g87yx:active {\n background-color: var(--secondary-dark);\n}\n\n.ChipInput-icon-v4-0-0g87yx:focus,\n.ChipInput-icon-v4-0-0g87yx:focus-visible {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n";
|
|
13976
|
+
var styles$x = {"ChipInput":"ChipInput-v4-0-04u6h8","ChipInput--disabled":"ChipInput--disabled-v4-0-0hxq7q","ChipInput--withChips":"ChipInput--withChips-v4-0-05m1ss","ChipInput--error":"ChipInput--error-v4-0-02yh9m","ChipInput-wrapper":"ChipInput-wrapper-v4-0-0nshb3","ChipInput-border":"ChipInput-border-v4-0-0s7cvu","ChipInput-border--error":"ChipInput-border--error-v4-0-0fqfb5","ChipInput-input":"ChipInput-input-v4-0-05uvmt","ChipInput-icon":"ChipInput-icon-v4-0-0g87yx"};
|
|
13977
|
+
styleInject(css_248z$y);
|
|
13967
13978
|
|
|
13968
13979
|
var _excluded$F = ["type", "onClick"];
|
|
13969
13980
|
var keyCodes$1 = {
|
|
@@ -14006,8 +14017,8 @@ var ChipInput = function ChipInput(props) {
|
|
|
14006
14017
|
customRef.current.charCount = null;
|
|
14007
14018
|
}
|
|
14008
14019
|
}, [inputValue]);
|
|
14009
|
-
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14010
|
-
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14020
|
+
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$x['ChipInput-border'], true), styles$x['ChipInput-border--error'], error));
|
|
14021
|
+
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$x.ChipInput, true), styles$x['ChipInput--disabled'], disabled), styles$x['ChipInput--withChips'], chips && chips.length > 0), styles$x['ChipInput--error'], error), className);
|
|
14011
14022
|
var onUpdateChips = function onUpdateChips(updatedChips) {
|
|
14012
14023
|
if (onChange) onChange(updatedChips);
|
|
14013
14024
|
};
|
|
@@ -14104,12 +14115,12 @@ var ChipInput = function ChipInput(props) {
|
|
|
14104
14115
|
onClick: onClickHandler,
|
|
14105
14116
|
tabIndex: disabled ? -1 : 0
|
|
14106
14117
|
}), /*#__PURE__*/React.createElement("div", {
|
|
14107
|
-
className: styles$
|
|
14118
|
+
className: styles$x['ChipInput-wrapper'],
|
|
14108
14119
|
ref: customRef
|
|
14109
14120
|
}, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", {
|
|
14110
14121
|
"data-test": "DesignSystem-ChipInput--Input",
|
|
14111
14122
|
ref: inputRef,
|
|
14112
|
-
className: styles$
|
|
14123
|
+
className: styles$x['ChipInput-input'],
|
|
14113
14124
|
autoFocus: autoFocus,
|
|
14114
14125
|
placeholder: chips && chips.length > 0 ? '' : placeholder,
|
|
14115
14126
|
disabled: disabled,
|
|
@@ -14122,7 +14133,7 @@ var ChipInput = function ChipInput(props) {
|
|
|
14122
14133
|
"data-test": "DesignSystem-ChipInput--Icon",
|
|
14123
14134
|
name: "close",
|
|
14124
14135
|
appearance: disabled ? 'disabled' : 'subtle',
|
|
14125
|
-
className: styles$
|
|
14136
|
+
className: styles$x['ChipInput-icon'],
|
|
14126
14137
|
onClick: onDeleteAllHandler,
|
|
14127
14138
|
tabIndex: disabled ? -1 : 0
|
|
14128
14139
|
})));
|
|
@@ -14199,9 +14210,9 @@ var getNavItemColor = function getNavItemColor(isActive, disabled) {
|
|
|
14199
14210
|
return disabled ? 'inverse-lightest' : isActive ? 'primary-dark' : 'inverse';
|
|
14200
14211
|
};
|
|
14201
14212
|
|
|
14202
|
-
var css_248z$
|
|
14203
|
-
var styles$
|
|
14204
|
-
styleInject(css_248z$
|
|
14213
|
+
var css_248z$x = ".VerticalNav-v4-0-0m39m7 {\n display: inline-flex;\n flex-direction: column;\n}\n\n.VerticalNav--expanded-v4-0-0lyx67 {\n width: 240px;\n}\n\n.VerticalNav-section-v4-0-0w8csv {\n text-transform: uppercase;\n padding-left: var(--spacing-2);\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-0-75);\n margin-top: var(--spacing);\n}\n\n.VerticalNav-section--border-v4-0-09lgf4 {\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.MenuItem-v4-0-0h62ig {\n text-decoration: none;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n width: 232px;\n}\n\n.MenuItem--horizontal-v4-0-0x8tin {\n height: var(--spacing-3);\n padding-right: var(--spacing-l);\n padding-left: var(--spacing-l);\n border-radius: var(--spacing-2);\n margin: 0 var(--spacing-xs);\n}\n\n.MenuItem--vertical-v4-0-0t6jch {\n margin-top: var(--spacing-m);\n margin-bottom: var(--spacing-m);\n}\n\n.MenuItem--collapsed-v4-0-01n15c {\n height: 28px;\n width: 28px;\n margin-left: 10px;\n margin-right: 10px;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.MenuItem--expanded-v4-0-0sfpyn {\n padding-left: var(--spacing-2);\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n margin-right: var(--spacing);\n justify-content: space-between;\n border-radius: 0px var(--spacing-2) var(--spacing-2) 0px;\n}\n\n.MenuItem--disabled-v4-0-0842w4 {\n pointer-events: none;\n}\n\n.MenuItem-v4-0-0h62ig:hover {\n background: var(--secondary);\n text-decoration: none;\n}\n\n.MenuItem-v4-0-0h62ig:active {\n background: var(--secondary-dark);\n}\n\n.MenuItem-v4-0-0h62ig:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.MenuItem--disabled-v4-0-0842w4:focus {\n box-shadow: none;\n}\n\n.MenuItem--active-v4-0-0omyr1 {\n background: var(--primary-lightest);\n}\n\n.MenuItem--active-v4-0-0omyr1:hover {\n background: var(--primary-lighter);\n}\n\n.MenuItem--active-v4-0-0omyr1:active {\n background: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.MenuItem--active-v4-0-0omyr1:active .MenuItem-Text-v4-0-0lrhap {\n color: var(--primary-darker);\n}\n\n.MenuItem--active-v4-0-0omyr1:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n outline: none;\n}\n\n.MenuItem--rounded-v4-0-0bc7zo {\n border-radius: var(--spacing-2);\n}\n\n.MenuItem--subMenu-v4-0-05vew1 {\n padding-left: 40px;\n}\n\n.MenuItem-v4-0-0h62ig .Text-v4-0-0i1gan {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.MenuItem--overflow-v4-0-0ce3rm {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.MenuItem-count-v4-0-0zet2x {\n margin-right: var(--spacing-m);\n}\n\n.MenuItem-count--disabled-v4-0-09omdf {\n opacity: var(--opacity-10);\n color: var(--text);\n}\n";
|
|
14214
|
+
var styles$w = {"VerticalNav":"VerticalNav-v4-0-0m39m7","VerticalNav--expanded":"VerticalNav--expanded-v4-0-0lyx67","VerticalNav-section":"VerticalNav-section-v4-0-0w8csv","VerticalNav-section--border":"VerticalNav-section--border-v4-0-09lgf4","MenuItem":"MenuItem-v4-0-0h62ig","MenuItem--horizontal":"MenuItem--horizontal-v4-0-0x8tin","MenuItem--vertical":"MenuItem--vertical-v4-0-0t6jch","MenuItem--collapsed":"MenuItem--collapsed-v4-0-01n15c","MenuItem--expanded":"MenuItem--expanded-v4-0-0sfpyn","MenuItem--disabled":"MenuItem--disabled-v4-0-0842w4","MenuItem--active":"MenuItem--active-v4-0-0omyr1","MenuItem-Text":"MenuItem-Text-v4-0-0lrhap","MenuItem--rounded":"MenuItem--rounded-v4-0-0bc7zo","MenuItem--subMenu":"MenuItem--subMenu-v4-0-05vew1","Text":"Text-v4-0-0i1gan","MenuItem--overflow":"MenuItem--overflow-v4-0-0ce3rm","MenuItem-count":"MenuItem-count-v4-0-0zet2x","MenuItem-count--disabled":"MenuItem-count--disabled-v4-0-09omdf"};
|
|
14215
|
+
styleInject(css_248z$x);
|
|
14205
14216
|
|
|
14206
14217
|
var _MenuIcon = function MenuIcon(props) {
|
|
14207
14218
|
var isChildrenVisible = props.isChildrenVisible;
|
|
@@ -14214,7 +14225,7 @@ var _MenuPills = function MenuPills(props) {
|
|
|
14214
14225
|
var disabled = props.disabled,
|
|
14215
14226
|
isActive = props.isActive,
|
|
14216
14227
|
count = props.count;
|
|
14217
|
-
var PillsClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14228
|
+
var PillsClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$w['MenuItem-count'], true), styles$w['MenuItem-count--disabled'], disabled));
|
|
14218
14229
|
return /*#__PURE__*/React.createElement(Pills, {
|
|
14219
14230
|
subtle: disabled,
|
|
14220
14231
|
className: PillsClass,
|
|
@@ -14246,7 +14257,7 @@ var MenuItem$1 = function MenuItem(props) {
|
|
|
14246
14257
|
var _MenuLabel = function MenuLabel(props) {
|
|
14247
14258
|
var label = props.label,
|
|
14248
14259
|
labelColor = props.labelColor;
|
|
14249
|
-
var labelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14260
|
+
var labelClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$w['MenuItem-Text'], true), styles$w['MenuItem--overflow'], true), 'mr-5', !hasSubmenu && menu.count), 'ellipsis--noWrap', true));
|
|
14250
14261
|
return /*#__PURE__*/React.createElement(Text, {
|
|
14251
14262
|
"data-test": "DesignSystem-VerticalNav--Text",
|
|
14252
14263
|
ref: contentRef,
|
|
@@ -14264,7 +14275,7 @@ var MenuItem$1 = function MenuItem(props) {
|
|
|
14264
14275
|
tabIndex: 0
|
|
14265
14276
|
}, extractBaseProps(props));
|
|
14266
14277
|
var itemColor = getNavItemColor(isActive, menu.disabled);
|
|
14267
|
-
var ItemClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14278
|
+
var ItemClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$w['MenuItem'], true), styles$w['MenuItem--vertical'], true), styles$w['MenuItem--collapsed'], !expanded), styles$w['MenuItem--expanded'], expanded), styles$w['MenuItem--active'], isActive), styles$w['MenuItem--disabled'], menu.disabled), styles$w['MenuItem--subMenu'], isChildren && expanded), styles$w['MenuItem--rounded'], rounded && expanded), "color-".concat(itemColor), true));
|
|
14268
14279
|
var renderSubMenu = function renderSubMenu() {
|
|
14269
14280
|
if (hasSubmenu) {
|
|
14270
14281
|
return /*#__PURE__*/React.createElement(_MenuIcon, {
|
|
@@ -14403,7 +14414,7 @@ var VerticalNav = function VerticalNav(props) {
|
|
|
14403
14414
|
var hasSubmenu = menu.subMenu && menu.subMenu.length > 0;
|
|
14404
14415
|
var isChildrenVisible = hasSubmenu && (menuState[menu.name] || subMenuExpandedState[menu.name]);
|
|
14405
14416
|
var hasGroup = index === 0 || menus[index - 1].group !== menu.group;
|
|
14406
|
-
var sectionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14417
|
+
var sectionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$w['VerticalNav-section'], true), styles$w['VerticalNav-section--border'], index !== 0));
|
|
14407
14418
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
14408
14419
|
key: index
|
|
14409
14420
|
}, hasGroup && menu.group && expanded && /*#__PURE__*/React.createElement("div", {
|
|
@@ -14440,7 +14451,7 @@ var VerticalNav = function VerticalNav(props) {
|
|
|
14440
14451
|
});
|
|
14441
14452
|
return list;
|
|
14442
14453
|
};
|
|
14443
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14454
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$w.VerticalNav, true), styles$w['VerticalNav--expanded'], expanded), className);
|
|
14444
14455
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
14445
14456
|
className: classes
|
|
14446
14457
|
}), renderList());
|
|
@@ -14452,9 +14463,9 @@ VerticalNav.defaultProps = {
|
|
|
14452
14463
|
showTooltip: false
|
|
14453
14464
|
};
|
|
14454
14465
|
|
|
14455
|
-
var css_248z$
|
|
14456
|
-
var styles$
|
|
14457
|
-
styleInject(css_248z$
|
|
14466
|
+
var css_248z$w = ".HorizontalNav-v4-0-0kgjg6 {\n display: flex;\n}\n\n.HorizontalNav-menu-v4-0-0uaj6e {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n height: var(--spacing-3);\n padding-right: var(--spacing-l);\n padding-left: var(--spacing-l);\n border-radius: var(--spacing-2);\n margin: 0 var(--spacing-xs);\n}\n\n.HorizontalNav-menu--disabled-v4-0-0b91ii {\n pointer-events: none;\n}\n\n.HorizontalNav-menu--disabled-v4-0-0b91ii:focus-visible,\n.HorizontalNav-menu--disabled-v4-0-0b91ii:focus {\n outline: none;\n}\n\n.HorizontalNav-menu--default-v4-0-0eb5st:focus-visible,\n.HorizontalNav-menu--default-v4-0-0eb5st:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.HorizontalNav-menu--default-v4-0-0eb5st:hover {\n background-color: var(--secondary);\n}\n\n.HorizontalNav-menu--default-v4-0-0eb5st:active {\n background-color: var(--secondary-dark);\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75 {\n background-color: var(--primary-lightest);\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75:focus-visible,\n.HorizontalNav-menu--active-v4-0-05kc75:focus {\n background-color: var(--primary-lightest);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n outline: none;\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75:hover {\n background-color: var(--primary-lighter);\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75:active .HorizontalNav-menuText-v4-0-0mszlk {\n color: var(--primary-darker);\n}\n\n.HorizontalNav-menuText-v4-0-0mszlk {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.HorizontalNav-menu--active-v4-0-05kc75,\n.HorizontalNav-animate-v4-0-0vg0n8 {\n transition-delay: var(--duration--fast-02);\n}\n\n.HorizontalNav-animate-v4-0-0vg0n8 {\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.HorizontalNav-pills-v4-0-0fprom {\n margin-right: var(--spacing-m);\n}\n\n.HorizontalNav-pills--disabled-v4-0-0h6ave {\n opacity: var(--opacity-10);\n}\n";
|
|
14467
|
+
var styles$v = {"HorizontalNav":"HorizontalNav-v4-0-0kgjg6","HorizontalNav-menu":"HorizontalNav-menu-v4-0-0uaj6e","HorizontalNav-menu--disabled":"HorizontalNav-menu--disabled-v4-0-0b91ii","HorizontalNav-menu--default":"HorizontalNav-menu--default-v4-0-0eb5st","HorizontalNav-menu--active":"HorizontalNav-menu--active-v4-0-05kc75","HorizontalNav-menuText":"HorizontalNav-menuText-v4-0-0mszlk","HorizontalNav-animate":"HorizontalNav-animate-v4-0-0vg0n8","HorizontalNav-pills":"HorizontalNav-pills-v4-0-0fprom","HorizontalNav-pills--disabled":"HorizontalNav-pills--disabled-v4-0-0h6ave"};
|
|
14468
|
+
styleInject(css_248z$w);
|
|
14458
14469
|
|
|
14459
14470
|
var HorizontalNav = function HorizontalNav(props) {
|
|
14460
14471
|
var menus = props.menus,
|
|
@@ -14462,14 +14473,14 @@ var HorizontalNav = function HorizontalNav(props) {
|
|
|
14462
14473
|
onClick = props.onClick,
|
|
14463
14474
|
className = props.className;
|
|
14464
14475
|
var baseProps = extractBaseProps(props);
|
|
14465
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
14476
|
+
var classes = classnames(_defineProperty$1({}, styles$v['HorizontalNav'], true), className);
|
|
14466
14477
|
var onClickHandler = function onClickHandler(menu) {
|
|
14467
14478
|
return function () {
|
|
14468
14479
|
if (onClick) onClick(menu);
|
|
14469
14480
|
};
|
|
14470
14481
|
};
|
|
14471
14482
|
var getPillsClass = function getPillsClass(disabled) {
|
|
14472
|
-
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14483
|
+
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$v['HorizontalNav-pills'], true), styles$v['HorizontalNav-pills--disabled'], disabled), styles$v['HorizontalNav-animate'], true));
|
|
14473
14484
|
};
|
|
14474
14485
|
var renderIcon = function renderIcon(menu, isActive) {
|
|
14475
14486
|
if (menu.count !== undefined) {
|
|
@@ -14481,7 +14492,7 @@ var HorizontalNav = function HorizontalNav(props) {
|
|
|
14481
14492
|
"data-test": "DesignSystem-HorizontalNav--Pills"
|
|
14482
14493
|
}, count);
|
|
14483
14494
|
}
|
|
14484
|
-
var IconClassName = classnames('mr-3', styles$
|
|
14495
|
+
var IconClassName = classnames('mr-3', styles$v['HorizontalNav-animate']);
|
|
14485
14496
|
if (menu.icon) {
|
|
14486
14497
|
return /*#__PURE__*/React.createElement(Icon, {
|
|
14487
14498
|
className: IconClassName,
|
|
@@ -14500,8 +14511,8 @@ var HorizontalNav = function HorizontalNav(props) {
|
|
|
14500
14511
|
var list = menus.map(function (menu, index) {
|
|
14501
14512
|
var isActive = isMenuActive(menus, menu, active);
|
|
14502
14513
|
var itemColor = getNavItemColor(isActive, menu.disabled);
|
|
14503
|
-
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14504
|
-
var textClasses = classnames(styles$
|
|
14514
|
+
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$v['HorizontalNav-menu'], true), styles$v['HorizontalNav-menu--default'], !isActive && !menu.disabled), styles$v['HorizontalNav-menu--active'], isActive), styles$v['HorizontalNav-menu--disabled'], menu.disabled), styles$v["HorizontalNav-animate"], true), "color-".concat(itemColor), true));
|
|
14515
|
+
var textClasses = classnames(styles$v['HorizontalNav-menuText'], styles$v['HorizontalNav-animate']);
|
|
14505
14516
|
return (
|
|
14506
14517
|
/*#__PURE__*/
|
|
14507
14518
|
// TODO(a11y)
|
|
@@ -14570,9 +14581,9 @@ var Tooltip = function Tooltip(props) {
|
|
|
14570
14581
|
return children;
|
|
14571
14582
|
}
|
|
14572
14583
|
var tooltipWrapper = /*#__PURE__*/React.createElement("div", {
|
|
14573
|
-
className: styles$
|
|
14584
|
+
className: styles$I['Tooltip']
|
|
14574
14585
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
14575
|
-
className: styles$
|
|
14586
|
+
className: styles$I['Tooltip-text'],
|
|
14576
14587
|
appearance: "white"
|
|
14577
14588
|
}, tooltip));
|
|
14578
14589
|
if (showOnTruncation) {
|
|
@@ -14582,10 +14593,10 @@ var Tooltip = function Tooltip(props) {
|
|
|
14582
14593
|
offset: 'medium'
|
|
14583
14594
|
}, rest, {
|
|
14584
14595
|
animationClass: {
|
|
14585
|
-
open: styles$
|
|
14586
|
-
close: styles$
|
|
14596
|
+
open: styles$I["Tooltip-animation-open-".concat(positionValue[props.position])],
|
|
14597
|
+
close: styles$I["Tooltip-animation-close-".concat(positionValue[props.position])]
|
|
14587
14598
|
},
|
|
14588
|
-
className: styles$
|
|
14599
|
+
className: styles$I['Tooltip-container']
|
|
14589
14600
|
}), tooltipWrapper) : renderChildren;
|
|
14590
14601
|
}
|
|
14591
14602
|
return /*#__PURE__*/React.createElement(Popover, _extends$2({
|
|
@@ -14594,10 +14605,10 @@ var Tooltip = function Tooltip(props) {
|
|
|
14594
14605
|
offset: 'medium'
|
|
14595
14606
|
}, rest, {
|
|
14596
14607
|
animationClass: {
|
|
14597
|
-
open: styles$
|
|
14598
|
-
close: styles$
|
|
14608
|
+
open: styles$I["Tooltip-animation-open-".concat(positionValue[props.position])],
|
|
14609
|
+
close: styles$I["Tooltip-animation-close-".concat(positionValue[props.position])]
|
|
14599
14610
|
},
|
|
14600
|
-
className: styles$
|
|
14611
|
+
className: styles$I['Tooltip-container']
|
|
14601
14612
|
}), tooltipWrapper);
|
|
14602
14613
|
};
|
|
14603
14614
|
Tooltip.useAutoTooltip = function () {
|
|
@@ -14664,9 +14675,9 @@ Dialog.defaultProps = {
|
|
|
14664
14675
|
secondaryButtonAppearance: 'basic'
|
|
14665
14676
|
};
|
|
14666
14677
|
|
|
14667
|
-
var css_248z$
|
|
14668
|
-
var styles$
|
|
14669
|
-
styleInject(css_248z$
|
|
14678
|
+
var css_248z$v = ".OverlayHeader-v4-0-0mja5g {\n box-sizing: border-box;\n margin-left: var(--spacing-xl);\n}\n\n.OverlayHeader--withBackButton-v4-0-0gah3q {\n margin-left: var(--spacing-2);\n}\n\n.OverlayHeader-headerWrapper-v4-0-07k3fd {\n display: flex;\n align-items: center;\n}\n\n.OverlayHeader-subheading-v4-0-0ypuak {\n margin-top: var(--spacing-s);\n}\n\n.OverlayHeader-subheading--withBackButton-v4-0-0m7x81 {\n margin-left: var(--spacing);\n}\n\n.OverlayBody-v4-0-0tta5z {\n overflow-y: auto;\n}\n\n.Overlay-body--stickFooter-v4-0-0ljc0h {\n margin-bottom: 80px;\n}\n\n.OverlayFooter-v4-0-0nbm6m {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n padding-left: var(--spacing-xl);\n padding-right: var(--spacing-xl);\n}\n";
|
|
14679
|
+
var styles$u = {"OverlayHeader":"OverlayHeader-v4-0-0mja5g","OverlayHeader--withBackButton":"OverlayHeader--withBackButton-v4-0-0gah3q","OverlayHeader-headerWrapper":"OverlayHeader-headerWrapper-v4-0-07k3fd","OverlayHeader-subheading":"OverlayHeader-subheading-v4-0-0ypuak","OverlayHeader-subheading--withBackButton":"OverlayHeader-subheading--withBackButton-v4-0-0m7x81","OverlayBody":"OverlayBody-v4-0-0tta5z","Overlay-body--stickFooter":"Overlay-body--stickFooter-v4-0-0ljc0h","OverlayFooter":"OverlayFooter-v4-0-0nbm6m"};
|
|
14680
|
+
styleInject(css_248z$v);
|
|
14670
14681
|
|
|
14671
14682
|
var _excluded$D = ["label"];
|
|
14672
14683
|
var OverlayFooter = function OverlayFooter(props) {
|
|
@@ -14675,7 +14686,7 @@ var OverlayFooter = function OverlayFooter(props) {
|
|
|
14675
14686
|
children = props.children,
|
|
14676
14687
|
actions = props.actions;
|
|
14677
14688
|
var baseProps = extractBaseProps(props);
|
|
14678
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
14689
|
+
var classes = classnames(_defineProperty$1({}, styles$u.OverlayFooter, true), className);
|
|
14679
14690
|
var wrapperRef = /*#__PURE__*/React.createRef();
|
|
14680
14691
|
React.useEffect(function () {
|
|
14681
14692
|
if (open) {
|
|
@@ -14727,14 +14738,14 @@ var OverlayHeader = function OverlayHeader(props) {
|
|
|
14727
14738
|
backButtonCallback = props.backButtonCallback,
|
|
14728
14739
|
headingClass = props.headingClass;
|
|
14729
14740
|
var baseProps = extractBaseProps(props);
|
|
14730
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14731
|
-
var subheadingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14741
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$u.OverlayHeader, true), styles$u['OverlayHeader--withBackButton'], backButton || backIcon), className);
|
|
14742
|
+
var subheadingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$u['OverlayHeader-subheading'], true), styles$u['OverlayHeader-subheading--withBackButton'], backButton || backIcon));
|
|
14732
14743
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
14733
14744
|
"data-test": "DesignSystem-OverlayHeader"
|
|
14734
14745
|
}, baseProps, {
|
|
14735
14746
|
className: classes
|
|
14736
14747
|
}), /*#__PURE__*/React.createElement("div", {
|
|
14737
|
-
className: styles$
|
|
14748
|
+
className: styles$u['OverlayHeader-headerWrapper']
|
|
14738
14749
|
}, (backButton || backIcon) && /*#__PURE__*/React.createElement(Button, {
|
|
14739
14750
|
"data-test": "DesignSystem-OverlayHeader--Button",
|
|
14740
14751
|
appearance: "transparent",
|
|
@@ -14757,7 +14768,7 @@ var OverlayBody = function OverlayBody(props) {
|
|
|
14757
14768
|
var children = props.children,
|
|
14758
14769
|
className = props.className;
|
|
14759
14770
|
var baseProps = extractBaseProps(props);
|
|
14760
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
14771
|
+
var classes = classnames(_defineProperty$1({}, styles$u.OverlayBody, true), className);
|
|
14761
14772
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
14762
14773
|
"data-test": "DesignSystem-OverlayBody"
|
|
14763
14774
|
}, baseProps, {
|
|
@@ -14846,9 +14857,9 @@ var OverlayManager = /*#__PURE__*/function () {
|
|
|
14846
14857
|
var instance = new OverlayManager();
|
|
14847
14858
|
Object.freeze(instance);
|
|
14848
14859
|
|
|
14849
|
-
var css_248z$
|
|
14850
|
-
var styles$
|
|
14851
|
-
styleInject(css_248z$
|
|
14860
|
+
var css_248z$u = "@keyframes modal-open-v4-0-0dbhpl {\n from {\n top: 20px;\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes modal-close-v4-0-0dh361 {\n from {\n top: 104px;\n opacity: 1;\n }\n to {\n top: 124px;\n opacity: 0;\n }\n}\n\n.Modal-v4-0-0ww2x3 {\n position: fixed !important;\n max-height: calc(100vh - 128px);\n box-shadow: var(--shadow-m);\n background-color: var(--white);\n border-radius: var(--spacing);\n overflow: auto;\n flex-direction: column;\n display: none;\n margin: auto;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n height: -moz-min-content;\n height: min-content;\n}\n\n.Modal--open-v4-0-0daa2z {\n display: flex;\n}\n\n.Modal-animation--open-v4-0-0nltsa {\n animation: modal-open-v4-0-0dbhpl var(--duration--moderate-02) var(--entrance-expressive-curve);\n}\n\n.Modal-animation--close-v4-0-0lo6ol {\n animation: modal-close-v4-0-0dh361 var(--duration--fast-02) var(--exit-expressive-curve);\n}\n\n.Modal-header-v4-0-0dfwe5 {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-2);\n padding-bottom: var(--spacing-l);\n padding-right: var(--spacing-2);\n}\n\n.Modal-header--withSeperator-v4-0-0j09pf {\n border-bottom: var(--border);\n}\n\n.Modal-description-v4-0-0kowxe {\n padding: var(--spacing) 0;\n}\n\n.Modal-footer-v4-0-0cnkcz {\n padding-top: var(--spacing-xl);\n padding-bottom: var(--spacing-xl);\n justify-content: flex-end;\n position: absolute;\n bottom: 0;\n}\n\n.Modal-footer--withSeperator-v4-0-0f9yj3 {\n border-top: var(--border);\n}\n\n.Modal-body-v4-0-0oqzsn {\n padding: 0 var(--spacing-xl);\n}\n\n.Modal-body--withMargin-v4-0-0v3zim {\n margin-bottom: 80px;\n}\n\n.Modal-body--withPadding-v4-0-02sbht {\n padding-bottom: var(--spacing-2);\n}\n";
|
|
14861
|
+
var styles$t = {"Modal":"Modal-v4-0-0ww2x3","Modal--open":"Modal--open-v4-0-0daa2z","Modal-animation--open":"Modal-animation--open-v4-0-0nltsa","modal-open":"modal-open-v4-0-0dbhpl","Modal-animation--close":"Modal-animation--close-v4-0-0lo6ol","modal-close":"modal-close-v4-0-0dh361","Modal-header":"Modal-header-v4-0-0dfwe5","Modal-header--withSeperator":"Modal-header--withSeperator-v4-0-0j09pf","Modal-description":"Modal-description-v4-0-0kowxe","Modal-footer":"Modal-footer-v4-0-0cnkcz","Modal-footer--withSeperator":"Modal-footer--withSeperator-v4-0-0f9yj3","Modal-body":"Modal-body-v4-0-0oqzsn","Modal-body--withMargin":"Modal-body--withMargin-v4-0-0v3zim","Modal-body--withPadding":"Modal-body--withPadding-v4-0-02sbht"};
|
|
14862
|
+
styleInject(css_248z$u);
|
|
14852
14863
|
|
|
14853
14864
|
/**
|
|
14854
14865
|
* ** NOTE: Use `headerOptions`, `header`, `footerOptions`, `footer`, `onClose` and `backdropClose`(boolean). **
|
|
@@ -14967,12 +14978,12 @@ var Modal = /*#__PURE__*/function (_React$Component) {
|
|
|
14967
14978
|
footer = _this$props2.footer,
|
|
14968
14979
|
onClose = _this$props2.onClose;
|
|
14969
14980
|
var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
|
|
14970
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14971
|
-
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14972
|
-
var footerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14981
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$t.Modal, true), styles$t['Modal--open'], open), styles$t['Modal-animation--open'], animate), styles$t['Modal-animation--close'], !animate), className);
|
|
14982
|
+
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-header'], true), styles$t['Modal-header--withSeperator'], seperator));
|
|
14983
|
+
var footerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-footer'], true), styles$t['Modal-footer--withSeperator'], seperator));
|
|
14973
14984
|
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, rowStyles['Row'], true), 'Overlay-container', true), 'Overlay-container--open', open));
|
|
14974
14985
|
var isAPINew = headerOptions || footerOptions || footer || header;
|
|
14975
|
-
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
14986
|
+
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-body'], true), styles$t['Modal-body--withMargin'], isAPINew ? !!footer : true), styles$t['Modal-body--withPadding'], isAPINew ? !footer : true));
|
|
14976
14987
|
var baseProps = extractBaseProps(this.props);
|
|
14977
14988
|
var sizeMap = {
|
|
14978
14989
|
small: {
|
|
@@ -15058,7 +15069,7 @@ var ModalHeader = function ModalHeader(props) {
|
|
|
15058
15069
|
backIcon = props.backIcon,
|
|
15059
15070
|
backIconCallback = props.backIconCallback;
|
|
15060
15071
|
var baseProps = extractBaseProps(props);
|
|
15061
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15072
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-header'], true), styles$t['Modal-header--withSeperator'], seperator), className);
|
|
15062
15073
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
15063
15074
|
className: classes
|
|
15064
15075
|
}), /*#__PURE__*/React.createElement(Column, null, /*#__PURE__*/React.createElement(OverlayHeader, {
|
|
@@ -15083,7 +15094,7 @@ var ModalBody = function ModalBody(props) {
|
|
|
15083
15094
|
var children = props.children,
|
|
15084
15095
|
className = props.className;
|
|
15085
15096
|
var baseProps = extractBaseProps(props);
|
|
15086
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15097
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-body'], true), styles$t['Modal-body--withMargin'], true), className);
|
|
15087
15098
|
return /*#__PURE__*/React.createElement(OverlayBody, _extends$2({}, baseProps, {
|
|
15088
15099
|
stickFooter: true,
|
|
15089
15100
|
className: classes
|
|
@@ -15101,7 +15112,7 @@ var ModalFooter = function ModalFooter(props) {
|
|
|
15101
15112
|
className = props.className,
|
|
15102
15113
|
seperator = props.seperator;
|
|
15103
15114
|
var baseProps = extractBaseProps(props);
|
|
15104
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15115
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1({}, styles$t['Modal-footer'], true), styles$t['Modal-footer--withSeperator'], seperator), className);
|
|
15105
15116
|
return /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({}, baseProps, {
|
|
15106
15117
|
open: open,
|
|
15107
15118
|
className: classes
|
|
@@ -15109,9 +15120,9 @@ var ModalFooter = function ModalFooter(props) {
|
|
|
15109
15120
|
};
|
|
15110
15121
|
ModalFooter.displayName = 'ModalFooter';
|
|
15111
15122
|
|
|
15112
|
-
var css_248z$
|
|
15113
|
-
var styles$
|
|
15114
|
-
styleInject(css_248z$
|
|
15123
|
+
var css_248z$t = "@keyframes fullscreenModal-open-v4-0-0adnrc {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0px);\n }\n}\n\n@keyframes fullscreenModal-close-v4-0-0x7fud {\n from {\n opacity: 1;\n transform: translateY(0px);\n }\n to {\n opacity: 0;\n transform: translateY(20px);\n }\n}\n\n.FullscreenModal-v4-0-09vgdo {\n position: fixed !important;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding-top: var(--spacing-4);\n background-color: var(--white);\n overflow: auto;\n display: flex;\n flex-direction: column;\n}\n\n.FullscreenModal-animation--open-v4-0-0z9k1e {\n animation: fullscreenModal-open-v4-0-0adnrc 240ms cubic-bezier(0, 0, 0.3, 1);\n}\n\n.FullscreenModal-animation--close-v4-0-0ry89p {\n animation: fullscreenModal-close-v4-0-0x7fud 120ms cubic-bezier(0.4, 0.14, 1, 1);\n}\n\n.FullscreenModal-header-v4-0-0komda {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n padding-right: var(--spacing-l);\n}\n\n.FullscreenModal-footer-v4-0-0lgyeh {\n justify-content: flex-end;\n padding-top: var(--spacing-2);\n padding-bottom: var(--spacing-2);\n}\n\n.FullscreenModal-body-v4-0-074bjk {\n padding: var(--spacing-2) var(--spacing-xl);\n}\n";
|
|
15124
|
+
var styles$s = {"FullscreenModal":"FullscreenModal-v4-0-09vgdo","FullscreenModal-animation--open":"FullscreenModal-animation--open-v4-0-0z9k1e","fullscreenModal-open":"fullscreenModal-open-v4-0-0adnrc","FullscreenModal-animation--close":"FullscreenModal-animation--close-v4-0-0ry89p","fullscreenModal-close":"fullscreenModal-close-v4-0-0x7fud","FullscreenModal-header":"FullscreenModal-header-v4-0-0komda","FullscreenModal-footer":"FullscreenModal-footer-v4-0-0lgyeh","FullscreenModal-body":"FullscreenModal-body-v4-0-074bjk"};
|
|
15125
|
+
styleInject(css_248z$t);
|
|
15115
15126
|
|
|
15116
15127
|
var FullscreenModal = /*#__PURE__*/function (_React$Component) {
|
|
15117
15128
|
function FullscreenModal(props) {
|
|
@@ -15210,7 +15221,7 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
|
|
|
15210
15221
|
footer = _this$props.footer,
|
|
15211
15222
|
footerOptions = _this$props.footerOptions,
|
|
15212
15223
|
onClose = _this$props.onClose;
|
|
15213
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15224
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$s.FullscreenModal, true), styles$s['FullscreenModal-animation--open'], animate), styles$s['FullscreenModal-animation--close'], !animate), className);
|
|
15214
15225
|
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1({}, 'Overlay-container', true), 'Overlay-container--open', open));
|
|
15215
15226
|
var baseProps = extractBaseProps(this.props);
|
|
15216
15227
|
var sizeMap = {
|
|
@@ -15242,7 +15253,7 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
|
|
|
15242
15253
|
}), /*#__PURE__*/React.createElement(Row, {
|
|
15243
15254
|
className: "justify-content-center"
|
|
15244
15255
|
}, /*#__PURE__*/React.createElement(Column, sizeMap[dimension], /*#__PURE__*/React.createElement(Row, {
|
|
15245
|
-
className: styles$
|
|
15256
|
+
className: styles$s['FullscreenModal-header']
|
|
15246
15257
|
}, /*#__PURE__*/React.createElement(Column, null, !header && /*#__PURE__*/React.createElement(OverlayHeader, _extends$2({
|
|
15247
15258
|
"data-test": "DesignSystem-FullscreenModal--header"
|
|
15248
15259
|
}, headerOptions)), !!header && header), /*#__PURE__*/React.createElement(Column, {
|
|
@@ -15258,12 +15269,12 @@ var FullscreenModal = /*#__PURE__*/function (_React$Component) {
|
|
|
15258
15269
|
}
|
|
15259
15270
|
})))), /*#__PURE__*/React.createElement(OverlayBody, {
|
|
15260
15271
|
"data-test": "DesignSystem-FullscreenModal--Body",
|
|
15261
|
-
className: styles$
|
|
15272
|
+
className: styles$s['FullscreenModal-body']
|
|
15262
15273
|
}, children), (!!footer || !!footerOptions) && /*#__PURE__*/React.createElement(OverlayFooter, _extends$2({
|
|
15263
15274
|
"data-test": "DesignSystem-FullscreenModal--footer"
|
|
15264
15275
|
}, footerOptions, {
|
|
15265
15276
|
open: open,
|
|
15266
|
-
className: styles$
|
|
15277
|
+
className: styles$s['FullscreenModal-footer']
|
|
15267
15278
|
}), footer))))) : null;
|
|
15268
15279
|
var WrapperElement = /*#__PURE__*/ReactDOM.createPortal(ModalContainer, this.element);
|
|
15269
15280
|
return /*#__PURE__*/React.createElement(React.Fragment, null, WrapperElement);
|
|
@@ -15274,9 +15285,9 @@ _defineProperty$1(FullscreenModal, "defaultProps", {
|
|
|
15274
15285
|
dimension: 'medium'
|
|
15275
15286
|
});
|
|
15276
15287
|
|
|
15277
|
-
var css_248z$
|
|
15278
|
-
var styles$
|
|
15279
|
-
styleInject(css_248z$
|
|
15288
|
+
var css_248z$s = "@keyframes sidesheet-open-v4-0-0ln2m5 {\n from {\n right: -100%;\n }\n to {\n right: 0;\n }\n}\n\n@keyframes sidesheet-close-v4-0-0vekp4 {\n from {\n right: 0;\n }\n to {\n right: -100%;\n }\n}\n\n@keyframes shift-right-spacing-3-v4-0-05vm00 {\n from {\n transform: translateX(calc(-1 * var(--spacing-3)));\n }\n to {\n transform: translateX(0);\n }\n}\n\n@keyframes shift-left-spacing-3-v4-0-06w7vi {\n from {\n transform: translateX(var(--spacing-3));\n }\n to {\n transform: translateX(0);\n }\n}\n\n.Sidesheet-v4-0-0aspec {\n position: fixed !important;\n top: 0;\n right: 0;\n height: 100vh;\n box-shadow: var(--shadow-l);\n background-color: var(--white);\n display: flex;\n flex-direction: column;\n visibility: hidden;\n}\n\n.Sidesheet--open-v4-0-0e3c6q {\n visibility: visible;\n}\n\n.Sidesheet-animation--open-v4-0-0hm4mf {\n animation: sidesheet-open-v4-0-0ln2m5 240ms cubic-bezier(0, 0, 0.3, 1);\n}\n\n.Sidesheet-animation--close-v4-0-0m099d {\n animation: sidesheet-close-v4-0-0vekp4 120ms cubic-bezier(0.4, 0.14, 1, 1);\n animation-fill-mode: forwards;\n}\n\n.Sidesheet-header-v4-0-0wkefp {\n display: flex;\n justify-content: flex-start;\n padding-top: var(--spacing-2);\n padding-bottom: var(--spacing-l);\n padding-right: var(--spacing-2);\n}\n\n.Sidesheet-header--withSeperator-v4-0-0a28xa {\n border-bottom: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.Sidesheet-body-v4-0-052a3n {\n padding: 0 var(--spacing-xl);\n}\n\n.Sidesheet-body--withMargin-v4-0-0ckgfc {\n margin-bottom: 80px;\n}\n\n.Sidesheet-footer-v4-0-0xcqgv {\n padding-top: var(--spacing-xl);\n padding-bottom: var(--spacing-xl);\n}\n\n.Sidesheet-footer--withSeperator-v4-0-0o7zb9 {\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.Sidesheet-footer--stickToBottom-v4-0-0nyb16 {\n position: absolute;\n bottom: 0;\n}\n\n.Sidesheet-header--shiftRight-v4-0-0z6lp2 {\n animation: shift-right-spacing-3-v4-0-05vm00 var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Sidesheet-header--shiftLeft-v4-0-0clyhr {\n animation: shift-left-spacing-3-v4-0-06w7vi var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Sidesheet-body--nextPage-v4-0-0g7s8y {\n animation: fadeIn-v4-0-0qepu7 var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.Sidesheet-body--firstPage-v4-0-0c7gj6 {\n animation: fadeIn-v4-0-0qepu7 var(--duration--fast-02) var(--standard-expressive-curve);\n}\n";
|
|
15289
|
+
var styles$r = {"Sidesheet":"Sidesheet-v4-0-0aspec","Sidesheet--open":"Sidesheet--open-v4-0-0e3c6q","Sidesheet-animation--open":"Sidesheet-animation--open-v4-0-0hm4mf","sidesheet-open":"sidesheet-open-v4-0-0ln2m5","Sidesheet-animation--close":"Sidesheet-animation--close-v4-0-0m099d","sidesheet-close":"sidesheet-close-v4-0-0vekp4","Sidesheet-header":"Sidesheet-header-v4-0-0wkefp","Sidesheet-header--withSeperator":"Sidesheet-header--withSeperator-v4-0-0a28xa","Sidesheet-body":"Sidesheet-body-v4-0-052a3n","Sidesheet-body--withMargin":"Sidesheet-body--withMargin-v4-0-0ckgfc","Sidesheet-footer":"Sidesheet-footer-v4-0-0xcqgv","Sidesheet-footer--withSeperator":"Sidesheet-footer--withSeperator-v4-0-0o7zb9","Sidesheet-footer--stickToBottom":"Sidesheet-footer--stickToBottom-v4-0-0nyb16","Sidesheet-header--shiftRight":"Sidesheet-header--shiftRight-v4-0-0z6lp2","shift-right-spacing-3":"shift-right-spacing-3-v4-0-05vm00","Sidesheet-header--shiftLeft":"Sidesheet-header--shiftLeft-v4-0-0clyhr","shift-left-spacing-3":"shift-left-spacing-3-v4-0-06w7vi","Sidesheet-body--nextPage":"Sidesheet-body--nextPage-v4-0-0g7s8y","fadeIn":"fadeIn-v4-0-0qepu7","Sidesheet-body--firstPage":"Sidesheet-body--firstPage-v4-0-0c7gj6"};
|
|
15290
|
+
styleInject(css_248z$s);
|
|
15280
15291
|
|
|
15281
15292
|
var sidesheetWidth = {
|
|
15282
15293
|
regular: '6',
|
|
@@ -15396,12 +15407,12 @@ var Sidesheet = /*#__PURE__*/function (_React$Component) {
|
|
|
15396
15407
|
header = _this$props2.header,
|
|
15397
15408
|
onClose = _this$props2.onClose;
|
|
15398
15409
|
var BackdropZIndex = zIndex ? zIndex - 1 : 1000;
|
|
15399
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15410
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$r.Sidesheet, true), styles$r['Sidesheet--open'], open), styles$r['Sidesheet-animation--open'], animate), styles$r['Sidesheet-animation--close'], !animate), className);
|
|
15400
15411
|
var ContainerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, 'Overlay-container', true), 'fade-in', animate), 'Overlay-container--open', animate), 'Overlay-container--close', !animate));
|
|
15401
|
-
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15402
|
-
var footerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15403
|
-
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15404
|
-
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15412
|
+
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$r['Sidesheet-header'], true), styles$r['Sidesheet-header--withSeperator'], seperator));
|
|
15413
|
+
var footerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$r['Sidesheet-footer'], true), styles$r['Sidesheet-footer--withSeperator'], seperator), styles$r['Sidesheet-footer--stickToBottom'], stickFooter));
|
|
15414
|
+
var bodyClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$r['Sidesheet-body'], true), styles$r['Sidesheet-body--withMargin'], !!footer && stickFooter), styles$r['Sidesheet-body--nextPage'], (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backButton) || (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backIcon)), styles$r['Sidesheet-body--firstPage'], !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backButton) && !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backIcon)));
|
|
15415
|
+
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$r['Sidesheet-header--shiftRight'], (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backButton) || (headerOptions === null || headerOptions === void 0 ? void 0 : headerOptions.backIcon)), styles$r['Sidesheet-header--shiftLeft'], !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backButton) && !(headerOptions !== null && headerOptions !== void 0 && headerOptions.backIcon)));
|
|
15405
15416
|
var baseProps = extractBaseProps(this.props);
|
|
15406
15417
|
var SidesheetContainer = /*#__PURE__*/React.createElement(Row, {
|
|
15407
15418
|
"data-test": "DesignSystem-SidesheetContainer",
|
|
@@ -15466,9 +15477,9 @@ _defineProperty$1(Sidesheet, "defaultProps", {
|
|
|
15466
15477
|
headerOptions: {}
|
|
15467
15478
|
});
|
|
15468
15479
|
|
|
15469
|
-
var css_248z$
|
|
15470
|
-
var styles$
|
|
15471
|
-
styleInject(css_248z$
|
|
15480
|
+
var css_248z$r = ".Collapsible-wrapper-v4-0-095k25 {\n position: relative;\n z-index: 600;\n}\n\n.Collapsible-wrapper--overlay-v4-0-04uw2s {\n margin-right: 40px;\n}\n\n.Collapsible-v4-0-0bke0y {\n display: inline-flex;\n flex-direction: column;\n background-color: var(--secondary-lightest);\n width: var(--spacing-4);\n height: 100%;\n transition: width 240ms;\n transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);\n}\n\n.Collapsible--overlay-v4-0-0z57w8 {\n position: absolute;\n}\n\n.Collapsible--shadow-v4-0-0t9lvx {\n box-shadow: var(--shadow-l);\n clip-path: inset(0px -16px 0px 0px);\n}\n\n.Collapsible-body-v4-0-0uprrp {\n flex-grow: 1;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.Collapsible-footer-v4-0-0t06lt {\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n}\n\n.Collapsible-footer-v4-0-0t06lt:hover {\n background-color: var(--secondary-lighter);\n}\n\n.Collapsible-footer-v4-0-0t06lt:focus,\n.Collapsible-footer-v4-0-0t06lt:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.Collapsible-footer-v4-0-0t06lt:active {\n background-color: var(--secondary-light);\n}\n\n.Collapsible-footer--seperator-v4-0-0tz9ag {\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n";
|
|
15481
|
+
var styles$q = {"Collapsible-wrapper":"Collapsible-wrapper-v4-0-095k25","Collapsible-wrapper--overlay":"Collapsible-wrapper--overlay-v4-0-04uw2s","Collapsible":"Collapsible-v4-0-0bke0y","Collapsible--overlay":"Collapsible--overlay-v4-0-0z57w8","Collapsible--shadow":"Collapsible--shadow-v4-0-0t9lvx","Collapsible-body":"Collapsible-body-v4-0-0uprrp","Collapsible-footer":"Collapsible-footer-v4-0-0t06lt","Collapsible-footer--seperator":"Collapsible-footer--seperator-v4-0-0tz9ag"};
|
|
15482
|
+
styleInject(css_248z$r);
|
|
15472
15483
|
|
|
15473
15484
|
var Collapsible = function Collapsible(props) {
|
|
15474
15485
|
var expanded = props.expanded,
|
|
@@ -15494,10 +15505,10 @@ var Collapsible = function Collapsible(props) {
|
|
|
15494
15505
|
setSeperator(ref.current.scrollHeight > ref.current.clientHeight);
|
|
15495
15506
|
}
|
|
15496
15507
|
});
|
|
15497
|
-
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15498
|
-
var BodyClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15499
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15500
|
-
var FooterClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15508
|
+
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$q['Collapsible-wrapper'], true), styles$q['Collapsible-wrapper--overlay'], !isClicked));
|
|
15509
|
+
var BodyClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$q['Collapsible-body'], true), 'overflow-hidden', !expanded && hoverable));
|
|
15510
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$q.Collapsible, true), styles$q['Collapsible--overlay'], !isClicked), styles$q['Collapsible--shadow'], !isClicked && expanded), className);
|
|
15511
|
+
var FooterClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$q['Collapsible-footer'], true), styles$q['Collapsible-footer--seperator'], seperator));
|
|
15501
15512
|
var onToggleHandler = function onToggleHandler(newExpanded, type) {
|
|
15502
15513
|
return function () {
|
|
15503
15514
|
if (onToggle) {
|
|
@@ -15556,9 +15567,9 @@ Collapsible.defaultProps = {
|
|
|
15556
15567
|
withTrigger: true
|
|
15557
15568
|
};
|
|
15558
15569
|
|
|
15559
|
-
var css_248z$
|
|
15560
|
-
var styles$
|
|
15561
|
-
styleInject(css_248z$
|
|
15570
|
+
var css_248z$q = ".Box-v4-0-0cpe5m {\n width: 100%;\n border-radius: var(--spacing);\n padding: var(--spacing-l);\n}\n\n.Box--typing-v4-0-0t8coo {\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Box--incoming-v4-0-0m3w0n {\n border: var(--spacing-xs) solid var(--secondary-light);\n background-color: var(--white);\n}\n\n.Box--outgoing-v4-0-0mmewo {\n background-color: var(--secondary-lightest);\n}\n\n.Box-incoming--withStatus-v4-0-0jbfpu {\n border-bottom-left-radius: 0px;\n}\n\n.Box-outgoing--withStatus-v4-0-05d9me {\n border-bottom-right-radius: 0px;\n}\n\n.Box--urgent-v4-0-0svbga {\n border-color: var(--alert);\n}\n\n.ChatMessage-status-v4-0-0s9orx {\n margin-top: var(--spacing-m);\n display: block;\n}\n";
|
|
15571
|
+
var styles$p = {"Box":"Box-v4-0-0cpe5m","Box--typing":"Box--typing-v4-0-0t8coo","Box--incoming":"Box--incoming-v4-0-0m3w0n","Box--outgoing":"Box--outgoing-v4-0-0mmewo","Box-incoming--withStatus":"Box-incoming--withStatus-v4-0-0jbfpu","Box-outgoing--withStatus":"Box-outgoing--withStatus-v4-0-05d9me","Box--urgent":"Box--urgent-v4-0-0svbga","ChatMessage-status":"ChatMessage-status-v4-0-0s9orx"};
|
|
15572
|
+
styleInject(css_248z$q);
|
|
15562
15573
|
|
|
15563
15574
|
var Status$1 = function Status(props) {
|
|
15564
15575
|
var type = props.type,
|
|
@@ -15572,7 +15583,7 @@ var Status$1 = function Status(props) {
|
|
|
15572
15583
|
sendingText = _props$sendingText === void 0 ? 'Sending..' : _props$sendingText;
|
|
15573
15584
|
var baseProps = extractBaseProps(props);
|
|
15574
15585
|
var StatusClass = classnames(_defineProperty$1({}, 'd-flex align-items-center mt-3', true), className);
|
|
15575
|
-
var TextClass = classnames(_defineProperty$1({}, styles$
|
|
15586
|
+
var TextClass = classnames(_defineProperty$1({}, styles$p['ChatMessage-status'], true), className);
|
|
15576
15587
|
var getTime = function getTime(t) {
|
|
15577
15588
|
if (typeof t === 'number') {
|
|
15578
15589
|
var d = new Date(t);
|
|
@@ -15658,7 +15669,7 @@ var Box = function Box(props) {
|
|
|
15658
15669
|
onClick = props.onClick,
|
|
15659
15670
|
className = props.className;
|
|
15660
15671
|
var baseProps = extractBaseProps(props);
|
|
15661
|
-
var MessageClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15672
|
+
var MessageClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$p['Box'], true), styles$p["Box--".concat(type)], type), styles$p['Box--typing'], isTyping), styles$p['Box--urgent'], statusType === 'urgent'), styles$p["Box-".concat(type, "--withStatus")], withStatus || isTyping), className);
|
|
15662
15673
|
|
|
15663
15674
|
/* TODO(a11y): fix accessibility */
|
|
15664
15675
|
/* eslint-disable */
|
|
@@ -15727,9 +15738,9 @@ ChatMessage.displayName = 'ChatMessage';
|
|
|
15727
15738
|
|
|
15728
15739
|
var EmptyStateContext = /*#__PURE__*/React.createContext({});
|
|
15729
15740
|
|
|
15730
|
-
var css_248z$
|
|
15731
|
-
var styles$
|
|
15732
|
-
styleInject(css_248z$
|
|
15741
|
+
var css_248z$p = ".EmptyState-v4-0-0o1hai {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: transparent;\n}\n\n.EmptyState-Wrapper-v4-0-0lqqiw {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background: transparent;\n width: 100%;\n}\n\n.EmptyState-image-v4-0-02ojfn {\n display: flex;\n justify-content: center;\n width: 100%;\n height: 100%;\n -o-object-fit: contain;\n object-fit: contain;\n}\n\n.EmptyState-title-v4-0-03b1cq {\n text-align: center;\n max-width: 480px;\n}\n\n.EmptyState-description-v4-0-0dznyr {\n text-align: center;\n margin-top: var(--spacing-m);\n max-width: 360px;\n}\n\n.EmptyState-title--large-v4-0-02yq53 {\n margin-top: var(--spacing-4);\n}\n\n.EmptyState-title--small-v4-0-02uo9k {\n margin-top: var(--spacing-xl);\n}\n\n.EmptyState-description--large-v4-0-05f5lg {\n margin-bottom: var(--spacing-xl);\n}\n\n.EmptyState-description--small-v4-0-05b3px {\n margin-bottom: var(--spacing-2);\n}\n\n.EmptyState-text-v4-0-0kma6v {\n display: flex;\n text-align: center;\n justify-content: center;\n}\n\n.EmptyState-actions-v4-0-0jn4j3 {\n display: flex;\n justify-content: center;\n}\n\n.EmptyState-title--compressed-v4-0-0l6yim {\n margin-top: var(--spacing-2);\n}\n.EmptyState-title--standard-v4-0-0j2qhr {\n margin-top: var(--spacing-xl);\n}\n.EmptyState-title--tight-v4-0-02u6wk {\n margin-top: var(--spacing-l);\n}\n\n.EmptyState-actions--compressed-v4-0-0s6a1c {\n margin-top: var(--spacing-2);\n}\n\n.EmptyState-actions--standard-v4-0-0ha5q5 {\n margin-top: var(--spacing-xl);\n}\n\n.EmptyState-actions--tight-v4-0-01hjz6 {\n margin-top: var(--spacing-l);\n}\n";
|
|
15742
|
+
var styles$o = {"EmptyState":"EmptyState-v4-0-0o1hai","EmptyState-Wrapper":"EmptyState-Wrapper-v4-0-0lqqiw","EmptyState-image":"EmptyState-image-v4-0-02ojfn","EmptyState-title":"EmptyState-title-v4-0-03b1cq","EmptyState-description":"EmptyState-description-v4-0-0dznyr","EmptyState-title--large":"EmptyState-title--large-v4-0-02yq53","EmptyState-title--small":"EmptyState-title--small-v4-0-02uo9k","EmptyState-description--large":"EmptyState-description--large-v4-0-05f5lg","EmptyState-description--small":"EmptyState-description--small-v4-0-05b3px","EmptyState-text":"EmptyState-text-v4-0-0kma6v","EmptyState-actions":"EmptyState-actions-v4-0-0jn4j3","EmptyState-title--compressed":"EmptyState-title--compressed-v4-0-0l6yim","EmptyState-title--standard":"EmptyState-title--standard-v4-0-0j2qhr","EmptyState-title--tight":"EmptyState-title--tight-v4-0-02u6wk","EmptyState-actions--compressed":"EmptyState-actions--compressed-v4-0-0s6a1c","EmptyState-actions--standard":"EmptyState-actions--standard-v4-0-0ha5q5","EmptyState-actions--tight":"EmptyState-actions--tight-v4-0-01hjz6"};
|
|
15743
|
+
styleInject(css_248z$p);
|
|
15733
15744
|
|
|
15734
15745
|
var _excluded$C = ["children", "maxHeight", "height", "minHeight", "src", "alt", "className"];
|
|
15735
15746
|
var imageHeight$1 = {
|
|
@@ -15749,7 +15760,7 @@ var EmptyStateImage = function EmptyStateImage(props) {
|
|
|
15749
15760
|
className = props.className,
|
|
15750
15761
|
rest = _objectWithoutProperties(props, _excluded$C);
|
|
15751
15762
|
var contextProp = React__default.useContext(EmptyStateContext);
|
|
15752
|
-
var imageClasses = classnames(_defineProperty$1({}, styles$
|
|
15763
|
+
var imageClasses = classnames(_defineProperty$1({}, styles$o['EmptyState-image'], true), className);
|
|
15753
15764
|
var imageWrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, 'd-flex', true), 'justify-content-center', true), className);
|
|
15754
15765
|
var _contextProp$size = contextProp.size,
|
|
15755
15766
|
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
|
|
@@ -15781,7 +15792,7 @@ var EmptyStateTitle = function EmptyStateTitle(props) {
|
|
|
15781
15792
|
var contextProp = React__default.useContext(EmptyStateContext);
|
|
15782
15793
|
var _contextProp$size = contextProp.size,
|
|
15783
15794
|
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
|
|
15784
|
-
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15795
|
+
var headingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$o["EmptyState-text"], true), styles$o["EmptyState-title--".concat(size)], true), className);
|
|
15785
15796
|
if (size === 'standard') {
|
|
15786
15797
|
return /*#__PURE__*/React__default.createElement(Heading, _extends$2({
|
|
15787
15798
|
"data-test": "DesignSystem-EmptyState--Heading",
|
|
@@ -15809,7 +15820,7 @@ var EmptyStateDescription = function EmptyStateDescription(props) {
|
|
|
15809
15820
|
compressed: 'regular',
|
|
15810
15821
|
tight: 'small'
|
|
15811
15822
|
};
|
|
15812
|
-
var descriptionClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15823
|
+
var descriptionClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$o["EmptyState-text"], true), 'mt-3', true), className);
|
|
15813
15824
|
return /*#__PURE__*/React__default.createElement(Text, _extends$2({
|
|
15814
15825
|
size: textSize[size],
|
|
15815
15826
|
appearance: "subtle",
|
|
@@ -15826,7 +15837,7 @@ var EmptyStateActions = function EmptyStateActions(props) {
|
|
|
15826
15837
|
var contextProp = React__default.useContext(EmptyStateContext);
|
|
15827
15838
|
var _contextProp$size = contextProp.size,
|
|
15828
15839
|
size = _contextProp$size === void 0 ? 'standard' : _contextProp$size;
|
|
15829
|
-
var actionWrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15840
|
+
var actionWrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$o["EmptyState-actions--".concat(size)], true), styles$o['EmptyState-actions'], true), className);
|
|
15830
15841
|
return /*#__PURE__*/React__default.createElement("div", _extends$2({
|
|
15831
15842
|
"data-test": "DesignSystem-EmptyState--Actions",
|
|
15832
15843
|
className: actionWrapperClasses
|
|
@@ -15883,10 +15894,10 @@ var EmptyState = function EmptyState(props) {
|
|
|
15883
15894
|
} else {
|
|
15884
15895
|
templateSize = isValidSize(size) ? 'standard' : size;
|
|
15885
15896
|
}
|
|
15886
|
-
var wrapperClasses = classnames(_defineProperty$1({}, styles$
|
|
15887
|
-
var emptyStateWrapper = classnames(_defineProperty$1({}, styles$
|
|
15888
|
-
var headingClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15889
|
-
var textClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15897
|
+
var wrapperClasses = classnames(_defineProperty$1({}, styles$o['EmptyState'], true), className);
|
|
15898
|
+
var emptyStateWrapper = classnames(_defineProperty$1({}, styles$o['EmptyState-Wrapper'], true), className);
|
|
15899
|
+
var headingClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$o['EmptyState-title'], true), styles$o["EmptyState-title--".concat(templateSize)], true));
|
|
15900
|
+
var textClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$o['EmptyState-description'], true), styles$o["EmptyState-description--".concat(templateSize)], children !== undefined));
|
|
15890
15901
|
if (title || description) {
|
|
15891
15902
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
15892
15903
|
"data-test": "DesignSystem-EmptyState"
|
|
@@ -15948,7 +15959,7 @@ var ModalDescription = function ModalDescription(props) {
|
|
|
15948
15959
|
description = props.description,
|
|
15949
15960
|
className = props.className;
|
|
15950
15961
|
var baseProps = extractBaseProps(props);
|
|
15951
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
15962
|
+
var classes = classnames(_defineProperty$1({}, styles$t['Modal-description'], true), className);
|
|
15952
15963
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
15953
15964
|
"data-test": "DesignSystem-ModalDescription"
|
|
15954
15965
|
}, baseProps, {
|
|
@@ -15985,9 +15996,9 @@ var Pagination = function Pagination(props) {
|
|
|
15985
15996
|
React.useEffect(function () {
|
|
15986
15997
|
setPage(props.page);
|
|
15987
15998
|
}, [props.page]);
|
|
15988
|
-
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15989
|
-
var nextButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15990
|
-
var prevButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
15999
|
+
var wrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Q['Pagination'], true), styles$Q["Pagination--".concat(type)], type), className);
|
|
16000
|
+
var nextButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Q['Pagination-buttonWrapper'], true), styles$Q['Pagination-buttonWrapper--next'], true));
|
|
16001
|
+
var prevButtonWrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$Q['Pagination-buttonWrapper'], true), styles$Q['Pagination-buttonWrapper--previous'], true));
|
|
15991
16002
|
React.useEffect(function () {
|
|
15992
16003
|
if (init) {
|
|
15993
16004
|
if (page >= 1 && page <= totalPages) {
|
|
@@ -16052,6 +16063,7 @@ var Pagination = function Pagination(props) {
|
|
|
16052
16063
|
disabled: page <= 1,
|
|
16053
16064
|
appearance: "transparent",
|
|
16054
16065
|
icon: "first_page",
|
|
16066
|
+
className: styles$Q['Pagination-button'],
|
|
16055
16067
|
"data-test": "DesignSystem-Pagination--FirstButton"
|
|
16056
16068
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
16057
16069
|
onClick: function onClick() {
|
|
@@ -16060,12 +16072,12 @@ var Pagination = function Pagination(props) {
|
|
|
16060
16072
|
disabled: page <= 1,
|
|
16061
16073
|
icon: "navigate_before",
|
|
16062
16074
|
"data-test": "DesignSystem-Pagination--PrevButton",
|
|
16063
|
-
className: "ml-4 mr-3"
|
|
16075
|
+
className: "ml-4 mr-3 ".concat(styles$Q['Pagination-button'])
|
|
16064
16076
|
})), type === 'jump' && /*#__PURE__*/React.createElement("div", {
|
|
16065
|
-
className: styles$
|
|
16077
|
+
className: styles$Q['Pagination-pageIndex']
|
|
16066
16078
|
}, /*#__PURE__*/React.createElement(MetricInput, {
|
|
16067
16079
|
name: "page",
|
|
16068
|
-
className: styles$
|
|
16080
|
+
className: styles$Q['Pagination-MetricInput'],
|
|
16069
16081
|
onChange: inputChangeHandler,
|
|
16070
16082
|
value: "".concat(isNaturalNumber(page) ? page : ''),
|
|
16071
16083
|
"data-test": "DesignSystem-Pagination--Input",
|
|
@@ -16079,7 +16091,7 @@ var Pagination = function Pagination(props) {
|
|
|
16079
16091
|
disabled: page >= totalPages,
|
|
16080
16092
|
icon: "navigate_next",
|
|
16081
16093
|
"data-test": "DesignSystem-Pagination--NextButton",
|
|
16082
|
-
className: "mr-4
|
|
16094
|
+
className: "ml-3 mr-4 ".concat(styles$Q['Pagination-button'])
|
|
16083
16095
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
16084
16096
|
onClick: function onClick() {
|
|
16085
16097
|
return onClickHandler('last');
|
|
@@ -16087,6 +16099,7 @@ var Pagination = function Pagination(props) {
|
|
|
16087
16099
|
disabled: page >= totalPages,
|
|
16088
16100
|
appearance: "transparent",
|
|
16089
16101
|
icon: "last_page",
|
|
16102
|
+
className: styles$Q['Pagination-button'],
|
|
16090
16103
|
"data-test": "DesignSystem-Pagination--LastButton"
|
|
16091
16104
|
})));
|
|
16092
16105
|
};
|
|
@@ -16098,9 +16111,9 @@ Pagination.defaultProps = {
|
|
|
16098
16111
|
pageJumpDebounceDuration: 750
|
|
16099
16112
|
};
|
|
16100
16113
|
|
|
16101
|
-
var css_248z$
|
|
16102
|
-
var styles$
|
|
16103
|
-
styleInject(css_248z$
|
|
16114
|
+
var css_248z$o = ".EditableInput-v4-0-0mc3f1 {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n}\n\n.EditableInput-actions-v4-0-07o82p {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n margin-top: var(--spacing-m);\n width: 100%;\n}\n\n.EditableInput-actions--regular-v4-0-07qhyn {\n top: var(--spacing-3);\n}\n\n.EditableInput-actions--tiny-v4-0-0bwcfu {\n top: var(--spacing-xl);\n}\n\n.EditableInput-default-v4-0-0xxw50 {\n border: var(--spacing-xs) solid transparent;\n box-sizing: border-box;\n white-space: nowrap;\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n display: flex;\n align-items: center;\n}\n\n.EditableInput-default--regular-v4-0-0sknur {\n min-width: var(--spacing-9);\n height: var(--spacing-3);\n}\n\n.EditableInput-default--tiny-v4-0-0895ba {\n min-width: var(--spacing-6);\n height: var(--spacing-xl);\n}\n\n.EditableInput-Input--tiny-v4-0-09aqzh {\n min-width: var(--spacing-6) !important;\n width: 100%;\n}\n";
|
|
16115
|
+
var styles$n = {"EditableInput":"EditableInput-v4-0-0mc3f1","EditableInput-actions":"EditableInput-actions-v4-0-07o82p","EditableInput-actions--regular":"EditableInput-actions--regular-v4-0-07qhyn","EditableInput-actions--tiny":"EditableInput-actions--tiny-v4-0-0bwcfu","EditableInput-default":"EditableInput-default-v4-0-0xxw50","EditableInput-default--regular":"EditableInput-default--regular-v4-0-0sknur","EditableInput-default--tiny":"EditableInput-default--tiny-v4-0-0895ba","EditableInput-Input--tiny":"EditableInput-Input--tiny-v4-0-09aqzh"};
|
|
16116
|
+
styleInject(css_248z$o);
|
|
16104
16117
|
|
|
16105
16118
|
var _excluded$y = ["onChange"];
|
|
16106
16119
|
var EditableInput = function EditableInput(props) {
|
|
@@ -16136,10 +16149,10 @@ var EditableInput = function EditableInput(props) {
|
|
|
16136
16149
|
React.useEffect(function () {
|
|
16137
16150
|
if (isControlled) setValue(props.value);
|
|
16138
16151
|
}, [props.value]);
|
|
16139
|
-
var EditableInputClass = classnames(_defineProperty$1({}, styles$
|
|
16140
|
-
var EditableDefaultClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16141
|
-
var InputClass = classnames(_defineProperty$1({}, styles$
|
|
16142
|
-
var ActionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16152
|
+
var EditableInputClass = classnames(_defineProperty$1({}, styles$n['EditableInput'], true), className);
|
|
16153
|
+
var EditableDefaultClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$n['EditableInput-default'], true), styles$n["EditableInput-default--".concat(size)], size));
|
|
16154
|
+
var InputClass = classnames(_defineProperty$1({}, styles$n['EditableInput-Input--tiny'], size === 'tiny'));
|
|
16155
|
+
var ActionClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$n['EditableInput-actions'], true), styles$n["EditableInput-actions--".concat(size)], size));
|
|
16143
16156
|
var setDefaultComponent = function setDefaultComponent(updatedValue) {
|
|
16144
16157
|
setInputValue(updatedValue);
|
|
16145
16158
|
setEditing(false);
|
|
@@ -16259,9 +16272,9 @@ EditableInput.defaultProps = {
|
|
|
16259
16272
|
inputOptions: {}
|
|
16260
16273
|
};
|
|
16261
16274
|
|
|
16262
|
-
var css_248z$
|
|
16263
|
-
var styles$
|
|
16264
|
-
styleInject(css_248z$
|
|
16275
|
+
var css_248z$n = ".EditableChipInput-v4-0-0g0syi {\n position: relative;\n width: 100%;\n}\n.EditableChipInput-default-v4-0-0sjquy {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-l);\n border-left: var(--spacing-xs) solid transparent;\n min-height: var(--spacing-3);\n flex-wrap: wrap;\n}\n\n.EditableChipInput-defaultWithChips-v4-0-0ijxu4 {\n display: flex;\n align-items: center;\n padding-left: var(--spacing);\n border: var(--spacing-xs) solid transparent;\n padding-top: var(--spacing-xs);\n padding-bottom: var(--spacing-xs);\n max-width: calc(100% - 28px);\n flex-wrap: wrap;\n}\n\n.EditableChipInput-defaultWithChips-v4-0-0ijxu4:hover,\n.EditableChipInput-default-v4-0-0sjquy:hover {\n background-color: var(--secondary-lightest);\n}\n\n.EditableChipInput-chipInput-v4-0-0t33zu {\n padding-left: var(--spacing);\n}\n\n.EditableChipInput-actions-v4-0-0g7p4p {\n position: absolute;\n display: flex;\n justify-content: flex-end;\n margin-top: var(--spacing-m);\n width: 100%;\n}\n";
|
|
16276
|
+
var styles$m = {"EditableChipInput":"EditableChipInput-v4-0-0g0syi","EditableChipInput-default":"EditableChipInput-default-v4-0-0sjquy","EditableChipInput-defaultWithChips":"EditableChipInput-defaultWithChips-v4-0-0ijxu4","EditableChipInput-chipInput":"EditableChipInput-chipInput-v4-0-0t33zu","EditableChipInput-actions":"EditableChipInput-actions-v4-0-0g7p4p"};
|
|
16277
|
+
styleInject(css_248z$n);
|
|
16265
16278
|
|
|
16266
16279
|
var _excluded$x = ["onChange", "chipOptions"],
|
|
16267
16280
|
_excluded2$2 = ["onClick"];
|
|
@@ -16298,10 +16311,10 @@ var EditableChipInput = function EditableChipInput(props) {
|
|
|
16298
16311
|
setValue(props.value);
|
|
16299
16312
|
}
|
|
16300
16313
|
}, [props.value]);
|
|
16301
|
-
var classes = classnames(_defineProperty$1({}, styles$
|
|
16302
|
-
var actionClass = classnames(_defineProperty$1({}, styles$
|
|
16303
|
-
var defaultClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16304
|
-
var inputClass = classnames(_defineProperty$1({}, styles$
|
|
16314
|
+
var classes = classnames(_defineProperty$1({}, styles$m['EditableChipInput'], true), className);
|
|
16315
|
+
var actionClass = classnames(_defineProperty$1({}, styles$m['EditableChipInput-actions'], true));
|
|
16316
|
+
var defaultClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$m['EditableChipInput-default'], !isWithChips), styles$m['EditableChipInput-defaultWithChips'], isWithChips));
|
|
16317
|
+
var inputClass = classnames(_defineProperty$1({}, styles$m['EditableChipInput-chipInput'], true));
|
|
16305
16318
|
var onChipInputChangeHandler = function onChipInputChangeHandler(val) {
|
|
16306
16319
|
setInputValue(val);
|
|
16307
16320
|
if (onChipInputChange) onChipInputChange(val);
|
|
@@ -16417,9 +16430,9 @@ EditableChipInput.defaultProps = {
|
|
|
16417
16430
|
chipInputOptions: {}
|
|
16418
16431
|
};
|
|
16419
16432
|
|
|
16420
|
-
var css_248z$
|
|
16421
|
-
var styles$
|
|
16422
|
-
styleInject(css_248z$
|
|
16433
|
+
var css_248z$m = ".Ring-v4-0-0kr2xu {\n transform: rotate(-90deg);\n}\n\n.Ring--small-v4-0-012g7u {\n height: var(--spacing-2);\n width: var(--spacing-2);\n}\n\n.Ring--regular-v4-0-0kogn6 {\n height: var(--spacing-3);\n width: var(--spacing-3);\n}\n\n.Ring--large-v4-0-016i3d {\n height: var(--spacing-4);\n width: var(--spacing-4);\n}\n\n.Ring-v4-0-0kr2xu Circle {\n fill: none;\n}\n\n.Ring-background-v4-0-0uoiol {\n stroke: var(--secondary-lightest);\n}\n\n.Ring-indicator-v4-0-03788b {\n stroke: var(--primary);\n transition: var(--duration--slow-01) var(--standard-expressive-curve);\n}\n";
|
|
16434
|
+
var styles$l = {"Ring":"Ring-v4-0-0kr2xu","Ring--small":"Ring--small-v4-0-012g7u","Ring--regular":"Ring--regular-v4-0-0kogn6","Ring--large":"Ring--large-v4-0-016i3d","Ring-background":"Ring-background-v4-0-0uoiol","Ring-indicator":"Ring-indicator-v4-0-03788b"};
|
|
16435
|
+
styleInject(css_248z$m);
|
|
16423
16436
|
|
|
16424
16437
|
var ProgressRing = function ProgressRing(props) {
|
|
16425
16438
|
var size = props.size,
|
|
@@ -16429,7 +16442,7 @@ var ProgressRing = function ProgressRing(props) {
|
|
|
16429
16442
|
var baseProps = extractBaseProps(props);
|
|
16430
16443
|
var radius = 20;
|
|
16431
16444
|
var circumference = 2 * Math.PI * radius;
|
|
16432
|
-
var ProgressRingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16445
|
+
var ProgressRingClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$l.Ring, true), styles$l["Ring--".concat(size)], size), className);
|
|
16433
16446
|
var svgProps = {
|
|
16434
16447
|
viewBox: '0 0 50 50'
|
|
16435
16448
|
};
|
|
@@ -16447,9 +16460,9 @@ var ProgressRing = function ProgressRing(props) {
|
|
|
16447
16460
|
}, baseProps, {
|
|
16448
16461
|
className: ProgressRingClass
|
|
16449
16462
|
}, svgProps), /*#__PURE__*/React.createElement("circle", _extends$2({
|
|
16450
|
-
className: styles$
|
|
16463
|
+
className: styles$l['Ring-background']
|
|
16451
16464
|
}, circleProps)), /*#__PURE__*/React.createElement("circle", _extends$2({
|
|
16452
|
-
className: styles$
|
|
16465
|
+
className: styles$l['Ring-indicator'],
|
|
16453
16466
|
strokeDashoffset: circumference - updatedValue / 100 * circumference
|
|
16454
16467
|
}, circleProps, {
|
|
16455
16468
|
"data-test": "DesignSystem-ProgressRing--Circle"
|
|
@@ -16461,9 +16474,9 @@ ProgressRing.defaultProps = {
|
|
|
16461
16474
|
max: 100
|
|
16462
16475
|
};
|
|
16463
16476
|
|
|
16464
|
-
var css_248z$
|
|
16465
|
-
var styles$
|
|
16466
|
-
styleInject(css_248z$
|
|
16477
|
+
var css_248z$l = ".Stepper-v4-0-0i6b9s {\n display: flex;\n}\n\n.Step-v4-0-0mv3ef {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n margin-left: var(--spacing-xs);\n margin-right: var(--spacing-xs);\n border-radius: var(--spacing-2);\n cursor: pointer;\n}\n\n.Step-v4-0-0mv3ef:hover {\n background-color: var(--secondary);\n}\n\n.Step-v4-0-0mv3ef:active {\n background-color: var(--secondary-dark);\n}\n\n.Step-v4-0-0mv3ef:focus,\n.Step-v4-0-0mv3ef:focus-visible {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n/* Completed State */\n\n.Step--completed-v4-0-04qd6p {\n color: var(--primary-dark);\n}\n\n.Step--completed-v4-0-04qd6p:hover {\n background-color: var(--secondary);\n}\n\n.Step--completed-v4-0-04qd6p:active {\n background-color: var(--secondary-dark);\n}\n\n.Step--completed-v4-0-04qd6p:focus,\n.Step--completed-v4-0-04qd6p:focus-visible {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n/* Active State */\n\n.Step--active-v4-0-0gfpq9 {\n background-color: var(--primary-lightest);\n color: var(--primary-dark);\n transition-delay: var(--duration--fast-02);\n}\n\n.Step--active-v4-0-0gfpq9:hover {\n background-color: var(--primary-lighter);\n}\n\n.Step--active-v4-0-0gfpq9:focus,\n.Step--active-v4-0-0gfpq9:focus-visible {\n background-color: var(--primary-lightest);\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n outline: none;\n}\n\n.Step--active-v4-0-0gfpq9:active {\n background-color: var(--primary-lighter);\n color: var(--primary-darker);\n}\n\n.Step--active-v4-0-0gfpq9:active .Stepper-text-v4-0-0qbzly {\n color: var(--primary-darker);\n}\n\n/* Disabled State */\n\n.Step--disabled-v4-0-058eoq {\n cursor: not-allowed;\n color: var(--inverse-lightest);\n pointer-events: none;\n}\n\n.Stepper-animate-v4-0-0crjm0 {\n transition-delay: var(--duration--fast-02);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n";
|
|
16478
|
+
var styles$k = {"Stepper":"Stepper-v4-0-0i6b9s","Step":"Step-v4-0-0mv3ef","Step--completed":"Step--completed-v4-0-04qd6p","Step--active":"Step--active-v4-0-0gfpq9","Stepper-text":"Stepper-text-v4-0-0qbzly","Step--disabled":"Step--disabled-v4-0-058eoq","Stepper-animate":"Stepper-animate-v4-0-0crjm0"};
|
|
16479
|
+
styleInject(css_248z$l);
|
|
16467
16480
|
|
|
16468
16481
|
var Step = function Step(props) {
|
|
16469
16482
|
var label = props.label,
|
|
@@ -16472,11 +16485,11 @@ var Step = function Step(props) {
|
|
|
16472
16485
|
active = props.active,
|
|
16473
16486
|
completed = props.completed,
|
|
16474
16487
|
onChange = props.onChange;
|
|
16475
|
-
var StepClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16488
|
+
var StepClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$k['Step'], true), styles$k['Stepper-animate'], true), styles$k['Step--active'], active), styles$k['Step--disabled'], disabled), styles$k['Step--completed'], completed));
|
|
16476
16489
|
var IconClass = classnames(_defineProperty$1({
|
|
16477
16490
|
'mr-3 my-4': true
|
|
16478
|
-
}, styles$
|
|
16479
|
-
var TextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16491
|
+
}, styles$k['Stepper-animate'], true));
|
|
16492
|
+
var TextClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$k['Stepper-animate'], true), styles$k['Stepper-text'], true));
|
|
16480
16493
|
var onClickHandle = function onClickHandle() {
|
|
16481
16494
|
if (disabled) return;
|
|
16482
16495
|
if (onChange) onChange(label, value);
|
|
@@ -16523,7 +16536,7 @@ var Stepper = function Stepper(props) {
|
|
|
16523
16536
|
var onChangeHandler = function onChangeHandler(index, stepLabel, stepValue) {
|
|
16524
16537
|
if (onChange) onChange(index, completed, stepLabel, stepValue);
|
|
16525
16538
|
};
|
|
16526
|
-
var StepperClass = classnames(_defineProperty$1({}, styles$
|
|
16539
|
+
var StepperClass = classnames(_defineProperty$1({}, styles$k['Stepper'], true), className);
|
|
16527
16540
|
return /*#__PURE__*/React.createElement("div", _extends$2({
|
|
16528
16541
|
"data-test": "DesignSystem-Stepper"
|
|
16529
16542
|
}, baseProps, {
|
|
@@ -16555,9 +16568,9 @@ Stepper.defaultProps = {
|
|
|
16555
16568
|
skipIndexes: []
|
|
16556
16569
|
};
|
|
16557
16570
|
|
|
16558
|
-
var css_248z$
|
|
16559
|
-
var styles$
|
|
16560
|
-
styleInject(css_248z$
|
|
16571
|
+
var css_248z$k = ".DateRangePicker-v4-0-06gioc {\n display: flex;\n}\n\n.DateRangePicker--left-v4-0-0getfm {\n flex-direction: row;\n}\n\n.DateRangePicker--right-v4-0-0bg6q7 {\n flex-direction: row-reverse;\n}\n\n.DateRangePicker-input-v4-0-0fhs9i {\n box-sizing: border-box;\n}\n\n.DateRangePicker-input--startDate-v4-0-0lpkj7 {\n padding-right: var(--spacing-m);\n}\n\n.DateRangePicker-input--endDate-v4-0-09q0e2 {\n padding-left: var(--spacing-m);\n}\n\n@media (max-width: 576px) {\n .DateRangePicker-input-v4-0-0fhs9i {\n padding: 0;\n }\n\n .DateRangePicker-input--endDate-v4-0-09q0e2 {\n padding-top: var(--spacing);\n }\n}\n";
|
|
16572
|
+
var styles$j = {"DateRangePicker":"DateRangePicker-v4-0-06gioc","DateRangePicker--left":"DateRangePicker--left-v4-0-0getfm","DateRangePicker--right":"DateRangePicker--right-v4-0-0bg6q7","DateRangePicker-input":"DateRangePicker-input-v4-0-0fhs9i","DateRangePicker-input--startDate":"DateRangePicker-input--startDate-v4-0-0lpkj7","DateRangePicker-input--endDate":"DateRangePicker-input--endDate-v4-0-09q0e2"};
|
|
16573
|
+
styleInject(css_248z$k);
|
|
16561
16574
|
|
|
16562
16575
|
var Trigger = function Trigger(props) {
|
|
16563
16576
|
var inputFormat = props.inputFormat,
|
|
@@ -16740,8 +16753,8 @@ var Trigger = function Trigger(props) {
|
|
|
16740
16753
|
var inputValidator = function inputValidator(val) {
|
|
16741
16754
|
return isValid(validators, val, inputFormat);
|
|
16742
16755
|
};
|
|
16743
|
-
var StartInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16744
|
-
var EndInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
16756
|
+
var StartInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$j['DateRangePicker-input'], true), styles$j['DateRangePicker-input--startDate'], true));
|
|
16757
|
+
var EndInputClassName = classnames(_defineProperty$1(_defineProperty$1({}, styles$j['DateRangePicker-input'], true), styles$j['DateRangePicker-input--endDate'], true));
|
|
16745
16758
|
return /*#__PURE__*/React.createElement(Row, {
|
|
16746
16759
|
"data-test": "DesignSystem-DateRangePicker-InputTrigger"
|
|
16747
16760
|
}, /*#__PURE__*/React.createElement(Column, {
|
|
@@ -17282,7 +17295,7 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
|
|
|
17282
17295
|
contentAlign = _this$props7.contentAlign,
|
|
17283
17296
|
children = _this$props7.children;
|
|
17284
17297
|
var open = this.state.open;
|
|
17285
|
-
var RangePickerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17298
|
+
var RangePickerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$j['DateRangePicker'], true), styles$j["DateRangePicker--".concat(contentAlign)], contentAlign));
|
|
17286
17299
|
if (withInput) {
|
|
17287
17300
|
var trigger = singleInput ? /*#__PURE__*/React.createElement(SingleInputTrigger, {
|
|
17288
17301
|
inputFormat: inputFormat,
|
|
@@ -17340,9 +17353,9 @@ _defineProperty$1(DateRangePicker, "defaultProps", _objectSpread2(_objectSpread2
|
|
|
17340
17353
|
}
|
|
17341
17354
|
}));
|
|
17342
17355
|
|
|
17343
|
-
var css_248z$
|
|
17344
|
-
var styles$
|
|
17345
|
-
styleInject(css_248z$
|
|
17356
|
+
var css_248z$j = "/* tabs */\n\n.TabsWrapper-v4-0-0fwz5z {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n}\n\n.TabsWrapper-header-v4-0-0logn0 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n\n.TabsWrapper-header--withSeparator-v4-0-087ous {\n border-bottom: var(--border);\n}\n\n.Tab-v4-0-0vh8ux {\n position: relative;\n display: flex;\n flex-direction: row;\n cursor: pointer;\n min-width: 40px;\n margin-bottom: calc(-1 * var(--spacing-xs));\n text-align: center;\n}\n\n.Tab--small-v4-0-077tls {\n padding: var(--spacing) var(--spacing-l) var(--spacing-l);\n}\n\n.Tab--regular-v4-0-0rg2ej {\n padding: var(--spacing-l) var(--spacing-l) var(--spacing-2);\n}\n\n.Tab-v4-0-0vh8ux:last-child {\n margin-right: 0;\n}\n\n.Tab-v4-0-0vh8ux::after {\n position: absolute;\n left: 0;\n bottom: 0;\n content: '';\n width: calc(100% - 2 * var(--spacing-l));\n height: var(--spacing-s);\n background-color: transparent;\n margin-left: var(--spacing-l);\n border-top-left-radius: var(--spacing-xs);\n border-top-right-radius: var(--spacing-xs);\n}\n\n.Tab-v4-0-0vh8ux:hover::after {\n background-color: var(--inverse-lighter);\n}\n\n.Tab-v4-0-0vh8ux:active::after {\n background-color: var(--inverse-light);\n}\n\n.Tab--active-v4-0-01z6j2::after {\n background-color: var(--primary);\n}\n\n.Tab-v4-0-0vh8ux:focus {\n outline: none;\n border-radius: 4px;\n /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.Tab--active-v4-0-01z6j2:hover .Tab-selected-v4-0-0apkwd {\n color: var(--primary-dark);\n}\n\n.Tab-selected-v4-0-0apkwd:hover::after {\n background-color: var(--primary-dark);\n}\n\n.Tab-v4-0-0vh8ux:active:focus {\n box-shadow: none;\n}\n\n.Tab--disabled-v4-0-0e6i1s {\n cursor: not-allowed;\n}\n\n.Tab--disabled-v4-0-0e6i1s:focus {\n box-shadow: none;\n}\n\n.Tab--disabled-v4-0-0e6i1s:hover::after {\n background-color: transparent;\n}\n\n.Tab-icon-v4-0-0gg1vw {\n display: flex;\n min-width: inherit;\n justify-content: space-between;\n}\n\n.Tabs-v4-0-0iky4r {\n display: flex;\n box-sizing: border-box;\n flex-direction: row;\n}\n\n.Tabs--withSeparator-v4-0-0enqtz {\n border-bottom: var(--border);\n}\n\n.Tab-pills-v4-0-0chvr6 {\n cursor: pointer;\n margin-right: var(--spacing);\n overflow: visible;\n}\n\n.Tab-pills--disabled-v4-0-0fbp9w {\n opacity: var(--opacity-10);\n cursor: not-allowed;\n}\n\n.DismissibleTab-icon--right-v4-0-0b1clf {\n padding: var(--spacing-s);\n margin-left: var(--spacing-s);\n outline: none;\n border-radius: 10px;\n}\n\n.DismissibleTab-icon--default-v4-0-0t4dh2:focus-visible {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n\n.DismissibleTab-icon--default-v4-0-0t4dh2:hover {\n background-color: var(--secondary);\n}\n\n.DismissibleTab-icon--default-v4-0-0t4dh2:active {\n background-color: var(--secondary-dark);\n}\n\n.DismissibleTab-icon--selected-v4-0-0bl0ny:focus-visible {\n outline: var(--spacing-s) solid var(--primary-shadow);\n}\n\n.DismissibleTab-icon--selected-v4-0-0bl0ny:hover {\n background-color: var(--primary-lighter);\n}\n\n.DismissibleTab-icon--selected-v4-0-0bl0ny:active {\n background-color: var(--primary-light);\n}\n\n.Tab--overflow-v4-0-0igixa {\n display: flex;\n box-sizing: border-box;\n}\n";
|
|
17357
|
+
var styles$i = {"TabsWrapper":"TabsWrapper-v4-0-0fwz5z","TabsWrapper-header":"TabsWrapper-header-v4-0-0logn0","TabsWrapper-header--withSeparator":"TabsWrapper-header--withSeparator-v4-0-087ous","Tab":"Tab-v4-0-0vh8ux","Tab--small":"Tab--small-v4-0-077tls","Tab--regular":"Tab--regular-v4-0-0rg2ej","Tab--active":"Tab--active-v4-0-01z6j2","Tab-selected":"Tab-selected-v4-0-0apkwd","Tab--disabled":"Tab--disabled-v4-0-0e6i1s","Tab-icon":"Tab-icon-v4-0-0gg1vw","Tabs":"Tabs-v4-0-0iky4r","Tabs--withSeparator":"Tabs--withSeparator-v4-0-0enqtz","Tab-pills":"Tab-pills-v4-0-0chvr6","Tab-pills--disabled":"Tab-pills--disabled-v4-0-0fbp9w","DismissibleTab-icon--right":"DismissibleTab-icon--right-v4-0-0b1clf","DismissibleTab-icon--default":"DismissibleTab-icon--default-v4-0-0t4dh2","DismissibleTab-icon--selected":"DismissibleTab-icon--selected-v4-0-0bl0ny","Tab--overflow":"Tab--overflow-v4-0-0igixa"};
|
|
17358
|
+
styleInject(css_248z$j);
|
|
17346
17359
|
|
|
17347
17360
|
var TabsWrapper = function TabsWrapper(props) {
|
|
17348
17361
|
var children = props.children,
|
|
@@ -17359,7 +17372,8 @@ var TabsWrapper = function TabsWrapper(props) {
|
|
|
17359
17372
|
React.useEffect(function () {
|
|
17360
17373
|
setActiveTab(props.active && props.active < totalTabs ? props.active : 0);
|
|
17361
17374
|
}, [props.active]);
|
|
17362
|
-
var wrapperClass = classnames(_defineProperty$1({}, styles$
|
|
17375
|
+
var wrapperClass = classnames(_defineProperty$1({}, styles$i['TabsWrapper'], true), className);
|
|
17376
|
+
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$i['TabsWrapper-header'], true), styles$11['TabsWrapper-header'], true));
|
|
17363
17377
|
var tabClickHandler = function tabClickHandler(tabIndex) {
|
|
17364
17378
|
setActiveTab(tabIndex);
|
|
17365
17379
|
if (onTabChange) onTabChange(tabIndex);
|
|
@@ -17368,7 +17382,7 @@ var TabsWrapper = function TabsWrapper(props) {
|
|
|
17368
17382
|
var _child$props = child.props,
|
|
17369
17383
|
label = _child$props.label,
|
|
17370
17384
|
disabled = _child$props.disabled;
|
|
17371
|
-
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17385
|
+
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i['Tab'], true), styles$i['Tab--disabled'], disabled), styles$i['Tab--active'], !disabled && active === index), styles$i['Tab--regular'], size === 'regular'), styles$i['Tab--small'], size === 'small'));
|
|
17372
17386
|
return (
|
|
17373
17387
|
/*#__PURE__*/
|
|
17374
17388
|
// TODO(a11y)
|
|
@@ -17388,9 +17402,9 @@ var TabsWrapper = function TabsWrapper(props) {
|
|
|
17388
17402
|
}, baseProps, {
|
|
17389
17403
|
className: wrapperClass
|
|
17390
17404
|
}), /*#__PURE__*/React.createElement("div", {
|
|
17391
|
-
className:
|
|
17405
|
+
className: headerClass
|
|
17392
17406
|
}, TabsHeader), /*#__PURE__*/React.createElement("div", {
|
|
17393
|
-
className: styles$
|
|
17407
|
+
className: styles$i['TabsWrapper-content'],
|
|
17394
17408
|
"data-test": "DesignSystem-Tabs--Content"
|
|
17395
17409
|
}, tabs[active]));
|
|
17396
17410
|
};
|
|
@@ -17444,10 +17458,10 @@ var Tabs = function Tabs(props) {
|
|
|
17444
17458
|
setActiveTab(props.activeIndex);
|
|
17445
17459
|
}
|
|
17446
17460
|
}, [props.activeIndex]);
|
|
17447
|
-
var wrapperClass = classnames(_defineProperty$1({}, styles$
|
|
17448
|
-
var headerClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17461
|
+
var wrapperClass = classnames(_defineProperty$1({}, styles$i['TabsWrapper'], true), className);
|
|
17462
|
+
var headerClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i['TabsWrapper-header'], true), styles$11['TabsWrapper-header'], true), styles$i['TabsWrapper-header--withSeparator'], withSeparator), className, headerClassName);
|
|
17449
17463
|
var getPillsClass = function getPillsClass(disabled) {
|
|
17450
|
-
return classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17464
|
+
return classnames(_defineProperty$1(_defineProperty$1({}, styles$i['Tab-pills'], true), styles$i['Tab-pills--disabled'], disabled));
|
|
17451
17465
|
};
|
|
17452
17466
|
var getActiveTabClass = function getActiveTabClass() {
|
|
17453
17467
|
var activeTab;
|
|
@@ -17463,7 +17477,7 @@ var Tabs = function Tabs(props) {
|
|
|
17463
17477
|
return activeTabClass;
|
|
17464
17478
|
};
|
|
17465
17479
|
var activeTabClass = getActiveTabClass();
|
|
17466
|
-
var tabContentClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17480
|
+
var tabContentClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$i['TabsWrapper-content'], true), "".concat(activeTabClass), activeTabClass));
|
|
17467
17481
|
var tabClickHandler = function tabClickHandler(tabIndex, isKeyboard) {
|
|
17468
17482
|
if (props.activeIndex === undefined) {
|
|
17469
17483
|
var _tabRefs$tabIndex;
|
|
@@ -17498,7 +17512,7 @@ var Tabs = function Tabs(props) {
|
|
|
17498
17512
|
appearance: activeIndex === index ? 'primary' : 'secondary'
|
|
17499
17513
|
}, count);
|
|
17500
17514
|
}
|
|
17501
|
-
var iconClass = classnames(_defineProperty$1({}, styles$
|
|
17515
|
+
var iconClass = classnames(_defineProperty$1({}, styles$i['Tab-selected'], !disabled && activeIndex === index));
|
|
17502
17516
|
if (icon) {
|
|
17503
17517
|
var iconAppearance = activeIndex === index ? 'info' : disabled ? 'disabled' : 'subtle';
|
|
17504
17518
|
return /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -17517,7 +17531,7 @@ var Tabs = function Tabs(props) {
|
|
|
17517
17531
|
label = _ref2.label;
|
|
17518
17532
|
var iconAppearance = activeIndex === index ? 'info' : disabled ? 'disabled' : 'subtle';
|
|
17519
17533
|
var dismissIconClass = function dismissIconClass(disabled) {
|
|
17520
|
-
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17534
|
+
return classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i["DismissibleTab-icon--right"], true), styles$i['DismissibleTab-icon--default'], !disabled && activeIndex !== index), styles$i["DismissibleTab-icon--selected"], !disabled && activeIndex === index), 'cursor-pointer', !disabled), styles$i['Tab-selected'], !disabled && activeIndex === index));
|
|
17521
17535
|
};
|
|
17522
17536
|
var tabInfo = {
|
|
17523
17537
|
label: label,
|
|
@@ -17550,8 +17564,8 @@ var Tabs = function Tabs(props) {
|
|
|
17550
17564
|
return label;
|
|
17551
17565
|
}
|
|
17552
17566
|
var textAppearance = activeIndex === index ? 'link' : disabled ? 'disabled' : 'subtle';
|
|
17553
|
-
var tabTextClass = classnames(_defineProperty$1(_defineProperty$1({}, 'ellipsis--noWrap', true), styles$
|
|
17554
|
-
var tabClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17567
|
+
var tabTextClass = classnames(_defineProperty$1(_defineProperty$1({}, 'ellipsis--noWrap', true), styles$i['Tab-selected'], !disabled && activeIndex === index));
|
|
17568
|
+
var tabClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i['Tab--regular'], size === 'regular'), styles$i['Tab--small'], size === 'small'), styles$i['Tab--overflow'], true));
|
|
17555
17569
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
17556
17570
|
showOnTruncation: true,
|
|
17557
17571
|
tooltip: label,
|
|
@@ -17574,7 +17588,7 @@ var Tabs = function Tabs(props) {
|
|
|
17574
17588
|
var currentTabProp = children && 'props' in tab ? tab.props : tab;
|
|
17575
17589
|
var disabled = currentTabProp.disabled,
|
|
17576
17590
|
label = currentTabProp.label;
|
|
17577
|
-
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
17591
|
+
var tabHeaderClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$i['Tab'], true), styles$i['Tab--disabled'], disabled), styles$i['Tab--active'], !disabled && activeIndex === index), styles$i['Tab-selected'], !disabled && activeIndex === index), 'align-items-center', true), styles$i['Tab--regular'], size === 'regular' && typeof label !== 'string'), styles$i['Tab--small'], size === 'small' && typeof label !== 'string'));
|
|
17578
17592
|
return (
|
|
17579
17593
|
/*#__PURE__*/
|
|
17580
17594
|
// TODO(a11y)
|
|
@@ -18368,9 +18382,9 @@ DropzoneBase.defaultProps = {
|
|
|
18368
18382
|
}
|
|
18369
18383
|
};
|
|
18370
18384
|
|
|
18371
|
-
var css_248z$
|
|
18372
|
-
var styles$
|
|
18373
|
-
styleInject(css_248z$
|
|
18385
|
+
var css_248z$i = ".Dropzone-v4-0-0pveh2 {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--white);\n border-radius: var(--spacing-m);\n width: 100%;\n background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);\n transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n.Dropzone--active-v4-0-0ze5n6 {\n background-color: var(--primary-lightest);\n background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);\n transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);\n box-sizing: border-box;\n}\n\n.Dropzone-animation-v4-0-0ujg6j {\n animation-delay: var(--duration--fast-02);\n animation-fill-mode: forwards;\n}\n\n.Dropzone-animation--default-v4-0-0izf60 {\n animation: dropzoneDefault-v4-0-0el9vn var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n.Dropzone-animation--active-v4-0-061iy8 {\n animation: dropzoneActive-v4-0-0790ur var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes dropzoneDefault-v4-0-0el9vn {\n from {\n opacity: 0;\n padding-top: 20px;\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-l);\n }\n}\n\n@keyframes dropzoneActive-v4-0-0790ur {\n from {\n opacity: 0;\n padding-top: 20px;\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing-l);\n }\n}\n\n.Dropzone-standard--default-v4-0-0cd6x9 {\n animation: dropzoneStandardDefault-v4-0-0pkmw3 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n.Dropzone-standard--active-v4-0-0k68qy {\n animation: dropzoneStandardActive-v4-0-0yzlh6 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes dropzoneStandardDefault-v4-0-0pkmw3 {\n from {\n opacity: 0;\n padding-top: var(--spacing-2);\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing);\n }\n}\n\n@keyframes dropzoneStandardActive-v4-0-0yzlh6 {\n from {\n opacity: 0;\n padding-top: var(--spacing-2);\n }\n\n to {\n opacity: 1;\n padding-top: var(--spacing);\n }\n}\n\n.Dropzone--error-v4-0-0uzwja {\n background: var(--alert-lightest);\n background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);\n}\n\n.Dropzone--disabled-v4-0-0kyxw0 {\n background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),\n linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);\n background-position: top, right, bottom, left;\n background-repeat: repeat-x, repeat-y;\n background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);\n}\n\n.Dropzone--standard-v4-0-0wtz6n {\n flex-direction: column;\n height: 196px;\n min-width: 480px;\n padding: var(--spacing) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);\n}\n\n.Dropzone--compressed-v4-0-0mjxqo {\n flex-direction: row;\n height: 124px;\n min-width: 400px;\n padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);\n}\n\n.Dropzone--tight-v4-0-0v7zgz {\n height: 124px;\n min-width: 320px;\n padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);\n}\n\n.DropzoneWrapper-v4-0-0u8onz {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.DropzoneWrapper--standard-v4-0-0eiaiv,\n.DropzoneWrapper--tight-v4-0-0emxzt {\n align-items: center;\n}\n\n.DropzoneWrapper--compressed-v4-0-0542i4 {\n align-items: start;\n}\n\n.Dropzone-icon--standard-v4-0-0aky2p {\n margin-bottom: var(--spacing-l);\n}\n\n.Dropzone-icon--compressed-v4-0-0qvap8 {\n margin-right: var(--spacing-xl);\n}\n\n.Dropzone-icon--disabled-v4-0-06n8wl {\n fill: var(--inverse-lightest);\n}\n\n.Dropzone-icon--default-v4-0-0g0v56 {\n fill: var(--inverse-lighter);\n}\n\n.Dropzone-icon--active-v4-0-0ctjuw {\n fill: var(--primary);\n}\n\n.Dropzone-icon--error-v4-0-0hcpo1 {\n fill: var(--alert);\n}\n";
|
|
18386
|
+
var styles$h = {"Dropzone":"Dropzone-v4-0-0pveh2","Dropzone--active":"Dropzone--active-v4-0-0ze5n6","Dropzone-animation":"Dropzone-animation-v4-0-0ujg6j","Dropzone-animation--default":"Dropzone-animation--default-v4-0-0izf60","dropzoneDefault":"dropzoneDefault-v4-0-0el9vn","Dropzone-animation--active":"Dropzone-animation--active-v4-0-061iy8","dropzoneActive":"dropzoneActive-v4-0-0790ur","Dropzone-standard--default":"Dropzone-standard--default-v4-0-0cd6x9","dropzoneStandardDefault":"dropzoneStandardDefault-v4-0-0pkmw3","Dropzone-standard--active":"Dropzone-standard--active-v4-0-0k68qy","dropzoneStandardActive":"dropzoneStandardActive-v4-0-0yzlh6","Dropzone--error":"Dropzone--error-v4-0-0uzwja","Dropzone--disabled":"Dropzone--disabled-v4-0-0kyxw0","Dropzone--standard":"Dropzone--standard-v4-0-0wtz6n","Dropzone--compressed":"Dropzone--compressed-v4-0-0mjxqo","Dropzone--tight":"Dropzone--tight-v4-0-0v7zgz","DropzoneWrapper":"DropzoneWrapper-v4-0-0u8onz","DropzoneWrapper--standard":"DropzoneWrapper--standard-v4-0-0eiaiv","DropzoneWrapper--tight":"DropzoneWrapper--tight-v4-0-0emxzt","DropzoneWrapper--compressed":"DropzoneWrapper--compressed-v4-0-0542i4","Dropzone-icon--standard":"Dropzone-icon--standard-v4-0-0aky2p","Dropzone-icon--compressed":"Dropzone-icon--compressed-v4-0-0qvap8","Dropzone-icon--disabled":"Dropzone-icon--disabled-v4-0-06n8wl","Dropzone-icon--default":"Dropzone-icon--default-v4-0-0g0v56","Dropzone-icon--active":"Dropzone-icon--active-v4-0-0ctjuw","Dropzone-icon--error":"Dropzone-icon--error-v4-0-0hcpo1"};
|
|
18387
|
+
styleInject(css_248z$i);
|
|
18374
18388
|
|
|
18375
18389
|
var svgCode = {
|
|
18376
18390
|
active: 'M14.6667 53.3333C13.6 53.3333 12.6667 52.9333 11.8667 52.1333C11.0667 51.3333 10.6667 50.4 10.6667 49.3333V39.8H14.6667V49.3333H49.3333V39.8H53.3333V49.3333C53.3333 50.4 52.9333 51.3333 52.1333 52.1333C51.3333 52.9333 50.4 53.3333 49.3333 53.3333H14.6667ZM30 43.1333V18.4L22 26.4L19.1333 23.5333L32 10.6666L44.8667 23.5333L42 26.4L34 18.4V43.1333H30Z',
|
|
@@ -18384,13 +18398,13 @@ var DropzoneIcon = function DropzoneIcon(props) {
|
|
|
18384
18398
|
};
|
|
18385
18399
|
return /*#__PURE__*/React__default.createElement("svg", {
|
|
18386
18400
|
style: IconStyle,
|
|
18387
|
-
className: styles$
|
|
18401
|
+
className: styles$h["Dropzone-icon--".concat(props.type)],
|
|
18388
18402
|
viewBox: "0 0 64 64",
|
|
18389
18403
|
fill: "none",
|
|
18390
18404
|
xmlns: "http://www.w3.org/2000/svg"
|
|
18391
18405
|
}, /*#__PURE__*/React__default.createElement("path", {
|
|
18392
18406
|
d: svgCode[props.name],
|
|
18393
|
-
className: props.disabled ? styles$
|
|
18407
|
+
className: props.disabled ? styles$h['Dropzone-icon--disabled'] : styles$h["Dropzone-icon--".concat(props.name)]
|
|
18394
18408
|
}));
|
|
18395
18409
|
};
|
|
18396
18410
|
|
|
@@ -18436,8 +18450,8 @@ var Dropzone = function Dropzone(props) {
|
|
|
18436
18450
|
isDragReject = _DropzoneBase.isDragReject,
|
|
18437
18451
|
fileError = _DropzoneBase.fileError;
|
|
18438
18452
|
var baseProps = extractBaseProps(props);
|
|
18439
|
-
var DropzoneClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
18440
|
-
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
18453
|
+
var DropzoneClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$h['Dropzone'], true), styles$h["Dropzone--".concat(type)], type), styles$h['Dropzone--disabled'], disabled), styles$h['Dropzone--active'], isDragActive), styles$h['Dropzone--error'], isDragReject), styles$h['Dropzone-animation'], true), styles$h['Dropzone-animation--default'], !isDragActive && type !== 'standard'), styles$h['Dropzone-animation--active'], isDragActive && !isDragReject && type !== 'standard'), styles$h['Dropzone-standard--default'], !isDragActive && type === 'standard'), styles$h['Dropzone-standard--active'], isDragActive && !isDragReject && type === 'standard'), className);
|
|
18454
|
+
var WrapperClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$h['DropzoneWrapper'], true), styles$h["DropzoneWrapper--".concat(type)], true));
|
|
18441
18455
|
var renderDropzone = function renderDropzone() {
|
|
18442
18456
|
if (isDragReject) return /*#__PURE__*/React.createElement(DropzoneError, {
|
|
18443
18457
|
type: type,
|
|
@@ -18500,9 +18514,9 @@ var FileUploaderFormat = function FileUploaderFormat(props) {
|
|
|
18500
18514
|
};
|
|
18501
18515
|
FileUploaderFormat.displayName = 'FileUploaderFormat';
|
|
18502
18516
|
|
|
18503
|
-
var css_248z$
|
|
18504
|
-
var styles$
|
|
18505
|
-
styleInject(css_248z$
|
|
18517
|
+
var css_248z$h = ".FileUploader-v4-0-0l4x69 {\n display: flex;\n flex-direction: column;\n}\n\n.FileUploaderButton-v4-0-03fmqc {\n width: -moz-fit-content;\n width: fit-content;\n position: relative;\n}\n\n.FileUploaderButton-input-v4-0-0glzun {\n height: 100%;\n width: 100%;\n top: 0;\n position: absolute;\n opacity: 0;\n font-size: 0;\n z-index: 2;\n cursor: pointer;\n}\n\n.FileUploaderItem-v4-0-0mm853 {\n width: var(--spacing-9);\n}\n\n.FileUploaderItem-text-v4-0-0apzl2 {\n width: var(--spacing-8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.FileUploaderItem-file-v4-0-0apqpw {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n}\n";
|
|
18518
|
+
var styles$g = {"FileUploader":"FileUploader-v4-0-0l4x69","FileUploaderButton":"FileUploaderButton-v4-0-03fmqc","FileUploaderButton-input":"FileUploaderButton-input-v4-0-0glzun","FileUploaderItem":"FileUploaderItem-v4-0-0mm853","FileUploaderItem-text":"FileUploaderItem-text-v4-0-0apzl2","FileUploaderItem-file":"FileUploaderItem-file-v4-0-0apqpw"};
|
|
18519
|
+
styleInject(css_248z$h);
|
|
18506
18520
|
|
|
18507
18521
|
var FileUploaderButton = function FileUploaderButton(props) {
|
|
18508
18522
|
var accept = props.accept,
|
|
@@ -18514,7 +18528,7 @@ var FileUploaderButton = function FileUploaderButton(props) {
|
|
|
18514
18528
|
id = props.id,
|
|
18515
18529
|
_onChange = props.onChange;
|
|
18516
18530
|
var baseProps = extractBaseProps(props);
|
|
18517
|
-
var FileUploaderButtonClass = classnames(_defineProperty$1({}, styles$
|
|
18531
|
+
var FileUploaderButtonClass = classnames(_defineProperty$1({}, styles$g['FileUploaderButton'], true), className);
|
|
18518
18532
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
18519
18533
|
className: FileUploaderButtonClass
|
|
18520
18534
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
@@ -18530,7 +18544,7 @@ var FileUploaderButton = function FileUploaderButton(props) {
|
|
|
18530
18544
|
disabled: disabled,
|
|
18531
18545
|
type: "file",
|
|
18532
18546
|
tabIndex: -1,
|
|
18533
|
-
className: styles$
|
|
18547
|
+
className: styles$g['FileUploaderButton-input'],
|
|
18534
18548
|
onChange: function onChange(event) {
|
|
18535
18549
|
var fileList = event.target.files ? Array.from(event.target.files) : [];
|
|
18536
18550
|
if (_onChange) _onChange(fileList, event);
|
|
@@ -18558,7 +18572,7 @@ var FileUploader = function FileUploader(props) {
|
|
|
18558
18572
|
name = props.name,
|
|
18559
18573
|
onChange = props.onChange;
|
|
18560
18574
|
var baseProps = extractBaseProps(props);
|
|
18561
|
-
var FileUploaderClass = classnames(_defineProperty$1({}, styles$
|
|
18575
|
+
var FileUploaderClass = classnames(_defineProperty$1({}, styles$g['FileUploader'], true), className);
|
|
18562
18576
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
18563
18577
|
className: FileUploaderClass,
|
|
18564
18578
|
"data-test": "DesignSystem-FileUploader"
|
|
@@ -18630,7 +18644,7 @@ var FileUploaderItem = function FileUploaderItem(props) {
|
|
|
18630
18644
|
className = props.className;
|
|
18631
18645
|
var name = file.name;
|
|
18632
18646
|
var baseProps = extractBaseProps(props);
|
|
18633
|
-
var FileItemClass = classnames(_defineProperty$1({}, styles$
|
|
18647
|
+
var FileItemClass = classnames(_defineProperty$1({}, styles$g['FileUploaderItem'], true), className);
|
|
18634
18648
|
return (
|
|
18635
18649
|
/*#__PURE__*/
|
|
18636
18650
|
// TODO(a11y)
|
|
@@ -18642,9 +18656,9 @@ var FileUploaderItem = function FileUploaderItem(props) {
|
|
|
18642
18656
|
return _onClick && _onClick(file, id);
|
|
18643
18657
|
}
|
|
18644
18658
|
}), /*#__PURE__*/React.createElement("div", {
|
|
18645
|
-
className: styles$
|
|
18659
|
+
className: styles$g['FileUploaderItem-file']
|
|
18646
18660
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
18647
|
-
className: styles$
|
|
18661
|
+
className: styles$g['FileUploaderItem-text'],
|
|
18648
18662
|
appearance: status === 'completed' ? 'default' : 'subtle'
|
|
18649
18663
|
}, name), /*#__PURE__*/React.createElement("div", {
|
|
18650
18664
|
className: "d-flex align-items-center"
|
|
@@ -18685,7 +18699,7 @@ var FileUploaderList = function FileUploaderList(props) {
|
|
|
18685
18699
|
onRetry = props.onRetry,
|
|
18686
18700
|
className = props.className;
|
|
18687
18701
|
var baseProps = extractBaseProps(props);
|
|
18688
|
-
var FileListClass = classnames(_defineProperty$1({}, styles$
|
|
18702
|
+
var FileListClass = classnames(_defineProperty$1({}, styles$g['FileUploaderList'], true), className);
|
|
18689
18703
|
if (fileList.length === 0) return null;
|
|
18690
18704
|
return /*#__PURE__*/React.createElement("div", _extends$2({}, baseProps, {
|
|
18691
18705
|
className: FileListClass,
|
|
@@ -18704,10 +18718,6 @@ FileUploaderList.defaultProps = {
|
|
|
18704
18718
|
};
|
|
18705
18719
|
FileUploaderList.displayName = 'FileUploaderList';
|
|
18706
18720
|
|
|
18707
|
-
var css_248z$j = "/** Grid **/\n\n.Grid-wrapper_v4-0-0-4_-so0y {\n display: flex;\n position: relative;\n overflow: hidden;\n height: 100%;\n}\n\n.Grid_v4-0-0-4_-9ys2 {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n height: 100%;\n overflow: hidden;\n background: var(--white);\n}\n\n.Grid--resource_v4-0-0-4_9r3cs .Grid-row--body_v4-0-0-4_8lwus:hover,\n.Grid--resource_v4-0-0-4_9r3cs .Grid-row--body_v4-0-0-4_8lwus:hover .Grid-cellGroup_v4-0-0-4_-xhpn {\n cursor: pointer;\n background: var(--secondary-lightest);\n}\n\n.Grid--resource_v4-0-0-4_9r3cs .Grid-row--body_v4-0-0-4_8lwus:active,\n.Grid--resource_v4-0-0-4_9r3cs .Grid-row--body_v4-0-0-4_8lwus:active .Grid-cellGroup_v4-0-0-4_-xhpn {\n background: var(--secondary-lighter);\n}\n\n.Grid--resource_v4-0-0-4_9r3cs .Grid-row--body_v4-0-0-4_8lwus:focus {\n box-shadow: var(--shadow-spread) rgba(213, 213, 213, 0.16);\n outline: none;\n}\n\n.Grid--pinned_v4-0-0-4_kuoow {\n position: absolute;\n height: 100%;\n z-index: 5;\n overflow-x: hidden;\n -ms-overflow-style: none;\n border-right: 3px solid var(--secondary);\n}\n\n.Grid-pinned_v4-0-0-4_rphyv::-webkit-scrollbar {\n display: none;\n}\n\n.Grid--main_v4-0-0-4_-7027 {\n flex-grow: 1;\n}\n\n.Grid--comfortable_v4-0-0-4_-fqp9 .Grid-cell--head_v4-0-0-4_ducew {\n min-height: 40px;\n}\n\n.Grid--comfortable_v4-0-0-4_-fqp9 .Grid-cell--body_v4-0-0-4_du8sg {\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n.Grid--standard_v4-0-0-4_-xxgb .Grid-cell--head_v4-0-0-4_ducew {\n min-height: 40px;\n}\n\n.Grid--standard_v4-0-0-4_-xxgb .Grid-cell--body_v4-0-0-4_du8sg {\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n.Grid--compressed_v4-0-0-4_cawjs .Grid-cell--head_v4-0-0-4_ducew {\n min-height: 40px;\n}\n\n.Grid--compressed_v4-0-0-4_cawjs .Grid-cell--body_v4-0-0-4_du8sg {\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Grid--tight_v4-0-0-4_-3ukb .Grid-cell--head_v4-0-0-4_ducew {\n min-height: var(--spacing-3);\n}\n\n.Grid--tight_v4-0-0-4_-3ukb .Grid-cell--body_v4-0-0-4_du8sg {\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Grid-head_v4-0-0-4_4dvw4 {\n display: flex;\n flex: 0 0 auto;\n overflow-x: auto;\n border-bottom: var(--border);\n}\n\n.Grid-head_v4-0-0-4_4dvw4::-webkit-scrollbar {\n display: none;\n}\n\n.Grid-headCell_v4-0-0-4_-keds {\n display: flex;\n height: 100%;\n flex-direction: row;\n align-items: center;\n}\n\n.Grid-headCell--draggable_v4-0-0-4_p9hed {\n cursor: grab;\n}\n\n.Grid-headCell--draggable_v4-0-0-4_p9hed:active {\n cursor: grabbing;\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.Grid-body_v4-0-0-4_4ds9p {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow-x: auto;\n overflow-y: overlay;\n}\n\n.Grid-rowWrapper_v4-0-0-4_-7ex9 {\n display: inline-flex;\n flex-direction: column;\n min-width: -moz-fit-content;\n min-width: fit-content;\n flex-shrink: 0;\n border-bottom: var(--border);\n}\n\n.Grid-row_v4-0-0-4_53kbg {\n display: flex;\n flex-grow: 1;\n flex-shrink: 0;\n box-sizing: border-box;\n background: var(--white);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n transition-delay: var(--duration--fast-01);\n}\n\n.Grid-row--body_v4-0-0-4_8lwus {\n border-color: var(--secondary-light);\n}\n\n.Grid-row--selected_v4-0-0-4_gbmvh,\n.Grid-row--selected_v4-0-0-4_gbmvh .Grid-cellGroup_v4-0-0-4_-xhpn {\n background: rgba(220, 236, 249, 0.48);\n transition: var(--duration--fast-02) var(--standard-productive-curve);\n}\n\n.Grid-row--selected_v4-0-0-4_gbmvh:hover,\n.Grid-row--selected_v4-0-0-4_gbmvh .Grid-cellGroup_v4-0-0-4_-xhpn:hover {\n background: rgba(151, 197, 240, 0.48) !important;\n}\n\n.Grid-row--selected_v4-0-0-4_gbmvh:active,\n.Grid-row--selected_v4-0-0-4_gbmvh .Grid-cellGroup_v4-0-0-4_-xhpn:active {\n background: var(--primary-lighter) !important;\n}\n\n.Grid-row--selected_v4-0-0-4_gbmvh:focus,\n.Grid-row--selected_v4-0-0-4_gbmvh .Grid-cellGroup_v4-0-0-4_-xhpn:focus {\n outline: none;\n box-shadow: var(--shadow-spread) rgba(0, 112, 221, 0.16);\n}\n\n.Grid-rowWrapper_v4-0-0-4_-7ex9:last-child .Grid-row--body_v4-0-0-4_8lwus {\n border-bottom: 0;\n}\n\n.GridBody-padding_v4-0-0-4_-af35 {\n flex-shrink: 0;\n}\n\n.Grid-nestedRow_v4-0-0-4_ssvkb {\n width: 100%;\n overflow: hidden;\n}\n\n.Grid-nestedRowTrigger_v4-0-0-4_vfz68 {\n margin-right: var(--spacing-l);\n cursor: pointer;\n}\n\n.Grid-nestedRow_v4-0-0-4_ssvkb .Grid-rowWrapper_v4-0-0-4_-7ex9 {\n border-bottom: 0;\n}\n\n.Grid-nestedRow_v4-0-0-4_ssvkb .Grid-cell_v4-0-0-4_4dspg:first-child {\n padding-left: calc(var(--spacing-3) + var(--spacing));\n}\n\n.Grid-nestedRowPlaceholder_v4-0-0-4_-vgqg {\n width: var(--spacing-xl);\n margin-right: var(--spacing-l);\n}\n\n.Grid-cell_v4-0-0-4_4dspg {\n position: relative;\n box-sizing: border-box;\n padding-left: var(--spacing-l);\n padding-right: var(--spacing-l);\n}\n\n.Grid-cell--body_v4-0-0-4_du8sg {\n padding-right: var(--spacing-l);\n}\n\n.Grid-cell--head_v4-0-0-4_ducew {\n overflow: hidden;\n padding-right: var(--spacing-m);\n}\n\n.Grid-cell--dragged_v4-0-0-4_77uia {\n z-index: 3;\n opacity: 1;\n background-color: inherit;\n color: inherit;\n}\n\n.Grid-cell--separator_v4-0-0-4_958v3 {\n border-left: var(--border);\n border-color: var(--secondary-light);\n}\n\n.Grid-cell--selected_v4-0-0-4_-qqz7 {\n background: var(--primary-lightest);\n}\n\n.Grid-cell--nestedRow_v4-0-0-4_-1nlm {\n padding-left: var(--spacing);\n}\n\n.Grid-cell--head_v4-0-0-4_ducew.Grid-cell_v4-0-0-4_4dspg:first-of-type {\n border-left: none;\n}\n\n/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {\n border-right: var(--border);\n} */\n\n.Grid-row--disabled_v4-0-0-4_13ijs {\n opacity: var(--opacity-10);\n pointer-events: none;\n}\n\n.Grid-cell--head_v4-0-0-4_ducew.Grid-cell--selected_v4-0-0-4_-qqz7 {\n background: var(--primary-light);\n}\n\n.Grid-cell--checkbox_v4-0-0-4_-l1dt {\n width: unset;\n min-width: unset;\n display: flex;\n align-items: center;\n z-index: 1;\n padding-right: 0 !important;\n overflow: visible !important;\n}\n\n.Grid-sortingIcons_v4-0-0-4_-ku5v {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-m);\n}\n\n.Grid-cellReorder_v4-0-0-4_4eebj {\n display: flex;\n align-items: center;\n cursor: grab;\n}\n\n.Grid-cellReorder_v4-0-0-4_4eebj:active {\n cursor: grabbing;\n}\n\n.Grid-cellContent_v4-0-0-4_21pye {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n box-sizing: border-box;\n z-index: inherit;\n}\n\n.Grid-cell--head_v4-0-0-4_ducew .Grid-cellContent_v4-0-0-4_21pye {\n overflow: hidden;\n}\n\n.Grid-cellResize_v4-0-0-4_w8014 {\n position: absolute;\n right: 0;\n width: var(--spacing-m);\n cursor: ew-resize;\n height: 100%;\n}\n\n.Grid-cellSortIcon_v4-0-0-4_tb87q {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.Grid-cellSortIcon_v4-0-0-4_tb87q:hover {\n background: var(--secondary);\n}\n\n.Grid-cellResize_v4-0-0-4_w8014:hover {\n background: var(--primary);\n}\n\n.Grid-reorderHighlighter_v4-0-0-4_-dqe0 {\n position: absolute;\n height: 100%;\n border: 3px solid var(--primary-light);\n z-index: 10;\n}\n\n.Grid-cellGroup_v4-0-0-4_-xhpn {\n display: flex;\n box-sizing: border-box;\n background: var(--white);\n}\n\n.Grid-cellGroup--pinned_v4-0-0-4_-kca8 {\n position: sticky;\n z-index: 4;\n}\n\n.Grid-cellGroup--pinned-left_v4-0-0-4_5uowf {\n left: 0;\n border-style: inset;\n border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));\n border-right-width: 4px;\n -o-border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to right,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n}\n\n.Grid-cellGroup--pinned-right_v4-0-0-4_-vkiw {\n right: 0;\n border-style: inset;\n border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));\n border-left-width: 4px;\n -o-border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n border-image: linear-gradient(\n to left,\n var(--secondary-light),\n var(--secondary-light) 25%,\n rgba(213, 213, 213, 0.1) 25%,\n rgba(213, 213, 213, 0.1)\n )\n 1 100%;\n}\n\n.Grid_v4-0-0-4_-9ys2 .Checkbox-wrapper_v4-0-0-4_-z3hh {\n margin-right: 0;\n}\n\n/** Grid Cell **/\n\n.GridCell_v4-0-0-4_5hcb5 {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n}\n\n.GridCell--align-left_v4-0-0-4_-73dm {\n /* flex-direction: row; */\n justify-content: flex-start;\n text-align: left;\n}\n\n.GridCell--align-right_v4-0-0-4_-6q0l {\n /* flex-direction: row-reverse; */\n justify-content: flex-end;\n text-align: right;\n}\n\n.GridCell--align-center_v4-0-0-4_-2gx1 {\n justify-content: center;\n text-align: center;\n}\n\n.GridCell--default_v4-0-0-4_-g8lg {\n}\n\n.GridCell--metaList_v4-0-0-4_-oam5 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n overflow: hidden;\n}\n\n.GridCell--statusHint_v4-0-0-4_f0n1h .StatusHint_v4-0-0-4_4n9wd {\n overflow: hidden;\n}\n\n.GridCell--statusHint_v4-0-0-4_f0n1h .StatusHint_v4-0-0-4_4n9wd .Text_v4-0-0-4_-9yk0 {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.GridCell--avatar_v4-0-0-4_nimzk .Avatar_v4-0-0-4_8yvt5 {\n margin: 0;\n}\n\n.GridCell-metaListWrapper_v4-0-0-4_-86gf {\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n overflow: hidden;\n}\n\n.GridCell-metaList_v4-0-0-4_3bdfy {\n display: flex;\n}\n\n.GridCell-metaList_v4-0-0-4_3bdfy .Text_v4-0-0-4_-9yk0 {\n display: flex;\n align-items: center;\n}\n\n.GridCell-metaList_v4-0-0-4_3bdfy .Text_v4-0-0-4_-9yk0::before {\n content: '';\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--spacing-m);\n height: var(--spacing-m);\n border-radius: 50%;\n background: var(--secondary);\n margin: 0 var(--spacing);\n}\n\n.GridCell-metaList_v4-0-0-4_3bdfy .Text_v4-0-0-4_-9yk0:first-child::before {\n display: none;\n}\n\n.GridCell--metaList_v4-0-0-4_-oam5 ul li:first-child {\n margin-left: 0;\n}\n\n/* .GridCell-image {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing);\n}\n\n.Image {\n z-index: 0;\n height: 100%;\n width: 100%;\n} */\n\n/** Header **/\n\n/** Table-header **/\n\n.Header_v4-0-0-4_c0uc2 {\n background: var(--white);\n padding: var(--spacing-l);\n border-bottom: var(--border);\n}\n\n.Header-content_v4-0-0-4_-qdgi {\n display: flex;\n}\n\n.Header-content--bottom_v4-0-0-4_paj5e {\n align-items: center;\n justify-content: space-between;\n}\n\n.Header-search_v4-0-0-4_-pigm {\n width: var(--spacing-9);\n margin-bottom: var(--spacing-2);\n}\n\n.Header-label_v4-0-0-4_-nuf7 {\n display: flex;\n flex-grow: 1;\n align-items: center;\n}\n\n.Header-label_v4-0-0-4_-nuf7 .Checkbox_v4-0-0-4_kbg0w {\n margin-right: var(--spacing);\n}\n\n.Header-dropdown_v4-0-0-4_-y0g2 {\n display: flex;\n margin-left: var(--spacing-m);\n margin-bottom: var(--spacing-2);\n}\n\n.Header-dropdown_v4-0-0-4_-y0g2 .Dropdown_v4-0-0-4_-c8th {\n margin: 0 var(--spacing-m);\n}\n\n.Header-draggableDropdown_v4-0-0-4_5xpgz .Dropdown-wrapper_v4-0-0-4_1rdhn {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.Header-filters_v4-0-0-4_esd0w {\n display: flex;\n}\n\n.Header-sorting_v4-0-0-4_-4k8v {\n display: flex;\n}\n\n.Header-actions_v4-0-0-4_9pfgl {\n margin-bottom: var(--spacing-2);\n}\n\n.Header-global-actions_v4-0-0-4_3huep {\n justify-content: flex-end;\n margin-left: auto;\n margin-bottom: var(--spacing-2);\n}\n";
|
|
18708
|
-
var gridStyles = {"Grid-wrapper":"Grid-wrapper_v4-0-0-4_-so0y","Grid":"Grid_v4-0-0-4_-9ys2","Grid--resource":"Grid--resource_v4-0-0-4_9r3cs","Grid-row--body":"Grid-row--body_v4-0-0-4_8lwus","Grid-cellGroup":"Grid-cellGroup_v4-0-0-4_-xhpn","Grid--pinned":"Grid--pinned_v4-0-0-4_kuoow","Grid-pinned":"Grid-pinned_v4-0-0-4_rphyv","Grid--main":"Grid--main_v4-0-0-4_-7027","Grid--comfortable":"Grid--comfortable_v4-0-0-4_-fqp9","Grid-cell--head":"Grid-cell--head_v4-0-0-4_ducew","Grid-cell--body":"Grid-cell--body_v4-0-0-4_du8sg","Grid--standard":"Grid--standard_v4-0-0-4_-xxgb","Grid--compressed":"Grid--compressed_v4-0-0-4_cawjs","Grid--tight":"Grid--tight_v4-0-0-4_-3ukb","Grid-head":"Grid-head_v4-0-0-4_4dvw4","Grid-headCell":"Grid-headCell_v4-0-0-4_-keds","Grid-headCell--draggable":"Grid-headCell--draggable_v4-0-0-4_p9hed","Grid-body":"Grid-body_v4-0-0-4_4ds9p","Grid-rowWrapper":"Grid-rowWrapper_v4-0-0-4_-7ex9","Grid-row":"Grid-row_v4-0-0-4_53kbg","Grid-row--selected":"Grid-row--selected_v4-0-0-4_gbmvh","GridBody-padding":"GridBody-padding_v4-0-0-4_-af35","Grid-nestedRow":"Grid-nestedRow_v4-0-0-4_ssvkb","Grid-nestedRowTrigger":"Grid-nestedRowTrigger_v4-0-0-4_vfz68","Grid-cell":"Grid-cell_v4-0-0-4_4dspg","Grid-nestedRowPlaceholder":"Grid-nestedRowPlaceholder_v4-0-0-4_-vgqg","Grid-cell--dragged":"Grid-cell--dragged_v4-0-0-4_77uia","Grid-cell--separator":"Grid-cell--separator_v4-0-0-4_958v3","Grid-cell--selected":"Grid-cell--selected_v4-0-0-4_-qqz7","Grid-cell--nestedRow":"Grid-cell--nestedRow_v4-0-0-4_-1nlm","Grid-row--disabled":"Grid-row--disabled_v4-0-0-4_13ijs","Grid-cell--checkbox":"Grid-cell--checkbox_v4-0-0-4_-l1dt","Grid-sortingIcons":"Grid-sortingIcons_v4-0-0-4_-ku5v","Grid-cellReorder":"Grid-cellReorder_v4-0-0-4_4eebj","Grid-cellContent":"Grid-cellContent_v4-0-0-4_21pye","Grid-cellResize":"Grid-cellResize_v4-0-0-4_w8014","Grid-cellSortIcon":"Grid-cellSortIcon_v4-0-0-4_tb87q","Grid-reorderHighlighter":"Grid-reorderHighlighter_v4-0-0-4_-dqe0","Grid-cellGroup--pinned":"Grid-cellGroup--pinned_v4-0-0-4_-kca8","Grid-cellGroup--pinned-left":"Grid-cellGroup--pinned-left_v4-0-0-4_5uowf","Grid-cellGroup--pinned-right":"Grid-cellGroup--pinned-right_v4-0-0-4_-vkiw","Checkbox-wrapper":"Checkbox-wrapper_v4-0-0-4_-z3hh","GridCell":"GridCell_v4-0-0-4_5hcb5","GridCell--align-left":"GridCell--align-left_v4-0-0-4_-73dm","GridCell--align-right":"GridCell--align-right_v4-0-0-4_-6q0l","GridCell--align-center":"GridCell--align-center_v4-0-0-4_-2gx1","GridCell--default":"GridCell--default_v4-0-0-4_-g8lg","GridCell--metaList":"GridCell--metaList_v4-0-0-4_-oam5","GridCell--statusHint":"GridCell--statusHint_v4-0-0-4_f0n1h","StatusHint":"StatusHint_v4-0-0-4_4n9wd","Text":"Text_v4-0-0-4_-9yk0","GridCell--avatar":"GridCell--avatar_v4-0-0-4_nimzk","Avatar":"Avatar_v4-0-0-4_8yvt5","GridCell-metaListWrapper":"GridCell-metaListWrapper_v4-0-0-4_-86gf","GridCell-metaList":"GridCell-metaList_v4-0-0-4_3bdfy","Header":"Header_v4-0-0-4_c0uc2","Header-content":"Header-content_v4-0-0-4_-qdgi","Header-content--bottom":"Header-content--bottom_v4-0-0-4_paj5e","Header-search":"Header-search_v4-0-0-4_-pigm","Header-label":"Header-label_v4-0-0-4_-nuf7","Checkbox":"Checkbox_v4-0-0-4_kbg0w","Header-dropdown":"Header-dropdown_v4-0-0-4_-y0g2","Dropdown":"Dropdown_v4-0-0-4_-c8th","Header-draggableDropdown":"Header-draggableDropdown_v4-0-0-4_5xpgz","Dropdown-wrapper":"Dropdown-wrapper_v4-0-0-4_1rdhn","Header-filters":"Header-filters_v4-0-0-4_esd0w","Header-sorting":"Header-sorting_v4-0-0-4_-4k8v","Header-actions":"Header-actions_v4-0-0-4_9pfgl","Header-global-actions":"Header-global-actions_v4-0-0-4_3huep"};
|
|
18709
|
-
styleInject(css_248z$j);
|
|
18710
|
-
|
|
18711
18721
|
var resizeCol = function resizeCol(_ref, name, el) {
|
|
18712
18722
|
var updateColumnSchema = _ref.updateColumnSchema;
|
|
18713
18723
|
var elX = el === null || el === void 0 ? void 0 : el.getBoundingClientRect().x;
|
|
@@ -19881,7 +19891,7 @@ var renderMetaList = function renderMetaList(props) {
|
|
|
19881
19891
|
}, metaList.map(function (list, index) {
|
|
19882
19892
|
return /*#__PURE__*/React.createElement(Text, {
|
|
19883
19893
|
key: index,
|
|
19884
|
-
className: "ellipsis",
|
|
19894
|
+
className: "ellipsis d-flex align-items-center",
|
|
19885
19895
|
appearance: 'subtle',
|
|
19886
19896
|
size: "small"
|
|
19887
19897
|
}, list);
|
|
@@ -19896,14 +19906,14 @@ var renderAvatar = function renderAvatar(props) {
|
|
|
19896
19906
|
title = cellData.title;
|
|
19897
19907
|
if (firstName || lastName) {
|
|
19898
19908
|
return /*#__PURE__*/React.createElement(Avatar, {
|
|
19899
|
-
className: "mr-5",
|
|
19909
|
+
className: "m-0 mr-5",
|
|
19900
19910
|
firstName: firstName,
|
|
19901
19911
|
lastName: lastName
|
|
19902
19912
|
});
|
|
19903
19913
|
}
|
|
19904
19914
|
if (title) {
|
|
19905
19915
|
return /*#__PURE__*/React.createElement(Avatar, {
|
|
19906
|
-
className: "mr-5"
|
|
19916
|
+
className: "m-0 mr-5"
|
|
19907
19917
|
}, title);
|
|
19908
19918
|
}
|
|
19909
19919
|
return null;
|
|
@@ -19926,7 +19936,8 @@ var renderStatusHint = function renderStatusHint(props) {
|
|
|
19926
19936
|
var children = cellData.title;
|
|
19927
19937
|
if (children) {
|
|
19928
19938
|
return /*#__PURE__*/React.createElement(StatusHint, {
|
|
19929
|
-
appearance: statusAppearance
|
|
19939
|
+
appearance: statusAppearance,
|
|
19940
|
+
className: "overflow-hidden"
|
|
19930
19941
|
}, children);
|
|
19931
19942
|
}
|
|
19932
19943
|
return null;
|
|
@@ -20131,7 +20142,7 @@ var DraggableDropdown = function DraggableDropdown(props) {
|
|
|
20131
20142
|
},
|
|
20132
20143
|
className: gridStyles['Header-draggableDropdown']
|
|
20133
20144
|
}, /*#__PURE__*/React.createElement("div", {
|
|
20134
|
-
className:
|
|
20145
|
+
className: gridStyles['Dropdown-wrapper']
|
|
20135
20146
|
}, /*#__PURE__*/React.createElement("div", {
|
|
20136
20147
|
className: "OptionWrapper"
|
|
20137
20148
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
@@ -20190,9 +20201,9 @@ var DraggableDropdown = function DraggableDropdown(props) {
|
|
|
20190
20201
|
}, "Apply"))));
|
|
20191
20202
|
};
|
|
20192
20203
|
|
|
20193
|
-
var css_248z$
|
|
20194
|
-
var tableStyles = {"Table":"
|
|
20195
|
-
styleInject(css_248z$
|
|
20204
|
+
var css_248z$g = ".Table-v4-0-0ap4ud {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n height: 100%;\n width: 100%;\n z-index: 1;\n}\n\n.Table-grid-v4-0-09lgm0 {\n height: 100%;\n overflow: hidden;\n z-index: 1;\n}\n\n.Table-pagination-v4-0-0kxwm6 {\n display: flex;\n justify-content: center;\n background: var(--white);\n padding: var(--spacing) 0;\n border-top: var(--border);\n}\n\n.Table-Header--Divider-v4-0-0jl2es {\n height: var(--spacing-xl);\n}\n\n.Table-Header-Label--hide-v4-0-0f77u1 {\n animation: fadeOut-v4-0-01dbim var(--duration--fast-02) var(--exit-productive-curve);\n animation-fill-mode: forwards;\n}\n\n.Table-Header-Label--show-v4-0-0f70tn {\n animation: fadeIn-v4-0-0w18f8 var(--duration--moderate-01) var(--entrance-productive-curve);\n animation-fill-mode: forwards;\n}\n";
|
|
20205
|
+
var tableStyles = {"Table":"Table-v4-0-0ap4ud","Table-grid":"Table-grid-v4-0-09lgm0","Table-pagination":"Table-pagination-v4-0-0kxwm6","Table-Header--Divider":"Table-Header--Divider-v4-0-0jl2es","Table-Header-Label--hide":"Table-Header-Label--hide-v4-0-0f77u1","fadeOut":"fadeOut-v4-0-01dbim","Table-Header-Label--show":"Table-Header-Label--show-v4-0-0f70tn","fadeIn":"fadeIn-v4-0-0w18f8"};
|
|
20206
|
+
styleInject(css_248z$g);
|
|
20196
20207
|
|
|
20197
20208
|
var Header = function Header(props) {
|
|
20198
20209
|
var _selectedRowsRef$curr;
|
|
@@ -20383,6 +20394,7 @@ var Header = function Header(props) {
|
|
|
20383
20394
|
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
20384
20395
|
key: name,
|
|
20385
20396
|
withCheckbox: true,
|
|
20397
|
+
className: "my-0 mx-3",
|
|
20386
20398
|
showApplyButton: true,
|
|
20387
20399
|
inlineLabel: displayName,
|
|
20388
20400
|
icon: 'filter_list',
|
|
@@ -20399,7 +20411,9 @@ var Header = function Header(props) {
|
|
|
20399
20411
|
className: headerClasses
|
|
20400
20412
|
}, /*#__PURE__*/React.createElement("div", {
|
|
20401
20413
|
className: gridStyles['Header-label']
|
|
20402
|
-
}, !showHead && withCheckbox && !loading && /*#__PURE__*/React.createElement(Checkbox, _extends$2({
|
|
20414
|
+
}, !showHead && withCheckbox && !loading && /*#__PURE__*/React.createElement(Checkbox, _extends$2({
|
|
20415
|
+
className: "mr-4"
|
|
20416
|
+
}, selectAll, {
|
|
20403
20417
|
onChange: function onChange(event) {
|
|
20404
20418
|
if (onSelectAll) onSelectAll(event.target.checked);
|
|
20405
20419
|
}
|
|
@@ -21016,9 +21030,9 @@ var List = function List(props) {
|
|
|
21016
21030
|
};
|
|
21017
21031
|
List.defaultProps = defaultProps;
|
|
21018
21032
|
|
|
21019
|
-
var css_248z$
|
|
21020
|
-
var styles$
|
|
21021
|
-
styleInject(css_248z$
|
|
21033
|
+
var css_248z$f = "/* Navigation */\n\n.Navigation-v4-0-07gji4 {\n display: flex;\n}\n\n.Navigation--horizontal-v4-0-0u50ix {\n flex-grow: 1;\n justify-content: center;\n}\n\n.Navigation--vertical-v4-0-0a4xrz {\n flex-direction: column;\n height: 100%;\n width: var(--spacing-9);\n}\n\n.Navigation--collapsed-v4-0-0czv26 {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.Navigation-body-v4-0-0brd6w {\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n padding-right: var(--spacing);\n}\n\n.Navigation-menu-v4-0-0brk0k {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.Navigation-menu--horizontal-v4-0-0pi999 {\n height: var(--spacing-3);\n padding-right: var(--spacing-l);\n padding-left: var(--spacing-l);\n border-radius: var(--spacing-2);\n margin: 0 var(--spacing-xs);\n}\n\n.Navigation-menu--disabled-v4-0-0jopb9 {\n pointer-events: none;\n}\n\n.Navigation-menu-v4-0-0brk0k:hover {\n background-color: var(--secondary-light);\n}\n\n.Navigation-menu--active-v4-0-0gwm35,\n.Navigation-menu--active-v4-0-0gwm35:hover {\n background: var(--primary-lightest);\n}\n\n.Navigation-menu--vertical-v4-0-0e1si4 {\n /* padding-top: var(--spacing-m); */\n /* padding-bottom: var(--spacing-m); */\n padding-left: var(--spacing);\n margin-top: var(--spacing-m);\n margin-bottom: var(--spacing-m);\n /* margin-right: var(--spacing); */\n border-radius: 0px var(--spacing-2) var(--spacing-2) 0px;\n}\n\n.Navigation-menu--rounded-v4-0-0f9ces {\n border-radius: var(--spacing-2);\n}\n\n.Navigation-menu--subMenu-v4-0-0wgzah {\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n padding-left: 40px;\n margin-top: 0;\n}\n\n.Navigation-menuIcon-v4-0-0xybjt {\n padding: 8px;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.Navigation-menuIcon--active-v4-0-0a3d8k {\n background: var(--primary-lightest);\n}\n\n.Navigation-menuLabel-v4-0-0cyclj {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n}\n\n.Navigation-menu-v4-0-0brk0k .Text-v4-0-09kg1r {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.Navigation-horizontalPills-v4-0-0f2cev {\n margin-right: var(--spacing-m);\n}\n\n.Navigation-horizontalPills--disabled-v4-0-09exzz {\n opacity: var(--opacity-10);\n}\n\n.Navigation-footer-v4-0-09ilnd {\n display: flex;\n align-items: center;\n padding: var(--spacing-m) var(--spacing);\n}\n\n.Navigation-footer--border-v4-0-0830jv {\n border-top: var(--border);\n}\n\n.Navigation--collapsed-v4-0-0czv26 .Navigation-menuIcon--footer-v4-0-0cn3wh {\n transform: rotate(180deg);\n}\n";
|
|
21034
|
+
var styles$f = {"Navigation":"Navigation-v4-0-07gji4","Navigation--horizontal":"Navigation--horizontal-v4-0-0u50ix","Navigation--vertical":"Navigation--vertical-v4-0-0a4xrz","Navigation--collapsed":"Navigation--collapsed-v4-0-0czv26","Navigation-body":"Navigation-body-v4-0-0brd6w","Navigation-menu":"Navigation-menu-v4-0-0brk0k","Navigation-menu--horizontal":"Navigation-menu--horizontal-v4-0-0pi999","Navigation-menu--disabled":"Navigation-menu--disabled-v4-0-0jopb9","Navigation-menu--active":"Navigation-menu--active-v4-0-0gwm35","Navigation-menu--vertical":"Navigation-menu--vertical-v4-0-0e1si4","Navigation-menu--rounded":"Navigation-menu--rounded-v4-0-0f9ces","Navigation-menu--subMenu":"Navigation-menu--subMenu-v4-0-0wgzah","Navigation-menuIcon":"Navigation-menuIcon-v4-0-0xybjt","Navigation-menuIcon--active":"Navigation-menuIcon--active-v4-0-0a3d8k","Navigation-menuLabel":"Navigation-menuLabel-v4-0-0cyclj","Text":"Text-v4-0-09kg1r","Navigation-horizontalPills":"Navigation-horizontalPills-v4-0-0f2cev","Navigation-horizontalPills--disabled":"Navigation-horizontalPills--disabled-v4-0-09exzz","Navigation-footer":"Navigation-footer-v4-0-09ilnd","Navigation-footer--border":"Navigation-footer--border-v4-0-0830jv","Navigation-menuIcon--footer":"Navigation-menuIcon--footer-v4-0-0cn3wh"};
|
|
21035
|
+
styleInject(css_248z$f);
|
|
21022
21036
|
|
|
21023
21037
|
var useState$1 = React.useState;
|
|
21024
21038
|
var VerticalNavigation = function VerticalNavigation(props) {
|
|
@@ -21076,8 +21090,8 @@ var VerticalNavigation = function VerticalNavigation(props) {
|
|
|
21076
21090
|
var list = menus.map(function (menu, index) {
|
|
21077
21091
|
var activeMenu = expanded && !menuState[menu.name] && isMenuActive(menus, menu, active);
|
|
21078
21092
|
var activeMenuIcon = !expanded && isMenuActive(menus, menu, active) || activeMenu;
|
|
21079
|
-
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21080
|
-
var menuIconClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21093
|
+
var menuClasses = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$f['Navigation-menu'], true), styles$f['Navigation-menu--vertical'], true), styles$f['Navigation-menu--active'], activeMenu), styles$f['Navigation-menu--rounded'], expanded && rounded));
|
|
21094
|
+
var menuIconClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$f['Navigation-menuIcon'], true), styles$f['Navigation-menuIcon--active'], activeMenuIcon));
|
|
21081
21095
|
return /*#__PURE__*/React.createElement("div", {
|
|
21082
21096
|
key: index,
|
|
21083
21097
|
"data-test": "DesignSystem-Navigation-VerticalNavigation--menuWrapper"
|
|
@@ -21093,19 +21107,20 @@ var VerticalNavigation = function VerticalNavigation(props) {
|
|
|
21093
21107
|
name: menu.icon,
|
|
21094
21108
|
appearance: getIconAppearance(activeMenuIcon, menu.disabled)
|
|
21095
21109
|
}), expanded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
21096
|
-
className: styles$
|
|
21110
|
+
className: styles$f['Navigation-menuLabel']
|
|
21097
21111
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
21098
|
-
appearance: getTextAppearance(activeMenu, menu.disabled)
|
|
21112
|
+
appearance: getTextAppearance(activeMenu, menu.disabled),
|
|
21113
|
+
className: "ellipsis--noWrap"
|
|
21099
21114
|
}, menu.label)), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React.createElement(Icon, {
|
|
21100
21115
|
"data-test": "DesignSystem-Navigation-VerticalNavigation--expandedSubMenuIcon",
|
|
21101
21116
|
className: "mx-4",
|
|
21102
21117
|
name: menuState[menu.name] ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
|
|
21103
21118
|
appearance: "subtle"
|
|
21104
21119
|
}))), /*#__PURE__*/React.createElement("div", {
|
|
21105
|
-
className: styles$
|
|
21120
|
+
className: styles$f['Navigation-subMenu']
|
|
21106
21121
|
}, menuState[menu.name] && menu.subMenu && expanded && menu.subMenu.map(function (subMenu, ind) {
|
|
21107
21122
|
var isActive = isMenuActive(menus, subMenu, active);
|
|
21108
|
-
var subMenuClasses = classnames(menuClasses, _defineProperty$1(_defineProperty$1({}, styles$
|
|
21123
|
+
var subMenuClasses = classnames(menuClasses, _defineProperty$1(_defineProperty$1({}, styles$f['Navigation-menu--subMenu'], true), styles$f['Navigation-menu--active'], isActive));
|
|
21109
21124
|
return (
|
|
21110
21125
|
/*#__PURE__*/
|
|
21111
21126
|
// TODO(a11y)
|
|
@@ -21118,15 +21133,16 @@ var VerticalNavigation = function VerticalNavigation(props) {
|
|
|
21118
21133
|
return onClickHandler(subMenu);
|
|
21119
21134
|
}
|
|
21120
21135
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
21121
|
-
appearance: getTextAppearance(isActive, subMenu.disabled)
|
|
21136
|
+
appearance: getTextAppearance(isActive, subMenu.disabled),
|
|
21137
|
+
className: "ellipsis--noWrap"
|
|
21122
21138
|
}, subMenu.label))
|
|
21123
21139
|
);
|
|
21124
21140
|
})));
|
|
21125
21141
|
});
|
|
21126
|
-
var footerClasses = classnames(styles$
|
|
21127
|
-
var IconClassName = classnames(styles$
|
|
21142
|
+
var footerClasses = classnames(styles$f['Navigation-footer'], styles$f['Navigation-footer--border']);
|
|
21143
|
+
var IconClassName = classnames(styles$f['Navigation-menuIcon'], styles$f['Navigation-menuIcon--footer']);
|
|
21128
21144
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
21129
|
-
className: styles$
|
|
21145
|
+
className: styles$f['Navigation-body']
|
|
21130
21146
|
}, list), footer && /*#__PURE__*/React.createElement("div", {
|
|
21131
21147
|
className: footerClasses
|
|
21132
21148
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -21161,7 +21177,7 @@ var Navigation = function Navigation(props) {
|
|
|
21161
21177
|
autoCollapse = props.autoCollapse,
|
|
21162
21178
|
className = props.className;
|
|
21163
21179
|
var baseProps = extractBaseProps(props);
|
|
21164
|
-
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21180
|
+
var classes = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$f['Navigation'], true), styles$f["Navigation--".concat(type)], type), 'justify-content-center', type === 'horizontal' && align === 'center'), 'justify-content-start', type === 'horizontal' && align === 'left'), styles$f['Navigation--collapsed'], !expanded), className);
|
|
21165
21181
|
var renderNavigation = function renderNavigation() {
|
|
21166
21182
|
return type === 'horizontal' ? /*#__PURE__*/React.createElement(HorizontalNav, {
|
|
21167
21183
|
menus: menus,
|
|
@@ -21190,17 +21206,13 @@ Navigation.defaultProps = {
|
|
|
21190
21206
|
rounded: false
|
|
21191
21207
|
};
|
|
21192
21208
|
|
|
21193
|
-
var css_248z$g = ".PageHeader_v4-0-0-4_fv2rg {\n width: 100%;\n}\n\n.PageHeader-wrapper_v4-0-0-4_-utwe {\n padding: var(--spacing) var(--spacing-2) var(--spacing) 0;\n}\n\n.PageHeader-wrapper--withTabs_v4-0-0-4_xlc5j {\n padding-bottom: 0;\n}\n\n.PageHeader-wrapper--withTabs_v4-0-0-4_xlc5j .TabsWrapper-header_v4-0-0-4_5q3li {\n border-bottom: none;\n}\n\n.PageHeader_v4-0-0-4_fv2rg .Row_v4-0-0-4_2h9ci {\n width: 100%;\n}\n\n.PageHeader-titleWrapper_v4-0-0-4_k9hqj {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding-right: var(--spacing);\n}\n\n.PageHeader-titleWrapper_v4-0-0-4_k9hqj .Badge_v4-0-0-4_-wkci {\n margin-left: var(--spacing-l);\n flex-shrink: 0;\n}\n\n.PageHeader-statusWrapper_v4-0-0-4_-11n7 {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n\n.PageHeader-statusWrapper_v4-0-0-4_-11n7 .StatusHint_v4-0-0-4_448i7 {\n margin-right: var(--spacing);\n}\n\n.PageHeader-navigationWrapper_v4-0-0-4_-s3b4 {\n margin-top: var(--spacing-m);\n}\n\n.PageHeader_v4-0-0-4_fv2rg .PageHeader-navigationWrapper_v4-0-0-4_-s3b4 {\n justify-content: center;\n align-items: center;\n margin-top: 0 !important;\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n display: flex;\n}\n\n.PageHeader-title_v4-0-0-4_-jw2k {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.PageHeader-actionsWrapper_v4-0-0-4_j29vx {\n display: flex;\n justify-content: flex-end;\n padding-left: var(--spacing);\n}\n";
|
|
21194
|
-
var styles$g = {"PageHeader":"PageHeader_v4-0-0-4_fv2rg","PageHeader-wrapper":"PageHeader-wrapper_v4-0-0-4_-utwe","PageHeader-wrapper--withTabs":"PageHeader-wrapper--withTabs_v4-0-0-4_xlc5j","TabsWrapper-header":"TabsWrapper-header_v4-0-0-4_5q3li","Row":"Row_v4-0-0-4_2h9ci","PageHeader-titleWrapper":"PageHeader-titleWrapper_v4-0-0-4_k9hqj","Badge":"Badge_v4-0-0-4_-wkci","PageHeader-statusWrapper":"PageHeader-statusWrapper_v4-0-0-4_-11n7","StatusHint":"StatusHint_v4-0-0-4_448i7","PageHeader-navigationWrapper":"PageHeader-navigationWrapper_v4-0-0-4_-s3b4","PageHeader-title":"PageHeader-title_v4-0-0-4_-jw2k","PageHeader-actionsWrapper":"PageHeader-actionsWrapper_v4-0-0-4_j29vx"};
|
|
21195
|
-
styleInject(css_248z$g);
|
|
21196
|
-
|
|
21197
21209
|
var Status = function Status(props) {
|
|
21198
21210
|
var status = props.status,
|
|
21199
21211
|
meta = props.meta,
|
|
21200
21212
|
navigationPosition = props.navigationPosition,
|
|
21201
21213
|
navigation = props.navigation,
|
|
21202
21214
|
tabs = props.tabs;
|
|
21203
|
-
var statusClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21215
|
+
var statusClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$11['PageHeader-statusWrapper'], true), 'mb-3', navigationPosition === 'bottom' && navigation || tabs));
|
|
21204
21216
|
return /*#__PURE__*/React.createElement(React.Fragment, null, (status || meta) && /*#__PURE__*/React.createElement("div", {
|
|
21205
21217
|
className: statusClasses,
|
|
21206
21218
|
"data-test": "DesignSystem-PageHeader--Status"
|
|
@@ -21216,14 +21228,14 @@ var Action = function Action(props) {
|
|
|
21216
21228
|
sizeM: "4",
|
|
21217
21229
|
"data-test": "DesignSystem-PageHeader--Actions"
|
|
21218
21230
|
}, /*#__PURE__*/React.createElement("div", {
|
|
21219
|
-
className: styles$
|
|
21231
|
+
className: styles$11['PageHeader-actionsWrapper']
|
|
21220
21232
|
}, actions)) : (navigation || stepper) && /*#__PURE__*/React.createElement(Column, {
|
|
21221
21233
|
size: "4",
|
|
21222
21234
|
sizeXL: "4",
|
|
21223
21235
|
sizeM: "4",
|
|
21224
21236
|
"data-test": "DesignSystem-PageHeader--Actions"
|
|
21225
21237
|
}, /*#__PURE__*/React.createElement("div", {
|
|
21226
|
-
className: styles$
|
|
21238
|
+
className: styles$11['PageHeader-actionsWrapper']
|
|
21227
21239
|
})));
|
|
21228
21240
|
};
|
|
21229
21241
|
var Nav = function Nav(props) {
|
|
@@ -21233,7 +21245,7 @@ var Nav = function Nav(props) {
|
|
|
21233
21245
|
return null;
|
|
21234
21246
|
}
|
|
21235
21247
|
return /*#__PURE__*/React.createElement("div", {
|
|
21236
|
-
className: styles$
|
|
21248
|
+
className: styles$11['PageHeader-navigationWrapper'],
|
|
21237
21249
|
"data-test": "DesignSystem-PageHeader--Nav"
|
|
21238
21250
|
}, navigation || stepper);
|
|
21239
21251
|
};
|
|
@@ -21259,10 +21271,10 @@ var Title = function Title(props) {
|
|
|
21259
21271
|
var badge = props.badge,
|
|
21260
21272
|
title = props.title;
|
|
21261
21273
|
return /*#__PURE__*/React.createElement("div", {
|
|
21262
|
-
className: styles$
|
|
21274
|
+
className: styles$11['PageHeader-titleWrapper'],
|
|
21263
21275
|
"data-test": "DesignSystem-PageHeader--Title"
|
|
21264
21276
|
}, /*#__PURE__*/React.createElement(Heading, {
|
|
21265
|
-
className: styles$
|
|
21277
|
+
className: styles$11['PageHeader-title']
|
|
21266
21278
|
}, title), badge);
|
|
21267
21279
|
};
|
|
21268
21280
|
|
|
@@ -21281,8 +21293,8 @@ var PageHeader = function PageHeader(props) {
|
|
|
21281
21293
|
className = props.className,
|
|
21282
21294
|
button = props.button;
|
|
21283
21295
|
var baseProps = extractBaseProps(props);
|
|
21284
|
-
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21285
|
-
var classes = classnames(styles$
|
|
21296
|
+
var wrapperClasses = classnames(_defineProperty$1(_defineProperty$1({}, styles$11['PageHeader-wrapper'], true), styles$11['PageHeader-wrapper--withTabs'], tabs), className);
|
|
21297
|
+
var classes = classnames(styles$11.PageHeader);
|
|
21286
21298
|
var colSize = (navigation || stepper) && navigationPosition === 'center' ? '4' : actions ? '8' : '12';
|
|
21287
21299
|
var centerNavProps = {
|
|
21288
21300
|
colSize: colSize,
|
|
@@ -21311,7 +21323,9 @@ var PageHeader = function PageHeader(props) {
|
|
|
21311
21323
|
button: button
|
|
21312
21324
|
}), /*#__PURE__*/React.createElement("div", {
|
|
21313
21325
|
className: classes
|
|
21314
|
-
}, /*#__PURE__*/React.createElement(Row,
|
|
21326
|
+
}, /*#__PURE__*/React.createElement(Row, {
|
|
21327
|
+
className: "w-100"
|
|
21328
|
+
}, /*#__PURE__*/React.createElement(Column, {
|
|
21315
21329
|
size: colSize,
|
|
21316
21330
|
sizeXL: colSize,
|
|
21317
21331
|
sizeM: colSize
|
|
@@ -21338,9 +21352,9 @@ PageHeader.defaultProps = {
|
|
|
21338
21352
|
separator: true
|
|
21339
21353
|
};
|
|
21340
21354
|
|
|
21341
|
-
var css_248z$
|
|
21342
|
-
var styles$
|
|
21343
|
-
styleInject(css_248z$
|
|
21355
|
+
var css_248z$e = ".FileIcon-v4-0-0q44ec {\n padding: var(--spacing);\n border-radius: 50%;\n}\n.FileItem-v4-0-0q441z:not(:last-child) {\n border-bottom: var(--border);\n width: 100%;\n box-sizing: border-box;\n}\n.FileItem-v4-0-0q441z {\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n padding-left: var(--spacing-l);\n padding-right: var(--spacing);\n}\n.FileItem-fileContent-v4-0-04j5ii {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: 0;\n}\n.FileItem-actions-v4-0-05lyr4 {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n.FileItem-file-v4-0-0n9eo9 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.FileItem-size-v4-0-0n96d3 {\n margin-right: var(--spacing);\n margin-left: var(--spacing);\n flex-shrink: 0;\n}\n.FileItem-text-v4-0-0n95t4 {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-right: var(--spacing);\n margin-left: var(--spacing-l);\n}\n.FileItem-error-v4-0-0asw9h {\n margin-left: 40px;\n}\n\n.FileIcon--image-v4-0-084yig {\n background: var(--alert-lightest);\n color: var(--alert);\n}\n.FileIcon--audio-v4-0-0897p1 {\n background: var(--accent1-lightest);\n color: var(--accent1);\n}\n.FileIcon--video-v4-0-07xvoi {\n background: var(--accent2-lightest);\n color: var(--accent2);\n}\n.FileIcon--application-v4-0-0u235v {\n background: var(--accent3-lightest);\n color: var(--accent3);\n}\n.FileIcon--others-v4-0-0ysz23 {\n background: var(--success-lightest);\n color: var(--success);\n}\n.FileIcon--animate-v4-0-0i9p05 {\n animation: fadeIn-v4-0-0ppr22 var(--duration--moderate-01) var(--entrance-productive-curve);\n}\n\n@keyframes fadeIn-v4-0-0ppr22 {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n";
|
|
21356
|
+
var styles$e = {"FileIcon":"FileIcon-v4-0-0q44ec","FileItem":"FileItem-v4-0-0q441z","FileItem-fileContent":"FileItem-fileContent-v4-0-04j5ii","FileItem-actions":"FileItem-actions-v4-0-05lyr4","FileItem-file":"FileItem-file-v4-0-0n9eo9","FileItem-size":"FileItem-size-v4-0-0n96d3","FileItem-text":"FileItem-text-v4-0-0n95t4","FileItem-error":"FileItem-error-v4-0-0asw9h","FileIcon--image":"FileIcon--image-v4-0-084yig","FileIcon--audio":"FileIcon--audio-v4-0-0897p1","FileIcon--video":"FileIcon--video-v4-0-07xvoi","FileIcon--application":"FileIcon--application-v4-0-0u235v","FileIcon--others":"FileIcon--others-v4-0-0ysz23","FileIcon--animate":"FileIcon--animate-v4-0-0i9p05","fadeIn":"fadeIn-v4-0-0ppr22"};
|
|
21357
|
+
styleInject(css_248z$e);
|
|
21344
21358
|
|
|
21345
21359
|
var useEffect = React.useEffect,
|
|
21346
21360
|
useState = React.useState;
|
|
@@ -21361,8 +21375,8 @@ var FileIcon = function FileIcon(props) {
|
|
|
21361
21375
|
setAnimate = _useState2[1];
|
|
21362
21376
|
var type = file.type.split('/')[0] || 'others';
|
|
21363
21377
|
var fileType = IconMapping$1[type] ? type : 'others';
|
|
21364
|
-
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21365
|
-
var uploadingIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21378
|
+
var iconClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$e['FileIcon'], true), styles$e['FileIcon--animate'], animate), styles$e["FileIcon--".concat(fileType)], true));
|
|
21379
|
+
var uploadingIconClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$e['FileIcon'], true), styles$e['FileIcon--uploading'], true));
|
|
21366
21380
|
useEffect(function () {
|
|
21367
21381
|
if (status === 'completed') {
|
|
21368
21382
|
setAnimate(true);
|
|
@@ -21402,7 +21416,7 @@ var FileListItem = function FileListItem(props) {
|
|
|
21402
21416
|
fileSize = props.fileSize;
|
|
21403
21417
|
var name = file.name;
|
|
21404
21418
|
var baseProps = extractBaseProps(props);
|
|
21405
|
-
var FileItemClass = classnames(_defineProperty$1({}, styles$
|
|
21419
|
+
var FileItemClass = classnames(_defineProperty$1({}, styles$e['FileItem'], true), className);
|
|
21406
21420
|
var onClickHandler = function onClickHandler() {
|
|
21407
21421
|
if (onClick) {
|
|
21408
21422
|
onClick(fileItem);
|
|
@@ -21417,22 +21431,22 @@ var FileListItem = function FileListItem(props) {
|
|
|
21417
21431
|
onClick: onClickHandler,
|
|
21418
21432
|
"data-test": "DesignSystem-FileListItem"
|
|
21419
21433
|
}), /*#__PURE__*/React.createElement("div", {
|
|
21420
|
-
className: styles$
|
|
21434
|
+
className: styles$e['FileItem-file']
|
|
21421
21435
|
}, /*#__PURE__*/React.createElement("div", {
|
|
21422
|
-
className: styles$
|
|
21436
|
+
className: styles$e['FileItem-fileContent']
|
|
21423
21437
|
}, /*#__PURE__*/React.createElement(FileIcon, {
|
|
21424
21438
|
file: file,
|
|
21425
21439
|
status: status,
|
|
21426
21440
|
progress: progress
|
|
21427
21441
|
}), /*#__PURE__*/React.createElement(Text, {
|
|
21428
21442
|
"data-test": "DesignSystem-FileListItem--Name",
|
|
21429
|
-
className: styles$
|
|
21443
|
+
className: styles$e['FileItem-text'],
|
|
21430
21444
|
appearance: status === 'completed' ? 'default' : 'subtle',
|
|
21431
21445
|
weight: "medium"
|
|
21432
21446
|
}, name)), /*#__PURE__*/React.createElement("div", {
|
|
21433
|
-
className: styles$
|
|
21447
|
+
className: styles$e['FileItem-actions']
|
|
21434
21448
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
21435
|
-
className: styles$
|
|
21449
|
+
className: styles$e['FileItem-size'],
|
|
21436
21450
|
size: "small",
|
|
21437
21451
|
appearance: 'subtle',
|
|
21438
21452
|
"data-test": "DesignSystem-FileListItem--Size"
|
|
@@ -21440,7 +21454,7 @@ var FileListItem = function FileListItem(props) {
|
|
|
21440
21454
|
size: "small",
|
|
21441
21455
|
appearance: "alert",
|
|
21442
21456
|
description: errorMessage,
|
|
21443
|
-
className: styles$
|
|
21457
|
+
className: styles$e['FileItem-error']
|
|
21444
21458
|
}))
|
|
21445
21459
|
);
|
|
21446
21460
|
};
|
|
@@ -21474,10 +21488,6 @@ FileList.defaultProps = {
|
|
|
21474
21488
|
};
|
|
21475
21489
|
FileList.displayName = 'FileList';
|
|
21476
21490
|
|
|
21477
|
-
var css_248z$e = ".VerificationCodeInput-Input_v4-0-0-4_og8u4 {\n display: inline-flex;\n width: 40px;\n}\n\n.VerificationCodeInput-Input_v4-0-0-4_og8u4 .Input-input_v4-0-0-4_-amj1 {\n text-align: center;\n}\n\n.VerificationCodeInput-Input_v4-0-0-4_og8u4 .Input-input_v4-0-0-4_-amj1::-webkit-inner-spin-button,\n.VerificationCodeInput-Input_v4-0-0-4_og8u4 .Input-input_v4-0-0-4_-amj1::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n";
|
|
21478
|
-
var styles$e = {"VerificationCodeInput-Input":"VerificationCodeInput-Input_v4-0-0-4_og8u4","Input-input":"Input-input_v4-0-0-4_-amj1"};
|
|
21479
|
-
styleInject(css_248z$e);
|
|
21480
|
-
|
|
21481
21491
|
var _excluded$t = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onChange", "onFocus", "onBlur", "className", "value"];
|
|
21482
21492
|
var KEY_CODE = {
|
|
21483
21493
|
backspace: 'Backspace',
|
|
@@ -21638,11 +21648,11 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
|
|
|
21638
21648
|
}
|
|
21639
21649
|
};
|
|
21640
21650
|
var wrapperClassNames = function wrapperClassNames(i) {
|
|
21641
|
-
return classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
21651
|
+
return classnames(_defineProperty$1(_defineProperty$1({}, styles$S['VerificationCodeInput-Input'], true), 'ml-4', i > 0), className);
|
|
21642
21652
|
};
|
|
21643
21653
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
21644
21654
|
"data-test": "DesignSystem-VerificationCodeInput",
|
|
21645
|
-
className: styles$
|
|
21655
|
+
className: styles$S['VerificationCodeInput']
|
|
21646
21656
|
}, values.map(function (val, index) {
|
|
21647
21657
|
return /*#__PURE__*/React__default.createElement(Input, _extends$2({
|
|
21648
21658
|
key: index,
|
|
@@ -21667,8 +21677,8 @@ VerificationCodeInput.defaultProps = {
|
|
|
21667
21677
|
fields: 4
|
|
21668
21678
|
};
|
|
21669
21679
|
|
|
21670
|
-
var css_248z$d = ".
|
|
21671
|
-
var styles$d = {"InlineMessage":"
|
|
21680
|
+
var css_248z$d = ".InlineMessage-v4-0-0x9jco {\n display: flex;\n flex-direction: row;\n overflow: hidden;\n border-radius: var(--spacing-m);\n background-color: var(--white);\n align-items: flex-start;\n}\n\n.InlineMessage-icon--regular-v4-0-0fmb5q {\n padding-top: var(--spacing-s);\n padding-bottom: var(--spacing-s);\n margin-right: var(--spacing);\n}\n\n.InlineMessage-icon--small-v4-0-0fk257 {\n padding-top: var(--spacing-xs);\n padding-bottom: var(--spacing-xs);\n margin-right: var(--spacing-m);\n}\n\n.InlineMessage-text--warning-v4-0-0zbxvn,\n.InlineMessage-icon--warning-v4-0-0g8x8z {\n color: var(--accent1);\n}\n\n.InlineMessage-text--alert-v4-0-0bz4e8 {\n color: var(--alert);\n}\n\n.InlineMessage-text--info-v4-0-0ipy7i {\n color: var(--primary);\n}\n\n.InlineMessage-text--success-v4-0-0e56tx {\n color: var(--success);\n}\n";
|
|
21681
|
+
var styles$d = {"InlineMessage":"InlineMessage-v4-0-0x9jco","InlineMessage-icon--regular":"InlineMessage-icon--regular-v4-0-0fmb5q","InlineMessage-icon--small":"InlineMessage-icon--small-v4-0-0fk257","InlineMessage-text--warning":"InlineMessage-text--warning-v4-0-0zbxvn","InlineMessage-icon--warning":"InlineMessage-icon--warning-v4-0-0g8x8z","InlineMessage-text--alert":"InlineMessage-text--alert-v4-0-0bz4e8","InlineMessage-text--info":"InlineMessage-text--info-v4-0-0ipy7i","InlineMessage-text--success":"InlineMessage-text--success-v4-0-0e56tx"};
|
|
21672
21682
|
styleInject(css_248z$d);
|
|
21673
21683
|
|
|
21674
21684
|
var IconMapping = {
|
|
@@ -21712,8 +21722,8 @@ InlineMessage.defaultProps = {
|
|
|
21712
21722
|
size: 'regular'
|
|
21713
21723
|
};
|
|
21714
21724
|
|
|
21715
|
-
var css_248z$c = ".
|
|
21716
|
-
var styles$c = {"ChoiceList":"
|
|
21725
|
+
var css_248z$c = ".ChoiceList-v4-0-0q365w {\n margin: 0;\n padding: 0;\n border: none;\n}\n\n.ChoiceList-checkbox--vertical-v4-0-01wjo6 {\n margin-top: var(--spacing-m);\n}\n\n.ChoiceList-radio--vertical-v4-0-0jijsa {\n margin-top: var(--spacing-m);\n}\n\n.ChoiceList--alignHorizontal-v4-0-0yvl7a {\n display: flex;\n}\n\n.ChoiceList-checkbox--horizontal-v4-0-02jzhd {\n margin-left: var(--spacing-xl);\n}\n\n.ChoiceList-radio--horizontal-v4-0-0lk7r6 {\n margin-left: var(--spacing-xl);\n}\n";
|
|
21726
|
+
var styles$c = {"ChoiceList":"ChoiceList-v4-0-0q365w","ChoiceList-checkbox--vertical":"ChoiceList-checkbox--vertical-v4-0-01wjo6","ChoiceList-radio--vertical":"ChoiceList-radio--vertical-v4-0-0jijsa","ChoiceList--alignHorizontal":"ChoiceList--alignHorizontal-v4-0-0yvl7a","ChoiceList-checkbox--horizontal":"ChoiceList-checkbox--horizontal-v4-0-02jzhd","ChoiceList-radio--horizontal":"ChoiceList-radio--horizontal-v4-0-0lk7r6"};
|
|
21717
21727
|
styleInject(css_248z$c);
|
|
21718
21728
|
|
|
21719
21729
|
var renderCheckbox = function renderCheckbox(list, handleOnChange, ChoiceListDisabled, size, alignment, selected) {
|
|
@@ -21822,8 +21832,8 @@ ChoiceList.defaultProps = {
|
|
|
21822
21832
|
disabled: false
|
|
21823
21833
|
};
|
|
21824
21834
|
|
|
21825
|
-
var css_248z$b = ".
|
|
21826
|
-
var styles$b = {"Divider":"
|
|
21835
|
+
var css_248z$b = ".Divider-v4-0-0o7qzl {\n border: none;\n margin: 0;\n}\n\n.Divider--vertical-v4-0-0c5z81 {\n width: 1px;\n background: var(--secondary-light);\n}\n\n.Divider--horizontal-v4-0-0mz07e {\n height: 1px;\n}\n\n.Divider--basic-v4-0-0yn6y3 {\n background: var(--secondary-light);\n}\n\n.Divider--header-v4-0-05m57r {\n background: var(--secondary-dark);\n}\n";
|
|
21836
|
+
var styles$b = {"Divider":"Divider-v4-0-0o7qzl","Divider--vertical":"Divider--vertical-v4-0-0c5z81","Divider--horizontal":"Divider--horizontal-v4-0-0mz07e","Divider--basic":"Divider--basic-v4-0-0yn6y3","Divider--header":"Divider--header-v4-0-05m57r"};
|
|
21827
21837
|
styleInject(css_248z$b);
|
|
21828
21838
|
|
|
21829
21839
|
var Divider = function Divider(props) {
|
|
@@ -21871,8 +21881,8 @@ var HelpText = function HelpText(props) {
|
|
|
21871
21881
|
};
|
|
21872
21882
|
HelpText.displayName = 'HelpText';
|
|
21873
21883
|
|
|
21874
|
-
var css_248z$a = ".
|
|
21875
|
-
var styles$a = {"LinkButton":"
|
|
21884
|
+
var css_248z$a = ".LinkButton-v4-0-0mmlen {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: 0;\n text-align: center;\n padding: 0;\n background: transparent;\n font-weight: var(--font-weight-medium);\n font-family: var(--font-family);\n border-radius: var(--spacing-m);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.LinkButton--iconAlign-right-v4-0-0o6en9 {\n flex-direction: row-reverse;\n}\n\n.LinkButton-icon-v4-0-0ik2pr {\n line-height: inherit;\n display: flex;\n align-items: center;\n}\n\n.LinkButton-icon--left-v4-0-0t7svv {\n margin-right: var(--spacing-m);\n}\n\n.LinkButton-icon--right-v4-0-0hl7xi {\n margin-left: var(--spacing-m);\n}\n\n.LinkButton--regular-v4-0-0l1wqb {\n line-height: var(--font-height);\n font-size: var(--font-size);\n}\n\n.LinkButton--tiny-v4-0-064qtw {\n line-height: var(--font-height-s);\n font-size: var(--font-size-s);\n}\n\n.LinkButton--default-v4-0-0smsjq {\n color: var(--primary);\n}\n\n.LinkButton--default-v4-0-0smsjq:hover {\n color: var(--primary-dark);\n}\n\n.LinkButton--default-v4-0-0smsjq:active {\n color: var(--primary-darker);\n}\n\n.LinkButton--default-v4-0-0smsjq:focus,\n.LinkButton--default-v4-0-0smsjq:focus-visible {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n.LinkButton--default-v4-0-0smsjq:disabled {\n cursor: not-allowed;\n pointer-events: none;\n color: var(--primary-lighter);\n}\n\n/* Subtle Appearance */\n\n.LinkButton--subtle-v4-0-036rtw {\n color: var(--inverse-lighter);\n}\n\n.LinkButton--subtle-v4-0-036rtw:hover {\n color: var(--inverse-light);\n}\n\n.LinkButton--subtle-v4-0-036rtw:active {\n color: var(--inverse);\n}\n\n.LinkButton--subtle-v4-0-036rtw:focus,\n.LinkButton--subtle-v4-0-036rtw:focus-visible {\n outline: 0;\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.LinkButton--subtle-v4-0-036rtw:disabled {\n cursor: not-allowed;\n pointer-events: none;\n color: var(--inverse-lightest);\n}\n";
|
|
21885
|
+
var styles$a = {"LinkButton":"LinkButton-v4-0-0mmlen","LinkButton--iconAlign-right":"LinkButton--iconAlign-right-v4-0-0o6en9","LinkButton-icon":"LinkButton-icon-v4-0-0ik2pr","LinkButton-icon--left":"LinkButton-icon--left-v4-0-0t7svv","LinkButton-icon--right":"LinkButton-icon--right-v4-0-0hl7xi","LinkButton--regular":"LinkButton--regular-v4-0-0l1wqb","LinkButton--tiny":"LinkButton--tiny-v4-0-064qtw","LinkButton--default":"LinkButton--default-v4-0-0smsjq","LinkButton--subtle":"LinkButton--subtle-v4-0-036rtw"};
|
|
21876
21886
|
styleInject(css_248z$a);
|
|
21877
21887
|
|
|
21878
21888
|
var _excluded$s = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
|
|
@@ -21917,8 +21927,8 @@ LinkButton.defaultProps = {
|
|
|
21917
21927
|
iconAlign: 'left'
|
|
21918
21928
|
};
|
|
21919
21929
|
|
|
21920
|
-
var css_248z$9 = ".
|
|
21921
|
-
var styles$9 = {"ActionCard":"
|
|
21930
|
+
var css_248z$9 = ".ActionCard-v4-0-0bnqvx {\n border-radius: var(--spacing-m);\n width: 100%;\n}\n\n.ActionCard--default-v4-0-0jwvdq {\n cursor: pointer;\n border: var(--spacing-xs) solid var(--secondary-dark);\n}\n\n.ActionCard--default-v4-0-0jwvdq:hover {\n box-shadow: var(--shadow-l);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.ActionCard--default-v4-0-0jwvdq:focus,\n.ActionCard--default-v4-0-0jwvdq:focus-visible {\n outline: none;\n border: var(--spacing-xs) solid var(--secondary-dark);\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.ActionCard--default-v4-0-0jwvdq:active {\n box-shadow: var(--shadow-m);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.ActionCard--disabled-v4-0-0fspov {\n cursor: not-allowed;\n position: relative;\n border: var(--spacing-xs) solid var(--secondary-lighter);\n}\n\n.ActionCard-overlay--disabled-v4-0-0udlre {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n opacity: var(--opacity-10);\n background: var(--secondary-lightest);\n}\n";
|
|
21931
|
+
var styles$9 = {"ActionCard":"ActionCard-v4-0-0bnqvx","ActionCard--default":"ActionCard--default-v4-0-0jwvdq","ActionCard--disabled":"ActionCard--disabled-v4-0-0fspov","ActionCard-overlay--disabled":"ActionCard-overlay--disabled-v4-0-0udlre"};
|
|
21922
21932
|
styleInject(css_248z$9);
|
|
21923
21933
|
|
|
21924
21934
|
var _excluded$r = ["children", "disabled", "className", "zIndex", "onClick"];
|
|
@@ -22020,8 +22030,8 @@ function useSingleSelect() {
|
|
|
22020
22030
|
};
|
|
22021
22031
|
}
|
|
22022
22032
|
|
|
22023
|
-
var css_248z$8 = ".Selection-
|
|
22024
|
-
var styles$8 = {"Selection-card":"Selection-
|
|
22033
|
+
var css_248z$8 = ".Selection-card-v4-0-09zjuv {\n border-radius: var(--spacing-m);\n position: relative;\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Selection-card--default-v4-0-07kwoo {\n cursor: pointer;\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);\n}\n\n.Selection-card--default-v4-0-07kwoo:hover {\n box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Selection-card--default-v4-0-07kwoo:focus,\n.Selection-card--default-v4-0-07kwoo:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);\n}\n\n.Selection-card--default-v4-0-07kwoo:active {\n box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Selection-card--disabled-v4-0-0s331s {\n cursor: not-allowed;\n outline: none;\n}\n\n.Selection-card--default-disabled-v4-0-06dnhe {\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);\n}\n\n/* selected states */\n\n.Selection-card--selected-v4-0-0cuyq4 {\n box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);\n}\n\n.Selection-card--selected-v4-0-0cuyq4:hover {\n box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-dark);\n}\n\n.Selection-card--selected-v4-0-0cuyq4:focus,\n.Selection-card--selected-v4-0-0cuyq4:focus-visible {\n outline: none;\n box-shadow: var(--shadow-spread) var(--primary-shadow), inset 0 0 0 var(--spacing-s) var(--primary);\n}\n\n.Selection-card--selected-v4-0-0cuyq4:active {\n box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-darker);\n}\n\n.Selection-card--selected-disabled-v4-0-01mx2g {\n box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);\n}\n\n/* overlay classes */\n\n.Selection-card-overlay-v4-0-0za1rw {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 2;\n position: absolute;\n pointer-events: none;\n border-radius: var(--spacing-m);\n}\n\n.Selection-card--default-v4-0-07kwoo:active .Selection-card-overlay-v4-0-0za1rw {\n background-color: var(--primary);\n opacity: var(--opacity-3);\n}\n\n.Selection-card--default-disabled-v4-0-06dnhe .Selection-card-overlay-v4-0-0za1rw {\n background-color: var(--secondary-lightest);\n opacity: var(--opacity-10);\n}\n\n.Selection-card--selected-v4-0-0cuyq4 .Selection-card-overlay-v4-0-0za1rw {\n background-color: var(--primary);\n opacity: var(--opacity-1);\n}\n\n.Selection-card--selected-v4-0-0cuyq4:active .Selection-card-overlay-v4-0-0za1rw {\n background-color: var(--primary);\n opacity: var(--opacity-1);\n}\n\n.Selection-card--selected-disabled-v4-0-01mx2g .Selection-card-overlay-v4-0-0za1rw {\n background-color: var(--primary-lightest);\n opacity: var(--opacity-10);\n}\n";
|
|
22034
|
+
var styles$8 = {"Selection-card":"Selection-card-v4-0-09zjuv","Selection-card--default":"Selection-card--default-v4-0-07kwoo","Selection-card--disabled":"Selection-card--disabled-v4-0-0s331s","Selection-card--default-disabled":"Selection-card--default-disabled-v4-0-06dnhe","Selection-card--selected":"Selection-card--selected-v4-0-0cuyq4","Selection-card--selected-disabled":"Selection-card--selected-disabled-v4-0-01mx2g","Selection-card-overlay":"Selection-card-overlay-v4-0-0za1rw"};
|
|
22025
22035
|
styleInject(css_248z$8);
|
|
22026
22036
|
|
|
22027
22037
|
var _excluded$q = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
|
|
@@ -22143,8 +22153,8 @@ var schd = function schd(fn) {
|
|
|
22143
22153
|
return wrapperFn;
|
|
22144
22154
|
};
|
|
22145
22155
|
|
|
22146
|
-
var css_248z$7 = ".
|
|
22147
|
-
var styles$7 = {"Listbox":"
|
|
22156
|
+
var css_248z$7 = ".Listbox-v4-0-08rcel {\n margin: 0;\n padding: 0;\n display: flex;\n list-style-type: none;\n flex-direction: column;\n}\n\n.Listbox-item-v4-0-0pspod {\n display: flex;\n align-items: center;\n padding-left: var(--spacing-2);\n padding-right: var(--spacing-2);\n}\n\n.Listbox-item-wrapper-v4-0-0wonc7 {\n width: 100%;\n}\n\n.Listbox-item-wrapper-v4-0-0wonc7:last-child > .Listbox-divider-v4-0-0poz93,\n.Listbox-item--draggable-v4-0-0gbgp9:last-child .Listbox-divider-v4-0-0poz93 {\n background: transparent;\n}\n\n/* Sizes */\n\n.Listbox-item--tight-v4-0-02w8e9 {\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Listbox-item--compressed-v4-0-0q3iju {\n padding-top: var(--spacing);\n padding-bottom: var(--spacing);\n}\n\n.Listbox-item--standard-v4-0-0c6ga8 {\n padding-top: var(--spacing-l);\n padding-bottom: var(--spacing-l);\n}\n\n/* Listbox type - option */\n\n.Listbox-item--option-v4-0-0ggyzm {\n cursor: pointer;\n}\n\n.Listbox-item--option-v4-0-0ggyzm:hover {\n background-color: var(--secondary-lightest);\n}\n\n.Listbox-item--option-v4-0-0ggyzm:focus,\n.Listbox-item--option-v4-0-0ggyzm:focus-visible {\n outline: 3px auto var(--secondary-shadow);\n}\n\n.Listbox-item--option-v4-0-0ggyzm:active {\n background: var(--secondary-lighter);\n}\n\n.Listbox-item--selected-v4-0-0a6dml {\n background: rgba(220, 236, 249, 0.48);\n}\n\n.Listbox-item--selected-v4-0-0a6dml:hover {\n background: rgba(151, 197, 240, 0.48);\n}\n\n.Listbox-item--selected-v4-0-0a6dml:focus,\n.Listbox-item--selected-v4-0-0a6dml:focus-visible {\n outline: 3px auto rgba(0, 112, 221, 0.16);\n}\n\n.Listbox-item--selected-v4-0-0a6dml:active {\n background: var(--primary-lighter);\n}\n\n/* Listbox type - resource */\n\n.Listbox-item--resource-v4-0-0f643j {\n cursor: pointer;\n}\n\n.Listbox-item--resource-v4-0-0f643j:hover {\n background-color: var(--secondary-lightest);\n}\n\n.Listbox-item--resource-v4-0-0f643j:focus,\n.Listbox-item--resource-v4-0-0f643j:focus-visible {\n outline: 3px auto var(--secondary-shadow);\n}\n\n.Listbox-item--resource-v4-0-0f643j:active {\n background: var(--secondary-lighter);\n}\n\n.Listbox-item--activated-v4-0-07whrq {\n background: var(--primary-lightest);\n}\n\n/* Listbox type - description */\n\n.Listbox-item--description-v4-0-03n88c:focus,\n.Listbox-item--description-v4-0-03n88c:focus-visible {\n outline: none;\n}\n\n/* Listbox type - disabled */\n\n.Listbox-item--disabled-v4-0-051qp2 {\n opacity: var(--opacity-10);\n pointer-events: none;\n}\n\n/* Listbox type - draggable */\n\n.Listbox-item--draggable-v4-0-0gbgp9:focus {\n outline: 3px auto var(--secondary-shadow);\n}\n\n.Listbox-item--drag-icon-v4-0-0h77my {\n cursor: grab;\n margin-right: var(--spacing);\n}\n\n.Listbox-item--drag-icon-v4-0-0h77my:hover {\n color: var(--inverse);\n}\n\n.Listbox-item--drag-icon-v4-0-0h77my:active {\n color: var(--primary);\n}\n";
|
|
22157
|
+
var styles$7 = {"Listbox":"Listbox-v4-0-08rcel","Listbox-item":"Listbox-item-v4-0-0pspod","Listbox-item-wrapper":"Listbox-item-wrapper-v4-0-0wonc7","Listbox-divider":"Listbox-divider-v4-0-0poz93","Listbox-item--draggable":"Listbox-item--draggable-v4-0-0gbgp9","Listbox-item--tight":"Listbox-item--tight-v4-0-02w8e9","Listbox-item--compressed":"Listbox-item--compressed-v4-0-0q3iju","Listbox-item--standard":"Listbox-item--standard-v4-0-0c6ga8","Listbox-item--option":"Listbox-item--option-v4-0-0ggyzm","Listbox-item--selected":"Listbox-item--selected-v4-0-0a6dml","Listbox-item--resource":"Listbox-item--resource-v4-0-0f643j","Listbox-item--activated":"Listbox-item--activated-v4-0-07whrq","Listbox-item--description":"Listbox-item--description-v4-0-03n88c","Listbox-item--disabled":"Listbox-item--disabled-v4-0-051qp2","Listbox-item--drag-icon":"Listbox-item--drag-icon-v4-0-0h77my"};
|
|
22148
22158
|
styleInject(css_248z$7);
|
|
22149
22159
|
|
|
22150
22160
|
var AUTOSCROLL_ACTIVE_OFFSET = 200;
|
|
@@ -23044,8 +23054,8 @@ var SelectionAvatar = function SelectionAvatar(props) {
|
|
|
23044
23054
|
|
|
23045
23055
|
var AvatarSelectionContext = /*#__PURE__*/React.createContext({});
|
|
23046
23056
|
|
|
23047
|
-
var css_248z$6 = "/* Selection avatar group */\n.
|
|
23048
|
-
var styles$6 = {"SelectionAvatarGroup":"
|
|
23057
|
+
var css_248z$6 = "/* Selection avatar group */\n.SelectionAvatarGroup-v4-0-0w1iw2 {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n}\n\n/* Selection Avatar List */\n\n.SelectionAvatarGroup-item-v4-0-0m8zha {\n margin-right: calc(var(--spacing-m) * -1);\n border-radius: 50%;\n display: flex;\n transition: transform var(--duration--fast-01) var(--standard-productive-curve);\n position: relative;\n}\n\n.SelectionAvatarGroup-item-v4-0-0m8zha:focus,\n.SelectionAvatarGroup-item-v4-0-0m8zha:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.SelectionAvatarGroup-item-v4-0-0m8zha:active {\n outline: var(--spacing-s) solid #00509f;\n outline-offset: var(--spacing-xs);\n}\n\n.SelectionAvatarGroup-wrapper-v4-0-0v840z:hover .SelectionAvatarGroup-item--active-v4-0-0t1tl2 {\n transform: translateY(-8px);\n}\n\n/* Selected Avatar Group Item */\n\n.SelectionAvatarGroup-item--selected-v4-0-0lg991 {\n outline-offset: var(--spacing-xs);\n outline: var(--spacing-s) solid var(--primary-dark);\n}\n\n.SelectionAvatarGroup-item--selected-v4-0-0lg991:active {\n outline-offset: var(--spacing-xs);\n outline: var(--spacing-s) solid var(--primary-darker);\n}\n\n.SelectionAvatarGroup-item--selected-v4-0-0lg991:focus,\n.SelectionAvatarGroup-item--selected-v4-0-0lg991:focus-visible {\n box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;\n}\n\n/* Selection Avatar Popover */\n\n.SelectionAvatarGroup-popper-v4-0-04szm3 {\n overflow-y: auto;\n box-sizing: border-box;\n}\n\n.SelectionAvatar-inputWrapper-v4-0-0dpji1 {\n border-bottom: var(--spacing-xs) solid var(--secondary-dark);\n}\n\n.SelectionAvatar-inputWrapper-v4-0-0dpji1:focus-within {\n border-bottom: var(--spacing-xs) solid var(--primary);\n}\n\n.SelectionAvatar-input-v4-0-0bbtw6 {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0;\n height: 36px;\n}\n\n.SelectionAvatar-input-v4-0-0bbtw6,\n.SelectionAvatar-input-v4-0-0bbtw6:focus-within {\n border: unset !important;\n box-shadow: none !important;\n}\n\n.SelectionAvatar-input-v4-0-0bbtw6:hover {\n background-color: #f4f4f4;\n}\n\n/* Selection Avatar Count */\n\n.SelectionAvatarCount-wrapper-v4-0-09831p {\n border-radius: 50%;\n}\n\n.SelectionAvatarCount-v4-0-0w3rv3:hover {\n background: var(--secondary);\n}\n\n.SelectionAvatarCount-v4-0-0w3rv3:active {\n background: var(--secondary-dark);\n}\n\n.SelectionAvatarCount-wrapper-v4-0-09831p:focus,\n.SelectionAvatarCount-wrapper-v4-0-09831p:focus-visible {\n outline: 3px solid var(--primary-shadow);\n outline-offset: 3px;\n}\n\n.SelectionAvatarCount--selected-v4-0-0whs03 {\n outline-offset: var(--spacing-xs);\n outline: var(--spacing-s) solid var(--primary-dark);\n}\n\n.SelectionAvatarCount--selected-v4-0-0whs03:focus,\n.SelectionAvatarCount--selected-v4-0-0whs03:focus-visible {\n box-shadow: 0 0 0 var(--spacing-xs) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;\n}\n";
|
|
23058
|
+
var styles$6 = {"SelectionAvatarGroup":"SelectionAvatarGroup-v4-0-0w1iw2","SelectionAvatarGroup-item":"SelectionAvatarGroup-item-v4-0-0m8zha","SelectionAvatarGroup-wrapper":"SelectionAvatarGroup-wrapper-v4-0-0v840z","SelectionAvatarGroup-item--active":"SelectionAvatarGroup-item--active-v4-0-0t1tl2","SelectionAvatarGroup-item--selected":"SelectionAvatarGroup-item--selected-v4-0-0lg991","SelectionAvatarGroup-popper":"SelectionAvatarGroup-popper-v4-0-04szm3","SelectionAvatar-inputWrapper":"SelectionAvatar-inputWrapper-v4-0-0dpji1","SelectionAvatar-input":"SelectionAvatar-input-v4-0-0bbtw6","SelectionAvatarCount-wrapper":"SelectionAvatarCount-wrapper-v4-0-09831p","SelectionAvatarCount":"SelectionAvatarCount-v4-0-0w3rv3","SelectionAvatarCount--selected":"SelectionAvatarCount--selected-v4-0-0whs03"};
|
|
23049
23059
|
styleInject(css_248z$6);
|
|
23050
23060
|
|
|
23051
23061
|
var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
|
|
@@ -23916,8 +23926,8 @@ var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, forwarde
|
|
|
23916
23926
|
customRef.current.charCount = null;
|
|
23917
23927
|
}
|
|
23918
23928
|
}, [inputValue]);
|
|
23919
|
-
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$
|
|
23920
|
-
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$
|
|
23929
|
+
var ChipInputBorderClass = classnames(_defineProperty$1(_defineProperty$1({}, styles$x['ChipInput-border'], true), styles$x['ChipInput-border--error'], error));
|
|
23930
|
+
var ChipInputClass = classnames(_defineProperty$1(_defineProperty$1(_defineProperty$1(_defineProperty$1({}, styles$x.ChipInput, true), styles$x['ChipInput--disabled'], disabled), styles$x['ChipInput--withChips'], chips && chips.length > 0), styles$x['ChipInput--error'], error), className);
|
|
23921
23931
|
var onUpdateChips = function onUpdateChips(updatedChips) {
|
|
23922
23932
|
if (onChange) onChange(updatedChips);
|
|
23923
23933
|
};
|
|
@@ -24029,12 +24039,12 @@ var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, forwarde
|
|
|
24029
24039
|
onClick: onClickHandler,
|
|
24030
24040
|
tabIndex: disabled ? -1 : tabIndex || 0
|
|
24031
24041
|
}), /*#__PURE__*/React.createElement("div", {
|
|
24032
|
-
className: styles$
|
|
24042
|
+
className: styles$x["ChipInput-wrapper"],
|
|
24033
24043
|
ref: customRef
|
|
24034
24044
|
}, chips && chips.length > 0 && chipComponents, /*#__PURE__*/React.createElement("input", _extends$2({}, rest, {
|
|
24035
24045
|
"data-test": "DesignSystem-MultiSelectTrigger--Input",
|
|
24036
24046
|
ref: inputElementRef,
|
|
24037
|
-
className: styles$
|
|
24047
|
+
className: styles$x["ChipInput-input"],
|
|
24038
24048
|
autoFocus: autoFocus,
|
|
24039
24049
|
placeholder: chips && chips.length > 0 ? '' : placeholder,
|
|
24040
24050
|
disabled: disabled,
|
|
@@ -24048,7 +24058,7 @@ var MultiSelectTrigger = /*#__PURE__*/React.forwardRef(function (props, forwarde
|
|
|
24048
24058
|
"data-test": "DesignSystem-MultiSelectTrigger--Icon",
|
|
24049
24059
|
name: "close",
|
|
24050
24060
|
appearance: disabled ? 'disabled' : 'subtle',
|
|
24051
|
-
className: styles$
|
|
24061
|
+
className: styles$x['ChipInput-icon'],
|
|
24052
24062
|
onClick: onDeleteAllHandler,
|
|
24053
24063
|
tabIndex: disabled ? -1 : 0
|
|
24054
24064
|
})));
|
|
@@ -24532,8 +24542,8 @@ var handleInputKeyDown = function handleInputKeyDown(event, listRef, setFocusedO
|
|
|
24532
24542
|
setFocusedOption && setFocusedOption(targetOption);
|
|
24533
24543
|
};
|
|
24534
24544
|
|
|
24535
|
-
var css_248z$5 = ".Select-
|
|
24536
|
-
var styles$5 = {"Select-input":"Select-
|
|
24545
|
+
var css_248z$5 = ".Select-input-v4-0-0ti3vc {\n min-width: unset !important;\n background: transparent;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0;\n height: 36px;\n}\n\n.Select-input-v4-0-0ti3vc,\n.Select-input-v4-0-0ti3vc:focus-within {\n border: unset !important;\n box-shadow: none !important;\n}\n\n.Select-input-v4-0-0ti3vc:hover {\n background-color: #f4f4f4;\n}\n\n.Select-trigger-v4-0-0a4tuy {\n width: 100%;\n justify-content: space-between;\n padding-top: unset;\n padding-bottom: unset;\n background: var(--secondary-light);\n color: var(--text);\n transition: var(--duration--fast-01) var(--standard-productive-curve);\n}\n\n.Select-trigger-v4-0-0a4tuy:disabled {\n background: var(--secondary-lighter);\n color: var(--text-disabled);\n pointer-events: none;\n}\n\n.Select-trigger-v4-0-0a4tuy:active,\n.Select-trigger--open-v4-0-0sndz1 {\n background-color: var(--secondary-dark) !important;\n color: var(--text) !important;\n animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);\n animation-duration: 120ms;\n}\n\n.Select-trigger-v4-0-0a4tuy:hover {\n background: var(--secondary);\n color: var(--text);\n}\n\n.Select-trigger-v4-0-0a4tuy:focus {\n background-color: var(--secondary-light);\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.Select-inputWrapper-v4-0-0imsjv {\n border-bottom: var(--spacing-xs) solid var(--secondary-dark);\n}\n\n.Select-inputWrapper-v4-0-0imsjv:focus-within {\n border-bottom: var(--spacing-xs) solid var(--primary);\n}\n\n.Select-trigger-wrapper-v4-0-0lhnp6 {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n overflow: hidden;\n}\n\n.Select-trigger--small-v4-0-0zbkq3 {\n height: var(--spacing-xl);\n padding-right: var(--spacing);\n padding-left: var(--spacing);\n}\n\n.Select-trigger--text-v4-0-0snazs,\n.Select-option--text-v4-0-0e9n4o {\n text-align: left;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n margin: 0;\n font-size: var(--font-size);\n line-height: var(--font-height);\n width: 100%;\n}\n\n.Select-trigger--regular-v4-0-0r4vy6 {\n height: var(--spacing-3);\n padding-right: var(--spacing);\n padding-left: var(--spacing-l);\n}\n\n.Select-trigger--placeholder-v4-0-093vzd {\n color: var(--text);\n}\n\n.Select-trigger--icon-v4-0-0sni2c {\n padding-left: var(--spacing);\n}\n\n.Select-buttonWrapper-v4-0-07c70v {\n display: flex;\n justify-content: flex-end;\n padding-top: var(--spacing);\n padding-right: var(--spacing);\n padding-bottom: var(--spacing);\n border-top: var(--spacing-xs) solid var(--secondary-light);\n}\n\n.Select-crossButton-v4-0-0msqka {\n display: flex;\n flex-shrink: 0;\n overflow: hidden;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n cursor: pointer;\n color: var(--inverse);\n border-radius: 50%;\n padding: var(--spacing-s);\n}\n\n.Select-crossButton-v4-0-0msqka:focus-visible,\n.Select-crossButton-v4-0-0msqka:focus {\n outline: var(--spacing-s) solid var(--secondary-shadow);\n}\n\n.Select-crossButton-v4-0-0msqka:hover {\n background-color: var(--secondary);\n}\n\n.Select-crossButton-v4-0-0msqka:active {\n background-color: var(--secondary-dark);\n}\n\n.Select-option-v4-0-0bokcf {\n display: flex;\n align-items: flex-start;\n width: 100%;\n}\n";
|
|
24546
|
+
var styles$5 = {"Select-input":"Select-input-v4-0-0ti3vc","Select-trigger":"Select-trigger-v4-0-0a4tuy","Select-trigger--open":"Select-trigger--open-v4-0-0sndz1","Select-inputWrapper":"Select-inputWrapper-v4-0-0imsjv","Select-trigger-wrapper":"Select-trigger-wrapper-v4-0-0lhnp6","Select-trigger--small":"Select-trigger--small-v4-0-0zbkq3","Select-trigger--text":"Select-trigger--text-v4-0-0snazs","Select-option--text":"Select-option--text-v4-0-0e9n4o","Select-trigger--regular":"Select-trigger--regular-v4-0-0r4vy6","Select-trigger--placeholder":"Select-trigger--placeholder-v4-0-093vzd","Select-trigger--icon":"Select-trigger--icon-v4-0-0sni2c","Select-buttonWrapper":"Select-buttonWrapper-v4-0-07c70v","Select-crossButton":"Select-crossButton-v4-0-0msqka","Select-option":"Select-option-v4-0-0bokcf"};
|
|
24537
24547
|
styleInject(css_248z$5);
|
|
24538
24548
|
|
|
24539
24549
|
var _excluded$h = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"];
|
|
@@ -25000,8 +25010,8 @@ Select.SearchInput = SearchInput;
|
|
|
25000
25010
|
Select.EmptyTemplate = SelectEmptyTemplate;
|
|
25001
25011
|
Select.Footer = SelectFooter;
|
|
25002
25012
|
|
|
25003
|
-
var css_248z$4 = ".
|
|
25004
|
-
var styles$4 = {"Menu":"
|
|
25013
|
+
var css_248z$4 = ".Menu-v4-0-0hy2u0 {\n overflow-y: auto !important;\n padding-top: var(--spacing-m);\n padding-bottom: var(--spacing-m);\n}\n\n.Menu-Trigger--active-v4-0-0s93mq {\n background-color: var(--secondary-dark);\n}\n\n.Menu-Item-v4-0-0r46a9 {\n width: 100%;\n box-sizing: border-box;\n}\n\n.Menu-Group-Label-v4-0-0r4yx6 {\n display: flex;\n align-items: center;\n padding-bottom: var(--spacing-0-75);\n padding-top: var(--spacing-l);\n padding-left: var(--spacing-2);\n padding-right: var(--spacing-l);\n}\n\n.Menu-Group-v4-0-0nbgrc:first-child .Menu-Group-Label-v4-0-0r4yx6 {\n padding-top: var(--spacing);\n}\n";
|
|
25014
|
+
var styles$4 = {"Menu":"Menu-v4-0-0hy2u0","Menu-Trigger--active":"Menu-Trigger--active-v4-0-0s93mq","Menu-Item":"Menu-Item-v4-0-0r46a9","Menu-Group-Label":"Menu-Group-Label-v4-0-0r4yx6","Menu-Group":"Menu-Group-v4-0-0nbgrc"};
|
|
25005
25015
|
styleInject(css_248z$4);
|
|
25006
25016
|
|
|
25007
25017
|
var _excluded$c = ["label", "children", "showDivider"];
|
|
@@ -25493,8 +25503,8 @@ var img$3 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26
|
|
|
25493
25503
|
|
|
25494
25504
|
var img$2 = "data:image/svg+xml,%3csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C10 5.52285 5.52285 10 0 10C5.52285 10 10 14.4772 10 20C10 14.4772 14.4772 10 20 10C14.4772 10 10 5.52285 10 0ZM20 14C20 17.3137 17.3137 20 14 20C17.3137 20 20 22.6863 20 26C20 22.6863 22.6863 20 26 20C22.6863 20 20 17.3137 20 14Z' fill='white'/%3e%3c/svg%3e";
|
|
25495
25505
|
|
|
25496
|
-
var css_248z$3 = ".
|
|
25497
|
-
var styles$3 = {"AIButton":"
|
|
25506
|
+
var css_248z$3 = ".AIButton-v4-0-0cn561 {\n padding: var(--spacing) var(--spacing-l);\n border-radius: var(--spacing-m);\n cursor: pointer;\n border: 0;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n display: flex;\n align-items: center;\n}\n\n.AIButton-v4-0-0cn561:disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.AIButton-v4-0-0cn561:focus {\n outline: 0;\n}\n\n/* Primary Button */\n\n.AIButton--primary-v4-0-0a2zwc {\n background: var(--primary);\n color: var(--white);\n}\n\n.AIButton--primary-v4-0-0a2zwc:hover {\n background: var(--primary-dark);\n}\n\n.AIButton--primary-v4-0-0a2zwc:active {\n background: var(--primary-darker);\n}\n\n.AIButton--primary-v4-0-0a2zwc:disabled {\n background: var(--primary-lighter);\n}\n\n.AIButton--primary-v4-0-0a2zwc:focus {\n box-shadow: var(--shadow-spread) var(--primary-shadow);\n}\n\n/* Basic Button */\n\n.AIButton--basic-v4-0-095kzx {\n background: var(--secondary-light);\n color: var(--inverse);\n}\n\n.AIButton--basic-v4-0-095kzx:hover {\n background: var(--secondary);\n}\n\n.AIButton--basic-v4-0-095kzx:active {\n background: var(--secondary-dark);\n}\n\n.AIButton--basic-v4-0-095kzx:disabled {\n background: var(--secondary-lighter);\n color: var(--inverse-lightest);\n}\n\n.AIButton--basic-v4-0-095kzx:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n/* Button Icon */\n\n.AIButton-Icon-v4-0-01k16x {\n margin-right: var(--spacing);\n}\n";
|
|
25507
|
+
var styles$3 = {"AIButton":"AIButton-v4-0-0cn561","AIButton--primary":"AIButton--primary-v4-0-0a2zwc","AIButton--basic":"AIButton--basic-v4-0-095kzx","AIButton-Icon":"AIButton-Icon-v4-0-01k16x"};
|
|
25498
25508
|
styleInject(css_248z$3);
|
|
25499
25509
|
|
|
25500
25510
|
var _excluded$8 = ["appearance", "className", "children", "disabled"];
|
|
@@ -29667,8 +29677,8 @@ var SaraDisabledBottom = function SaraDisabledBottom(props) {
|
|
|
29667
29677
|
}))));
|
|
29668
29678
|
};
|
|
29669
29679
|
|
|
29670
|
-
var css_248z$2 = ".
|
|
29671
|
-
var styles$2 = {"AIIconButton":"
|
|
29680
|
+
var css_248z$2 = ".AIIconButton-v4-0-07khi7 {\n background: transparent;\n padding: var(--spacing);\n border-radius: var(--spacing-m);\n cursor: pointer;\n border: 0;\n font-family: var(--font-family);\n font-weight: var(--font-weight-normal);\n font-size: var(--font-size);\n line-height: var(--font-height-s);\n position: relative;\n}\n\n.AIIconButton-v4-0-07khi7:hover {\n background: var(--secondary);\n color: var(--secondary) !important;\n}\n\n.AIIconButton-v4-0-07khi7:active {\n background: var(--secondary-dark);\n color: var(--secondary-dark) !important;\n}\n\n.AIIconButton-v4-0-07khi7:focus {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n}\n\n.AIIconButton-v4-0-07khi7:disabled {\n cursor: not-allowed;\n pointer-events: none;\n background: transparent;\n color: var(--inverse-lightest);\n}\n\n.AIIconButton-icon-v4-0-0kax5p {\n overflow: hidden;\n flex-shrink: 0;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n line-height: inherit;\n display: flex;\n align-items: center;\n position: relative;\n}\n\n.AIIconButton-AIIcon-v4-0-02m1sv {\n position: absolute;\n}\n\n.AIIconButton-AIIcon--regularTop-v4-0-08lgkr {\n bottom: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */\n left: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */\n}\n\n.AIIconButton-AIIcon--largeTop-v4-0-0iky38 {\n bottom: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */\n left: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */\n}\n\n.AIIconButton-AIIcon--regularBottom-v4-0-0c702n {\n top: calc(var(--spacing-l) + var(--spacing-xs)); /* 13px */\n left: calc(var(--spacing-l) + var(--spacing-s)); /* 14px */\n}\n\n.AIIconButton-AIIcon--largeBottom-v4-0-0y6vi6 {\n top: calc(var(--spacing-2) + var(--spacing-xs)); /* 17px */\n left: calc(var(--spacing-2) + var(--spacing-s)); /* 18px */\n}\n";
|
|
29681
|
+
var styles$2 = {"AIIconButton":"AIIconButton-v4-0-07khi7","AIIconButton-icon":"AIIconButton-icon-v4-0-0kax5p","AIIconButton-AIIcon":"AIIconButton-AIIcon-v4-0-02m1sv","AIIconButton-AIIcon--regularTop":"AIIconButton-AIIcon--regularTop-v4-0-08lgkr","AIIconButton-AIIcon--largeTop":"AIIconButton-AIIcon--largeTop-v4-0-0iky38","AIIconButton-AIIcon--regularBottom":"AIIconButton-AIIcon--regularBottom-v4-0-0c702n","AIIconButton-AIIcon--largeBottom":"AIIconButton-AIIcon--largeBottom-v4-0-0y6vi6"};
|
|
29672
29682
|
styleInject(css_248z$2);
|
|
29673
29683
|
|
|
29674
29684
|
var SaraIcon = function SaraIcon(props) {
|
|
@@ -29750,8 +29760,8 @@ AIIconButton.defaultProps = {
|
|
|
29750
29760
|
strokeColor: '#fff'
|
|
29751
29761
|
};
|
|
29752
29762
|
|
|
29753
|
-
var css_248z$1 = ".
|
|
29754
|
-
var styles$1 = {"AIChip":"
|
|
29763
|
+
var css_248z$1 = ".AIChip-v4-0-0b0d0b {\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: var(--spacing-l);\n padding: var(--spacing-s) var(--spacing);\n background: var(--secondary-light);\n cursor: pointer;\n width: -moz-fit-content;\n width: fit-content;\n border: 0;\n}\n\n.AIChip-v4-0-0b0d0b:hover {\n background: var(--secondary);\n}\n\n.AIChip-v4-0-0b0d0b:active {\n background: var(--secondary-dark);\n}\n\n.AIChip-v4-0-0b0d0b:focus,\n.AIChip-v4-0-0b0d0b:focus-visible {\n box-shadow: var(--shadow-spread) var(--secondary-shadow);\n outline: none;\n}\n\n.AIChip-icon-v4-0-01s51k {\n width: var(--spacing-2);\n height: var(--spacing-2);\n font-size: var(--spacing-2) !important;\n margin-right: var(--spacing-m);\n background: linear-gradient(to bottom, #ffc208 0%, #e31c79 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.AIChip-text-v4-0-01sc44 {\n color: var(--inverse);\n font-size: var(--font-size);\n line-height: var(--font-height);\n font-family: var(--font-family);\n}\n\n/* Disabled Chip */\n\n.AIChip--disabled-v4-0-01gm1f {\n background: var(--secondary-lighter);\n}\n\n.AIChip-icon--disabled-v4-0-0ja1m5 {\n background: linear-gradient(to bottom, #ffe79e 0%, #f4a4c9 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}\n\n.AIChip-text--disabled-v4-0-0sefco {\n color: var(--inverse-lightest);\n}\n\n.AIChip-v4-0-0b0d0b:disabled {\n cursor: not-allowed;\n pointer-events: none;\n}\n";
|
|
29764
|
+
var styles$1 = {"AIChip":"AIChip-v4-0-0b0d0b","AIChip-icon":"AIChip-icon-v4-0-01s51k","AIChip-text":"AIChip-text-v4-0-01sc44","AIChip--disabled":"AIChip--disabled-v4-0-01gm1f","AIChip-icon--disabled":"AIChip-icon--disabled-v4-0-0ja1m5","AIChip-text--disabled":"AIChip-text--disabled-v4-0-0sefco"};
|
|
29755
29765
|
styleInject(css_248z$1);
|
|
29756
29766
|
|
|
29757
29767
|
var _excluded$4 = ["label", "icon", "disabled", "name", "className"];
|
|
@@ -29779,8 +29789,8 @@ var AIChip = function AIChip(props) {
|
|
|
29779
29789
|
}, label));
|
|
29780
29790
|
};
|
|
29781
29791
|
|
|
29782
|
-
var css_248z = ".AIResponse-
|
|
29783
|
-
var styles = {"AIResponse-box":"AIResponse-
|
|
29792
|
+
var css_248z = ".AIResponse-box-v4-0-0on012 {\n background: linear-gradient(white, white) padding-box,\n linear-gradient(to right, rgba(255, 194, 8, 0.64), rgba(227, 28, 121, 0.64)) border-box;\n border-radius: var(--spacing-l);\n border: var(--spacing-s) solid transparent;\n border-top-left-radius: 0;\n padding: var(--spacing) var(--spacing-l);\n}\n\n.AIResponse-actionBar-v4-0-06sx4x {\n margin-top: var(--spacing-m);\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n}\n\n.AIResponse-button-v4-0-0fnlig {\n opacity: var(--opacity-12);\n}\n\n.AIResponse-box-v4-0-0on012:hover .AIResponse-button-v4-0-0fnlig {\n opacity: 1;\n}\n\n.AIResponse-button--selected-v4-0-0rsjwt {\n opacity: 1;\n}\n";
|
|
29793
|
+
var styles = {"AIResponse-box":"AIResponse-box-v4-0-0on012","AIResponse-actionBar":"AIResponse-actionBar-v4-0-06sx4x","AIResponse-button":"AIResponse-button-v4-0-0fnlig","AIResponse-button--selected":"AIResponse-button--selected-v4-0-0rsjwt"};
|
|
29784
29794
|
styleInject(css_248z);
|
|
29785
29795
|
|
|
29786
29796
|
var _excluded$3 = ["children", "className"];
|
|
@@ -29846,6 +29856,6 @@ AIResponse.Button = ChatButton;
|
|
|
29846
29856
|
AIResponse.ActionBar = ChatActionBar;
|
|
29847
29857
|
AIResponse.Body = ChatBody;
|
|
29848
29858
|
|
|
29849
|
-
var version = "4.0.0
|
|
29859
|
+
var version = "4.0.0";
|
|
29850
29860
|
|
|
29851
29861
|
export { AIButton, AIChip, AIIconButton, AIResponse, ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, KeyValuePair, Label, Legend, Link, LinkButton, List, Listbox, Menu, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sara, SaraSparkle, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };
|