@royaloperahouse/chord 2.2.4 → 2.2.5-a-chord-development
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 +213 -7
- package/README.md +250 -40
- package/dist/chord.cjs.development.js +201 -128
- 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 +201 -129
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/PageHeading/index.d.ts +1 -1
- package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts +1 -0
- 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 +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/types/formTypes.d.ts +12 -9
- package/dist/types/types.d.ts +10 -0
- package/package.json +1 -1
- package/README.GIT +0 -277
package/dist/chord.esm.js
CHANGED
|
@@ -5790,7 +5790,8 @@ var Accordions = function Accordions(_ref) {
|
|
|
5790
5790
|
visibleStandfirst: accordion.visibleStandfirst,
|
|
5791
5791
|
contentType: accordion.contentType,
|
|
5792
5792
|
displayLevel: accordion.displayLevel,
|
|
5793
|
-
semanticLevel: accordion.semanticLevel
|
|
5793
|
+
semanticLevel: accordion.semanticLevel,
|
|
5794
|
+
initOpen: accordion.initOpen
|
|
5794
5795
|
}, accordion.children);
|
|
5795
5796
|
}));
|
|
5796
5797
|
};
|
|
@@ -6910,7 +6911,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
|
|
|
6910
6911
|
var isIOS = function isIOS() {
|
|
6911
6912
|
try {
|
|
6912
6913
|
console.warn('Do not use this on server side rendering, it may throw an error.');
|
|
6913
|
-
if (typeof navigator === undefined) return false;
|
|
6914
|
+
if (typeof navigator === 'undefined') return false;
|
|
6914
6915
|
return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) || // iPad on iOS 13 detection
|
|
6915
6916
|
navigator.userAgent.includes('Mac') && 'ontouchend' in document;
|
|
6916
6917
|
} catch (e) {
|
|
@@ -6926,7 +6927,7 @@ var useIOS = function useIOS() {
|
|
|
6926
6927
|
setIOS = _useState[1];
|
|
6927
6928
|
|
|
6928
6929
|
useEffect(function () {
|
|
6929
|
-
if (typeof navigator === undefined) return;
|
|
6930
|
+
if (typeof navigator === 'undefined') return;
|
|
6930
6931
|
setIOS(isIOS());
|
|
6931
6932
|
}, []);
|
|
6932
6933
|
return IOS;
|
|
@@ -7247,8 +7248,8 @@ var PeopleListing = function PeopleListing(_ref) {
|
|
|
7247
7248
|
var _templateObject$_, _templateObject2$I, _templateObject3$A, _templateObject4$s;
|
|
7248
7249
|
var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n"])));
|
|
7249
7250
|
var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n p {\n line-height: 1.5;\n }\n"])));
|
|
7250
|
-
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height:
|
|
7251
|
-
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n
|
|
7251
|
+
var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n p {\n line-height: 1.5;\n margin-bottom: 4px;\n }\n"])));
|
|
7252
|
+
var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-darkgrey);\n overflow-wrap: break-word;\n"])));
|
|
7252
7253
|
|
|
7253
7254
|
var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
|
|
7254
7255
|
return array.reduce(function (acc, item) {
|
|
@@ -7259,12 +7260,18 @@ var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop)
|
|
|
7259
7260
|
var concatenateMusicTitle = function concatenateMusicTitle(musicTitle) {
|
|
7260
7261
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, musicTitle.map(function (title, index) {
|
|
7261
7262
|
if (musicTitle.length > 1 && index === musicTitle.length - 1) {
|
|
7262
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i",
|
|
7263
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', "and ", /*#__PURE__*/React__default.createElement("i", {
|
|
7264
|
+
key: index
|
|
7265
|
+
}, title));
|
|
7263
7266
|
} else if (index > 0) {
|
|
7264
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7267
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7268
|
+
key: index
|
|
7269
|
+
}, ", ", title);
|
|
7265
7270
|
}
|
|
7266
7271
|
|
|
7267
|
-
return /*#__PURE__*/React__default.createElement("i",
|
|
7272
|
+
return /*#__PURE__*/React__default.createElement("i", {
|
|
7273
|
+
key: index
|
|
7274
|
+
}, title);
|
|
7268
7275
|
}));
|
|
7269
7276
|
};
|
|
7270
7277
|
|
|
@@ -7770,8 +7777,73 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
7770
7777
|
})));
|
|
7771
7778
|
};
|
|
7772
7779
|
|
|
7773
|
-
var _templateObject$12;
|
|
7774
|
-
var
|
|
7780
|
+
var _templateObject$12, _templateObject2$L, _templateObject3$D;
|
|
7781
|
+
var StatusBannerWrapper = /*#__PURE__*/styled.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);
|
|
7782
|
+
var ContentContainer$3 = /*#__PURE__*/styled.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"])));
|
|
7783
|
+
var SvgContainer$3 = /*#__PURE__*/styled.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);
|
|
7784
|
+
|
|
7785
|
+
var StatusBanner = function StatusBanner(_ref) {
|
|
7786
|
+
var statusText = _ref.statusText,
|
|
7787
|
+
_ref$visibility = _ref.visibility,
|
|
7788
|
+
visibility = _ref$visibility === void 0 ? true : _ref$visibility;
|
|
7789
|
+
|
|
7790
|
+
var _useState = useState(visibility),
|
|
7791
|
+
isVisible = _useState[0],
|
|
7792
|
+
setIsVisible = _useState[1];
|
|
7793
|
+
|
|
7794
|
+
var _useState2 = useState(false),
|
|
7795
|
+
isClosing = _useState2[0],
|
|
7796
|
+
setIsClosing = _useState2[1];
|
|
7797
|
+
|
|
7798
|
+
var content = useRef(null);
|
|
7799
|
+
|
|
7800
|
+
var handleCloseBanner = function handleCloseBanner() {
|
|
7801
|
+
setIsClosing(true);
|
|
7802
|
+
|
|
7803
|
+
var transitionEnd = function transitionEnd() {
|
|
7804
|
+
setIsVisible(!visibility);
|
|
7805
|
+
|
|
7806
|
+
if (content.current) {
|
|
7807
|
+
content.current.removeEventListener('transitionend', transitionEnd);
|
|
7808
|
+
}
|
|
7809
|
+
};
|
|
7810
|
+
|
|
7811
|
+
if (content.current) {
|
|
7812
|
+
content.current.addEventListener('transitionend', transitionEnd);
|
|
7813
|
+
}
|
|
7814
|
+
|
|
7815
|
+
setTimeout(function () {
|
|
7816
|
+
setIsVisible(!visibility);
|
|
7817
|
+
}, 300);
|
|
7818
|
+
};
|
|
7819
|
+
|
|
7820
|
+
var onKeyboardCloseHandler = function onKeyboardCloseHandler(e) {
|
|
7821
|
+
if (e.key === 'Enter') {
|
|
7822
|
+
handleCloseBanner();
|
|
7823
|
+
}
|
|
7824
|
+
};
|
|
7825
|
+
|
|
7826
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StatusBannerWrapper, {
|
|
7827
|
+
role: "alert",
|
|
7828
|
+
className: isClosing ? 'closing' : '',
|
|
7829
|
+
"data-testid": "statusContainer"
|
|
7830
|
+
}, /*#__PURE__*/React__default.createElement(ContentContainer$3, null, /*#__PURE__*/React__default.createElement("div", {
|
|
7831
|
+
dangerouslySetInnerHTML: {
|
|
7832
|
+
__html: statusText
|
|
7833
|
+
}
|
|
7834
|
+
})), /*#__PURE__*/React__default.createElement(SvgContainer$3, {
|
|
7835
|
+
onClick: handleCloseBanner,
|
|
7836
|
+
tabIndex: 0,
|
|
7837
|
+
role: "button",
|
|
7838
|
+
"aria-label": "Close",
|
|
7839
|
+
onKeyDown: onKeyboardCloseHandler
|
|
7840
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
7841
|
+
iconName: "Close"
|
|
7842
|
+
})))));
|
|
7843
|
+
};
|
|
7844
|
+
|
|
7845
|
+
var _templateObject$13;
|
|
7846
|
+
var SectionTitleWrapper = /*#__PURE__*/styled.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);
|
|
7775
7847
|
|
|
7776
7848
|
var SectionTitle = function SectionTitle(_ref) {
|
|
7777
7849
|
var title = _ref.title,
|
|
@@ -7797,8 +7869,8 @@ var SectionTitle = function SectionTitle(_ref) {
|
|
|
7797
7869
|
}, description))));
|
|
7798
7870
|
};
|
|
7799
7871
|
|
|
7800
|
-
var _templateObject$
|
|
7801
|
-
var stateStyles = /*#__PURE__*/css(_templateObject$
|
|
7872
|
+
var _templateObject$14, _templateObject2$M, _templateObject3$E, _templateObject4$v, _templateObject5$n, _templateObject6$i, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$3;
|
|
7873
|
+
var stateStyles = /*#__PURE__*/css(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
|
|
7802
7874
|
var theme = _ref.theme;
|
|
7803
7875
|
return "3px solid " + theme.colors.lapisLazuli;
|
|
7804
7876
|
}, function (_ref2) {
|
|
@@ -7808,11 +7880,11 @@ var stateStyles = /*#__PURE__*/css(_templateObject$13 || (_templateObject$13 = /
|
|
|
7808
7880
|
var theme = _ref3.theme;
|
|
7809
7881
|
return theme.colors.lightgrey;
|
|
7810
7882
|
});
|
|
7811
|
-
var borderStyles = /*#__PURE__*/css(_templateObject2$
|
|
7883
|
+
var borderStyles = /*#__PURE__*/css(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-radius: 0;\n outline: 1px solid ", ";\n"])), function (_ref4) {
|
|
7812
7884
|
var theme = _ref4.theme;
|
|
7813
7885
|
return theme.colors.darkgrey;
|
|
7814
7886
|
});
|
|
7815
|
-
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$
|
|
7887
|
+
var noMarginAndPaddingStyles = /*#__PURE__*/css(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
|
|
7816
7888
|
var listItemStyles = /*#__PURE__*/css(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n list-style: none;\n user-select: none;\n"])));
|
|
7817
7889
|
var ArrowIcon = /*#__PURE__*/styled(Icon).attrs(function (_ref5) {
|
|
7818
7890
|
var theme = _ref5.theme;
|
|
@@ -8219,8 +8291,8 @@ function Select(_ref3) {
|
|
|
8219
8291
|
}))), /*#__PURE__*/React__default.createElement(ArrowIcon, null)));
|
|
8220
8292
|
}
|
|
8221
8293
|
|
|
8222
|
-
var _templateObject$
|
|
8223
|
-
var TextContainer$2 = /*#__PURE__*/styled.div(_templateObject$
|
|
8294
|
+
var _templateObject$15;
|
|
8295
|
+
var TextContainer$2 = /*#__PURE__*/styled.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) {
|
|
8224
8296
|
var theme = _ref.theme;
|
|
8225
8297
|
return theme.colors.primary;
|
|
8226
8298
|
});
|
|
@@ -8248,8 +8320,8 @@ var TextOnly = function TextOnly(_ref) {
|
|
|
8248
8320
|
})));
|
|
8249
8321
|
};
|
|
8250
8322
|
|
|
8251
|
-
var _templateObject$
|
|
8252
|
-
var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$
|
|
8323
|
+
var _templateObject$16, _templateObject2$N;
|
|
8324
|
+
var Wrapper$6 = /*#__PURE__*/styled.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) {
|
|
8253
8325
|
var _ref$aspectRatio = _ref.aspectRatio,
|
|
8254
8326
|
aspectRatio = _ref$aspectRatio === void 0 ? AspectRatio['1:1'] : _ref$aspectRatio;
|
|
8255
8327
|
return aspectRatio;
|
|
@@ -8259,7 +8331,7 @@ var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$1
|
|
|
8259
8331
|
height = _ref2.height;
|
|
8260
8332
|
return "calc(calc(" + height + "px - 12px - var(--line-height-body-2)) * " + AspectRatioWidth[aspectRatio] + ")";
|
|
8261
8333
|
});
|
|
8262
|
-
var CaptionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8334
|
+
var CaptionWrapper = /*#__PURE__*/styled.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"])));
|
|
8263
8335
|
|
|
8264
8336
|
var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
8265
8337
|
var caption = _ref.caption,
|
|
@@ -8297,13 +8369,13 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
|
|
|
8297
8369
|
}, children), /*#__PURE__*/React__default.createElement(CaptionWrapper, null, caption));
|
|
8298
8370
|
};
|
|
8299
8371
|
|
|
8300
|
-
var _templateObject$
|
|
8301
|
-
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$
|
|
8302
|
-
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$
|
|
8372
|
+
var _templateObject$17, _templateObject2$O, _templateObject3$F;
|
|
8373
|
+
var TextWrapper$3 = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n h4 {\n margin: 0;\n }\n"])));
|
|
8374
|
+
var AttributionWrapper = /*#__PURE__*/styled.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
8303
8375
|
var displayAttribution = _ref.displayAttribution;
|
|
8304
8376
|
return "display: " + (displayAttribution ? 'block' : 'none') + ";";
|
|
8305
8377
|
});
|
|
8306
|
-
var Line$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8378
|
+
var Line$1 = /*#__PURE__*/styled.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);
|
|
8307
8379
|
|
|
8308
8380
|
var Quote = function Quote(_ref) {
|
|
8309
8381
|
var text = _ref.text,
|
|
@@ -8327,10 +8399,10 @@ var Quote = function Quote(_ref) {
|
|
|
8327
8399
|
}, attribution))));
|
|
8328
8400
|
};
|
|
8329
8401
|
|
|
8330
|
-
var _templateObject$
|
|
8331
|
-
var CardContainer$1 = /*#__PURE__*/styled.div(_templateObject$
|
|
8332
|
-
var ContentContainer$
|
|
8333
|
-
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$
|
|
8402
|
+
var _templateObject$18, _templateObject2$P, _templateObject3$G, _templateObject4$w, _templateObject5$o, _templateObject6$j;
|
|
8403
|
+
var CardContainer$1 = /*#__PURE__*/styled.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"])));
|
|
8404
|
+
var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
|
|
8405
|
+
var StyledImage = /*#__PURE__*/styled.img(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border: 1px solid var(--base-color-white);\n"])));
|
|
8334
8406
|
var ImageWrapper = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
8335
8407
|
var IconWrapper$3 = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__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);
|
|
8336
8408
|
var TitleWrapper$2 = /*#__PURE__*/styled.div(_templateObject6$j || (_templateObject6$j = /*#__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);
|
|
@@ -8364,18 +8436,18 @@ var MiniCard = function MiniCard(_ref) {
|
|
|
8364
8436
|
columnSpanDevice: 4,
|
|
8365
8437
|
columnStartDesktop: 4,
|
|
8366
8438
|
columnSpanDesktop: 4
|
|
8367
|
-
}, /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8439
|
+
}, /*#__PURE__*/React__default.createElement(ContentContainer$4, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
8368
8440
|
level: 4
|
|
8369
8441
|
}, subtitle), /*#__PURE__*/React__default.createElement(TitleWrapper$2, null, /*#__PURE__*/React__default.createElement(Overline, {
|
|
8370
8442
|
level: 2
|
|
8371
8443
|
}, title)))));
|
|
8372
8444
|
};
|
|
8373
8445
|
|
|
8374
|
-
var _templateObject$
|
|
8375
|
-
var ReadMoreContainer = /*#__PURE__*/styled.div(_templateObject$
|
|
8376
|
-
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$
|
|
8377
|
-
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$
|
|
8378
|
-
var ContentContainer$
|
|
8446
|
+
var _templateObject$19, _templateObject2$Q, _templateObject3$H, _templateObject4$x;
|
|
8447
|
+
var ReadMoreContainer = /*#__PURE__*/styled.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"])));
|
|
8448
|
+
var LinkContainer = /*#__PURE__*/styled.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-top: 24px;\n gap: 8px;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
8449
|
+
var FullTextContainer = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8450
|
+
var ContentContainer$5 = /*#__PURE__*/styled.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"])));
|
|
8379
8451
|
|
|
8380
8452
|
var keyDown = function keyDown(e, toggleFunction) {
|
|
8381
8453
|
if (e.key === 'Enter' || e.key === 'Space') {
|
|
@@ -8438,7 +8510,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8438
8510
|
var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
|
|
8439
8511
|
|
|
8440
8512
|
var IntroText = function IntroText() {
|
|
8441
|
-
return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8513
|
+
return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(FullTextContainer, null, truncate ? /*#__PURE__*/React__default.createElement("div", {
|
|
8442
8514
|
dangerouslySetInnerHTML: {
|
|
8443
8515
|
__html: "" + truncatedText
|
|
8444
8516
|
}
|
|
@@ -8456,7 +8528,7 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8456
8528
|
}, /*#__PURE__*/React__default.createElement(Header, {
|
|
8457
8529
|
level: 5,
|
|
8458
8530
|
semanticLevel: 3
|
|
8459
|
-
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$
|
|
8531
|
+
}, title)), !isFullTextOpen && /*#__PURE__*/React__default.createElement(IntroText, null), /*#__PURE__*/React__default.createElement(ContentContainer$5, {
|
|
8460
8532
|
"data-testid": "richcontainer",
|
|
8461
8533
|
ref: readMoreContent,
|
|
8462
8534
|
id: contentContainerId,
|
|
@@ -8473,96 +8545,14 @@ var ReadMore = function ReadMore(_ref) {
|
|
|
8473
8545
|
}, isFullTextOpen ? "" + hideText : "" + showMoreText)));
|
|
8474
8546
|
};
|
|
8475
8547
|
|
|
8476
|
-
var _templateObject$
|
|
8477
|
-
var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8478
|
-
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$Q || (_templateObject2$Q = /*#__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"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8479
|
-
var mobileOpen = _ref.mobileOpen;
|
|
8480
|
-
return mobileOpen ? "block" : 'none';
|
|
8481
|
-
}, Colors.White, Colors.DarkGrey);
|
|
8482
|
-
var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$H || (_templateObject3$H = /*#__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"])), Colors.Black, function (_ref2) {
|
|
8483
|
-
var active = _ref2.active;
|
|
8484
|
-
return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
8485
|
-
}, Colors.MidGrey, devices.mobile);
|
|
8486
|
-
var MobileButton = /*#__PURE__*/styled.button(_templateObject4$y || (_templateObject4$y = /*#__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 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
|
|
8487
|
-
|
|
8488
|
-
/**
|
|
8489
|
-
* Vertical menu component uses for navigation
|
|
8490
|
-
* inside website chapter. It looks like a vertical
|
|
8491
|
-
* list with clickable items on desktop and dropdown
|
|
8492
|
-
* list on mobile.
|
|
8493
|
-
*
|
|
8494
|
-
* ## Menu items
|
|
8495
|
-
* Menu items should be passed as `items` prop. This
|
|
8496
|
-
* should be an array of objects. Each object should
|
|
8497
|
-
* have `text` (text displayed as a menu item) and
|
|
8498
|
-
* `onClick` (click handler function)
|
|
8499
|
-
*
|
|
8500
|
-
* ## Active menu item
|
|
8501
|
-
* Active menu item should be passed as component `activeItem`
|
|
8502
|
-
* prop. This indicates on which menu item should be highlighted
|
|
8503
|
-
* as active one. Should be equal to `text` prop from one of the `items`
|
|
8504
|
-
*/
|
|
8505
|
-
|
|
8506
|
-
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
8507
|
-
var items = _ref.items,
|
|
8508
|
-
activeItem = _ref.activeItem;
|
|
8509
|
-
|
|
8510
|
-
var _useState = useState(false),
|
|
8511
|
-
mobileOpen = _useState[0],
|
|
8512
|
-
setMobileOpen = _useState[1];
|
|
8513
|
-
|
|
8514
|
-
var containerRef = useRef(null);
|
|
8515
|
-
|
|
8516
|
-
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
8517
|
-
setMobileOpen(function (prev) {
|
|
8518
|
-
return !prev;
|
|
8519
|
-
});
|
|
8520
|
-
};
|
|
8521
|
-
|
|
8522
|
-
var outsideClickHandler = function outsideClickHandler(event) {
|
|
8523
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
8524
|
-
setMobileOpen(false);
|
|
8525
|
-
}
|
|
8526
|
-
};
|
|
8527
|
-
|
|
8528
|
-
useEffect(function () {
|
|
8529
|
-
document.addEventListener('mousedown', outsideClickHandler);
|
|
8530
|
-
return function () {
|
|
8531
|
-
document.removeEventListener('mousedown', outsideClickHandler);
|
|
8532
|
-
};
|
|
8533
|
-
}, [containerRef]);
|
|
8534
|
-
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
8535
|
-
ref: containerRef,
|
|
8536
|
-
"data-testid": "nav-menu-container"
|
|
8537
|
-
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
8538
|
-
mobileOpen: mobileOpen,
|
|
8539
|
-
onClick: mobileButtonClickHandler,
|
|
8540
|
-
"data-testid": "nav-menu-mobile-button"
|
|
8541
|
-
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
8542
|
-
iconName: "DropdownArrow",
|
|
8543
|
-
direction: mobileOpen ? 'left' : 'right'
|
|
8544
|
-
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
8545
|
-
mobileOpen: mobileOpen,
|
|
8546
|
-
"data-testid": "nav-menu-list"
|
|
8547
|
-
}, items.map(function (item, idx) {
|
|
8548
|
-
return /*#__PURE__*/React__default.createElement("li", {
|
|
8549
|
-
key: item.text + "-" + idx
|
|
8550
|
-
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
8551
|
-
onClick: item.onClick,
|
|
8552
|
-
active: item.text === activeItem,
|
|
8553
|
-
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
8554
|
-
}, item.text));
|
|
8555
|
-
})));
|
|
8556
|
-
};
|
|
8557
|
-
|
|
8558
|
-
var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$z, _templateObject5$p, _templateObject6$k;
|
|
8548
|
+
var _templateObject$1a, _templateObject2$R, _templateObject3$I, _templateObject4$y, _templateObject5$p, _templateObject6$k;
|
|
8559
8549
|
var Container$1 = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
8560
8550
|
var Sections = /*#__PURE__*/styled.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n"])));
|
|
8561
8551
|
var Section = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n flex: 1;\n height: 2px;\n background-color: ", ";\n"])), function (_ref) {
|
|
8562
8552
|
var color = _ref.color;
|
|
8563
8553
|
return "var(--base-color-" + color + ")";
|
|
8564
8554
|
});
|
|
8565
|
-
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$
|
|
8555
|
+
var BottomLine = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 20px;\n"])));
|
|
8566
8556
|
var Text = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (_ref2) {
|
|
8567
8557
|
var color = _ref2.color;
|
|
8568
8558
|
return "var(--base-color-" + color + ")";
|
|
@@ -8653,6 +8643,88 @@ var PasswordStrength = function PasswordStrength(_ref) {
|
|
|
8653
8643
|
}, strengthLabel))));
|
|
8654
8644
|
};
|
|
8655
8645
|
|
|
8646
|
+
var _templateObject$1b, _templateObject2$S, _templateObject3$J, _templateObject4$z;
|
|
8647
|
+
var MenuContainer$2 = /*#__PURE__*/styled.menu(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding: 0;\n margin: 0;\n"])));
|
|
8648
|
+
var MenuList = /*#__PURE__*/styled.ul(_templateObject2$S || (_templateObject2$S = /*#__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"])), Colors.LightGrey, devices.mobile, devices.mobile, function (_ref) {
|
|
8649
|
+
var mobileOpen = _ref.mobileOpen;
|
|
8650
|
+
return mobileOpen ? "block" : 'none';
|
|
8651
|
+
}, Colors.White, Colors.DarkGrey);
|
|
8652
|
+
var MenuItem$1 = /*#__PURE__*/styled.button(_templateObject3$J || (_templateObject3$J = /*#__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"])), Colors.Black, function (_ref2) {
|
|
8653
|
+
var active = _ref2.active;
|
|
8654
|
+
return active ? "var(--base-color-" + Colors.MidGrey + ")" : 'none';
|
|
8655
|
+
}, Colors.MidGrey, devices.mobile);
|
|
8656
|
+
var MobileButton = /*#__PURE__*/styled.button(_templateObject4$z || (_templateObject4$z = /*#__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 46px 14px 20px;\n background: var(--base-color-", ");\n border: 1px solid var(--base-color-", ");\n border-radius: 0;\n display: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n position: relative;\n span {\n width: 25px;\n height: 25px;\n position: absolute;\n top: 50%;\n margin-top: -12px;\n right: 10px;\n }\n @media ", " {\n display: block;\n }\n"])), Colors.Black, Colors.White, Colors.DarkGrey, devices.mobile);
|
|
8657
|
+
|
|
8658
|
+
/**
|
|
8659
|
+
* Vertical menu component uses for navigation
|
|
8660
|
+
* inside website chapter. It looks like a vertical
|
|
8661
|
+
* list with clickable items on desktop and dropdown
|
|
8662
|
+
* list on mobile.
|
|
8663
|
+
*
|
|
8664
|
+
* ## Menu items
|
|
8665
|
+
* Menu items should be passed as `items` prop. This
|
|
8666
|
+
* should be an array of objects. Each object should
|
|
8667
|
+
* have `text` (text displayed as a menu item) and
|
|
8668
|
+
* `onClick` (click handler function)
|
|
8669
|
+
*
|
|
8670
|
+
* ## Active menu item
|
|
8671
|
+
* Active menu item should be passed as component `activeItem`
|
|
8672
|
+
* prop. This indicates on which menu item should be highlighted
|
|
8673
|
+
* as active one. Should be equal to `text` prop from one of the `items`
|
|
8674
|
+
*/
|
|
8675
|
+
|
|
8676
|
+
var AuxiliaryNav = function AuxiliaryNav(_ref) {
|
|
8677
|
+
var items = _ref.items,
|
|
8678
|
+
activeItem = _ref.activeItem;
|
|
8679
|
+
|
|
8680
|
+
var _useState = useState(false),
|
|
8681
|
+
mobileOpen = _useState[0],
|
|
8682
|
+
setMobileOpen = _useState[1];
|
|
8683
|
+
|
|
8684
|
+
var containerRef = useRef(null);
|
|
8685
|
+
|
|
8686
|
+
var mobileButtonClickHandler = function mobileButtonClickHandler() {
|
|
8687
|
+
setMobileOpen(function (prev) {
|
|
8688
|
+
return !prev;
|
|
8689
|
+
});
|
|
8690
|
+
};
|
|
8691
|
+
|
|
8692
|
+
var outsideClickHandler = function outsideClickHandler(event) {
|
|
8693
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
8694
|
+
setMobileOpen(false);
|
|
8695
|
+
}
|
|
8696
|
+
};
|
|
8697
|
+
|
|
8698
|
+
useEffect(function () {
|
|
8699
|
+
document.addEventListener('mousedown', outsideClickHandler);
|
|
8700
|
+
return function () {
|
|
8701
|
+
document.removeEventListener('mousedown', outsideClickHandler);
|
|
8702
|
+
};
|
|
8703
|
+
}, [containerRef]);
|
|
8704
|
+
return /*#__PURE__*/React__default.createElement(MenuContainer$2, {
|
|
8705
|
+
ref: containerRef,
|
|
8706
|
+
"data-testid": "nav-menu-container"
|
|
8707
|
+
}, /*#__PURE__*/React__default.createElement(MobileButton, {
|
|
8708
|
+
mobileOpen: mobileOpen,
|
|
8709
|
+
onClick: mobileButtonClickHandler,
|
|
8710
|
+
"data-testid": "nav-menu-mobile-button"
|
|
8711
|
+
}, activeItem, /*#__PURE__*/React__default.createElement(Icon, {
|
|
8712
|
+
iconName: "DropdownArrow",
|
|
8713
|
+
direction: mobileOpen ? 'left' : 'right'
|
|
8714
|
+
})), /*#__PURE__*/React__default.createElement(MenuList, {
|
|
8715
|
+
mobileOpen: mobileOpen,
|
|
8716
|
+
"data-testid": "nav-menu-list"
|
|
8717
|
+
}, items.map(function (item, idx) {
|
|
8718
|
+
return /*#__PURE__*/React__default.createElement("li", {
|
|
8719
|
+
key: item.text + "-" + idx
|
|
8720
|
+
}, /*#__PURE__*/React__default.createElement(MenuItem$1, {
|
|
8721
|
+
onClick: item.onClick,
|
|
8722
|
+
active: item.text === activeItem,
|
|
8723
|
+
"data-testid": "nav-menu-item" + (item.text === activeItem ? '-active' : '')
|
|
8724
|
+
}, item.text));
|
|
8725
|
+
})));
|
|
8726
|
+
};
|
|
8727
|
+
|
|
8656
8728
|
var UpsellSection = function UpsellSection(_ref) {
|
|
8657
8729
|
var title = _ref.title,
|
|
8658
8730
|
richText = _ref.richText,
|
|
@@ -8741,9 +8813,9 @@ var LiveChat = function LiveChat() {
|
|
|
8741
8813
|
});
|
|
8742
8814
|
};
|
|
8743
8815
|
|
|
8744
|
-
var _templateObject$
|
|
8745
|
-
var StickyBarWrapper = /*#__PURE__*/styled.div(_templateObject$
|
|
8746
|
-
var StickyBarGrid = /*#__PURE__*/styled(Grid)(_templateObject2$
|
|
8816
|
+
var _templateObject$1c, _templateObject2$T;
|
|
8817
|
+
var StickyBarWrapper = /*#__PURE__*/styled.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);
|
|
8818
|
+
var StickyBarGrid = /*#__PURE__*/styled(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) {
|
|
8747
8819
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
8748
8820
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
8749
8821
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -8771,10 +8843,10 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
8771
8843
|
}, children)));
|
|
8772
8844
|
};
|
|
8773
8845
|
|
|
8774
|
-
var _templateObject$
|
|
8775
|
-
var InnerModal = /*#__PURE__*/styled.div(_templateObject$
|
|
8776
|
-
var CloseButton = /*#__PURE__*/styled.button(_templateObject2$
|
|
8777
|
-
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$
|
|
8846
|
+
var _templateObject$1d, _templateObject2$U, _templateObject3$K, _templateObject4$A;
|
|
8847
|
+
var InnerModal = /*#__PURE__*/styled.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);
|
|
8848
|
+
var CloseButton = /*#__PURE__*/styled.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);
|
|
8849
|
+
var ContentWrapper$1 = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
8778
8850
|
var Overlay = /*#__PURE__*/styled(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"])));
|
|
8779
8851
|
|
|
8780
8852
|
var _excluded$k = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
@@ -8896,8 +8968,8 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
8896
8968
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
8897
8969
|
};
|
|
8898
8970
|
|
|
8899
|
-
var _templateObject$
|
|
8900
|
-
var GlobalStyles = /*#__PURE__*/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) {
|
|
8971
|
+
var _templateObject$1e;
|
|
8972
|
+
var GlobalStyles = /*#__PURE__*/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) {
|
|
8901
8973
|
var theme = _ref.theme;
|
|
8902
8974
|
return theme.colors.primary;
|
|
8903
8975
|
}, function (_ref2) {
|
|
@@ -9838,5 +9910,5 @@ var GlobalStyles = /*#__PURE__*/createGlobalStyle(_templateObject$1d || (_templa
|
|
|
9838
9910
|
return theme.fonts.tablet.sizes.body[1];
|
|
9839
9911
|
}, devices.desktop, devices.largeDesktop);
|
|
9840
9912
|
|
|
9841
|
-
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
|
|
9913
|
+
export { Accordion, Accordions, AltHeader, AnchorTabBar, AnnouncementBanner, AspectRatio, AuxiliaryNav, BodyText, ButtonType, Card, Cards, CarouselType, CinemaBadge, Colors, ContactCard, ContentSummary, ControlledDropdown, CreditListing, Editorial, Footer, GlobalStyles, Grid, GridItem, Header, Icon, ImageAspectRatioWrapper, ImageWithCaption, Information, LiveChat, MiniCard, ModalWindow, Navigation, Overline, PageHeadingCinema, PageHeadingCompact, PageHeadingCore, PageHeadingImpact, PageHeadingPanel, PageHeadingStream, Pagination, PasswordStrength, PeopleListing, PrimaryButton, Progress, PromoWithTags, PromoWithTitle, Quote, Radio, RadioGroup, ReadMore, RotatorButtons, SearchBar, SecondaryButton, SecondaryLogo, SectionSplitter, SectionTitle, Select, Sponsorship, StatusBanner, Component as Stepper, StickyBar, StreamBadge, Subtitle, Tab, TabLink, Tabs, Button$1 as TertiaryButton, TextArea, TextField, TextLink, TextOnly, Theme as ThemeProvider, ThemeType, Tickbox, TickboxMode, Timer, TitleWithCTA, TypeTags, UpsellCard, UpsellSection, breakpoints, devices, zIndexes };
|
|
9842
9914
|
//# sourceMappingURL=chord.esm.js.map
|