@royaloperahouse/chord 2.2.4 → 2.2.5-b-select-test
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 +3 -0
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +197 -526
- package/dist/chord.cjs.development.js.map +1 -1
- package/dist/chord.cjs.production.min.js +1 -1
- package/dist/chord.cjs.production.min.js.map +1 -1
- package/dist/chord.esm.js +196 -527
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/Select/Select.d.ts +1 -97
- package/dist/components/molecules/Select/Select.style.d.ts +4 -13
- package/dist/components/molecules/StatusBanner/StatusBanner.d.ts +4 -0
- package/dist/components/molecules/StatusBanner/StatusBanner.style.d.ts +3 -0
- package/dist/components/molecules/StatusBanner/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/formTypes.d.ts +19 -28
- package/dist/types/types.d.ts +10 -0
- package/package.json +3 -2
- package/README.GIT +0 -277
|
@@ -10,6 +10,8 @@ var styled = require('styled-components');
|
|
|
10
10
|
var styled__default = _interopDefault(styled);
|
|
11
11
|
var moment = _interopDefault(require('moment'));
|
|
12
12
|
var server = require('react-dom/server');
|
|
13
|
+
var ReactSelect = require('react-select');
|
|
14
|
+
var ReactSelect__default = _interopDefault(ReactSelect);
|
|
13
15
|
var Modal = _interopDefault(require('react-modal'));
|
|
14
16
|
var ScrollLock = _interopDefault(require('react-scrolllock'));
|
|
15
17
|
|
|
@@ -2175,14 +2177,12 @@ var Icon = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
2175
2177
|
});
|
|
2176
2178
|
Icon.displayName = 'Icon';
|
|
2177
2179
|
|
|
2178
|
-
var _excluded = ["children", "iconName", "iconDirection", "color"];
|
|
2179
|
-
|
|
2180
2180
|
var Button = function Button(_ref) {
|
|
2181
2181
|
var children = _ref.children,
|
|
2182
2182
|
iconName = _ref.iconName,
|
|
2183
2183
|
iconDirection = _ref.iconDirection,
|
|
2184
2184
|
color = _ref.color,
|
|
2185
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
2185
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
|
|
2186
2186
|
|
|
2187
2187
|
var truncatedString = children.substring(0, 30);
|
|
2188
2188
|
return /*#__PURE__*/React__default.createElement(ButtonWrapper, Object.assign({}, rest, {
|
|
@@ -2250,11 +2250,9 @@ var AspectRatioWidth;
|
|
|
2250
2250
|
ButtonType["Tertiary"] = "Tertiary";
|
|
2251
2251
|
})(exports.ButtonType || (exports.ButtonType = {}));
|
|
2252
2252
|
|
|
2253
|
-
var _excluded$1 = ["children"];
|
|
2254
|
-
|
|
2255
2253
|
var PrimaryButton = function PrimaryButton(_ref) {
|
|
2256
2254
|
var children = _ref.children,
|
|
2257
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
2255
|
+
props = _objectWithoutPropertiesLoose(_ref, ["children"]);
|
|
2258
2256
|
|
|
2259
2257
|
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper, Object.assign({
|
|
2260
2258
|
color: exports.Colors.White
|
|
@@ -2268,11 +2266,9 @@ var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default(Button)(_templateObjec
|
|
|
2268
2266
|
return color ? "var(--base-color-" + color + ")" : theme.colors.primary;
|
|
2269
2267
|
});
|
|
2270
2268
|
|
|
2271
|
-
var _excluded$2 = ["children"];
|
|
2272
|
-
|
|
2273
2269
|
var SecondaryButton = function SecondaryButton(_ref) {
|
|
2274
2270
|
var children = _ref.children,
|
|
2275
|
-
props = _objectWithoutPropertiesLoose(_ref,
|
|
2271
|
+
props = _objectWithoutPropertiesLoose(_ref, ["children"]);
|
|
2276
2272
|
|
|
2277
2273
|
return /*#__PURE__*/React__default.createElement(PrimaryButtonWrapper$1, Object.assign({
|
|
2278
2274
|
color: exports.Colors.Primary
|
|
@@ -2286,12 +2282,10 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$6 ||
|
|
|
2286
2282
|
});
|
|
2287
2283
|
var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
|
|
2288
2284
|
|
|
2289
|
-
var _excluded$3 = ["children", "color"];
|
|
2290
|
-
|
|
2291
2285
|
var Button$1 = function Button(_ref) {
|
|
2292
2286
|
var children = _ref.children,
|
|
2293
2287
|
color = _ref.color,
|
|
2294
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
2288
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "color"]);
|
|
2295
2289
|
|
|
2296
2290
|
var truncatedString = children.substring(0, 100);
|
|
2297
2291
|
return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
|
|
@@ -3253,8 +3247,6 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
|
|
|
3253
3247
|
});
|
|
3254
3248
|
var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-right: var(--button-icon-margin);\n"])));
|
|
3255
3249
|
|
|
3256
|
-
var _excluded$4 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
|
|
3257
|
-
|
|
3258
3250
|
var TabLink = function TabLink(_ref) {
|
|
3259
3251
|
var children = _ref.children,
|
|
3260
3252
|
iconName = _ref.iconName,
|
|
@@ -3263,7 +3255,7 @@ var TabLink = function TabLink(_ref) {
|
|
|
3263
3255
|
color = _ref$color === void 0 ? exports.Colors.DarkGrey : _ref$color,
|
|
3264
3256
|
_ref$hoverColor = _ref.hoverColor,
|
|
3265
3257
|
hoverColor = _ref$hoverColor === void 0 ? exports.Colors.Primary : _ref$hoverColor,
|
|
3266
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
3258
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color", "hoverColor"]);
|
|
3267
3259
|
|
|
3268
3260
|
return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
|
|
3269
3261
|
color: color,
|
|
@@ -3313,7 +3305,6 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$2 || (_tem
|
|
|
3313
3305
|
return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
|
|
3314
3306
|
});
|
|
3315
3307
|
|
|
3316
|
-
var _excluded$5 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
|
|
3317
3308
|
/**
|
|
3318
3309
|
* An HTML textarea component for Chord.
|
|
3319
3310
|
*
|
|
@@ -3375,7 +3366,7 @@ var TextArea = function TextArea(_ref) {
|
|
|
3375
3366
|
maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
|
|
3376
3367
|
_ref$tabIndex = _ref.tabIndex,
|
|
3377
3368
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
3378
|
-
textareaProps = _objectWithoutPropertiesLoose(_ref,
|
|
3369
|
+
textareaProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"]);
|
|
3379
3370
|
|
|
3380
3371
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
3381
3372
|
columnStartDesktop: columnStartDesktop,
|
|
@@ -3435,7 +3426,6 @@ var ErrorLabel = /*#__PURE__*/styled__default.div(_templateObject6 || (_template
|
|
|
3435
3426
|
return "var(--base-color-errorstate)";
|
|
3436
3427
|
});
|
|
3437
3428
|
|
|
3438
|
-
var _excluded$6 = ["label", "type", "error", "darkMode", "width"];
|
|
3439
3429
|
/**
|
|
3440
3430
|
* A text field component, that wraps around the native `<input />` element
|
|
3441
3431
|
* and adds some extra states and information around it (i.e. a text and an error labels,
|
|
@@ -3483,7 +3473,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3483
3473
|
_ref$darkMode = _ref.darkMode,
|
|
3484
3474
|
darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
|
|
3485
3475
|
width = _ref.width,
|
|
3486
|
-
inputProps = _objectWithoutPropertiesLoose(_ref,
|
|
3476
|
+
inputProps = _objectWithoutPropertiesLoose(_ref, ["label", "type", "error", "darkMode", "width"]);
|
|
3487
3477
|
|
|
3488
3478
|
var _useState = React.useState(false),
|
|
3489
3479
|
showPassword = _useState[0],
|
|
@@ -3541,14 +3531,12 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$o || (_temp
|
|
|
3541
3531
|
});
|
|
3542
3532
|
var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$c || (_templateObject2$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n"])));
|
|
3543
3533
|
|
|
3544
|
-
var _excluded$7 = ["children", "iconName", "iconDirection", "color"];
|
|
3545
|
-
|
|
3546
3534
|
var TextLink = function TextLink(_ref) {
|
|
3547
3535
|
var children = _ref.children,
|
|
3548
3536
|
iconName = _ref.iconName,
|
|
3549
3537
|
iconDirection = _ref.iconDirection,
|
|
3550
3538
|
color = _ref.color,
|
|
3551
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
3539
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["children", "iconName", "iconDirection", "color"]);
|
|
3552
3540
|
|
|
3553
3541
|
var truncatedString = children.substring(0, 30);
|
|
3554
3542
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
|
|
@@ -5156,8 +5144,6 @@ var ContactNewsletter = function ContactNewsletter(_ref) {
|
|
|
5156
5144
|
}, contact.title))));
|
|
5157
5145
|
};
|
|
5158
5146
|
|
|
5159
|
-
var _excluded$8 = ["dataRoh"];
|
|
5160
|
-
|
|
5161
5147
|
var Footer = function Footer(_ref) {
|
|
5162
5148
|
var data = _ref.data;
|
|
5163
5149
|
var policyLinks = data.policyLinks;
|
|
@@ -5167,7 +5153,7 @@ var Footer = function Footer(_ref) {
|
|
|
5167
5153
|
|
|
5168
5154
|
var _data$artsLogo = data.artsLogo,
|
|
5169
5155
|
artsDataRoh = _data$artsLogo.dataRoh,
|
|
5170
|
-
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo,
|
|
5156
|
+
artsLogo = _objectWithoutPropertiesLoose(_data$artsLogo, ["dataRoh"]);
|
|
5171
5157
|
|
|
5172
5158
|
var additionalInfo = data.additionalInfo;
|
|
5173
5159
|
return /*#__PURE__*/React__default.createElement(FooterSection, null, /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -5222,8 +5208,6 @@ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_t
|
|
|
5222
5208
|
});
|
|
5223
5209
|
var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-center;\n\n :hover {\n && svg path {\n fill: var(--base-color-primary);\n }\n }\n"])));
|
|
5224
5210
|
|
|
5225
|
-
var _excluded$9 = ["id", "text"];
|
|
5226
|
-
|
|
5227
5211
|
var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
5228
5212
|
var tabs = _ref.tabs,
|
|
5229
5213
|
onTabClick = _ref.onTabClick,
|
|
@@ -5438,7 +5422,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
|
|
|
5438
5422
|
}, tabs.map(function (_ref4) {
|
|
5439
5423
|
var id = _ref4.id,
|
|
5440
5424
|
text = _ref4.text,
|
|
5441
|
-
rest = _objectWithoutPropertiesLoose(_ref4,
|
|
5425
|
+
rest = _objectWithoutPropertiesLoose(_ref4, ["id", "text"]);
|
|
5442
5426
|
|
|
5443
5427
|
return /*#__PURE__*/React__default.createElement("li", {
|
|
5444
5428
|
key: id
|
|
@@ -5494,9 +5478,6 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
|
|
|
5494
5478
|
var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: var(--grid-outer-margin);\n height: var(--button-height);\n\n h6 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n & {\n margin-right: var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
5495
5479
|
var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h6 {\n margin: 0;\n padding: 0;\n }\n display: none;\n\n @media ", " {\n & {\n display: flex;\n align-items: center;\n margin-left: var(--grid-margin);\n padding: 12px 0;\n }\n }\n"])), devices.mobile);
|
|
5496
5480
|
|
|
5497
|
-
var _excluded$a = ["text"],
|
|
5498
|
-
_excluded2 = ["text"];
|
|
5499
|
-
|
|
5500
5481
|
var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
5501
5482
|
var title = _ref.title,
|
|
5502
5483
|
links = _ref.links,
|
|
@@ -5506,11 +5487,11 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
|
|
|
5506
5487
|
|
|
5507
5488
|
var _ref2 = (links == null ? void 0 : links[0]) || {},
|
|
5508
5489
|
primaryButtonText = _ref2.text,
|
|
5509
|
-
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2,
|
|
5490
|
+
primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
5510
5491
|
|
|
5511
5492
|
var _ref3 = (links == null ? void 0 : links[1]) || {},
|
|
5512
5493
|
secondaryButtonText = _ref3.text,
|
|
5513
|
-
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3,
|
|
5494
|
+
secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, ["text"]);
|
|
5514
5495
|
|
|
5515
5496
|
return /*#__PURE__*/React__default.createElement(TitleCTAGridWrapper, {
|
|
5516
5497
|
sticky: sticky
|
|
@@ -5991,9 +5972,6 @@ var truncateReactNodeString = function truncateReactNodeString(node, resultLengt
|
|
|
5991
5972
|
return truncateHtmlString(nodeString, resultLength, addDots);
|
|
5992
5973
|
};
|
|
5993
5974
|
|
|
5994
|
-
var _excluded$b = ["text"],
|
|
5995
|
-
_excluded2$1 = ["text"];
|
|
5996
|
-
|
|
5997
5975
|
var _buttonTypeToButton;
|
|
5998
5976
|
var LENGTH_LARGE_TEXT$1 = 28;
|
|
5999
5977
|
var LENGTH_SMALL_TEXT$2 = 19;
|
|
@@ -6044,7 +6022,7 @@ var Card = function Card(_ref) {
|
|
|
6044
6022
|
var _ref2 = firstButton || {},
|
|
6045
6023
|
_ref2$text = _ref2.text,
|
|
6046
6024
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
6047
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2,
|
|
6025
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
6048
6026
|
|
|
6049
6027
|
var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
|
|
6050
6028
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -6052,7 +6030,7 @@ var Card = function Card(_ref) {
|
|
|
6052
6030
|
var _ref3 = secondButton || {},
|
|
6053
6031
|
_ref3$text = _ref3.text,
|
|
6054
6032
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
6055
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3,
|
|
6033
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
|
|
6056
6034
|
|
|
6057
6035
|
var tertiaryButtonTextTruncate = size === 'small' ? truncate(secondButtonText, LENGTH_SMALL_TEXT$2) : truncate(secondButtonText, LENGTH_LARGE_TEXT$1);
|
|
6058
6036
|
|
|
@@ -6556,8 +6534,6 @@ var LogoWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$c || (_tem
|
|
|
6556
6534
|
var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
|
|
6557
6535
|
var PageHeadingText = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-family: var(--font-family-altHeader);\n text-transform: var(--text-transform-altHeader);\n word-break: var(--word-break-altHeader);\n"])));
|
|
6558
6536
|
|
|
6559
|
-
var _excluded$c = ["text"];
|
|
6560
|
-
|
|
6561
6537
|
var PageHeading = function PageHeading(_ref) {
|
|
6562
6538
|
var title = _ref.title,
|
|
6563
6539
|
text = _ref.text,
|
|
@@ -6568,7 +6544,7 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6568
6544
|
|
|
6569
6545
|
var _ref2 = link || {},
|
|
6570
6546
|
linkText = _ref2.text,
|
|
6571
|
-
restLink = _objectWithoutPropertiesLoose(_ref2,
|
|
6547
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
6572
6548
|
|
|
6573
6549
|
var truncatedText = text == null ? void 0 : text.substring(0, 250);
|
|
6574
6550
|
var truncatedTitle = title && title.substring(0, 40);
|
|
@@ -6596,11 +6572,9 @@ var PageHeading = function PageHeading(_ref) {
|
|
|
6596
6572
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restLink), linkText)) : null));
|
|
6597
6573
|
};
|
|
6598
6574
|
|
|
6599
|
-
var _excluded$d = ["link"];
|
|
6600
|
-
|
|
6601
6575
|
var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
6602
6576
|
var link = _ref.link,
|
|
6603
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
6577
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
|
|
6604
6578
|
|
|
6605
6579
|
var coreLink = link && _extends({}, link, {
|
|
6606
6580
|
color: exports.Colors.White,
|
|
@@ -6614,11 +6588,9 @@ var PageHeadingCore = function PageHeadingCore(_ref) {
|
|
|
6614
6588
|
})));
|
|
6615
6589
|
};
|
|
6616
6590
|
|
|
6617
|
-
var _excluded$e = ["link"];
|
|
6618
|
-
|
|
6619
6591
|
var PageHeadingCinema = function PageHeadingCinema(_ref) {
|
|
6620
6592
|
var link = _ref.link,
|
|
6621
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
6593
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
|
|
6622
6594
|
|
|
6623
6595
|
var cinemaLink = link && _extends({}, link, {
|
|
6624
6596
|
color: exports.Colors.Black,
|
|
@@ -6642,8 +6614,6 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$d || (_tem
|
|
|
6642
6614
|
var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n align-self: end;\n display: flex;\n justify-content: center;\n margin-top: 40px;\n\n @media ", " {\n & {\n margin-top: 0px;\n margin-bottom: 20px;\n }\n }\n"])), devices.mobile);
|
|
6643
6615
|
var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 20px;\n left: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @keyframes UpDown {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(8px);\n }\n }\n\n a {\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n border: none;\n padding: 0;\n :hover {\n border: none;\n\n > span {\n animation: UpDown 1500ms linear infinite;\n }\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n\n @media ", " {\n & {\n display: none;\n }\n }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
|
|
6644
6616
|
|
|
6645
|
-
var _excluded$f = ["text"];
|
|
6646
|
-
|
|
6647
6617
|
var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
6648
6618
|
var children = _ref.children,
|
|
6649
6619
|
text = _ref.text,
|
|
@@ -6660,7 +6630,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
|
|
|
6660
6630
|
|
|
6661
6631
|
var _ref2 = link || {},
|
|
6662
6632
|
linkText = _ref2.text,
|
|
6663
|
-
restLink = _objectWithoutPropertiesLoose(_ref2,
|
|
6633
|
+
restLink = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
6664
6634
|
|
|
6665
6635
|
return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
|
|
6666
6636
|
bgUrlDesktop: bgUrlDesktop,
|
|
@@ -6753,11 +6723,9 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
|
|
|
6753
6723
|
var _templateObject$W;
|
|
6754
6724
|
var StreamWrapper = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h2::selection,\n div::selection {\n color: #1866dc;\n background-color: #fff;\n }\n"])));
|
|
6755
6725
|
|
|
6756
|
-
var _excluded$g = ["link"];
|
|
6757
|
-
|
|
6758
6726
|
var PageHeadingStream = function PageHeadingStream(_ref) {
|
|
6759
6727
|
var link = _ref.link,
|
|
6760
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
6728
|
+
rest = _objectWithoutPropertiesLoose(_ref, ["link"]);
|
|
6761
6729
|
|
|
6762
6730
|
var streamLink = link && _extends({}, link, {
|
|
6763
6731
|
color: exports.Colors.Black,
|
|
@@ -6951,8 +6919,6 @@ var useMobile = function useMobile() {
|
|
|
6951
6919
|
return mobile;
|
|
6952
6920
|
};
|
|
6953
6921
|
|
|
6954
|
-
var _excluded$h = ["text"];
|
|
6955
|
-
|
|
6956
6922
|
var useResponsiveVideo = function useResponsiveVideo(video, poster) {
|
|
6957
6923
|
var mobileVideo = video.mobile || video.desktop;
|
|
6958
6924
|
var desktopVideo = video.desktop || video.mobile;
|
|
@@ -7067,7 +7033,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
|
|
|
7067
7033
|
|
|
7068
7034
|
var _ref5 = link || {},
|
|
7069
7035
|
linkText = _ref5.text,
|
|
7070
|
-
restLink = _objectWithoutPropertiesLoose(_ref5,
|
|
7036
|
+
restLink = _objectWithoutPropertiesLoose(_ref5, ["text"]);
|
|
7071
7037
|
|
|
7072
7038
|
var titleSize = title && title.length > 20 ? 4 : 3;
|
|
7073
7039
|
var video = {
|
|
@@ -7401,10 +7367,6 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject19
|
|
|
7401
7367
|
var TimerWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 32px;\n"])));
|
|
7402
7368
|
var EndDateText = /*#__PURE__*/styled__default.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid var(--base-color-black);\n padding-bottom: 32px;\n margin-bottom: 32px;\n\n @media ", " {\n padding-bottom: 20px;\n margin-bottom: 20px;\n }\n"])), devices.mobile);
|
|
7403
7369
|
|
|
7404
|
-
var _excluded$i = ["text"],
|
|
7405
|
-
_excluded2$2 = ["text"],
|
|
7406
|
-
_excluded3 = ["text"];
|
|
7407
|
-
|
|
7408
7370
|
var _buttonTypeToButton$1;
|
|
7409
7371
|
var LENGTH_TEXT$1 = 28;
|
|
7410
7372
|
var LENGTH_TEXT_PARAGRAPH = 130;
|
|
@@ -7475,7 +7437,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7475
7437
|
var _ref2 = firstButton || {},
|
|
7476
7438
|
_ref2$text = _ref2.text,
|
|
7477
7439
|
firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7478
|
-
restFirstButton = _objectWithoutPropertiesLoose(_ref2,
|
|
7440
|
+
restFirstButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7479
7441
|
|
|
7480
7442
|
var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
|
|
7481
7443
|
var secondButton = links == null ? void 0 : links[1];
|
|
@@ -7483,7 +7445,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7483
7445
|
var _ref3 = secondButton || {},
|
|
7484
7446
|
_ref3$text = _ref3.text,
|
|
7485
7447
|
secondButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7486
|
-
restSecondButton = _objectWithoutPropertiesLoose(_ref3,
|
|
7448
|
+
restSecondButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
|
|
7487
7449
|
|
|
7488
7450
|
var secondButtonTextTruncate = truncate(secondButtonText, LENGTH_TEXT$1);
|
|
7489
7451
|
var textTruncate = asCard ? truncate(text || '', LENGTH_TEXT_PARAGRAPH) : text;
|
|
@@ -7492,7 +7454,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
|
|
|
7492
7454
|
var textLinkItems = textLinks ? textLinks.map(function (link, index) {
|
|
7493
7455
|
var _link$text = link.text,
|
|
7494
7456
|
textLinkText = _link$text === void 0 ? '' : _link$text,
|
|
7495
|
-
restTextLink = _objectWithoutPropertiesLoose(link,
|
|
7457
|
+
restTextLink = _objectWithoutPropertiesLoose(link, ["text"]);
|
|
7496
7458
|
|
|
7497
7459
|
return /*#__PURE__*/React__default.createElement(TextLinkWrapper$2, {
|
|
7498
7460
|
key: index
|
|
@@ -7650,8 +7612,6 @@ var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$d ||
|
|
|
7650
7612
|
return '';
|
|
7651
7613
|
});
|
|
7652
7614
|
|
|
7653
|
-
var _excluded$j = ["text"],
|
|
7654
|
-
_excluded2$3 = ["text"];
|
|
7655
7615
|
var LENGTH_TEXT$3 = 28;
|
|
7656
7616
|
|
|
7657
7617
|
var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
@@ -7677,7 +7637,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7677
7637
|
var _ref2 = primaryButton || {},
|
|
7678
7638
|
_ref2$text = _ref2.text,
|
|
7679
7639
|
primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
|
|
7680
|
-
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2,
|
|
7640
|
+
restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, ["text"]);
|
|
7681
7641
|
|
|
7682
7642
|
var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
|
|
7683
7643
|
var tertiaryButton = links == null ? void 0 : links[1];
|
|
@@ -7685,7 +7645,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
7685
7645
|
var _ref3 = tertiaryButton || {},
|
|
7686
7646
|
_ref3$text = _ref3.text,
|
|
7687
7647
|
tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
|
|
7688
|
-
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3,
|
|
7648
|
+
restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, ["text"]);
|
|
7689
7649
|
|
|
7690
7650
|
var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$3);
|
|
7691
7651
|
return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
|
|
@@ -7766,8 +7726,73 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
7766
7726
|
})));
|
|
7767
7727
|
};
|
|
7768
7728
|
|
|
7769
|
-
var _templateObject$12;
|
|
7770
|
-
var
|
|
7729
|
+
var _templateObject$12, _templateObject2$L, _templateObject3$D;
|
|
7730
|
+
var StatusBannerWrapper = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 26px 150px;\n display: flex;\n justify-content: space-between;\n background-color: var(--base-color-lightgrey);\n transition: transform 0.3s ease;\n transform-origin: top;\n\n @media ", " {\n padding: 20px 20px;\n }\n\n @media ", " {\n padding: 20px 50px;\n }\n\n &.closing {\n transform: scaleY(0);\n }\n"])), devices.mobile, devices.tablet);
|
|
7731
|
+
var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.3s ease-in-out;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n"])));
|
|
7732
|
+
var SvgContainer$3 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n align-items: end;\n\n svg {\n width: var(--navigation-large-gap);\n height: var(--navigation-large-gap);\n padding-left: 50px;\n }\n\n cursor: pointer;\n\n @media ", " {\n padding-left: 20px;\n }\n"])), devices.mobile);
|
|
7733
|
+
|
|
7734
|
+
var StatusBanner = function StatusBanner(_ref) {
|
|
7735
|
+
var statusText = _ref.statusText,
|
|
7736
|
+
_ref$visibility = _ref.visibility,
|
|
7737
|
+
visibility = _ref$visibility === void 0 ? true : _ref$visibility;
|
|
7738
|
+
|
|
7739
|
+
var _useState = React.useState(visibility),
|
|
7740
|
+
isVisible = _useState[0],
|
|
7741
|
+
setIsVisible = _useState[1];
|
|
7742
|
+
|
|
7743
|
+
var _useState2 = React.useState(false),
|
|
7744
|
+
isClosing = _useState2[0],
|
|
7745
|
+
setIsClosing = _useState2[1];
|
|
7746
|
+
|
|
7747
|
+
var content = React.useRef(null);
|
|
7748
|
+
|
|
7749
|
+
var handleCloseBanner = function handleCloseBanner() {
|
|
7750
|
+
setIsClosing(true);
|
|
7751
|
+
|
|
7752
|
+
var transitionEnd = function transitionEnd() {
|
|
7753
|
+
setIsVisible(!visibility);
|
|
7754
|
+
|
|
7755
|
+
if (content.current) {
|
|
7756
|
+
content.current.removeEventListener('transitionend', transitionEnd);
|
|
7757
|
+
}
|
|
7758
|
+
};
|
|
7759
|
+
|
|
7760
|
+
if (content.current) {
|
|
7761
|
+
content.current.addEventListener('transitionend', transitionEnd);
|
|
7762
|
+
}
|
|
7763
|
+
|
|
7764
|
+
setTimeout(function () {
|
|
7765
|
+
setIsVisible(!visibility);
|
|
7766
|
+
}, 300);
|
|
7767
|
+
};
|
|
7768
|
+
|
|
7769
|
+
var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
|
|
7770
|
+
if (e.key === 'Enter') {
|
|
7771
|
+
handleCloseBanner();
|
|
7772
|
+
}
|
|
7773
|
+
};
|
|
7774
|
+
|
|
7775
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StatusBannerWrapper, {
|
|
7776
|
+
role: "alert",
|
|
7777
|
+
className: isClosing ? 'closing' : '',
|
|
7778
|
+
"data-testid": "statusContainer"
|
|
7779
|
+
}, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement("div", {
|
|
7780
|
+
dangerouslySetInnerHTML: {
|
|
7781
|
+
__html: statusText
|
|
7782
|
+
}
|
|
7783
|
+
})), /*#__PURE__*/React__default.createElement(SvgContainer$3, {
|
|
7784
|
+
onClick: handleCloseBanner,
|
|
7785
|
+
tabIndex: 0,
|
|
7786
|
+
role: "button",
|
|
7787
|
+
"aria-label": "Close",
|
|
7788
|
+
onKeyDown: onKeyboardCloseHandler
|
|
7789
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7790
|
+
iconName: "Close"
|
|
7791
|
+
})))));
|
|
7792
|
+
};
|
|
7793
|
+
|
|
7794
|
+
var _templateObject$13;
|
|
7795
|
+
var SectionTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 30px 0;\n\n & > div {\n row-gap: 0;\n }\n\n & h1,\n & h2 {\n margin: 16px 0;\n white-space: pre-wrap;\n }\n\n @media ", " {\n & h1,\n & h2 {\n margin: 12px 0;\n }\n }\n\n & div {\n font-size: var(--font-size-title-description);\n line-height: var(--line-height-title-description);\n margin-block-start: 0;\n }\n"])), devices.mobile);
|
|
7771
7796
|
|
|
7772
7797
|
var SectionTitle = function SectionTitle(_ref) {
|
|
7773
7798
|
var title = _ref.title,
|
|
@@ -7793,430 +7818,76 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
7793
7818
|
}, description))));
|
|
7794
7819
|
};
|
|
7795
7820
|
|
|
7796
|
-
var _templateObject$
|
|
7797
|
-
var
|
|
7798
|
-
|
|
7799
|
-
|
|
7821
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v;
|
|
7822
|
+
var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
|
|
7823
|
+
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .chord-select__control {\n min-height: 48px;\n border-radius: 0;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .chord-select__control--is-focused {\n border-color: var(--base-color-darkgrey);\n box-shadow: ", ";\n }\n .chord-select__indicator-separator {\n display: none;\n }\n .chord-select__control--menu-is-open {\n .chord-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .chord-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--base-color-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n .chord-select__single-value,\n .chord-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n }\n .chord-select__placeholder {\n color: var(--base-color-darkgrey);\n }\n .chord-select__single-value {\n color: var(--base-color-black);\n }\n .chord-select__value-container {\n padding-left: 20px;\n padding-right: 15px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .chord-select--is-disabled {\n .chord-select__control {\n border: 1px solid var(--base-color-lightgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__indicator,\n .chord-select__single-value {\n color: var(--base-color-darkgrey);\n }\n }\n .chord-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-darkgrey);\n background: var(--base-color-lightgrey);\n }\n .chord-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .chord-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n &:active,\n &.chord-select__option--is-focused {\n background: var(--base-color-midgrey);\n }\n }\n .chord-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .chord-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-black);\n }\n .chord-select__menu-notice {\n font-family: var(--font-family-altHeader);\n font-feature-settings: var(--font-feature-settings-altHeader);\n font-size: var(--font-size-altHeader-6);\n font-weight: var(--font-weight-altHeader-6);\n letter-spacing: var(--letter-spacing-altHeader-6);\n line-height: var(--line-height-altHeader-6);\n text-transform: var(--text-transform-altHeader);\n color: var(--base-color-darkgrey);\n padding: 10px 20px;\n text-align: left;\n }\n .chord-select__group-heading {\n padding: 0 20px;\n text-transform: none;\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n color: var(--base-color-darkgrey);\n &:not(:empty) {\n margin-bottom: 5px;\n }\n }\n .chord-select__group {\n padding-top: 0;\n padding-bottom: 10px;\n &:last-child {\n padding-bottom: 0;\n }\n }\n"])), function (_ref) {
|
|
7824
|
+
var width = _ref.width;
|
|
7825
|
+
if (!width) return 'none';
|
|
7826
|
+
return width + 'px';
|
|
7800
7827
|
}, function (_ref2) {
|
|
7801
|
-
var
|
|
7802
|
-
return
|
|
7828
|
+
var error = _ref2.error;
|
|
7829
|
+
if (error !== undefined) return "1px solid var(--base-color-errorstate)";
|
|
7830
|
+
return "1px solid var(--base-color-darkgrey)";
|
|
7803
7831
|
}, function (_ref3) {
|
|
7804
|
-
var
|
|
7805
|
-
return
|
|
7832
|
+
var error = _ref3.error;
|
|
7833
|
+
if (error !== undefined) return "var(--base-color-errorstate)";
|
|
7834
|
+
return "var(--base-color-darkgrey)";
|
|
7835
|
+
}, function (_ref4) {
|
|
7836
|
+
var darkMode = _ref4.darkMode;
|
|
7837
|
+
if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
|
|
7838
|
+
return "0 0 0 3px var(--base-color-lapislazuli)";
|
|
7806
7839
|
});
|
|
7807
|
-
var
|
|
7808
|
-
var
|
|
7809
|
-
return
|
|
7840
|
+
var TextLabel$1 = /*#__PURE__*/styled__default.p(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
|
|
7841
|
+
var darkMode = _ref5.darkMode;
|
|
7842
|
+
if (darkMode) return "var(--base-color-white)";
|
|
7843
|
+
return "var(--base-color-black)";
|
|
7844
|
+
});
|
|
7845
|
+
var ErrorLabel$1 = /*#__PURE__*/styled__default.p(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
|
|
7846
|
+
var darkMode = _ref6.darkMode;
|
|
7847
|
+
if (darkMode) return "var(--base-color-white)";
|
|
7848
|
+
return "var(--base-color-errorstate)";
|
|
7810
7849
|
});
|
|
7811
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/styled.css(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
7812
|
-
var listItemStyles = /*#__PURE__*/styled.css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
7813
|
-
var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
|
|
7814
|
-
var theme = _ref5.theme;
|
|
7815
|
-
return {
|
|
7816
|
-
iconName: 'DropdownArrow',
|
|
7817
|
-
color: theme.colors.black,
|
|
7818
|
-
title: 'Select Arrow'
|
|
7819
|
-
};
|
|
7820
|
-
})(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n pointer-events: none;\n\n max-width: 24px;\n max-height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n"])));
|
|
7821
|
-
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
|
|
7822
|
-
var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
|
|
7823
|
-
var Options = /*#__PURE__*/styled__default.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
|
|
7824
|
-
var Option = /*#__PURE__*/styled__default.li(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
|
|
7825
|
-
var theme = _ref6.theme,
|
|
7826
|
-
hover = _ref6.hover;
|
|
7827
|
-
var _theme$colors = theme.colors,
|
|
7828
|
-
lightgrey = _theme$colors.lightgrey,
|
|
7829
|
-
midgrey = _theme$colors.midgrey;
|
|
7830
|
-
if (hover) return "background-color: " + midgrey;
|
|
7831
|
-
return "\n background-color: " + lightgrey + ";\n &:hover { background-color: " + midgrey + " }\n ";
|
|
7832
|
-
});
|
|
7833
|
-
|
|
7834
|
-
var selectStyles = function selectStyles(width, height) {
|
|
7835
|
-
return styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n z-index: ", ";\n\n width: ", ";\n height: ", ";\n\n * {\n width: ", ";\n }\n\n ", " {\n position: absolute;\n top: ", ";\n }\n ", " {\n height: ", ";\n }\n p {\n height: ", ";\n padding-inline: 20px;\n\n display: flex;\n align-items: center;\n }\n"])), zIndexes[3], width, height, width, Options, height, Option, height, height);
|
|
7836
|
-
};
|
|
7837
|
-
|
|
7838
|
-
var SelectList = /*#__PURE__*/styled__default.ul(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n ", "\n ", "\n ", "\n\n & ", " {\n position: absolute;\n\n top: 13px;\n right: 16px;\n }\n"])), function (_ref7) {
|
|
7839
|
-
var width = _ref7.width,
|
|
7840
|
-
height = _ref7.height;
|
|
7841
|
-
return selectStyles(width === 'default' ? "354px" : width + "px", height === 'default' ? "48px" : height + "px");
|
|
7842
|
-
}, stateStyles, noMarginAndPaddingStyles, listItemStyles, borderStyles, ArrowIcon);
|
|
7843
|
-
|
|
7844
|
-
var useKeyboardAccessibility = function useKeyboardAccessibility(_ref) {
|
|
7845
|
-
var selectRef = _ref.selectRef,
|
|
7846
|
-
optionsRef = _ref.optionsRef,
|
|
7847
|
-
shouldHighlightOption = _ref.shouldHighlightOption;
|
|
7848
|
-
|
|
7849
|
-
var _useState = React.useState(-1),
|
|
7850
|
-
itemToHighlight = _useState[0],
|
|
7851
|
-
setItemToHighlight = _useState[1];
|
|
7852
|
-
|
|
7853
|
-
var clampIndex = function clampIndex(index) {
|
|
7854
|
-
if (index < -1) return -1;
|
|
7855
|
-
if (index > optionsRef.current.length - 1) return optionsRef.current.length - 1;
|
|
7856
|
-
return index;
|
|
7857
|
-
};
|
|
7858
|
-
|
|
7859
|
-
var highlightNextOption = function highlightNextOption() {
|
|
7860
|
-
return setItemToHighlight(function (prev) {
|
|
7861
|
-
return clampIndex(prev + 1);
|
|
7862
|
-
});
|
|
7863
|
-
};
|
|
7864
|
-
|
|
7865
|
-
var highlightPrevOption = function highlightPrevOption() {
|
|
7866
|
-
return setItemToHighlight(function (prev) {
|
|
7867
|
-
return clampIndex(prev - 1);
|
|
7868
|
-
});
|
|
7869
|
-
};
|
|
7870
|
-
|
|
7871
|
-
var reset = function reset() {
|
|
7872
|
-
var _selectRef$current;
|
|
7873
|
-
|
|
7874
|
-
(_selectRef$current = selectRef.current) == null ? void 0 : _selectRef$current.blur();
|
|
7875
|
-
setItemToHighlight(-1);
|
|
7876
|
-
};
|
|
7877
|
-
|
|
7878
|
-
var handleKeyUp = function handleKeyUp(event) {
|
|
7879
|
-
if (!shouldHighlightOption) return;
|
|
7880
|
-
var shouldHighlightOptionNext = event.key === 'ArrowDown';
|
|
7881
|
-
var shouldHighlightOptionPrev = event.key === 'ArrowUp';
|
|
7882
|
-
if (shouldHighlightOptionNext) return highlightNextOption();
|
|
7883
|
-
if (shouldHighlightOptionPrev) return highlightPrevOption();
|
|
7884
|
-
};
|
|
7885
|
-
|
|
7886
|
-
var preventScrollingWhileNavigating = function preventScrollingWhileNavigating(event) {
|
|
7887
|
-
if (!shouldHighlightOption) return;
|
|
7888
|
-
if (!['ArrowDown', 'ArrowUp'].includes(event.key)) return;
|
|
7889
|
-
event.preventDefault();
|
|
7890
|
-
};
|
|
7891
|
-
|
|
7892
|
-
var handleHighlighted = function handleHighlighted(cb) {
|
|
7893
|
-
return function (event) {
|
|
7894
|
-
if (itemToHighlight === -1) return;
|
|
7895
|
-
if (event.key !== 'Enter') return;
|
|
7896
|
-
cb(itemToHighlight);
|
|
7897
|
-
reset();
|
|
7898
|
-
};
|
|
7899
|
-
};
|
|
7900
|
-
|
|
7901
|
-
React.useEffect(function () {
|
|
7902
|
-
if (shouldHighlightOption) return;
|
|
7903
|
-
reset();
|
|
7904
|
-
}, [shouldHighlightOption]);
|
|
7905
|
-
return {
|
|
7906
|
-
handleKeyUp: handleKeyUp,
|
|
7907
|
-
preventScrollingWhileNavigating: preventScrollingWhileNavigating,
|
|
7908
|
-
handleHighlighted: handleHighlighted,
|
|
7909
|
-
itemToHighlight: itemToHighlight
|
|
7910
|
-
};
|
|
7911
|
-
};
|
|
7912
|
-
|
|
7913
|
-
var useVisualAccessibility = function useVisualAccessibility(_ref2) {
|
|
7914
|
-
var selectRef = _ref2.selectRef,
|
|
7915
|
-
isSelectDisabled = _ref2.isSelectDisabled;
|
|
7916
|
-
|
|
7917
|
-
var addFocusClass = function addFocusClass() {
|
|
7918
|
-
var _selectRef$current2;
|
|
7919
|
-
|
|
7920
|
-
(_selectRef$current2 = selectRef.current) == null ? void 0 : _selectRef$current2.classList.add('focus');
|
|
7921
|
-
};
|
|
7922
|
-
|
|
7923
|
-
var removeFocusClass = function removeFocusClass() {
|
|
7924
|
-
var _selectRef$current3;
|
|
7925
|
-
|
|
7926
|
-
(_selectRef$current3 = selectRef.current) == null ? void 0 : _selectRef$current3.classList.remove('focus');
|
|
7927
|
-
};
|
|
7928
|
-
|
|
7929
|
-
var toggleFocus = function toggleFocus() {
|
|
7930
|
-
var _selectRef$current4;
|
|
7931
|
-
|
|
7932
|
-
if ((_selectRef$current4 = selectRef.current) != null && _selectRef$current4.classList.contains('focus')) removeFocusClass();else addFocusClass();
|
|
7933
|
-
};
|
|
7934
|
-
|
|
7935
|
-
var withClickAwayHandler = function withClickAwayHandler(cb) {
|
|
7936
|
-
return function (event) {
|
|
7937
|
-
if (!selectRef.current) return;
|
|
7938
|
-
if (selectRef.current.contains(event.target)) return;
|
|
7939
|
-
removeFocusClass();
|
|
7940
|
-
cb();
|
|
7941
|
-
};
|
|
7942
|
-
};
|
|
7943
|
-
|
|
7944
|
-
React.useEffect(function () {
|
|
7945
|
-
if (!selectRef.current) return;
|
|
7946
|
-
|
|
7947
|
-
if (isSelectDisabled) {
|
|
7948
|
-
selectRef.current.classList.add('disabled');
|
|
7949
|
-
} else selectRef.current.classList.remove('disabled');
|
|
7950
|
-
}, [isSelectDisabled]);
|
|
7951
|
-
return {
|
|
7952
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
7953
|
-
toggleFocus: toggleFocus,
|
|
7954
|
-
addFocusClass: addFocusClass,
|
|
7955
|
-
removeFocusClass: removeFocusClass
|
|
7956
|
-
};
|
|
7957
|
-
};
|
|
7958
|
-
|
|
7959
|
-
var useAccessibility = function useAccessibility(props) {
|
|
7960
|
-
var selectRef = props.selectRef;
|
|
7961
|
-
|
|
7962
|
-
var _useKeyboardAccessibi = useKeyboardAccessibility(props),
|
|
7963
|
-
handleKeyUp = _useKeyboardAccessibi.handleKeyUp,
|
|
7964
|
-
preventScrollingWhileNavigating = _useKeyboardAccessibi.preventScrollingWhileNavigating,
|
|
7965
|
-
handleHighlighted = _useKeyboardAccessibi.handleHighlighted,
|
|
7966
|
-
itemToHighlight = _useKeyboardAccessibi.itemToHighlight;
|
|
7967
|
-
|
|
7968
|
-
var _useVisualAccessibili = useVisualAccessibility(props),
|
|
7969
|
-
addFocusClass = _useVisualAccessibili.addFocusClass,
|
|
7970
|
-
removeFocusClass = _useVisualAccessibili.removeFocusClass,
|
|
7971
|
-
toggleFocus = _useVisualAccessibili.toggleFocus,
|
|
7972
|
-
withClickAwayHandler = _useVisualAccessibili.withClickAwayHandler;
|
|
7973
|
-
|
|
7974
|
-
React.useEffect(function () {
|
|
7975
|
-
if (!selectRef.current) return;
|
|
7976
|
-
selectRef.current.addEventListener('keydown', preventScrollingWhileNavigating);
|
|
7977
|
-
selectRef.current.addEventListener('keyup', handleKeyUp);
|
|
7978
|
-
selectRef.current.addEventListener('click', toggleFocus);
|
|
7979
|
-
selectRef.current.addEventListener('focus', addFocusClass);
|
|
7980
|
-
selectRef.current.addEventListener('blur', removeFocusClass);
|
|
7981
|
-
return function () {
|
|
7982
|
-
var _selectRef$current5, _selectRef$current6, _selectRef$current7, _selectRef$current8, _selectRef$current9;
|
|
7983
7850
|
|
|
7984
|
-
|
|
7985
|
-
|
|
7986
|
-
|
|
7987
|
-
|
|
7988
|
-
(_selectRef$current9 = selectRef.current) == null ? void 0 : _selectRef$current9.removeEventListener('blur', removeFocusClass);
|
|
7989
|
-
};
|
|
7990
|
-
});
|
|
7991
|
-
return {
|
|
7992
|
-
withClickAwayHandler: withClickAwayHandler,
|
|
7993
|
-
handleHighlighted: handleHighlighted,
|
|
7994
|
-
itemToHighlight: itemToHighlight
|
|
7995
|
-
};
|
|
7851
|
+
var DropdownIndicator = function DropdownIndicator(props) {
|
|
7852
|
+
return /*#__PURE__*/React__default.createElement(ReactSelect.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
|
|
7853
|
+
iconName: 'DropdownArrow'
|
|
7854
|
+
}));
|
|
7996
7855
|
};
|
|
7997
|
-
/**
|
|
7998
|
-
* A select component, created using <ul> and <li> elements, with bespoke accessibility
|
|
7999
|
-
* logic.
|
|
8000
|
-
*
|
|
8001
|
-
* # Usage
|
|
8002
|
-
* ## Defining a component that uses a typical Select element
|
|
8003
|
-
* ```tsx
|
|
8004
|
-
* const MyComponent = () => {
|
|
8005
|
-
* const handleSelect = (value: number, text: string) => {
|
|
8006
|
-
* console.log("Selected", value);
|
|
8007
|
-
* };
|
|
8008
|
-
*
|
|
8009
|
-
* return <>
|
|
8010
|
-
* <Select
|
|
8011
|
-
* label="This is a label"
|
|
8012
|
-
* options={[
|
|
8013
|
-
* { text: "Option 1", value: 1 },
|
|
8014
|
-
* { text: "Option 2", value: 2 },
|
|
8015
|
-
* ]}
|
|
8016
|
-
* onSelect={handleSelect}
|
|
8017
|
-
* />
|
|
8018
|
-
* </>
|
|
8019
|
-
* }
|
|
8020
|
-
* ```
|
|
8021
|
-
*
|
|
8022
|
-
* ## Defining a component that uses a disabled Select element
|
|
8023
|
-
* ```tsx
|
|
8024
|
-
* const MyComponent = () => {
|
|
8025
|
-
* const handleSelect = (value: number, text: string) => {
|
|
8026
|
-
* console.log("Selected", value);
|
|
8027
|
-
* };
|
|
8028
|
-
*
|
|
8029
|
-
* return <>
|
|
8030
|
-
* <Select
|
|
8031
|
-
* disabled // Select component disabled explicitely
|
|
8032
|
-
* label="This is a label"
|
|
8033
|
-
* options={[
|
|
8034
|
-
* { text: "Option 1", value: 1 },
|
|
8035
|
-
* { text: "Option 2", value: 2 },
|
|
8036
|
-
* ]}
|
|
8037
|
-
* onSelect={handleSelect}
|
|
8038
|
-
* />
|
|
8039
|
-
* <Select
|
|
8040
|
-
* label="This is a label"
|
|
8041
|
-
* options={[]} // Select component disabled implicitely by passing an empty array of options
|
|
8042
|
-
* onSelect={handleSelect}
|
|
8043
|
-
* />
|
|
8044
|
-
* </>
|
|
8045
|
-
* }
|
|
8046
|
-
* ```
|
|
8047
|
-
*
|
|
8048
|
-
* ## Defining a component with a non-labelled Select element
|
|
8049
|
-
* ```tsx
|
|
8050
|
-
* const MyComponent = () => {
|
|
8051
|
-
* const handleSelect = (value: number, text: string) => {
|
|
8052
|
-
* console.log("Selected", value);
|
|
8053
|
-
* };
|
|
8054
|
-
*
|
|
8055
|
-
* return <>
|
|
8056
|
-
* <Select
|
|
8057
|
-
* label=""
|
|
8058
|
-
* options={[
|
|
8059
|
-
* { text: "Option 1", value: 1 },
|
|
8060
|
-
* { text: "Option 2", value: 2 },
|
|
8061
|
-
* ]}
|
|
8062
|
-
* onSelect={handleSelect}
|
|
8063
|
-
* />
|
|
8064
|
-
* </>
|
|
8065
|
-
* }
|
|
8066
|
-
* ```
|
|
8067
|
-
*
|
|
8068
|
-
* ## Changing the dimensions of a Select element (px)
|
|
8069
|
-
* ```tsx
|
|
8070
|
-
* const MyComponent = () => {
|
|
8071
|
-
* const handleSelect = (value: number, text: string) => {
|
|
8072
|
-
* console.log("Selected", value);
|
|
8073
|
-
* };
|
|
8074
|
-
*
|
|
8075
|
-
* const selectWidthPx = 100;
|
|
8076
|
-
* const selectHeightPx = 27;
|
|
8077
|
-
*
|
|
8078
|
-
* return <>
|
|
8079
|
-
* <Select
|
|
8080
|
-
* label="This is a label"
|
|
8081
|
-
* options={[
|
|
8082
|
-
* { text: "Option 1", value: 1 },
|
|
8083
|
-
* { text: "Option 2", value: 2 },
|
|
8084
|
-
* ]}
|
|
8085
|
-
* onSelect={handleSelect}
|
|
8086
|
-
* width={selectWidthPx}
|
|
8087
|
-
* height={selectHeightPx}
|
|
8088
|
-
* />
|
|
8089
|
-
* </>
|
|
8090
|
-
* }
|
|
8091
|
-
* ```
|
|
8092
|
-
*/
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
function Select(_ref3) {
|
|
8096
|
-
var _ref4, _selectedValue$text, _options$;
|
|
8097
|
-
|
|
8098
|
-
var label = _ref3.label,
|
|
8099
|
-
options = _ref3.options,
|
|
8100
|
-
onSelect = _ref3.onSelect,
|
|
8101
|
-
_ref3$disabled = _ref3.disabled,
|
|
8102
|
-
disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
|
|
8103
|
-
_ref3$resetWhenOption = _ref3.resetWhenOptionsUpdate,
|
|
8104
|
-
resetWhenOptionsUpdate = _ref3$resetWhenOption === void 0 ? false : _ref3$resetWhenOption,
|
|
8105
|
-
_ref3$width = _ref3.width,
|
|
8106
|
-
width = _ref3$width === void 0 ? 'default' : _ref3$width,
|
|
8107
|
-
_ref3$height = _ref3.height,
|
|
8108
|
-
height = _ref3$height === void 0 ? 'default' : _ref3$height;
|
|
8109
|
-
var selectRef = React.useRef(null);
|
|
8110
|
-
var optionsRef = React.useRef([]);
|
|
8111
7856
|
|
|
8112
|
-
|
|
8113
|
-
|
|
8114
|
-
|
|
8115
|
-
|
|
8116
|
-
|
|
8117
|
-
|
|
8118
|
-
|
|
8119
|
-
|
|
8120
|
-
var isDisabled = disabled || options.length === 0;
|
|
8121
|
-
|
|
8122
|
-
var _useAccessibility = useAccessibility({
|
|
8123
|
-
selectRef: selectRef,
|
|
8124
|
-
optionsRef: optionsRef,
|
|
8125
|
-
shouldHighlightOption: isOpen,
|
|
8126
|
-
isSelectDisabled: isDisabled
|
|
8127
|
-
}),
|
|
8128
|
-
withClickAwayHandler = _useAccessibility.withClickAwayHandler,
|
|
8129
|
-
handleHighlighted = _useAccessibility.handleHighlighted,
|
|
8130
|
-
itemToHighlight = _useAccessibility.itemToHighlight;
|
|
8131
|
-
|
|
8132
|
-
var openSelect = function openSelect() {
|
|
8133
|
-
return setIsOpen(true);
|
|
8134
|
-
};
|
|
8135
|
-
|
|
8136
|
-
var closeSelect = function closeSelect() {
|
|
8137
|
-
return setIsOpen(false);
|
|
8138
|
-
};
|
|
8139
|
-
|
|
8140
|
-
var toggleSelect = function toggleSelect() {
|
|
8141
|
-
return setIsOpen(function (prev) {
|
|
8142
|
-
return !prev;
|
|
8143
|
-
});
|
|
8144
|
-
};
|
|
8145
|
-
|
|
8146
|
-
var closeSelectOnBlur = withClickAwayHandler(closeSelect);
|
|
8147
|
-
|
|
8148
|
-
var handleOptionSelection = function handleOptionSelection(index) {
|
|
8149
|
-
var option = options[index];
|
|
8150
|
-
setSelectedValue(option);
|
|
8151
|
-
onSelect(option.value, option.text);
|
|
8152
|
-
};
|
|
8153
|
-
|
|
8154
|
-
React.useEffect(function () {
|
|
8155
|
-
document.addEventListener('click', closeSelectOnBlur, false);
|
|
8156
|
-
return function () {
|
|
8157
|
-
document.removeEventListener('click', closeSelectOnBlur, false);
|
|
8158
|
-
};
|
|
8159
|
-
}, []);
|
|
8160
|
-
React.useEffect(function () {
|
|
8161
|
-
if (!resetWhenOptionsUpdate) return;
|
|
8162
|
-
|
|
8163
|
-
if (options.length === 0) {
|
|
8164
|
-
setSelectedValue(null);
|
|
8165
|
-
return;
|
|
8166
|
-
}
|
|
7857
|
+
function Select(_ref) {
|
|
7858
|
+
var label = _ref.label,
|
|
7859
|
+
darkMode = _ref.darkMode,
|
|
7860
|
+
width = _ref.width,
|
|
7861
|
+
error = _ref.error,
|
|
7862
|
+
_ref$isSearchable = _ref.isSearchable,
|
|
7863
|
+
isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
|
|
7864
|
+
selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "darkMode", "width", "error", "isSearchable"]);
|
|
8167
7865
|
|
|
8168
|
-
|
|
8169
|
-
|
|
8170
|
-
|
|
8171
|
-
|
|
8172
|
-
|
|
8173
|
-
|
|
8174
|
-
}, label), /*#__PURE__*/React__default.createElement(SelectList, {
|
|
8175
|
-
id: "select",
|
|
8176
|
-
ref: selectRef,
|
|
8177
|
-
onClick: toggleSelect,
|
|
8178
|
-
onFocus: openSelect,
|
|
8179
|
-
onBlur: closeSelect,
|
|
8180
|
-
onMouseDown: function onMouseDown(e) {
|
|
8181
|
-
return e.preventDefault();
|
|
8182
|
-
},
|
|
8183
|
-
onKeyUp: handleHighlighted(handleOptionSelection),
|
|
7866
|
+
return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$1, {
|
|
7867
|
+
darkMode: darkMode,
|
|
7868
|
+
"data-testid": "text-field-text-label"
|
|
7869
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
7870
|
+
level: 6
|
|
7871
|
+
}, label)), /*#__PURE__*/React__default.createElement(SelectWrapper, {
|
|
8184
7872
|
width: width,
|
|
8185
|
-
|
|
8186
|
-
|
|
8187
|
-
|
|
8188
|
-
|
|
8189
|
-
|
|
8190
|
-
|
|
8191
|
-
|
|
8192
|
-
|
|
8193
|
-
|
|
8194
|
-
|
|
8195
|
-
"data-testid": "
|
|
8196
|
-
},
|
|
8197
|
-
|
|
8198
|
-
},
|
|
8199
|
-
return /*#__PURE__*/React__default.createElement(Option, {
|
|
8200
|
-
ref: function ref(element) {
|
|
8201
|
-
if (!element || optionsRef.current.length === options.length) return;
|
|
8202
|
-
optionsRef.current.push(element);
|
|
8203
|
-
},
|
|
8204
|
-
role: "option",
|
|
8205
|
-
tabIndex: index + 1,
|
|
8206
|
-
hover: index === itemToHighlight,
|
|
8207
|
-
key: option.text,
|
|
8208
|
-
onClick: function onClick() {
|
|
8209
|
-
return handleOptionSelection(index);
|
|
8210
|
-
}
|
|
8211
|
-
}, /*#__PURE__*/React__default.createElement(BodyText, {
|
|
8212
|
-
level: 1,
|
|
8213
|
-
tag: "p"
|
|
8214
|
-
}, option.text));
|
|
8215
|
-
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
7873
|
+
error: error
|
|
7874
|
+
}, /*#__PURE__*/React__default.createElement(ReactSelect__default, Object.assign({
|
|
7875
|
+
components: {
|
|
7876
|
+
DropdownIndicator: DropdownIndicator
|
|
7877
|
+
},
|
|
7878
|
+
isSearchable: isSearchable,
|
|
7879
|
+
className: "chord-select-container",
|
|
7880
|
+
classNamePrefix: "chord-select"
|
|
7881
|
+
}, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$1, {
|
|
7882
|
+
darkMode: darkMode,
|
|
7883
|
+
"data-testid": "text-field-error-label"
|
|
7884
|
+
}, /*#__PURE__*/React__default.createElement(AltHeader, {
|
|
7885
|
+
level: 6
|
|
7886
|
+
}, error)));
|
|
8216
7887
|
}
|
|
8217
7888
|
|
|
8218
|
-
var _templateObject$
|
|
8219
|
-
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
7889
|
+
var _templateObject$15;
|
|
7890
|
+
var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1,\n h2,\n h3,\n h4 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 0px;\n }\n }\n\n & h5,\n h6 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n margin: 80px 0 16px;\n\n @media ", " {\n margin-top: 60px;\n }\n\n + p {\n margin-top: 10px;\n }\n }\n\n & a {\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n }\n\n p {\n margin: 30px 0;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & strong {\n font-weight: bold;\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n\n & ul {\n padding: 0;\n list-style: none;\n margin: 0 0 0 30px;\n\n li {\n text-indent: -20px;\n line-height: var(--line-height-listing);\n }\n }\n\n & ol {\n padding: 0;\n margin: 0 0 0 20px;\n\n li {\n line-height: var(--line-height-listing);\n }\n }\n\n & ul > li:before {\n display: inline-block;\n content: '\u2014';\n width: 0px;\n margin-left: 12px;\n margin-right: 8px;\n }\n"])), devices.mobileAndTablet, devices.mobileAndTablet, function (_ref) {
|
|
8220
7891
|
var theme = _ref.theme;
|
|
8221
7892
|
return theme.colors.primary;
|
|
8222
7893
|
});
|
|
@@ -8244,8 +7915,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8244
7915
|
})));
|
|
8245
7916
|
};
|
|
8246
7917
|
|
|
8247
|
-
var _templateObject$
|
|
8248
|
-
var Wrapper$
|
|
7918
|
+
var _templateObject$16, _templateObject2$N;
|
|
7919
|
+
var Wrapper$5 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n height: 100%;\n width: fit-content;\n\n ", " {\n height: calc(100% - 12px - var(--line-height-body-2));\n @supports not (aspect-ratio: ", ") {\n width: ", ";\n }\n }\n"])), ImageAspectRatioWrapper, function (_ref) {
|
|
8249
7920
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8250
7921
|
aspectRatio = _ref$aspectRatio === void 0 ? exports.AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8251
7922
|
return aspectRatio;
|
|
@@ -8255,7 +7926,7 @@ var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templat
|
|
|
8255
7926
|
height = _ref2.height;
|
|
8256
7927
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
8257
7928
|
});
|
|
8258
|
-
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7929
|
+
var CaptionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 12px;\n height: var(--line-height-body-2);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-size: var(--font-size-body-2);\n font-weight: var(--font-weight-body-2);\n letter-spacing: var(--letter-spacing-body-2);\n line-height: var(--line-height-body-2);\n text-transform: var(--text-transform-body-2);\n word-break: var(--word-break-body-2);\n font-style: italic;\n"])));
|
|
8259
7930
|
|
|
8260
7931
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
8261
7932
|
var caption = _ref.caption,
|
|
@@ -8284,7 +7955,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8284
7955
|
return window.removeEventListener('resize', setWrapperHeight);
|
|
8285
7956
|
};
|
|
8286
7957
|
}, [wrapperRef]);
|
|
8287
|
-
return /*#__PURE__*/React__default.createElement(Wrapper$
|
|
7958
|
+
return /*#__PURE__*/React__default.createElement(Wrapper$5, {
|
|
8288
7959
|
aspectRatio: aspectRatio,
|
|
8289
7960
|
ref: wrapperRef,
|
|
8290
7961
|
height: height
|
|
@@ -8293,13 +7964,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8293
7964
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8294
7965
|
};
|
|
8295
7966
|
|
|
8296
|
-
var _templateObject$
|
|
8297
|
-
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8298
|
-
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
7967
|
+
var _templateObject$17, _templateObject2$O, _templateObject3$F;
|
|
7968
|
+
var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
7969
|
+
var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8299
7970
|
var displayAttribution = _ref.displayAttribution;
|
|
8300
7971
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
8301
7972
|
});
|
|
8302
|
-
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
7973
|
+
var Line$1 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n height: 2px;\n width: 62px;\n margin: 32px 0;\n\n @media ", " {\n height: 1px;\n width: 46px;\n margin: 24px 0;\n }\n"])), devices.mobile);
|
|
8303
7974
|
|
|
8304
7975
|
var Quote = function Quote(_ref) {
|
|
8305
7976
|
var text = _ref.text,
|
|
@@ -8323,13 +7994,13 @@ var Quote = function Quote(_ref) {
|
|
|
8323
7994
|
}, attribution))));
|
|
8324
7995
|
};
|
|
8325
7996
|
|
|
8326
|
-
var _templateObject$
|
|
8327
|
-
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8328
|
-
var ContentContainer$
|
|
8329
|
-
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$
|
|
7997
|
+
var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$n, _templateObject6$i;
|
|
7998
|
+
var CardContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 100%;\n display: grid;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 15px;\n min-height: 50px;\n"])));
|
|
7999
|
+
var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
8000
|
+
var StyledImage = /*#__PURE__*/styled__default.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8330
8001
|
var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8331
|
-
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8332
|
-
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8002
|
+
var IconWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background: rgba(0, 0, 0, 0.4);\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n span {\n width: 40px;\n height: 40px;\n @media ", " {\n width: 24px;\n height: 24px;\n }\n @media ", " {\n width: 18px;\n height: 18px;\n }\n }\n"])), devices.tablet, devices.mobile);
|
|
8003
|
+
var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_templateObject6$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 8px;\n div {\n @media ", " {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n"])), devices.mobile);
|
|
8333
8004
|
|
|
8334
8005
|
var MiniCard = function MiniCard(_ref) {
|
|
8335
8006
|
var _ref$title = _ref.title,
|
|
@@ -8360,18 +8031,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8360
8031
|
columnSpanDevice: 4,
|
|
8361
8032
|
columnStartDesktop: 4,
|
|
8362
8033
|
columnSpanDesktop: 4
|
|
8363
|
-
}, /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8034
|
+
}, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
8364
8035
|
level: 4
|
|
8365
8036
|
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
8366
8037
|
level: 2
|
|
8367
8038
|
}, title)))));
|
|
8368
8039
|
};
|
|
8369
8040
|
|
|
8370
|
-
var _templateObject$
|
|
8371
|
-
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8372
|
-
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8373
|
-
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8374
|
-
var ContentContainer$
|
|
8041
|
+
var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x;
|
|
8042
|
+
var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin: 0px 0px 12px 0px !important;\n }\n width: 100%;\n"])));
|
|
8043
|
+
var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
8044
|
+
var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8045
|
+
var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow: auto;\n transition: max-height 0.4s ease;\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n font-feature-settings: var(--font-feature-settings-body);\n font-weight: var(--font-weight-body-1);\n letter-spacing: var(--letter-spacing-body-1);\n line-height: var(--line-height-body-1);\n text-transform: var(--text-transform-body);\n\n & h1 {\n font-size: var(--font-size-header-4);\n font-family: var(--font-family-header);\n font-feature-settings: var(--font-feature-settings-header);\n font-weight: var(--font-weight-header-4);\n letter-spacing: var(--letter-spacing-header-4);\n line-height: var(--line-height-header-4);\n text-transform: var(--text-transform-header);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & h2 {\n font-size: var(--font-size-subtitle-1);\n font-family: var(--font-family-subtitle);\n font-feature-settings: var(--font-feature-settings-subtitle);\n font-weight: var(--font-weight-subtitle-1);\n letter-spacing: var(--letter-spacing-subtitle-1);\n line-height: var(--line-height-subtitle-1);\n text-transform: var(--text-transform-subtitle);\n white-space: break-spaces;\n overflow-wrap: break-word;\n }\n\n & em {\n font-family: var(--font-family-body-italics);\n }\n\n & u {\n font-size: var(--font-size-body-1);\n font-family: var(--font-family-body);\n }\n"])));
|
|
8375
8046
|
|
|
8376
8047
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
8377
8048
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -8434,7 +8105,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8434
8105
|
var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
|
|
8435
8106
|
|
|
8436
8107
|
var IntroText = function IntroText() {
|
|
8437
|
-
return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8108
|
+
return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
|
|
8438
8109
|
dangerouslySetInnerHTML: {
|
|
8439
8110
|
__html: "" + truncatedText
|
|
8440
8111
|
}
|
|
@@ -8452,7 +8123,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8452
8123
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
8453
8124
|
level: 5,
|
|
8454
8125
|
semanticLevel: 3
|
|
8455
|
-
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8126
|
+
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
8456
8127
|
"data-testid": "richcontainer",
|
|
8457
8128
|
ref: readMoreContent,
|
|
8458
8129
|
id: contentContainerId,
|
|
@@ -8469,13 +8140,13 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8469
8140
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8470
8141
|
};
|
|
8471
8142
|
|
|
8472
|
-
var _templateObject$
|
|
8473
|
-
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$
|
|
8474
|
-
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$
|
|
8143
|
+
var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y;
|
|
8144
|
+
var MenuContainer$2 = /*#__PURE__*/styled__default.menu(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8145
|
+
var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n list-style: none;\n border-right: 1px solid var(--base-color-", ");\n li {\n margin-left: -5px;\n @media ", " {\n margin-left: 0px;\n }\n }\n @media ", " {\n display: ", ";\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n }\n"])), exports.Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8475
8146
|
var mobileOpen = _ref.mobileOpen;
|
|
8476
8147
|
return mobileOpen ? "block" : 'none';
|
|
8477
8148
|
}, exports.Colors.White, exports.Colors.DarkGrey);
|
|
8478
|
-
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$
|
|
8149
|
+
var MenuItem$1 = /*#__PURE__*/styled__default.button(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n line-height: var(--line-height-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-", ");\n text-transform: uppercase;\n margin: 0;\n padding: 16px 20px 15px 5px;\n border: 0;\n border-radius: 0;\n display: block;\n width: 100%;\n text-align: left;\n background: ", ";\n cursor: pointer;\n &:hover {\n background: var(--base-color-", ");\n }\n @media ", " {\n padding: 16px 20px 15px 20px;\n }\n"])), exports.Colors.Black, function (_ref2) {
|
|
8479
8150
|
var active = _ref2.active;
|
|
8480
8151
|
return active ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
|
|
8481
8152
|
}, exports.Colors.MidGrey, devices.mobile);
|
|
@@ -8551,19 +8222,19 @@ var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
|
8551
8222
|
})));
|
|
8552
8223
|
};
|
|
8553
8224
|
|
|
8554
|
-
var _templateObject$
|
|
8555
|
-
var Container$
|
|
8556
|
-
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
8557
|
-
var Section = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8225
|
+
var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z, _templateObject5$o, _templateObject6$j;
|
|
8226
|
+
var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
8227
|
+
var Sections = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
8228
|
+
var Section = /*#__PURE__*/styled__default.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
8558
8229
|
var color = _ref.color;
|
|
8559
8230
|
return "var(--base-color-" + color + ")";
|
|
8560
8231
|
});
|
|
8561
8232
|
var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
8562
|
-
var Text = /*#__PURE__*/styled__default.div(_templateObject5$
|
|
8233
|
+
var Text = /*#__PURE__*/styled__default.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
8563
8234
|
var color = _ref2.color;
|
|
8564
8235
|
return "var(--base-color-" + color + ")";
|
|
8565
8236
|
});
|
|
8566
|
-
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$
|
|
8237
|
+
var LabelText = /*#__PURE__*/styled__default.div(_templateObject6$j || (_templateObject6$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 1px;\n white-space: nowrap;\n color: ", ";\n"])), function (_ref3) {
|
|
8567
8238
|
var color = _ref3.color;
|
|
8568
8239
|
return "var(--base-color-" + color + ")";
|
|
8569
8240
|
});
|
|
@@ -8624,7 +8295,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
8624
8295
|
return index < activeSections ? 'password-strength-section-active' : 'password-strength-section';
|
|
8625
8296
|
};
|
|
8626
8297
|
|
|
8627
|
-
return /*#__PURE__*/React__default.createElement(Container$
|
|
8298
|
+
return /*#__PURE__*/React__default.createElement(Container$2, {
|
|
8628
8299
|
"data-testid": "password-strength-container"
|
|
8629
8300
|
}, /*#__PURE__*/React__default.createElement(Sections, {
|
|
8630
8301
|
"data-testid": "password-strength-sections"
|
|
@@ -8737,9 +8408,9 @@ var LiveChat = function LiveChat() {
|
|
|
8737
8408
|
});
|
|
8738
8409
|
};
|
|
8739
8410
|
|
|
8740
|
-
var _templateObject$
|
|
8741
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8742
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$
|
|
8411
|
+
var _templateObject$1c, _templateObject2$T;
|
|
8412
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
8413
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n padding: 28px 0 26px;\n\n @media ", " {\n padding: 24px 0 28px;\n }\n\n @media ", " {\n border-bottom: none;\n }\n"])), function (_ref) {
|
|
8743
8414
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
8744
8415
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
8745
8416
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -8767,13 +8438,12 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
8767
8438
|
}, children)));
|
|
8768
8439
|
};
|
|
8769
8440
|
|
|
8770
|
-
var _templateObject$
|
|
8771
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
8772
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$
|
|
8773
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
8441
|
+
var _templateObject$1d, _templateObject2$U, _templateObject3$K, _templateObject4$A;
|
|
8442
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 62px;\n background-color: var(--base-color-white);\n z-index: ", ";\n position: relative;\n\n @media ", ", ", " {\n height: 100vh;\n padding: 62px 0 0;\n }\n"])), zIndexes.popup, devices.smallMobile, devices.mobile);
|
|
8443
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: 0;\n margin: 15px;\n height: 26px;\n width: 26px;\n padding: 0;\n background-color: transparent;\n border: none;\n cursor: pointer;\n @media ", " {\n margin: 25px;\n }\n @media ", ", ", " {\n margin: 30px;\n }\n"])), devices.tablet, devices.desktop, devices.largeDesktop);
|
|
8444
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8774
8445
|
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100vh;\n align-content: center;\n background-color: rgba(0, 0, 0, 0.4);\n"])));
|
|
8775
8446
|
|
|
8776
|
-
var _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
8777
8447
|
var MAX_Z_INDEX = 9999999999;
|
|
8778
8448
|
|
|
8779
8449
|
if (Modal.defaultStyles.content) {
|
|
@@ -8850,7 +8520,7 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
8850
8520
|
setIsOpen = _ref.setIsOpen,
|
|
8851
8521
|
children = _ref.children,
|
|
8852
8522
|
appElementId = _ref.appElementId,
|
|
8853
|
-
modalProps = _objectWithoutPropertiesLoose(_ref,
|
|
8523
|
+
modalProps = _objectWithoutPropertiesLoose(_ref, ["isOpen", "setIsOpen", "children", "appElementId"]);
|
|
8854
8524
|
|
|
8855
8525
|
var isMobile = useMobile();
|
|
8856
8526
|
var customStyles = {
|
|
@@ -8892,8 +8562,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
8892
8562
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
8893
8563
|
};
|
|
8894
8564
|
|
|
8895
|
-
var _templateObject$
|
|
8896
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
8565
|
+
var _templateObject$1e;
|
|
8566
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n html {\n --base-color-primary: ", ";\n --base-color-core: ", ";\n --base-color-stream: ", ";\n --base-color-cinema: ", ";\n --base-color-white: ", ";\n --base-color-black: ", ";\n --base-color-dark-grey: ", ";\n --base-color-mid-grey: ", ";\n --base-color-light-grey: ", ";\n --error-color-state: ", ";\n --medium-color-state: ", ";\n --good-color-state: ", ";\n --base-color-darkgrey: ", ";\n --base-color-midgrey: ", ";\n --base-color-lightgrey: ", ";\n --base-color-transparent: transparent;\n --base-color-errorstate: ", ";\n --base-color-mediumstate: ", ";\n --base-color-goodstate: ", ";\n --base-color-progress: ", ";\n --base-color-navigation: ", ";\n --base-color-lapislazuli: ", ";\n --base-color-lemonchiffon: ", ";\n\n --button-height: ", ";\n --button-line-height: ", ";\n --button-padding-x: ", ";\n --button-padding-y: ", ";\n --button-padding-y-icon: ", ";\n --button-icon-margin: ", ";\n --button-icon-width: ", ";\n --button-icon-height: ", ";\n --button-font-size: ", ";\n --button-font-weight: ", ";\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n --margin-header-1: ", ";\n\n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n --margin-header-2: ", ";\n\n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n --margin-header-3: ", ";\n\n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n --margin-header-4: ", ";\n\n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n --margin-header-5: ", ";\n\n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n --margin-header-6: ", ";\n\n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n\n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n\n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n\n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n\n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n\n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n\n --font-size-overline-3: ", ";\n --font-weight-overline-3: ", ";\n --letter-spacing-overline-3: ", ";\n --line-height-overline-3: ", "; \n\n --font-size-overline-4: ", ";\n --font-weight-overline-4: ", ";\n --letter-spacing-overline-4: ", ";\n --line-height-overline-4: ", ";\n\n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n\n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n\n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n\n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-listing: ", ";\n --font-size-individual-listing-name: ", ";\n --line-height-individual-listing-name: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n\n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n\n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n\n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n\n --font-family-navigation: ", ";\n --font-size-navigation: ", ";\n --font-weight-navigation: ", ";\n --line-height-navigation: ", ";\n --text-transform-navigation: ", ";\n --letter-spacing-navigation: ", ";\n\n --navigation-small-gap: ", ";\n --navigation-middle-gap: ", ";\n --navigation-large-gap: ", ";\n --navigation-xlarge-gap: ", ";\n --navigation-large-margin: ", ";\n\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --grid-margin: ", ";\n --grid-outer-margin: ", ";\n --grid-template-columns: calc(", " - ", ") calc(", " - ", " - ", ") repeat(12, minmax(0,1fr)) calc(", " - ", " - ", ") calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: 0;\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --text-link-underline-offset: ", ";\n\n --cards-spacing-stack: ", ";\n\n --editorial-subtitle-margin-bottom: ", ";\n --editorial-margin-between: ", ";\n --editorial-spacing-hover: ", ";\n --anchor-tabs-height: 70px;\n \n\n @media ", " {\n\n --font-size-header-1: ", ";\n --font-weight-header-1: ", ";\n --letter-spacing-header-1: ", ";\n --line-height-header-1: ", ";\n \n --font-size-header-2: ", ";\n --font-weight-header-2: ", ";\n --letter-spacing-header-2: ", ";\n --line-height-header-2: ", ";\n \n --font-size-header-3: ", ";\n --font-weight-header-3: ", ";\n --letter-spacing-header-3: ", ";\n --line-height-header-3: ", ";\n \n --font-size-header-4: ", ";\n --font-weight-header-4: ", ";\n --letter-spacing-header-4: ", ";\n --line-height-header-4: ", ";\n \n --font-size-header-5: ", ";\n --font-weight-header-5: ", ";\n --letter-spacing-header-5: ", ";\n --line-height-header-5: ", ";\n \n --font-size-header-6: ", ";\n --font-weight-header-6: ", ";\n --letter-spacing-header-6: ", ";\n --line-height-header-6: ", ";\n \n --font-size-altHeader-3: ", ";\n --font-weight-altHeader-3: ", ";\n --letter-spacing-altHeader-3: ", ";\n --line-height-altHeader-3: ", ";\n \n --font-size-altHeader-4: ", ";\n --font-weight-altHeader-4: ", ";\n --letter-spacing-altHeader-4: ", ";\n --line-height-altHeader-4: ", ";\n \n --font-size-altHeader-5: ", ";\n --font-weight-altHeader-5: ", ";\n --letter-spacing-altHeader-5: ", ";\n --line-height-altHeader-5: ", ";\n \n --font-size-altHeader-6: ", ";\n --font-weight-altHeader-6: ", ";\n --letter-spacing-altHeader-6: ", ";\n --line-height-altHeader-6: ", ";\n \n --font-size-overline-1: ", ";\n --font-weight-overline-1: ", ";\n --letter-spacing-overline-1: ", ";\n --line-height-overline-1: ", ";\n \n --font-size-overline-2: ", ";\n --font-weight-overline-2: ", ";\n --letter-spacing-overline-2: ", ";\n --line-height-overline-2: ", ";\n \n --font-size-body-1: ", ";\n --font-weight-body-1: ", ";\n --letter-spacing-body-1: ", ";\n --line-height-body-1: ", ";\n \n --font-size-body-2: ", ";\n --font-weight-body-2: ", ";\n --letter-spacing-body-2: ", ";\n --line-height-body-2: ", ";\n \n --font-size-body-3: ", ";\n --font-weight-body-3: ", ";\n --letter-spacing-body-3: ", ";\n --line-height-body-3: ", ";\n \n --font-size-subtitle-1: ", ";\n --font-weight-subtitle-1: ", ";\n --letter-spacing-subtitle-1: ", ";\n --line-height-subtitle-1: ", ";\n \n --font-size-subtitle-2: ", ";\n --font-weight-subtitle-2: ", ";\n --letter-spacing-subtitle-2: ", ";\n --line-height-subtitle-2: ", ";\n\n --font-size-title-description: ", ";\n --line-height-title-description: ", ";\n --line-height-people-listing-gap: ", ";\n\n --font-size-search: ", ";\n --font-family-search: ", ";\n\n --font-family-header: ", ";\n --font-family-altHeader: ", ";\n --font-family-body: ", ";\n --font-family-body-italics: ", ";\n --font-family-buttons: ", ";\n --font-family-overline: ", ";\n --font-family-subtitle: ", ";\n --font-family-people-listing-role: ", ";\n --font-family-people-listing-name: ", ";\n \n --font-feature-settings-header: ", ";\n --font-feature-settings-altHeader: ", ";\n --font-feature-settings-overline: ", ";\n --font-feature-settings-subtitle: ", ";\n --font-feature-settings-body: ", ";\n --font-feature-settings-navigation: ", ";\n \n --text-transform-header: ", ";\n --text-transform-altHeader: ", ";\n --text-transform-body: ", ";\n --text-transform-overline: ", ";\n --text-transform-subtitle: ", ";\n \n --word-break-header: ", ";\n --word-break-altHeader: ", ";\n --word-break-body: ", ";\n --word-break-overline: ", ";\n --word-break-subtitle: ", ";\n \n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n\n --footer-height: ", ";\n --footer-padding-top: ", ";\n --footer-padding-bottom: ", ";\n --footer-items-gap: ", ";\n --footer-media-gap: ", ";\n --footer-media-icon-width: ", ";\n --footer-media-icon-height: ", ";\n --footer-vertical-spacing-lg: ", ";\n --footer-vertical-spacing-sm: ", ";\n\n --anchor-tabs-height: 60px;\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n }\n\n @media ", " {\n --grid-template-columns: calc(", " - ", ") repeat(12, minmax(0, 1fr)) calc(", " - ", ");\n --grid-column-gap: ", ";\n --grid-margin: ", ";\n --rotator-button-width: ", ";\n --rotator-button-icon-width: ", ";\n\n --font-size-header-6: ", ";\n\n --font-size-altHeader-4: ", ";\n\n --font-size-body-1: ", ";\n }\n\n @media ", " {\n \n }\n\n @media ", " {\n \n }\n }\n"])), function (_ref) {
|
|
8897
8567
|
var theme = _ref.theme;
|
|
8898
8568
|
return theme.colors.primary;
|
|
8899
8569
|
}, function (_ref2) {
|
|
@@ -9888,6 +9558,7 @@ exports.SectionSplitter = SectionSplitter;
|
|
|
9888
9558
|
exports.SectionTitle = SectionTitle;
|
|
9889
9559
|
exports.Select = Select;
|
|
9890
9560
|
exports.Sponsorship = Sponsorship;
|
|
9561
|
+
exports.StatusBanner = StatusBanner;
|
|
9891
9562
|
exports.Stepper = Component;
|
|
9892
9563
|
exports.StickyBar = StickyBar;
|
|
9893
9564
|
exports.StreamBadge = StreamBadge;
|