@royaloperahouse/chord 2.8.0-c-development → 2.8.1-a-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 +3 -0
- package/dist/chord.cjs.development.js +91 -19
- 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 +91 -20
- package/dist/chord.esm.js.map +1 -1
- package/dist/components/atoms/Tab/Tab.style.d.ts +2 -2
- package/dist/components/index.d.ts +2 -2
- package/dist/components/molecules/AnchorBar/AnchorBar.d.ts +4 -0
- package/dist/components/molecules/AnchorBar/AnchorBar.style.d.ts +7 -0
- package/dist/components/molecules/AnchorBar/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/index.d.ts +2 -2
- package/dist/types/anchorBar.d.ts +20 -0
- package/dist/types/signUpForm.d.ts +4 -0
- package/dist/types/types.d.ts +2 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3010,6 +3010,14 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3010
3010
|
},
|
|
3011
3011
|
onKeyDown: handleHeaderKeyDown
|
|
3012
3012
|
};
|
|
3013
|
+
|
|
3014
|
+
var optionItemClickHandler = function optionItemClickHandler(link) {
|
|
3015
|
+
return function (e) {
|
|
3016
|
+
e.preventDefault();
|
|
3017
|
+
if (link) onOptionClick == null ? void 0 : onOptionClick(link);
|
|
3018
|
+
};
|
|
3019
|
+
};
|
|
3020
|
+
|
|
3013
3021
|
return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
|
|
3014
3022
|
ref: ref
|
|
3015
3023
|
}, wrapperEvents), isDropdown ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
|
|
@@ -3026,11 +3034,11 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3026
3034
|
colorPrimary: activeColor,
|
|
3027
3035
|
withOptionsInMobile: true
|
|
3028
3036
|
}, options.map(function (optionItem, index) {
|
|
3037
|
+
var _optionItem$optionLin;
|
|
3038
|
+
|
|
3029
3039
|
return /*#__PURE__*/React__default.createElement(OptionItem, {
|
|
3030
3040
|
key: "key-" + index + "-" + optionItem.option,
|
|
3031
|
-
onClick:
|
|
3032
|
-
return onOptionClick == null ? void 0 : onOptionClick(optionItem.optionLink);
|
|
3033
|
-
},
|
|
3041
|
+
onClick: optionItemClickHandler(optionItem.optionLink),
|
|
3034
3042
|
onKeyDown: function onKeyDown(e) {
|
|
3035
3043
|
return handleOptionKeyDown(e, optionItem.optionLink);
|
|
3036
3044
|
},
|
|
@@ -3039,7 +3047,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
3039
3047
|
onBlur: function onBlur() {
|
|
3040
3048
|
return handleOptionBlur(index);
|
|
3041
3049
|
},
|
|
3042
|
-
href: optionItem.optionLink
|
|
3050
|
+
href: (_optionItem$optionLin = optionItem.optionLink) != null ? _optionItem$optionLin : '#'
|
|
3043
3051
|
}, optionItem.option);
|
|
3044
3052
|
})) : null) : /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
|
|
3045
3053
|
active: active,
|
|
@@ -3891,6 +3899,10 @@ var Tab = function Tab(_ref) {
|
|
|
3891
3899
|
}
|
|
3892
3900
|
};
|
|
3893
3901
|
|
|
3902
|
+
var tabTextClickHandler = function tabTextClickHandler(e) {
|
|
3903
|
+
return e.preventDefault();
|
|
3904
|
+
};
|
|
3905
|
+
|
|
3894
3906
|
var onFocusHandler = function onFocusHandler() {
|
|
3895
3907
|
return onFocus == null ? void 0 : onFocus();
|
|
3896
3908
|
};
|
|
@@ -3915,6 +3927,8 @@ var Tab = function Tab(_ref) {
|
|
|
3915
3927
|
onKeyDown: onKeyDownHandler,
|
|
3916
3928
|
tabIndex: 0
|
|
3917
3929
|
}, /*#__PURE__*/React__default.createElement(TabText, {
|
|
3930
|
+
href: "#",
|
|
3931
|
+
onClick: tabTextClickHandler,
|
|
3918
3932
|
withTextInMobile: withTextInMobile
|
|
3919
3933
|
}, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
|
|
3920
3934
|
iconName: iconName
|
|
@@ -11608,10 +11622,12 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
11608
11622
|
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
11609
11623
|
type: "submit"
|
|
11610
11624
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
11625
|
+
href: "#",
|
|
11611
11626
|
bgColor: themeToColor(theme)
|
|
11612
11627
|
}, "Sign up"))) : /*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
11613
11628
|
type: "submit"
|
|
11614
11629
|
}, /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
11630
|
+
href: "#",
|
|
11615
11631
|
bgColor: themeToColor(theme)
|
|
11616
11632
|
}, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
11617
11633
|
href: ctaPrivacy.link
|
|
@@ -11628,7 +11644,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11628
11644
|
errorMessage = _ref5.errorMessage,
|
|
11629
11645
|
_ref5$isLoggedIn = _ref5.isLoggedIn,
|
|
11630
11646
|
isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
|
|
11631
|
-
submitHandler = _ref5.submitHandler
|
|
11647
|
+
submitHandler = _ref5.submitHandler,
|
|
11648
|
+
_ref5$isOpened = _ref5.isOpened,
|
|
11649
|
+
isOpened = _ref5$isOpened === void 0 ? false : _ref5$isOpened;
|
|
11632
11650
|
var signUpHeaderId = 'signup-header';
|
|
11633
11651
|
var signUpInstructionsId = 'sign-up-instructions';
|
|
11634
11652
|
var isMobile = useMobile();
|
|
@@ -11637,7 +11655,7 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11637
11655
|
isSuccess = _useState2[0],
|
|
11638
11656
|
setIsSuccess = _useState2[1];
|
|
11639
11657
|
|
|
11640
|
-
var _useState3 = React.useState(
|
|
11658
|
+
var _useState3 = React.useState(isOpened),
|
|
11641
11659
|
dropdownOpen = _useState3[0],
|
|
11642
11660
|
setDropdownOpen = _useState3[1];
|
|
11643
11661
|
|
|
@@ -11659,6 +11677,9 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11659
11677
|
});
|
|
11660
11678
|
}
|
|
11661
11679
|
}, [isSuccess]);
|
|
11680
|
+
React.useEffect(function () {
|
|
11681
|
+
setDropdownOpen(isOpened);
|
|
11682
|
+
}, [isOpened]);
|
|
11662
11683
|
return /*#__PURE__*/React__default.createElement(Wrapper$8, {
|
|
11663
11684
|
theme: themeToColor(theme)
|
|
11664
11685
|
}, /*#__PURE__*/React__default.createElement(SignUpFormWrapper, null, isMobile && !isLoggedIn && !isSuccess ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(HiddenInstructions, {
|
|
@@ -11724,6 +11745,56 @@ var SignUpFormComponent = function SignUpFormComponent(_ref5) {
|
|
|
11724
11745
|
}))));
|
|
11725
11746
|
};
|
|
11726
11747
|
|
|
11748
|
+
var _templateObject$1l, _templateObject2$_, _templateObject3$Q, _templateObject4$F;
|
|
11749
|
+
var AnchorBarContainer = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: sticky;\n top: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 50px;\n height: 70px;\n background: var(--base-color-white);\n border-top: 2px solid var(--base-color-lightgrey);\n border-bottom: 2px solid var(--base-color-lightgrey);\n z-index: ", ";\n\n @media ", " {\n padding: 0 20px;\n height: 60px;\n }\n"])), zIndexes.anchor, devices.mobile);
|
|
11750
|
+
var CTAWrapper = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n margin-top: 4px;\n padding-bottom: 4px;\n height: 28px;\n border-bottom: 1px solid var(--base-color-black);\n\n @media ", " {\n height: 24px;\n }\n"])), devices.mobile);
|
|
11751
|
+
var CTALink = /*#__PURE__*/styled__default.a(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n cursor: pointer;\n color: var(--base-color-black);\n font-weight: var(--font-weight-navigation);\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n line-height: var(--line-height-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n text-transform: var(--text-transform-navigation);\n"])));
|
|
11752
|
+
var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 24px;\n width: 24px;\n border: none;\n padding: 0;\n background: none;\n\n :hover {\n cursor: pointer;\n }\n"])));
|
|
11753
|
+
|
|
11754
|
+
var AnchorBar = function AnchorBar(_ref) {
|
|
11755
|
+
var _cta$href;
|
|
11756
|
+
|
|
11757
|
+
var cta = _ref.cta,
|
|
11758
|
+
onClickHandler = _ref.onClickHandler,
|
|
11759
|
+
onCloseHandler = _ref.onCloseHandler,
|
|
11760
|
+
_ref$showAnchorBar = _ref.showAnchorBar,
|
|
11761
|
+
showAnchorBar = _ref$showAnchorBar === void 0 ? true : _ref$showAnchorBar;
|
|
11762
|
+
|
|
11763
|
+
var _useState = React.useState(showAnchorBar),
|
|
11764
|
+
isRendered = _useState[0],
|
|
11765
|
+
setIsRendered = _useState[1];
|
|
11766
|
+
|
|
11767
|
+
React.useEffect(function () {
|
|
11768
|
+
return setIsRendered(showAnchorBar);
|
|
11769
|
+
}, [showAnchorBar]);
|
|
11770
|
+
|
|
11771
|
+
var onCtaClickHandler = function onCtaClickHandler(e) {
|
|
11772
|
+
if (onClickHandler) {
|
|
11773
|
+
e.preventDefault();
|
|
11774
|
+
onClickHandler(e);
|
|
11775
|
+
}
|
|
11776
|
+
};
|
|
11777
|
+
|
|
11778
|
+
var onCloseButtonHandler = function onCloseButtonHandler(e) {
|
|
11779
|
+
e.preventDefault();
|
|
11780
|
+
setIsRendered(false);
|
|
11781
|
+
if (onCloseHandler) onCloseHandler();
|
|
11782
|
+
};
|
|
11783
|
+
|
|
11784
|
+
return isRendered ? /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
|
|
11785
|
+
"data-testid": "anchor-bar"
|
|
11786
|
+
}, /*#__PURE__*/React__default.createElement(CTAWrapper, null, /*#__PURE__*/React__default.createElement(CTALink, {
|
|
11787
|
+
href: (_cta$href = cta.href) != null ? _cta$href : '#',
|
|
11788
|
+
onClick: onCtaClickHandler
|
|
11789
|
+
}, cta.text)), /*#__PURE__*/React__default.createElement(CloseButtonWrapper, {
|
|
11790
|
+
href: "#",
|
|
11791
|
+
onClick: onCloseButtonHandler,
|
|
11792
|
+
"aria-label": "Close"
|
|
11793
|
+
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
11794
|
+
iconName: "Close"
|
|
11795
|
+
}))) : null;
|
|
11796
|
+
};
|
|
11797
|
+
|
|
11727
11798
|
var UpsellSection = function UpsellSection(_ref) {
|
|
11728
11799
|
var title = _ref.title,
|
|
11729
11800
|
richText = _ref.richText,
|
|
@@ -11760,9 +11831,9 @@ var UpsellSection = function UpsellSection(_ref) {
|
|
|
11760
11831
|
})))));
|
|
11761
11832
|
};
|
|
11762
11833
|
|
|
11763
|
-
var _templateObject$
|
|
11764
|
-
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11765
|
-
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2
|
|
11834
|
+
var _templateObject$1m, _templateObject2$$;
|
|
11835
|
+
var StickyBarWrapper = /*#__PURE__*/styled__default.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n top: 0;\n position: sticky;\n z-index: ", ";\n background-color: var(--base-color-white);\n"])), zIndexes.anchor);
|
|
11836
|
+
var StickyBarGrid = /*#__PURE__*/styled__default(Grid)(_templateObject2$$ || (_templateObject2$$ = /*#__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) {
|
|
11766
11837
|
var hideBottomBorder = _ref.hideBottomBorder;
|
|
11767
11838
|
return !hideBottomBorder && 'border-bottom: 2px solid var(--base-color-lightgrey);';
|
|
11768
11839
|
}, devices.mobileAndTablet, devices.mobile);
|
|
@@ -11790,11 +11861,11 @@ var StickyBar = function StickyBar(_ref) {
|
|
|
11790
11861
|
}, children)));
|
|
11791
11862
|
};
|
|
11792
11863
|
|
|
11793
|
-
var _templateObject$
|
|
11794
|
-
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11795
|
-
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2
|
|
11796
|
-
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$
|
|
11797
|
-
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$
|
|
11864
|
+
var _templateObject$1n, _templateObject2$10, _templateObject3$R, _templateObject4$G;
|
|
11865
|
+
var InnerModal = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__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);
|
|
11866
|
+
var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$10 || (_templateObject2$10 = /*#__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);
|
|
11867
|
+
var ContentWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
11868
|
+
var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$G || (_templateObject4$G = /*#__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"])));
|
|
11798
11869
|
|
|
11799
11870
|
var _excluded$q = ["isOpen", "setIsOpen", "children", "appElementId"];
|
|
11800
11871
|
var MAX_Z_INDEX = 9999999999;
|
|
@@ -11915,9 +11986,9 @@ var ModalWindow = function ModalWindow(_ref) {
|
|
|
11915
11986
|
})), /*#__PURE__*/React__default.createElement(ContentWrapper$1, null, children))), /*#__PURE__*/React__default.createElement(ScrollLock, null)));
|
|
11916
11987
|
};
|
|
11917
11988
|
|
|
11918
|
-
var _templateObject$
|
|
11919
|
-
var FiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$
|
|
11920
|
-
var FilterItemsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$
|
|
11989
|
+
var _templateObject$1o, _templateObject2$11;
|
|
11990
|
+
var FiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n column-gap: 24px;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n row-gap: 18px;\n }\n"])), devices.mobileAndTablet);
|
|
11991
|
+
var FilterItemsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n column-gap: 16px;\n row-gap: 12px;\n"])));
|
|
11921
11992
|
|
|
11922
11993
|
/**
|
|
11923
11994
|
* A FilterToggles component that renders a labelled group of toggle buttons
|
|
@@ -11980,8 +12051,8 @@ var FilterToggles = function FilterToggles(_ref) {
|
|
|
11980
12051
|
})));
|
|
11981
12052
|
};
|
|
11982
12053
|
|
|
11983
|
-
var _templateObject$
|
|
11984
|
-
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1o || (_templateObject$1o = /*#__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) {
|
|
12054
|
+
var _templateObject$1p;
|
|
12055
|
+
var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1p || (_templateObject$1p = /*#__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) {
|
|
11985
12056
|
var theme = _ref.theme;
|
|
11986
12057
|
return theme.colors.primary;
|
|
11987
12058
|
}, function (_ref2) {
|
|
@@ -12925,6 +12996,7 @@ var GlobalStyles = /*#__PURE__*/styled.createGlobalStyle(_templateObject$1o || (
|
|
|
12925
12996
|
exports.Accordion = Accordion;
|
|
12926
12997
|
exports.Accordions = Accordions;
|
|
12927
12998
|
exports.AltHeader = AltHeader;
|
|
12999
|
+
exports.AnchorBar = AnchorBar;
|
|
12928
13000
|
exports.AnchorTabBar = AnchorTabBar;
|
|
12929
13001
|
exports.AnnouncementBanner = AnnouncementBanner;
|
|
12930
13002
|
exports.AuxiliaryButton = AuxiliaryButton;
|